我已走完 onboarding 链路（L-core 4 份 + L-ref 命中项：AGENTS §硬规则/§Onboarding Gate、`code-conventions.md` 起手必读段 + R2/R3/R13/R14/R15/R16/R19/R23/R-DISCIPLINE、`domain-tvu.md` 全 12 条、`design-process.md` M49/M-CARDINALITY/M-IA-FIRST、`figma-component-catalog.md`、`variables.css`、以及 canonical `Button/Table/TopBar/Notification/PopupBox/Badge/PillStatus/Pill/TabItem/MenuList/Input/Tooltip` 与 `src/icons/catalog/generated/*` 活源）。 **先说三条约束对交付的影响（诚实边界）**： - 本 session 停了 Write/Bash ⇒ **R-DISCIPLINE 要求的 TodoWrite 物化、M49 的 `pnpm design:kickoff --check`、`audit:no-hardcoded-design-tokens` / `audit:consumer-code` 都没跑**。下面的 checklist 与 kickoff packet 以正文形式代替，不是"已机检通过"。 - Pre-Phase 0（US-2 单页）的两个 user gate 被压成"声明假设"——harness 是一次性交付，没有回合可用来对齐。 - 这是 **Path B（写 UI 代码）**，不是 Figma 写操作，所以走 `code-conventions.md`，Mockup Write Gate 的 Figma 四步前置不触发。 --- ## 三条会被通用 AI 做反的 TVU 硬约束（先摆出来） | 约束 | 通用做法 | 本稿按真源做法 | |---|---|---| | **M3** 广播行业 ON AIR 惯例 | 正常=绿、告警=黄、异常=红 | **正常推流 = 红**（`--red`，Live=红是广播工程师肌肉记忆）；绿保留给 Preview/Standby；离线=灰 | | **M7** control surface 视觉权重 | status pill 用饱和实心大色块 | pill 用 `Tag=Line` 低饱和；**actions 才是最显眼的那层**，一律正规尺寸 M 按钮不缩 chip | | **MenuList horizontal**（Figma 真源，owner 2026-08-14 裁定） | 顶部导航 active 加品牌色下划线 | **没有下划线**，active 与 normal 只差文字色（`--text-body` / `--text-tips`）；那条 brand 下划线是被推翻的 code-first 发明 | 另外两条：**M4** 运营台只交付 dark（不做浅色/不做并排对比）；**catalog `Top bar` §Don't use for** 禁止在 topbar 下方再加重复 page-title strip ⇒ 本页**没有 h1 标题条**，页面身份由导航 active 项承担。 ## IA + Cardinality self-check（M-IA-FIRST / M-CARDINALITY） ``` Source (persistent, page-scope list) ├ identity : name + protocol prefix (1:1) ├ ingest URL : 后端下发、长度不可控 (1:1) → R23 三件套 ├ receiver : 目标接收端 (N:1 多个源可指同一 receiver) └ runtime state : On air | Degraded | Offline (1:1) └ Offline 必分两子型 (M10): Idle(有 history) / NeverStarted(未配置) Selection model : 无行选中态（M5 = readonly 监控+控制台）⇒ R19 无触发点， actions 常显（M7 要求）而非 selected-driven chrome ``` 5 问 5 答：① persistent（row）② 4 态含 Offline 两子型，转换 = Start/Stop/降级/恢复 ③ 有，Offline-Idle 行内 `Last ran HH:MM → HH:MM · N min` ④ Source:Receiver = N:1（第 3、4 行同指 LAX-Receiver-03，一主一备）⑤ 无 parent switch。 ## R0 Phase 0 element → component mapping | Element | Figma component_set | Code 真源 | 状态 | |---|---|---|---| | 顶部栏 | `Top bar` (`918b928e…`, Tag=After Login, Menu SLOT) | `src/components/TopBar/TopBar.vue` | ✅ 1:1 mirror | | 页面级导航 | Menu sub-component in `Top bar` (`4771:7173/7142/7140`) | `MenuList.vue` `--horizontal` | ✅ 无下划线 | | 过滤 chip | `Tab/Item` (`2267405386…`) + `Tab List` (`47efe04f…`) | `TabItem.vue` `--filled` | ✅ catalog FilterChip | | 搜索框 | `Input box/filled` | `Input.vue` `--filled --m` | ✅（leading icon 为叠加层） | | 列表 | `Table` (Type=Tbody, Align=Left, striped) | `components/Table/Table.vue` | ✅ 含 F129① 的 `.tbl td{border-top:0}` 中和 | | 状态指示 | `Badge` (`4db5246d…`, Color=Red/Orange/Neutral × Tag=Line × Type=Rectangle) | `canonical/Badge.vue` | ✅ 三态全落在已注册轴值内 | | 行内操作 | `Button/dark M` (`12b38c8b…`, style=ghost, color=red/green/gray 1) | `components/Button/Button.vue` | ✅ PALETTE_SPEC 逐值 mirror | | 二次确认 | `Notification` (`23535120…`, form=**pop confirm**, type=danger) | `components/Notification/Notification.vue` | ✅ **不是 PopupBox**（catalog：纯确认用 Popup Box = 选错） | | 外部事件告知 | `Notification` form=alert type=warning / form=slide type=success | 同上 | ✅ M12 三段式 | | 溢出菜单 | `MenuList` `--vertical` | `MenuList.vue` | 🟡 无自有容器 ⇒ 面板 chrome 用 PopupBox 表面配方组合 | | 截断提示 | `Tooltip` (theme=dark) | `Tooltip.vue` | ✅ R23 | | 17 个图标 | `icon/*` | `src/icons/catalog/generated/*.ts` 逐字取 | ✅ 零自画 | `PillStatus`（published `Pill Status` 5672:140617）我**评估后没用**：它的 Status 轴只有 On-air/Preview/Analyzing/Inactive，**没有 warning 成员**，而 硬规则 #3 禁止自创 variant；`Badge` 的 Color 轴本来就注册了 Orange，三态用一个组件一个 `Tag` 就能表达 ⇒ 同时满足 M49 §2「同 semanticRole 同视觉词汇」。 ## R13 affordance trace ``` 1. Affordance: status-negative (intent: 'stop the live transmission') 2. Vocabulary scan: [video/record-stop, video/camera-stop, video/rvf-stop, message/error-1..4, indicator/cannot-live] 3. Chosen: video/record-stop — R13 §Step2 矩阵为 status-negative 点名的命中项，几何=实心方块停止符 1. Affordance: status-warning (intent: 'source degraded / alert banner') 2. Vocabulary scan: [message/warning-1, message/warning-2, time/warning, indicator/cannot-live] 3. Chosen: message/warning-1 (行内 16px 描边) + message/warning-2 (alert 24px 实心) — 后者逐字取自 Notification.vue iconMap.warning，不自选 1. Affordance: directional-vertical / trend (intent: 'latency converging vs diverging' — M11 双层信号) 2. Vocabulary scan: [arrow/up, arrow/down, arrow/updown, arrow/sorting, arrow/double-up, arrow/double-down, arrow/dropdown] 3. Chosen: arrow/down + arrow/up — 真箭头而非 chevron；数值同时染色（M11 要求 icon 不足以单独成信号） 1. Affordance: dismissive (intent: 'close confirm dialog / toast') 2. Vocabulary scan: [edit/close, edit/delete, edit/clip] 3. Chosen: edit/close — canonical 注释逐字指定 popup/notification 的 × 就是 icon/Edit/Close 1. Affordance: overflow / link-share / search / refresh / additive-none 2. Vocabulary scan: [menu/more, menu/menu-1, others/*] · [share/open-link, share/link, edit/copy-link, picture/picture-link] · [search/search, search/auto-search, search/zoom-in] · [load/refresh, load/loading-1, load/wait] 3. Chosen: menu/more · edit/copy · search/search · load/refresh —— 其余为几何不匹配 （另：input/primary-source · input/receiver · preview/main-window · video/play · logo/tvu · message/notification-1 · message/success-2 同法取自 registry，全库实证，零 Unicode / 零 emoji / 零自画） ``` ## M49 lite Design Quality Contract（节选） - **Baseline / Delta**：Source version = 无既有基线（US-2 greenfield）。Remove = `None` ⇒ 不删不折叠任何 baseline 内容。 - **Semantic Pattern**：`status indicator` → 唯一模式 `Badge Rectangle/Line`，只让 Color 轴承载语义；`destructive action` → 唯一模式 `Button ghost/red + M + literal verb + pop-confirm 兜底`；`empty value` → 唯一模式 M29 Form 2 `—` + `--text-placeholder` + 不挂 copy/action。 - **Feedback UI Inventory**：`degraded-detected` → inline alert / `Notification form=alert type=warning` / 480 / one-action；`stop-confirm` → modal notification / `form=pop confirm type=danger` / 480 / two-action；`stop-succeeded` + `url-copied` → toast / `form=slide type=success` / 320 / no-action。三类各自同源，action 数落在 no/one/two 内。 - **UX**：主路径 = 扫状态列 → 落在行尾 actions（M7 权重顺序）；空态与 NeverStarted 子型都给可继续操作的 CTA。 --- ## 实现里三处我明确偏离了某条文档的地方（都给了判据） 1. **`--text-warning` 不存在**。M11 引用 `Color/Text/Warning (--text-warning)`，但 `variables.css` 的 Text 段实测没有这个 token（只有 `--orange` 与 code-authored 的 `--prompt-warning-text`，同值 `#f68512`）。我用 **`--orange`**（Figma-synced、受 `audit:token-collateral` 管的那条），不新建 token、不写 hex。**这是一条 doc↔token drift，值得单独立 entry**。 2. **canonical Table 的 hover 在偶数行不可见**：`.tbl-body .tbl-row:hover` 与 `.tbl--striped … :nth-child(even)` 都是 `--bg-layer3`。我**照 canonical 原样 mirror（R3 禁止按自己理解重设计）**，把它作为一条实测发现报出来，而不是就地"改好"。 3. **URL 列同时给 hug+copy 与 ellipsis+tooltip**：R23 反例表说「ID/IP 字段强行 ellipsis 不给 copy」不合格，catalog 又逐字点名「URL 列走 M29 Form 1 = hug + copy」。SRT ingest URL 长度不可控 ⇒ 两个都给（copy 图标常在、真截断时才挂 tooltip+`title`+`aria-describedby`），从而不落进那条反例。 产品 UI 文案按 **R16/M33 走英文单语 + `const T` 映射表**（双语只作用于注释层）——这是刻意的，不是没读中文 brief。 ```html TVU MediaHub — Sources
TVU MediaHub

``` --- ## Rule checklist（R-DISCIPLINE Acceptance —— 无 TodoWrite 可用，改以文本形式落地） `R0 ✅ · R2 ✅ · R3 ✅ · R13 ✅ · R14 ✅ · R15 ✅ · R16 ✅ · R19 n/a（无 selected 态，M5 readonly 控制台）· R23 ✅ · M3 ✅ · M4 ✅ · M5 ✅ · M7 ✅ · M9 ✅ · M10 ✅ · M11 ✅（用 --orange 代 doc 里不存在的 --text-warning）· M12 ✅ · M13 n/a（无中断-恢复流程）· M29 Form 1/2 ✅ · M49 lite ✅（正文，未跑 --check）· M-CARDINALITY ✅ · M-IA-FIRST ✅` **Acceptance criteria（build 自审，三问）** 1. 自画 SVG icon **0 个** —— 17 个图标全部逐字取自 `src/icons/catalog/generated/{arrow,edit,input,logo,menu,message,preview,search,video}.ts`，搜索词与候选集见上方 R13 trace。 2. Hex literal：CSS 里 **0 处**自撰色值 —— token 块是从 `variables.css` 原样搬运的定义本身，其后所有规则只用 `var(--*)`。三个内联 SVG 的 baked hex 中，两个（warning-1 / success-2）已改 `currentColor` 由 token 上色；`logo/tvu` 的 `#56AF31` 是**库资产自带的品牌色、不是 design token**，逐字保留并加注禁止替换。 3. 复合组件 mirror 来源：Button ← `components/Button/Button.vue` 的 `SIZE_GEOMETRY.M` + `PALETTE_SPEC`；Table ← `components/Table/Table.vue`（含 INFRA-F129① 的 `.tbl td{border-top:0}`）；Notification ← `components/Notification/Notification.vue`（pop confirm 无 category icon、desc 用 `--text-body`、danger→红实心）；TopBar / MenuList / TabItem / Input / Tooltip / Badge 同法。API 差异只有一处：`.field` 给 Input 加了 `padding-inline-start: var(--sp-xl)` 以容纳 leading icon（Input.vue 无 icon slot），已就地注明。 ## 三条应该进 backlog 的实测发现（不是本次交付的一部分） 1. **`--text-warning` 在文档里被引用、在 token 里不存在** —— `domain-tvu.md` M11 与 `--prompt-warning-text` 各说一套；判据是 `grep -n 'text-warning' src/tokens/variables.css` 为空。 2. **canonical Table 的 hover 在偶数行不可见** —— `.tbl-body .tbl-row:hover` 与 `.tbl--striped …:nth-child(even)` 同为 `--bg-layer3`。这条被 `Type=Tbody` 自动开 striped 放大（catalog 建议 operator console 就用 Tbody）。 3. **`Pill Status` 没有 warning 成员** —— 运营台三态里的「告警」在这套库里只能落到 `Badge` 的 Orange 上。如果 `Pill Status` 是运营台状态列的目标组件，那 Figma 侧缺一个成员；这属于 designer 裁定，不该由 code 自创 variant 绕过（硬规则 #3）。 **这份稿子我没跑过任何闸** —— `audit:no-hardcoded-design-tokens`、`audit:consumer-code`（R14/R19/R9 probe）、`design:kickoff --check` 都需要 Bash/Write。上面三条 Acceptance 的答案是我逐条对活源人工核的，不是机检结果。