我已走完本仓 onboarding 链路（L-core 4 份全文 + AGENTS 硬规则/Onboarding Gate + `code-conventions` 起手必读段与命中的 R 规则 + `domain-tvu` 全文 + `design-process` 命中段 + `figma-component-catalog`），并逐一读了要 mirror 的活源组件与 token。下面先给必需的自检产出，再给单文件 HTML。 ## 起手判定（R7 + Task Entry Mode） **intent classified as 场景 3.2（Greenfield 单页 · 用 TVU 构建）/ US-2** ⇒ R1/R2/R3/R15 强约束，R8/R9/R12/R13/R14/R16/R23 全部 fire。视觉真源 = TVU library（不是任何外部稿）。 ## M48 起手规则覆盖清单（交付前已逐条回核） | 命中规则 | 本页怎么落地 | |---|---| | **M1** Top bar 必 instance | 顶栏 1:1 mirror `components/TopBar/TopBar.vue`（64px · `--bg-topbar` · brand/menu/right 三区）；页面级元素（筛选/搜索）放**顶栏下方独立 strip**，未塞进 slot | | **M3** 广播 ON AIR 色 | Live=`--red`、告警=`--orange`、离线=中性灰。**没有**用 SaaS 默认「绿=正常」 | | **M4** 监控台仅 dark | 只出 dark，无 theme toggle、无浅色并排 | | **M5** 监控页不放创建入口 | 无 `+ New Source`（CRUD 自检里写了 rationale） | | **M7** actions > identifiers > status | 操作列用正规 M 尺寸(32px) Button；ID 用 tips 级；状态 pill 为描边/暗块，不抢焦点 | | **M9** literal 动词 | `Stop Streaming` / `Restart` / `Set Source and Receiver`，无图标替代文字 | | **M10** 离线必分两子型 | `SRC-0977` = Idle（`Last ran 09:12 → 11:40 · 148 min`）；`SRC-1130` = NeverStarted（`Never started` + CTA） | | **M11** trend 双层信号 | 阈值→icon(`navigation/arrow-down`) **且** 数值染色(`--orange`)；stable 无 icon 中性色 | | **M12** 异步事件不静默 | 停流/重启后出 `Notification form=slide` 告知 + 行内前进路径 | | **R15/R1** library-first | Top bar / Table / Button / Badge / Tab-Item / input box filled / Tooltips / Notification 全部 mirror canonical；11 个图标全部逐字取自 `src/icons/**`，**零自画 SVG** | | **R2** 零硬编码色 | 全部 `var(--*)`，token 块逐字复制 `src/tokens/variables.css` | | **R14** layout 原语 | flex/grid；仅遮罩层/tooltip/toast 用 fixed/absolute 且**均带注释** | | **R16** 产品文案单语 | 全部 UI 串走 `const T = {…}`（EN 单语，无中英混排） | | **R23** 受限单元格溢出 | 名称 tail-ellipsis + `scrollWidth>clientWidth` 实测；URL 走 R23 给的 `centerEllipsis()`；仅**真截断**才挂 library Tooltip + `aria-describedby` + `title` 双保险 + `tabindex=0` 可键盘触发 | **CRUD 自检（M-LIFECYCLE-CRUD）**：Read = 本页列表+状态+历史 meta；Update = 行内 Stop/Restart（URL/Receiver 字段属 Details，非本页）；Delete = **本页不提供**；Create = **本页不提供** —— 后两项 rationale = M5（源由后端/MicroApp 创建后 push 到监控台，dashboard 只做查看/启停/跳转）。 **Cardinality**：Source persistent（非 transient）· 1 Source : 1 Receiver（N 源可指向同一 Receiver，已在数据里体现 Frankfurt-01 / New York-04 / Lisbon-01 各带 2 条）· 状态机 `live ⇄ alarm → offline(idle) / offline(never)`。 **R9 交互态推断表**：hover = active 的弱版本（行 `--bg-layer3`、ghost 按钮取 `PALETTE_SPEC.hover` 原值）；focus = `outline 2px --brand`（照 Button/MenuList 既有做法给 Tab/Item 补上，DS 侧缺此态）；disabled = **照 Figma 真值**（ghost red disabled 保留 `opacity .4` —— 那是 Figma 提取值，非偷懒；灰/绿档走 `--text-placeholder` / `--brand-disable` token）。 **R13 affordance trace（趋势指示）**：① affordance = 方向/趋势指示 ② 同义词面 `arrow-down / down / trend / sorting / double-down` 扫 `navigation` + `arrow` 两层 ③ 选 `navigation/arrow-down`（`IconArrowDown`，实心单箭头、语义=下降），排除 `arrow/sorting`（排序双箭头）与 `action/double-down`（批量移动）。 ## 两处如实登记的偏差（不是静默处理） 1. **状态 pill 家族**：`Live`/`Alarm` 用 `Badge Type=Rectangle Color=Red|Orange Tag=Line`，`Offline` 用 `Color=Neutral Tag=Filled` —— 同一 semanticRole 混了 Line/Filled，**M49 exception 理由**：`Badge Neutral/Line` 的文字绑 `--text-body`（最亮），会让最不重要的态最响，直接撞 M7；且 catalog 里 `Tag=Filled` 红/绿+白字那条 extension 正是 M7 立规时点名的反例。⚠️ 另：published `Pill Status` 只有 On-air/Preview/Analyzing/Inactive **四态、没有告警档**，所以我没去发明第五个 status（硬规则 #3），改用 Badge 既有 Orange 档 —— 「Pill Status 缺 warning」值得立一条 backlog（本 session 只读，未写）。 2. **单文件约束 vs R2.1**：R2.1 要求页面 `` 构建时拷出的 `tvu-tokens.css`，单文件下不可行 ⇒ token 块**逐字内联**、值与 `src/tokens/variables.css` 一致（未手调任何色值）。另 `Notification` 的 `border-radius: 6px` 是组件自身字面量（DS 无对应 `--r-*`），照抄未改。 ```html Sources · TVU Grid
TVU Grid

Sources

Source Source address Receiver Status Bitrate Actions
``` **用到的 library primitives**（R15 Acceptance 要求的一行）：`Top bar (After Login)` · `MenuList (horizontal)` · `Table (Tbody)` · `Button (dark M · ghost gray/red/green · filling red · rimless green)` · `Badge (Rectangle × Red/Orange/Neutral × Line/Filled)` · `Tab/Item (Filled × Active-Green/Normal-White)` · `input box/filled (size M · feature=no)` · `Tooltips (dark · top-start)` · `Notification (pop confirm × danger / slide × success·default)` · `Popup Box` 的遮罩规格（Mask blur8 #000-60%）· 11 个图标全部取自 `src/icons/**`。 **打开后可试**：筛选 chip（单选 + 方向键）/ 搜索 / hover 第 4 行名称与各行地址看 tooltip（只有真截断的才弹）/ 点 `Stop Streaming` → pop confirm（Esc、Cancel、backdrop 不关）→ 确认后行转 Offline-Idle 并按真实时钟生成 `Last ran … · N min` + slide toast / 对 Offline-Idle 行点 `Restart` 直接启动（无中断 ⇒ 不设二次确认）/ 最后一行两个操作按钮为 Figma disabled 真值（ghost red 带 0.4 容器透明度）。 **留给 owner 的两条**（本 session 只读，未写入仓库）：① `Pill Status` 缺 warning/告警档，建议立 backlog（现用 Badge Orange 顶替）② DS 无 `--z-toast`，本页复用 `--z-modal`，值得评估是否补一档 token。 ```text 下个 session 续跑 prompt（可直接粘贴） 在 tvu-design-system 仓库继续「直播源管理 mockup」这条线。上一轮（2026-08-25，只读会话）已产出一份单文件高保真 HTML（TVU Grid · Sources 运营台）， 产物只存在于对话里、未落仓库。请先走完 docs/STATUS.md §起手必读链路 的两层 onboarding（mockup/UI 代码任务：L-core 四份 + AGENTS §硬规则/§Onboarding Gate + docs/internal/code-conventions.md 顶部起手必读段 + domain-tvu.md 全文），然后从这三件里挑用户指定的接着做： 1) 把那份 HTML 落地成仓库内产物（建议 playground/public/ 下的自包含页，或 react-pilot/docs demo 页）——落地前先确认放哪、要不要 构建期拷出的 tvu-tokens.css 取代内联 token 块（R2.1 真源要求），并按 §Mockup Write Gate / 快车道判据决定 changeset 与 VISUAL_COMMIT_APPROVED（⛔ AI 不自设该变量）。 2) 补两条已识别的 DS 缺口 entry（取号先 `pnpm new-backlog INFRA`，⛔ 别凭印象选号）： (a) published `Pill Status` 只有 On-air/Preview/Analyzing/Inactive 四态、无 warning/告警档，消费侧只能改用 Badge Orange/Line 顶替； (b) `src/tokens/variables.css` §Z-Index 无 `--z-toast`（原注释写「无消费者不凭空造」），本轮 toast 实测复用了 `--z-modal`，即已出现消费者。 3) 若要把这页推成 Figma mockup：先走 AGENTS §Mockup Write Gate 4 步前置 + §必读链路 7-11 整链（含 `pnpm pattern:lookup `，⬜ 命中要先采一次再查）。 纪律提醒（本轮踩到过的坑）： · 状态色按 domain-tvu M3（Live=红 / Preview=绿 / Inactive=灰），⛔ 别套 SaaS「绿=正常」；告警走 --orange。 · M7：操作按钮必须正规 M 尺寸、状态 pill 最安静；M5：监控台不放创建入口；M10：离线必分 Idle / NeverStarted 两子型。 · ghost red 的 hover 底色是 --red-bg(#fff1f0)、disabled 带 opacity 0.4 —— 那都是 Figma 真值，⛔ 别当 bug「修」。 · MenuList horizontal 的 active 只改文字色，⛔ 不要加 brand 下划线（owner 2026-08-14 已裁定删除，勿复原）。 · 工作树内跑闸前先确认 node_modules / dist / .env（Worktree 六坑），闸的挂载事实读脚本头注释、别 grep 调用点。 ```