IP Source 1
Live
IP
10.0.0.51:5000
Receiver A — Newsroom
二选一 → 三选一互斥(新增 NDI)· 内容区按选中项切换 · 选择行与内容区加分隔 · 顶部导航不新增页签
NDI,控件仍是既有的 radio 互斥组,不换控件形态。IP Source 保持既有来源卡片网格(预览 / IP / 目标接收端 / Apply);NDI 切换为 NDI 专属表单。Color Type/Line/Light Divider。Type of source: 字段标签、是表单取值形态;换成分段控件属于「替换既有控件」,须单独发起、不夹在本次增量里。Target receiver 与 IP Source 卡片同一概念、同一组件。Apply,两个内容区一致,不引入 Update / OK / Save 等同义词。status=disable 真变体(见帧 2 第三张卡与帧 3b)。HDMI / SDI / USB 本地输入面板沿用现网页面原样,本次增量未触碰该区。 此处保持同等几何以核对选择行、分隔线与内容区的间距关系。
| 页面元素 | 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 × TagLive=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:507051 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 逐字取自库,零自画 |
var(--*)。文件顶部 token 定义块是 src/tokens/variables.css dark 段的逐字副本,值未改;接入工程时删掉该块、改为引用真源(构建期拷 tvu-tokens.css),真源只留一份。--font-family-base + font-variant-numeric: tabular-nums。src/canonical/*.vue 为准;实装直接消费 canonical 组件,不要照抄本页的 class 结构。Drop down List/Select Type=Radio,键盘 roving focus 已内置,不要自撸列表。audit:no-hardcoded-design-tokens · audit:consumer-code(R14 / R19 / R9 探针)· pattern:lookup。合库前请补跑。