---
id: v4-1827-ndi-source-webr-redesign
title: "V4-1827 NDI Source · WebR 化重画（Tx1-4 分页 + Source List 表 + Add External Source 弹窗）"
doc_type: handoff
status: QA
last_updated: 2026-07-17
sources:
  - { type: jira, ref: "V4-1827", url: "https://tvunetworks.atlassian.net/browse/V4-1827" }
figma:
  file: rJJjWWs51n2iFOlCIC7aYG
  nodes:
    - { id: "7452:2", label: "V4-1827 canvas root", url: "https://www.figma.com/design/rJJjWWs51n2iFOlCIC7aYG/?node-id=7452-2" }
    - { id: "7485:1145", label: "NDI Source main page (Tx1-4 + Source List table)", url: "https://www.figma.com/design/rJJjWWs51n2iFOlCIC7aYG/?node-id=7485-1145" }
    - { id: "7504:41261", label: "Add External Source dialog (overlay)", url: "https://www.figma.com/design/rJJjWWs51n2iFOlCIC7aYG/?node-id=7504-41261" }
    - { id: "7452:4", label: "PRD frame (6-section, rewritten)", url: "https://www.figma.com/design/rJJjWWs51n2iFOlCIC7aYG/?node-id=7452-4" }
    - { id: "7516:473", label: "UX Delivery card (rewritten)", url: "https://www.figma.com/design/rJJjWWs51n2iFOlCIC7aYG/?node-id=7516-473" }
    - { id: "7816:2", label: "User Journey Map card (new)", url: "https://www.figma.com/design/rJJjWWs51n2iFOlCIC7aYG/?node-id=7816-2" }
---

<!-- mockup-handoff -->
# Handoff — V4-1827 NDI Source · WebR 化重画

> **Jira**: V4-1827 — CLONE - TVU RPS One to support NDI as Live Input via ETH module On Config-T · Backlog · https://tvunetworks.atlassian.net/browse/V4-1827
> **Figma**: `rJJjWWs51n2iFOlCIC7aYG`（Config-T）· canvas `7452:2` · section `7485:1144`（AFTER）
> **日期**: 2026-07-17 · consumer 无 git repo，落 `TVU Pack/docs/`
> **触发**: 用户重启 V4-1827（原 2026-06-24 推迟到 8.5，本次拉回 8.4），拍板推翻旧单源 Manual/Discovery 单选方向，改为 WebR 化多路设计

---

## 1. 背景 / 上下文

旧草稿（2026-06-23 建）是 MVP 单源版本：Source mode Manual/Discovery 单选、单张源卡、盲填 ndi:// 地址、固定绑 Transmitter 1。用户判定不满足真实使用场景（RPS One 4 路并行、无可视化已发现源列表、无法逐源控制音频轨），要求参照：
- Config-T 既有 **IP Source** 页范式（`1011:7877`/`1011:8187`）—— Tx 1-4 分页 + 多源网格
- WebR **NDI settings** 页（file `ET5crxAZsdcYGR513p4ON7`，node `7854:11352`/`8279:3766`）—— Source List 表 + Add External Source 弹窗（Manual/Discovery Server 命名）+ Audio Only 开关

推倒重画内容区，PRD/UX Delivery 卡/User Journey 卡按新方向同步更新。

- **US 分类**：US-3 迭代既有（同需求）+ Jira 关联 → M45.1 判定走 §M46 就地改，未新建 page。
- **用户决策（Gate 已确认，3 项）**：① 表为主 + Tx 分页选通道（非卡网格套小表、非无分页单表）② Audio Only 每源一个开关（非页面级全局）③ WebR 参考截图贴进 canvas 作对照锚点（非仅 handoff 引用）。

## 2. 改动清单

| # | 节点 | 改动 | 验证 |
|---|---|---|---|
| 1 | `7485:1145` NDI Source 主页 | 推倒重画：Transmitter 1-4 分页（Tx1 选中）→ NDI Discovery Server 行（开关+地址+Refresh，复用既有 instance）→ Source List 表（6列：单选/Source Name/Type/Discovery by/Audio Only 开关/To:Transmitter 下拉，2 示例行）→ "+ Add External Source" 按钮 → Apply 按钮 | 截图确认无裁切；componentKey 逐一核对命中库白名单 |
| 2 | `7504:41261` Add External Source 弹窗态 | 复用①同款主页背景 + 居中弹窗（Notification/dialog variant）：Type(只读NDI)/Name(输入,修正为"CAM-03 Studio"示例)/URL 单选 Manual·Discovery Server/"Select a NDI source"下拉/Cancel·Save | 截图确认；Name 字段内容 bug 已修（原为"192.168.3.1"误值） |
| 3 | `7793:2`/`7793:246` | WebR 参考截图（Add External Source 弹窗 + General/NDI Discovery 设置）作为真图贴入 section，标注 "non-delivery" + 可点击回链 | I2 微重叠（图与图注 6-20px）已修：图下移 20px |
| 4 | `7452:4` PRD 6 段（`7453:1281`/`7454:2`/`7454:3`/`7454:4`/`7454:5`，需求来源段保留不动） | 重写 Background/Current State/Requirements/Acceptance/Priority & Timeline，反映新方向；排期由 8.5 改回 8.4 重启 | 截图确认；字体 live 核验 Roboto/Noto Sans SC 零 Inter |
| 5 | `7516:473` UX Delivery 卡（Why/Changes/Data Contract/Interaction/Acceptance 全 5 段 10 文本节点） | 整卡重写反映新结构；backlog 缺口（空态/刷新中/发现失败/连接中/应用反馈/多源冲突）如实标注未覆盖，不假装已做 | 同上 |
| 6 | `7816:2` **新建** User Journey Map 卡（5-stage：Awareness/Consideration/Pairing/Daily Ops/Troubleshoot） | Jira mockup 标准交付卡（此前缺失，本轮补齐），双语，backlog gap 与 UX 卡一致标注 | 截图确认深色底正确（曾有 createAutoLayout 默认白底 bug，已修） |

## 3. Rule checklist（机器输出，禁目测）

```
⚠️ pnpm audit:mockup-conformance --file rJJjWWs51n2iFOlCIC7aYG --node <多节点> --non-blocking
   → REST_TOKEN 未配置，9 项 audit 全 ERROR(could not run)，非阻塞 exit 0（环境限制，非豁免）

# 退化方案：use_figma in-file 机检替代（同 V4-2259 先例）
  componentKey 白名单核对（library-origin 等价）：
    Table a9b646df50926523b3a8b2d0b0eaabd1fe3c67ca ×12
    radio 9f07746f19d962fe8b0ac31e6697a5b8f242d8b0 / e4fa9ba764fb1793d982222383ee209de667faae
    switch bf16e8f5ba6b8bd85a0b75961d19589a08a5c3a5 ×2
    select box/line b2f4702c0d8e6c6d25efa5757be92ba766c19ca1 ×2-3
    Notification(dialog) 23535120dbdc93bf90af9a118b5091e58b590dc6 ×1
    Button/dark M 12b38c8b68cd67dd3978e0d68712bc646f1e97c1 ×2
    button/no icon 4c56b094b9618cd8e9a2958717a5bd6c22a10af2 ×7
    → 全部可追溯真实库组件，零手搓 rectangle+text 拼装
  glyph 扫描（M-TXT-ICON-AUDIT 等价）：frame1/frame2 zero hits
  overlap 扫描（I2/I6 等价，section 7485:1144 全 10 顶层子节点两两检测）：0 collisions（第一轮发现 2 处微重叠已修）
  font 扫描（typography-icon 等价，PRD/UX卡/Journey卡 getStyledTextSegments live）：
    families=[Roboto, Noto Sans SC] ZERO Inter（三处交付物独立验证一致）
```

## 4. findings 归属

| audit | 判定 |
|---|---|
| **colors / binding-fidelity** | 新建内容（Source List 表/弹窗）里未绑变量的 fill 均在**复用的既有 `WebUI/Form/Radio`/`WebUI/Form/Input` 组件内部**（文件级 legacy 组件族，IP Source 页同样在用）。按 §M49.1 file-wide owner-deferred 先例，不逐节点改，避免破坏 sibling 一致性。 |
| **library-origin** | REST 不可用，无法跑 REST 版；plugin-API 独立核对 componentKey 全部可追溯到 `TVU UX Design System` 唯一权威库（`lk-057f6ba0...`），无 hand-built 组件。 |
| **connector** | 本轮未新增连线，跳过。 |

## 5. 已知偏离 / 需 owner 知悉（非阻塞，可逆）

1. **`Drop down List/Select` 组件不可用**：用户 prompt 指定的这个 componentKey 实测渲染为展开态 240×128 菜单，无法放进 33px 表格行或 32px 弹窗字段。改用同库内嵌的 **`select box/line`**（componentKey `b2f4702c0d8e6c6d25efa5757be92ba766c19ca1`，closed-state 变体）代替，功能等价、同一设计系统。
2. **User Journey 卡宽度**：定为 560px（与 sibling UX 卡对齐），未按 M23.12 "新卡默认对齐 PRD 宽度"（PRD 是 1000px）——因为本文件 UX 卡与 PRD 本就存在 560/954 宽度不一致的先例，优先保 sibling 一致性。如需改对齐 PRD 宽度，是简单调整。
3. **UX 卡副标题**（`7516:476`）从"Figma AFTER: Manual + Discovery (side by side)" 同步改为反映新内容，属低风险可逆的一致性修正，非用户明确要求的改动范围内，特此标注。

## 6. Open / Next

- **Jira 状态未理**：V4-1827 仍 Backlog、仍挂 Epic V4-2256（8.5），本次仅拉回 mockup 到 8.4 讨论，未做任何 Jira 状态流转/评论——按 [[slack-jira-write-confirm]] 先审后发，需用户确认要不要现在同步 Jira（状态转 8.4 / 加评论说明重启）。
- **REST 机检未跑**：环境无 `FIGMA_PERSONAL_ACCESS_TOKEN`，本轮全靠 use_figma in-file 替代机检；待 token 配置后建议补跑一次 `pnpm audit:mockup-conformance` 做双重确认。
- **backlog 缺口**（PRD/UX卡/Journey卡三处一致标注未覆盖）：空态 / 刷新中 / 发现失败 / 连接中 / 应用反馈 / 多源同时 Apply 冲突处理——均为本轮 MVP 范围外，若下一轮要补，从这份 backlog 清单起步。
- **UX Delivery 卡副标题 + Journey 卡宽度**两处偏离（见 §5）：如需回滚请告知具体节点即可逆。

---

## 7. Round 2（2026-07-17 晚）— owner 推翻重画 + 走查 + 状态说明/流程连线/PRD/交付卡

> **背景**：owner 判定 Round 1 的「6 列 Source List 表 + Add External Source 弹窗」不合需求，**自己在 Config-T 里重画**成「每 Transmitter(Tx1-4 分页) 单源表单」：开关 OFF 折叠 / ON 展开 Source Name + URL(ndi:// 可搜索 combobox) + Apply。AI 本轮以 owner 重画后的**当前真实状态**为准做走查 + 交付层重建。**Round 1 的表格/弹窗方向全部作废**（PRD/UX 卡/Journey 卡已按单源方向重写）。

**AFTER 现状（owner 重画）**：section `7485:1144` 内 3 帧 + 1 浮动下拉
- `7485:1145` Tx1 · Toggle OFF（折叠，已重命名）
- `7504:41261` Tx1 · Toggle ON（已重命名）
- `7822:7314` Tx2 · Toggle ON（已重命名）
- `7822:7279` URL combobox 展开态（Drop down List/Select 库 instance）
- owner 决策（3 项，本轮 AskUserQuestion 确认）：① 单源表单为准，PRD 区 IP-Source 6 卡网格 `7822:4955` 仅参考、保留不动 ② URL 输入框 = 可搜索 combobox（下拉发现源 + 关键字搜索 + 手填 ndi:// 三合一）③ UX 卡 + Journey 卡都重建

**本轮改动清单**
| # | 节点 | 改动 | 验证 |
|---|---|---|---|
| R2-1 | 3 帧 toggle 标签 | typo `Tranmitter`→`Transmitter`（Helvetica 不可 load，用 setRangeFontName→Roboto 绕墙改） | 截图确认 |
| R2-2 | 帧2 `Source Name:`/`URL:` 标签 | 宽度截断修复（转 Roboto 重 hug，w50→88，与帧3 一致） | 截图确认 |
| R2-3 | 3 帧 | 重命名为准确态名（原「is Enabled/Disabled」反转+重名 → Tx1 OFF / Tx1 ON / Tx2 ON） | metadata 确认 |
| R2-4 | 下拉 `7822:7279` Option 1/2/3 | ❌ **未改**：4 层嵌套库 instance，getNodeById 返 null + findAll 反复 stale，程序化改文字不可行；owner 桌面 Figma 双击可秒改 | 已知遗留 |
| R2-5 | state-label ×4 | 每帧+下拉上方 navy chip（what/why/invariants，双语）`7833:2`/`7833:6`/`7834:2`/`7834:6` | 截图+overlap 机检 0 |
| R2-6 | 流程连线 ①②③ + 徽章 | rect 线+polygon 箭头+ellipse 起点圆点：①帧1→帧2 ②帧2 selBox→下拉 ③帧2→帧3，节点 `7836:2..16` | 截图确认 |
| R2-7 | UX Flow 流程说明卡 `7837:2` | 帧下方 navy 卡，①-④ 步骤双语（供开发/测试通读流程） | 截图确认 |
| R2-8 | PRD `7452:4` | Background/Current State/Requirements/Acceptance 4 段重写对齐单源方向（Source/Priority 保留）；无 TBD | 截图+Inter=0 |
| R2-9 | UX 交付卡 `7839:2`（新建） | M23.0 六段（Header/Why/Changes/Data Contract/Interaction/Acceptance），双语，收进新建交付 Section `7838:2`（x0 y2520） | 截图确认 |
| R2-10 | Journey 卡 `7840:2`（新建） | 5-stage×5-lens（Actions/Touchpoints/Thoughts/Pain/Opportunities），Opportunities 用 ✅🟡🔴 标覆盖度，同交付 Section | 截图确认 |

**机检（in-file 替代，REST token 仍无）**：Inter=0（families=Roboto/Noto Sans SC + owner 产品遗留 Helvetica/Helvetica Neue 未触碰）· 新增注释 vs 3 产品帧 overlap=0 · state-label/卡均为 M23 navy chip 注释层（非产品 UI，M32 库优先不适用注释）。

**走查结论（F1）**：Sibling(IP Source)一致性强 · B7 渐进披露=亮点 · 已修 typo/帧2 标签/帧名 · PRD↔mockup 已对齐（原严重脱节）。

**遗留 / owner 待办**
1. 下拉 Option 1/2/3 → 真实源名：owner 桌面 Figma 手改（自动化改不了嵌套库 instance）。
2. 产品 UI 字体：URL:/Apply/ndi:///分页数字仍是 Helvetica/Helvetica Neue（系统字体、不可移植），本轮只转了必须编辑的标签到 Roboto；如需整页统一到 DS Roboto，owner 决定后可批量（非本轮自发迁移）。
3. **backlog 缺口**（PRD 不写、只在 Journey Opportunities 🟡🔴 + 本清单标注）：发现源空态 / 扫描中 / 发现失败 / 连接中 / Apply 成功·失败反馈 / 超长源名 / 4-Tx 绑定总览。
4. **Jira 状态仍未理**：V4-1827 仍 Backlog / 挂 8.5 Epic V4-2256；本轮未动 Jira（按 slack-jira-write-confirm 需 owner 确认再流转到 8.4 + 加评论）。