Cost per Token Trend · TVU SaaS Dashboard

我按本仓库的 onboarding 链路走完了 L-core 四份 + 命中触发的 L-ref（`AGENTS.md` 硬规则/Gate、`code-conventions.md` 起手必读段 + R0/R2/R3/R13/R14/R15/R16/R19/R23/R-DISCIPLINE、`design-process.md`、`domain-tvu.md`、`figma-component-catalog.md` Chart 条），并对活源取了值（`src/tokens/variables.css`、`src/canonical/*`、`src/components/{Button,Tab,Chart,Tooltip}/*`、`dist/icons/svg/*`）。下面先交底，再给产物。 --- ## R0 · Phase 0 元素→组件映射（实测，非印象） | Element | Figma / DS 真源 | Code path | 状态 | |---|---|---|---| | 时间范围切换 | `Tab List` (`fill=Filled`) × `Tab/Item` (`state=Active/Normal`) | `src/canonical/TabList.vue` → `src/components/Tab/TabItem.vue` | ✅ 手写 1:1 mirror（R3：单 HTML 无构建链） | | Export / Custom range 按钮 | `Button/dark M` (`style=ghost`,`color=gray 1`,`size=M`,`radius=square`) | `src/components/Button/Button.vue` `PALETTE_SPEC` + `SIZE_GEOMETRY` | ✅ 逐值 mirror | | 趋势图 | `Chart` (`type=line`) | `src/canonical/Chart.vue` → `build-chart-option.ts` + `use-chart-tokens.ts` | ⚠️ 视觉 mirror（见下方偏差登记） | | 图内 hover 提示 | `Tooltips` (`theme=dark`) | `src/components/Tooltip/Tooltip.vue` | ✅ mirror（padding/radius/shadow/font 逐值） | | 涨跌指示 | domain-tvu **M11** 双层信号（icon + 数值染色） | `dist/icons/svg/Arrow/{Up,Down}` | ✅ 库图标 verbatim | | 折叠说明面板 | canonical + catalog 双层 miss | — | ⚠️ **LIBRARY GAP**，已在代码内标注 | | 明细表 | `Table` 元素基线层 (`th`/`td` padding + border) | `variables.css` element base layer | ✅ 沿用 | | 图标 | `Arrow/Up`·`Arrow/Down`·`Arrow/Left-1`·`Arrow/Right-1`·`Arrow/Dropdown`·`Message/Info-1`·`Time/Calendar`·`pay/token` | `dist/icons/svg/**` | ✅ path 逐字复制，零自画 | **R13 三行 trace（4 组）** ``` 1. Affordance: directional-vertical (intent: 单位成本 vs 上期的涨跌方向) 2. Vocabulary scan: [Arrow/Up, Arrow/Down, Arrow/Double-up, Arrow/Double-down, Arrow/Updown, Arrow/Sorting (dist)] 3. Chosen: Arrow/Up + Arrow/Down — 与 M11 的 ↑↓ 双层信号几何 1:1 1. Affordance: directional-horizontal (intent: 右侧说明面板收起/展开) 2. Vocabulary scan: [Arrow/Left-1, Arrow/Right-1, Arrow/Next, Arrow/Previous, Arrow/left-2, Arrow/right-2 (dist)] 3. Chosen: Arrow/Right-1 (收起) + Arrow/Left-1 (展开) — 同族镜像，非 scaleX 翻转伪造 1. Affordance: status-info (intent: 标识"这个数怎么算出来的"面板) 2. Vocabulary scan: [Message/Info-1, Message/Info-2, Message/Help-1, Message/Help-2, Message/Notification-1 (dist)] 3. Chosen: Message/Info-1 — currentColor 单色，可随面板标题色 1. Affordance: time-range + domain glyph (intent: 自定义区间入口 / 页面身份) 2. Vocabulary scan: [Time/Calendar, Time/Calendar-event, Time/Clock, Time/Timer | pay/token, pay/transfer-token, pay/bill (dist)] 3. Chosen: Time/Calendar + pay/token ``` **R-DISCIPLINE checklist**（本 session 无 TodoWrite 工具，改为文本物化）：R0 ✅ / R1·R15 ✅ / R2·R2.1 ✅ / R3 ✅ / R13 ✅ / R14 ✅ / R16 ✅ / R19 ✅（见下）/ R23 ✅（三件套：截断 CSS + `scrollWidth` 检测 + `title` a11y 回退） --- ## 三条必须交底的偏差 / 缺口（不是"顺手做了"，是判断结果） 1. **图表：catalog 写"禁止自画 SVG"，我仍手绘了 SVG。** 依据是 R3 逐字条款「不能消费（如单 HTML demo，无构建链）→ 手写 1:1 mirror canonical 的视觉」。约束是 `不引外部 CDN`，ECharts 无法进场。我 mirror 的是 canonical 的**渲染契约本身**：轴线/刻度/网格 = `--line-divider-light`、轴标签与图例 = `--text-2` @12px、系列色 = `--chart-color-*`、图例 = 底部 8×8 圆点、卡面 = `--bg-layer3` + `--sp-m` + `--r-m`、renderer 也同为 SVG。**这不是绕过组件，是同一份视觉规格的无构建链实现**；真项目里应直接用 ``。 2. **`--text-warning` 不存在。** M11 的映射表把"恶化"指向 `Color/Text/Warning` (`--text-warning`)，我全仓 grep 只有 **`docs/internal/domain-tvu.md` 自己一处命中**，`src/tokens/variables.css` 里没有这个 token。按 R2「绝不 hardcode hex」，我用了存在的 `--orange`（#f68512，即 M11 说的"橙红"）。⚠️ **这是 domain-tvu.md 的一处悬挂 token 名，建议单独立项订正**，我没有替 owner 改真源。 3. **没有 >24px 的字号 token。** hero KPI 封顶在 `--font-size-large-title-24`。要更大的英雄数字就得新建 token → 按 R2 属"用户拍板 + 同步 Figma"，我不自造。当前靠 layer3 抬升面 + 权重 + 12px 环境字阶做出层级差。另外三条判断，写出来供推翻： - **R19 不套在 range tab 上**：R19/M38 的三层 selected（左 rail + fill + chrome）管的是产品自建的 list row / card；range tab 的 active 态是 canonical `Tab/Item` **自己的 Figma 变体**（`bg-layer4` + 700 字重），照 R19 改它就是拿 P1 规则推翻 P0 的 Figma 真源。 - **M4 dark-only**：只交付深色（DS 默认 `:root`），不做 light 并排、不做 toggle。 - **M17 宿主范式未 probe**：本 session 只读、拿不到 TVU SaaS Dashboard 的既有页面帧，所以**只交付内容区、不伪造 app 外壳（TopBar / 侧导航）**。落地前需按 M17 打开宿主 canonical 帧实测行高/控件宽/对齐再套壳。数据为 sample data，页面上有明示。 --- ```html Cost per Token Trend · TVU SaaS Dashboard

· ·

``` --- ## 交付自审（R3 §Acceptance criteria 三问） - **自画 SVG icon 数量？** 0。8 个图标全部是 `dist/icons/svg/**` 的 path 逐字复制，sprite 注释里逐个标了 nodeId。零 Unicode / emoji 占位（R13 Step 4 黑名单）。 - **用了多少 hex literal？** token 块内的值是 `variables.css` 的 verbatim 副本（这是它的定义处）；token 块之外**只有一处** —— `pay/token` 图标自带的 `#FFB524`，是库资产本身的填充，不是我选的颜色，改成 `currentColor` 反而是篡改库资产。其余全走 `var(--*)`。 - **复合组件 mirror 自哪个 canonical？** Button ← `Button.vue` 的 `SIZE_GEOMETRY.M` + `PALETTE_SPEC.ghost["gray 1"]`；Tab ← `TabList.vue`/`TabItem.vue` 的 filled 分支；Tooltip ← `Tooltip.vue` `.tooltip-box--dark`；Chart ← `Chart.vue` + `build-chart-option.ts` + `use-chart-tokens.ts`。每处 CSS 上方都写了它 mirror 的是哪几行。 **落地前还欠的两步**（我做不了，如实登记，不是待办清单里的装饰）： 1. **M17 宿主范式实测** —— 套进真实 Dashboard 外壳前，要打开该 surface 的 canonical 帧核行高/控件宽/右缘对齐，贴实测数字，目测不算过。 2. **`pnpm audit:no-hardcoded-design-tokens` / `audit:consumer-code`（R14/R19/R1 probe）实跑** —— 本 session 停用了 Bash，我**没有跑过任何闸**。上面所有合规声明都是逐条对活源比对的结果，不是机检绿。真要收货请在能跑命令的 session 里补跑这两条。如果 token = LLM token 而不是 TVU 计费 token，需要改的只有说明面板里那三段定义文案和 `RANGES` 的量级，页面结构和组件映射不动。