onboarding 链路已走完（L-core 四份全文 + mockup/code 任务命中的 L-ref：AGENTS 硬规则表+Mockup Gate、code-conventions 起手必读段+R2/R3/R6/R7/R14/R15/R19、design-process M22/M48/M49/M50/Scope Handling/State-Completeness、domain-tvu 全文、figma-component-catalog、tokens 活源、canonical 组件活源）。下面先给判定与依据，再给产物。 ## 1. 意图归类（R7 起手必判） **intent classified as 场景 2.2（已有产品增量 · 已有页面加新 element）**，Task Entry Mode = **US-3**。 → 视觉真源 = 页面既有惯例优先；local 没有的取 TVU 库（场景 2 是 element-level 决策，不是禁用 TVU）。 → **不借机修既有合规债**（R6/M21 澄清：pre-design-system 不视为 bug）。 ## 2. Phase 0 元素→组件映射（R0，逐条对活源实证） | 元素 | Figma 库组件（catalog 实证） | code 活源 | 状态 | |---|---|---|---| | 顶部导航页签 | `Tab List` Type=Line + `Tab/Item` Active/Green/Line | `src/canonical/TabList.vue`·`TabItem.vue` | ✅ 不新增页签 | | Type of source 三选一 | `radio` `9f07746f…`（status=on/off × enable） | `src/components/Radio/Radio.vue` | ✅ | | 选择行↔内容区分隔 | **库内无 divider 组件**（catalog 2026-08-03 实测收口）→ 1px 线绑 `Color Type/Line/Light Divider` | `--line-light` | ✅ 按库范式 | | 来源卡片 | 无卡片组件 → `Background/Layer_3` + `Radius/M` | `--bg-layer3`/`--r-m` | ✅ | | 卡片状态 pill | `Badge` `4db5246d…` Rectangle×Color×Tag | `src/canonical/Badge.vue` | ✅ M3 配色 | | 目标接收端 / NDI 下拉 | `select box/filled` `ca2ff89d…` size=M | `src/components/Select/Select.vue` | ✅ 只画收起态 | | NDI 文本字段 | `input box/filled` `1f513914…` | `src/components/Input/Input.vue` | ✅ | | 表单行 | `Form Item` `1923:50705` Label Width=200px/Dynamic | `src/components/FormItem/FormItem.vue` | ✅ | | Apply / Rescan | `Button/dark M` `12b38c8b…` | `src/components/Button/Button.vue` | ✅ | | 源离线告知 | `Message` `1408:17153` warning×L | `src/components/Message/Message.vue` | ✅ 设备侧谱系（M12） | | 图标 | `arrow/dropdown`·`message/warning-2`·`action/close` | `src/icons/catalog/generated/*` | ✅ 逐字取自库，零自画 | **关键实证收获**：库里本来就有 `input/ndi`、`input/hdmi`、`input/sdi`、`indicator/ndi`、`output/ndi` —— NDI 在这套设计系统里不是新概念，只是这个页面还没暴露它。（本次未在选择行加图标：现网那两项是纯文字，加图标属于改既有视觉，不在增量范围。） ## 3. 三处必须说明的判断 1. **控件选型用 radio，没换成分段控件。** catalog 里两条 Don't-use 互指（`radio` 说"切换内容面板用 Tab/Item"、`Tab/Item` 说"分段控件就用它"），但现网这一项带 `Type of source:` 字段标签、是表单取值形态；把 radio 换成 segmented 属于"替换已有 local 控件"= 场景 4.4，**必须 owner 显式发起**，不能夹在增量里做。若现网实为分段控件，换成 `Tab/Item Active/Green/Filled` 即可 —— 但要注意 catalog 记的 `CANONICAL-F93`：未选态原生 fill `#262626` 与内容区底色对比度实测 1.013、不可辨。 2. **HDMI/SDI/USB 帧的内容区画成"既有区域"标注带，没有编内容。** 我拿不到现网页面（本会话无 Figma MCP、无法跑 `pnpm pattern:lookup`），编三张本地输入卡片就是把不知道的产品状态伪造成看起来合理的样子。Scope Handling 要求"本期不动 X ≠ 删/隐藏 X"，所以该区保持可见、占同样几何、只是显式标注不改动 —— 这样分隔线与选择行的间距关系在三态里都能核。 3. **NDI 表单字段是我按 NDI 协议定的**（源发现 / Discovery server / Group / Bandwidth / 目标接收端），需求里没给字段清单。`目标接收端` 与 IP Source 卡片同名同组件（M49 语义一致性），提交动词沿用现网的 `Apply`（Content Contract：同一概念只用一个词，不引入 `Update`/`OK`）。 另外多给了一帧边界态（NDI 源离线）—— M12 硬要求"外部/异步事件不得静默 no-op"，而 NDI 源是网络上随时会消失的东西。前进路径没做成"通知里塞按钮"（`Message` 无按钮、设备侧不混用 `Notification` 谱系），而是让 NDI source 字段进 error 态 + 旁边本就有的 `Rescan` 承接。 ## 4. 本轮没跑成的机检（如实登记） `audit:no-hardcoded-design-tokens`、`audit:consumer-code`（R14/R19/R9 探针）、`pattern:lookup` 都跑不了 —— 本会话 Bash 停用。补偿做法：颜色/间距/字阶全部走 `var()`，文件里唯一出现 hex 的地方是顶部 token 定义块，那是 `src/tokens/variables.css` dark 段的**逐字副本**（值一位没改）；`position:absolute` 只用了一处并带了 affordance 注释。 ```html Device Local Settings — Type of source 三选一（新增 NDI）

Device Local Settings — Type of source 增量设计

二选一 → 三选一互斥（新增 NDI）· 内容区按选中项切换 · 选择行与内容区加分隔 · 顶部导航不新增页签

本轮改动（4 项）

判定与边界

帧 1 / 3 Type of source = HDMI/SDI/USB 既有选项 · 内容区本轮不改动
RPS One · 10.0.0.42
Type of source:
HDMI/SDI/USB IP Source NDI
既有内容区 · 本轮不改动

HDMI / SDI / USB 本地输入面板沿用现网页面原样，本次增量未触碰该区。 此处保持同等几何以核对选择行、分隔线与内容区的间距关系。

帧 2 / 3 Type of source = IP Source 既有选项 · 内容区沿用既有来源卡片网格（预览 / IP / 目标接收端 / Apply）
RPS One · 10.0.0.42
Type of source:
HDMI/SDI/USB IP Source NDI

IP Source 1

Live
1920×1080 · 59.94p
IP 10.0.0.51:5000

IP Source 2

Standby
1280×720 · 50p
IP 10.0.0.52:5000

IP Source 3

Inactive
No signal
IP 10.0.0.53:5000

Never configured. Set a receiver to enable this source.

帧 3 / 3 Type of source = NDI 新增选项 · 内容区切换为 NDI 专属表单
RPS One · 10.0.0.42
Type of source:
HDMI/SDI/USB IP Source NDI

3 sources found on this network · last scan 12:04:31

Leave empty to use mDNS auto-discovery.

The default group is used when empty.

Lowest uses the NDI proxy stream for constrained networks.

帧 3b Type of source = NDI · 所选源离线 外部事件不得静默 no-op：检测 → 告知（Message warning）→ 前进路径（字段 error 态 + Rescan）
RPS One · 10.0.0.42
Type of source:
HDMI/SDI/USB IP Source NDI

NDI source “STUDIO-A” is no longer on the network.

Source not found on the network. Rescan, or pick another source.

Leave empty to use mDNS auto-discovery.

The default group is used when empty.

元素 → TVU 库组件对照（dev handoff）
页面元素 Figma 库组件 / 变体 code 对应 本轮
顶部导航页签 Tab List Type=Line + Tab/Item Property1=Active/Normal, Property2=Green, Type=Line TabList / TabItem 不改 · 不新增页签
Type of source 三选一 radio 9f07746f…（dark theme=on × status=on/off × enable=yes） Radio 改：二选一 → 三选一，新增 NDI
选择行 ↔ 内容区分隔 库内无 divider 组件 → 1px 线绑 Color Type/Line/Light Divider --line-light 新增
来源卡片容器 无卡片组件 → Background/Layer_3 + Radius/M + Line/Deep Divider 描边 --bg-layer3 / --r-m / --line-deep 不改
卡片状态 pill Badge 4db5246d… Type=Rectangle × Color × Tag
Live=Red/Filled · Standby=Green/Line · Inactive=Neutral/Line		 Badge 不改（广播 ON AIR 配色）
目标接收端 / NDI 各下拉 select box/filled ca2ff89d… size=M, status=Value/Placeholder, UX=default/error
展开面板 = Drop down List/Select Type=Radio（本页只画收起态）		 SelectBoxFilled / DropDownListSelect NDI 侧新增，形态与卡片一致
NDI 文本字段 input box/filled 1f513914… size=M InputBoxFilled 新增
表单行（label + 控件 + hint / error） Form Item 1923:50705
1 line + Label Width=200px（NDI 表单）· 2 lines + Dynamic（卡片内）· Theme=Dark · Status=Normal/Error		 FormItem NDI 侧新增
Apply / Rescan Button/dark M 12b38c8b…
Apply=filling/green（卡片内 ghost/green）· Rescan=ghost/gray 1 · 不可提交时 status=disable		 Button NDI 侧新增；沿用既有 Apply 措辞
源离线告知 Message 1408:17153 status=warning × size=L（无按钮） Message 新增（设备侧谱系，不用 web 侧 Notification）
图标 arrow/dropdown · message/warning-2 · action/close src/icons/catalog/generated/* path 逐字取自库，零自画

实装须知

``` 补一句：产物里 `position:absolute` 只用于下拉箭头这一处装饰层，已按 R14 注明 affordance；`selected` 态没有走 R19 的 rail+fill+chrome 三层，因为选中语义落在 radio 自身的 canonical dot 上（R19 管的是列表项 / row / tab / card 的选中态，不覆盖表单 radio）。