<!--
ARCHIVED 2026-05-14 — Tier 1-A Sprint 1
此文件已迁移到 src/design-system/translation/axis-implementation-map.json (+ schema)。
保留本 md 作历史快照供查阅 instance 1-16 原始 narrative 记录。
活跃 SoT：src/design-system/translation/axis-implementation-map.json
变更原因：Tier 1-A translation schema 化（PROJECT_GOAL 能力 5 schema 化前置）
-->

# Axis Implementation Map（figma↔code axis 映射真源）

> 本文件是项目级真源——登记 figma 组件的 axis 值在 code 端的实际实现位置。
> 任何 audit / Code Connect / AI manifest 工具读这份文件，**不在脚本/工具里 hardcode 任何组件名**（meta-rules 反模式 #1）。
> 后续新组件出现 figma↔code 拓扑/实现层级错位 → **改这一份文件**，工具自动适配（meta-rules 反模式 #5）。
>
> **协作分工**（meta-rules 触发器 G）：
> - plan owner 写 schema + 1-2 示范实例（本文件初版）
> - executor 按 schema 扫全库补剩余实例
> - plan owner 复审 executor 填的内容

---

## 1. 用途

v1 audit 假设 figma 一个 axis 值 ↔ code 端一个 CSS class modifier（如 `progress--light`）。但项目实际有 5 种实现层级，audit 不识别就会大量假阳性。本文件登记每条 axis 值的实际实现层级 + 锚点，让工具读真源做精确比对。

---

## 2. 实现层级 enum（codeImplementationLayer 字段允许值）

audit / 任何下游工具按这个 enum 选择验证策略：

| Layer | 含义 | 验证方式 | v1 误判表现 |
|---|---|---|---|
| `css-class` | BEM modifier，如 `<comp>--<axis-value>` | 静态 CSS selector 扫描 | 无（v1 已能查） |
| `vue-prop` | `defineProps` 含的 prop（含跨组件透传链） | 解析 `defineProps` + 跟踪 `:propname="propname"` 透传 | ⚠️ axis-branch-missing（v1 误判） |
| `vue-computed-palette` | `computed(() => ({ '--var': palette.value.X }))` + inline style 注入 | Vue AST 抽 computed → 解析间接变量链 | ⚠️ token-mismatch（v1 误判） |
| `css-custom-property-chain` | `.foo--light { --tooltip-text: var(--Y) }` selector 改 custom property 的值 | 静态 CSS 扫 selector + custom property 链 | ⚠️ token-mismatch（v1 误判） |
| `cross-component-topology` | figma 一个组件集 → code 多个独立组件 / docs 页 | 递归查 codeAnchor 列举的多个文件 | ⚠️ axis-branch-missing（v1 误判） |

---

## 3. Schema 字段定义

每条实例登记必填以下字段：

| 字段 | 类型 | 必填 | 说明 |
|---|---|:-:|---|
| `figmaComponent` | string | ✓ | figma 组件集名（如 `Select` / `Button`） |
| `figmaComponentSetIds` | string[] | ✓ | 对应的 figma node IDs（可能多个 set） |
| `figmaAxis` | string | ✓ | figma 端的 axis 名（如 `feature` / `theme` / `dark theme` / `darkTheme`） |
| `figmaValue` | string \| `*` | ✓ | axis 的具体值（如 `date`），`*` 表示该 axis 全部值统一适用 |
| `codeImplementationLayer` | enum | ✓ | 上面 enum 中的一个 |
| `codeFile` | string \| string[] | ✓ | 实现文件路径（多文件时列数组） |
| `codeAnchor` | string | ✓ | 文件内的具体锚点（行号 / selector / prop 名 / computed 名） |
| `verifyHint` | string | 推荐 | 机械验证这条登记仍有效的命令（grep / regex） |
| `notes` | string | 可选 | 备注（如透传链、跨实体说明） |

---

## 4. 实例登记

### Instance 1: Button palette 间接变量（vue-computed-palette 示范）

- **figmaComponent**: `Button`
- **figmaComponentSetIds**: `[1545:51854, 1545:51964, 1545:57246, 1545:57247, 1545:47446, 1545:47447, 1545:51851, 1545:51852]`
- **figmaAxis**: `color`
- **figmaValue**: `*` （所有颜色 axis 值统一通过 palette 解析）
- **codeImplementationLayer**: `vue-computed-palette`
- **codeFile**: `src/components/Button/Button.vue`
- **codeAnchor**: `palette computed: 262 / buttonVars computed: 365 / indirect vars used in CSS: --btn-bg (line 458) / --btn-color (line 459) / --btn-border (line 457)`
- **verifyHint**: `grep -n "const palette\|const buttonVars" src/components/Button/Button.vue` 应至少返回 2 行（palette + buttonVars）
- **notes**: palette 按 props `(color, status, theme, style)` 输入算出 `--brand` / `--brand-hover` / `--red` / `--red-hover` 等真实 token；audit 验证时需解析 Vue AST 找 palette ObjectExpression，按当前 variant 的 axis tuple 在 palette 分支里查最终 cssVar，再跟 figma cssVar 比对

---

### Instance 2: SelectBoxLine.feature prop-axis（vue-prop 示范，DateTime 关键案例）

- **figmaComponent**: `Select`
- **figmaComponentSetIds**: `[1436:32816, 1804:26921]`
- **figmaAxis**: `feature`
- **figmaValue**: `date`
- **codeImplementationLayer**: `vue-prop`
- **codeFile**: `[src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxFilled.vue]`
- **codeAnchor**: `defineProps#feature: 9 (type Feature = 'default' \| 'time' \| 'date'), prop default: 30, transmit to child via :feature="feature": 47`
- **verifyHint**: `grep -nE "type Feature\s*=" src/canonical/SelectBoxLine.vue src/canonical/SelectBoxFilled.vue` 应返回 2 行（两个文件各一）
- **notes**: feature axis 通过 prop 透传给子组件 SelectBoxBase 处理——不在 .vue CSS 层。**同 figmaValue=date 还有 cross-component-topology 关系**：`playground/docs/pages/DateTimePage.vue` 用 SelectBoxLine + SelectBoxFilled 组合演示 DateTime 行为，executor 补登记 N:1 拓扑时需另起一条 `cross-component-topology` 实例引用本条

---

### <!-- TODO(executor): 待 executor 按 schema 补充以下实例 -->

executor 按本 schema 扫全库补充剩余实例，至少覆盖：

**vue-computed-palette 候选**（plan 章节 2 已发现）：
- PromptMessage / Badge (canonical) / Progress / FormItem
- 每个补完整一条实例，参照 Instance 1 格式

**vue-prop 候选**：
- SelectBoxLine.feature=time（跟 Instance 2 同结构，figmaValue 不同）
- SelectBoxFilled.feature=date / time（独立登记）
- 扫 `src/canonical/*.vue` 的 `defineProps` 找其它 prop-as-axis 模式（如 `type` / `mode` / `variant`）

**css-custom-property-chain 候选**（plan 章节 1 盲区 3 发现）：
- Tooltip：`.tooltip-box--light/dark` 改 `--tooltip-text` / `--tooltip-bg` / `--tooltip-border`
- Input：`--input-filled-bg` 在 dark/light theme selector 下解析

**cross-component-topology 候选**：
- DateTime topology：figma `Select.feature=date/time` ↔ code SelectBoxLine + SelectBoxFilled + DateTimePage
- Steps/StepItem：figma 可能是一个组件集 → code 拆为 Steps + StepItem
- Tabs/TabList/TabItem：figma 可能是一个组件集 → code 拆为多个
- Breadcrumb/BreadcrumbItem：figma 可能是一个组件集 → code 拆为多个

每条实例必填 schema 全部必填字段。verifyHint 推荐写但不强制——验证不出来时留空或写"TODO"。

### Instance 3: PromptMessage status palette（vue-computed-palette）

- **figmaComponent**: `PromptMessage`
- **figmaComponentSetIds**: `[1408:17153]`
- **figmaAxis**: `status`
- **figmaValue**: `*`
- **codeImplementationLayer**: `vue-computed-palette`
- **codeFile**: `src/components/PromptMessage/PromptMessage.vue`
- **codeAnchor**: `paletteMap: 29 / palette computed: 67 / inline style vars: --prompt-bg and --prompt-text at 75-78 / CSS consumption: --prompt-bg line 101, --prompt-text lines 126 and 141`
- **verifyHint**: `grep -n "paletteMap\\|const palette\\|'--prompt-bg'\\|'--prompt-text'" src/components/PromptMessage/PromptMessage.vue`
- **notes**: `status` drives `paletteMap[props.status]`, then inline style injects semantic custom properties. audit must resolve `--prompt-bg` / `--prompt-text` before deciding token fidelity.

### Instance 4: Badge canonical color/tag palette（vue-computed-palette）

- **figmaComponent**: `Badge`
- **figmaComponentSetIds**: `[4821:1665]`
- **figmaAxis**: `Color`
- **figmaValue**: `*`
- **codeImplementationLayer**: `vue-computed-palette`
- **codeFile**: `src/canonical/Badge.vue`
- **codeAnchor**: `palette computed: 18 / badgeVars computed: 38 / indirect vars --badge-accent, --badge-bg, --badge-border at 40-42 / CSS consumption lines 71 and 74`
- **verifyHint**: `grep -n "const palette\\|const badgeVars\\|--badge-bg\\|--badge-border" src/canonical/Badge.vue`
- **notes**: `Color` chooses the token via `palette.value[props.color]`; `Tag` decides whether the token is assigned to fill or stroke. audit must resolve both axes together.

### Instance 5: Progress status fill palette（vue-computed-palette）

- **figmaComponent**: `Progress`
- **figmaComponentSetIds**: `[4915:7287]`
- **figmaAxis**: `status`
- **figmaValue**: `*`
- **codeImplementationLayer**: `vue-computed-palette`
- **codeFile**: `src/components/Progress/Progress.vue`
- **codeAnchor**: `fillColor computed: 25 / progressVars computed: 36 / --progress-fill-color at 37 / CSS consumption line 88`
- **verifyHint**: `grep -n "const fillColor\\|const progressVars\\|--progress-fill-color" src/components/Progress/Progress.vue`
- **notes**: `status` maps to `--brand`, `--red`, or `--orange` through computed `fillColor`; `theme` track behavior is separately represented by css custom property chain / css-class findings.

### Instance 6: FormItem label width and layout variables（vue-computed-palette）

- **figmaComponent**: `FormItem`
- **figmaComponentSetIds**: `[1923:50705]`
- **figmaAxis**: `Label Width`
- **figmaValue**: `*`
- **codeImplementationLayer**: `vue-computed-palette`
- **codeFile**: `src/components/FormItem/FormItem.vue`
- **codeAnchor**: `rootStyle computed: 42 / --form-item-label-width-current at 46-50 / template :style rootStyle at 97`
- **verifyHint**: `grep -n "const rootStyle\\|--form-item-label-width-current\\|:style=\\\"rootStyle\\\"" src/components/FormItem/FormItem.vue`
- **notes**: This is geometry rather than color, but it is the same computed-to-custom-property topology. audit should classify it as heuristic dimension evidence unless future tokenized dimension support exists.

### Instance 7: SelectBoxLine.feature=time prop-axis（vue-prop）

- **figmaComponent**: `Select`
- **figmaComponentSetIds**: `[1804:26921]`
- **figmaAxis**: `feature`
- **figmaValue**: `time`
- **codeImplementationLayer**: `vue-prop`
- **codeFile**: `[src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxBase.vue]`
- **codeAnchor**: `SelectBoxLine type Feature: 9 / feature prop: 20 / transmit :feature line 47; SelectBoxBase type Feature: 11 / feature prop: 29 / feature-driven icon computed lines 54-60`
- **verifyHint**: `grep -nE "type Feature\\s*=|:feature=\\\"feature\\\"|props.feature === 'time'" src/canonical/SelectBoxLine.vue src/canonical/SelectBoxBase.vue`
- **notes**: line variant passes the `feature=time` axis as a prop; no CSS modifier should be required for the audit to consider the axis implemented.

### Instance 8: SelectBoxFilled.feature=date prop-axis（vue-prop）

- **figmaComponent**: `Select`
- **figmaComponentSetIds**: `[1436:32816]`
- **figmaAxis**: `feature`
- **figmaValue**: `date`
- **codeImplementationLayer**: `vue-prop`
- **codeFile**: `[src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue]`
- **codeAnchor**: `SelectBoxFilled type Feature: 9 / feature prop: 20 / transmit :feature line 47; SelectBoxBase feature prop: 29 / leadingFeatureIcon computed line 55`
- **verifyHint**: `grep -nE "type Feature\\s*=|:feature=\\\"feature\\\"|props.feature === 'time' \\? 'clock' : 'calendar'" src/canonical/SelectBoxFilled.vue src/canonical/SelectBoxBase.vue`
- **notes**: filled variant passes `feature=date` through to shared base behavior.

### Instance 9: SelectBoxFilled.feature=time prop-axis（vue-prop）

- **figmaComponent**: `Select`
- **figmaComponentSetIds**: `[1436:32816]`
- **figmaAxis**: `feature`
- **figmaValue**: `time`
- **codeImplementationLayer**: `vue-prop`
- **codeFile**: `[src/canonical/SelectBoxFilled.vue, src/canonical/SelectBoxBase.vue]`
- **codeAnchor**: `SelectBoxFilled type Feature: 9 / feature prop: 20 / transmit :feature line 47; SelectBoxBase feature-driven icon/clear computed lines 54-60`
- **verifyHint**: `grep -nE "type Feature\\s*=|:feature=\\\"feature\\\"|props.feature === 'time'" src/canonical/SelectBoxFilled.vue src/canonical/SelectBoxBase.vue`
- **notes**: same prop-axis implementation as `date`, with `time` resolving to the clock feature path.

### Instance 10: FormItem.status prop-axis（vue-prop）

- **figmaComponent**: `FormItem`
- **figmaComponentSetIds**: `[1923:50705]`
- **figmaAxis**: `Status`
- **figmaValue**: `*`
- **codeImplementationLayer**: `vue-prop`
- **codeFile**: `src/components/FormItem/FormItem.vue`
- **codeAnchor**: `type Status: 6 / status prop: 17 / hasError computed: 34 / template form-item--error class line 94`
- **verifyHint**: `grep -nE "type Status\\s*=|status\\?: Status|hasError|form-item--error" src/components/FormItem/FormItem.vue`
- **notes**: Figma Status axis is represented as a Vue prop plus computed class, not solely by a direct `status` CSS custom property.

### Instance 11: Tooltip theme custom property chain（css-custom-property-chain）

- **figmaComponent**: `Tooltips`
- **figmaComponentSetIds**: `[1408:17152]`
- **figmaAxis**: `dark theme`
- **figmaValue**: `*`
- **codeImplementationLayer**: `css-custom-property-chain`
- **codeFile**: `src/components/Tooltip/Tooltip.vue`
- **codeAnchor**: `.tooltip-box consumes --tooltip-bg/--tooltip-text/--tooltip-border at 76-78; .tooltip-box--light defines them at 93-96; .tooltip-box--dark defines them at 99-102`
- **verifyHint**: `grep -nE "tooltip-box--light|tooltip-box--dark|--tooltip-bg|--tooltip-text|--tooltip-border" src/components/Tooltip/Tooltip.vue`
- **notes**: audit should resolve selector-specific custom property assignments before classifying token mismatch.

### Instance 12: Input filled background custom property chain（css-custom-property-chain）

- **figmaComponent**: `Input`
- **figmaComponentSetIds**: `[1436:32815, 1818:8063]`
- **figmaAxis**: `dark theme`
- **figmaValue**: `*`
- **codeImplementationLayer**: `css-custom-property-chain`
- **codeFile**: `src/components/Input/Input.vue`
- **codeAnchor**: `.tvu-input--filled consumes --input-filled-bg at 68-70`
- **verifyHint**: `grep -nE "input-filled-bg|tvu-input--filled" src/components/Input/Input.vue`
- **notes**: Current file consumes `--input-filled-bg`; verify may reveal the actual theme provider defines it outside this component. If no definition is found, audit should return implementation-mismatch or unmapped custom-property source rather than treating `var(--input-filled-bg)` as a direct token mismatch.

### Instance 13: DateTime Select topology（cross-component-topology）

- **figmaComponent**: `Select`
- **figmaComponentSetIds**: `[1436:32816, 1804:26921]`
- **figmaAxis**: `feature`
- **figmaValue**: `date`
- **codeImplementationLayer**: `cross-component-topology`
- **codeFile**: `[src/canonical/SelectBoxLine.vue, src/canonical/SelectBoxFilled.vue, playground/docs/pages/DateTimePage.vue]`
- **codeAnchor**: `SelectBoxLine/SelectBoxFilled feature prop lines 9 and 47; DateTimePage imports/uses these canonical select components as DateTime source`
- **verifyHint**: `grep -nE "SelectBoxLine|SelectBoxFilled|feature=\\\"date\\\"|DateTime" playground/docs/pages/DateTimePage.vue src/canonical/SelectBoxLine.vue src/canonical/SelectBoxFilled.vue`
- **notes**: DateTime is not an independent Figma set; it is a docs/code topology over Select feature=date/time variants.

### Instance 14: Steps container + item topology（cross-component-topology）

- **figmaComponent**: `Step/Item`
- **figmaComponentSetIds**: `[4943:7310]`
- **figmaAxis**: `state`
- **figmaValue**: `*`
- **codeImplementationLayer**: `cross-component-topology`
- **codeFile**: `[src/components/Steps/Steps.vue, src/components/Steps/StepItem.vue, src/canonical/StepItem.vue]`
- **codeAnchor**: `Steps provides step state/context; StepItem renders the Figma item implementation; canonical StepItem maps Figma props to runtime item`
- **verifyHint**: `grep -nE "provide\\('step|inject\\('step|defineProps" src/components/Steps/Steps.vue src/components/Steps/StepItem.vue src/canonical/StepItem.vue`
- **notes**: Figma publishes item-level set; code has container + item topology.

### Instance 15: Tabs multi-entity topology（cross-component-topology）

- **figmaComponent**: `Tab/Item`
- **figmaComponentSetIds**: `[4265:16082, 4452:7148]`
- **figmaAxis**: `Type`
- **figmaValue**: `*`
- **codeImplementationLayer**: `cross-component-topology`
- **codeFile**: `[src/components/Tab/Tab.vue, src/components/Tab/TabList.vue, src/components/Tab/TabItem.vue, src/canonical/Tab.vue, src/canonical/TabList.vue, src/canonical/TabItem.vue]`
- **codeAnchor**: `Tab provides active/type context; TabList arranges items; TabItem maps Figma item states`
- **verifyHint**: `grep -nE "provide\\('tab|inject\\('tab|defineProps" src/components/Tab/Tab.vue src/components/Tab/TabList.vue src/components/Tab/TabItem.vue src/canonical/Tab.vue src/canonical/TabList.vue src/canonical/TabItem.vue`
- **notes**: Figma has separate Tab List and Tab Item sets; code exposes a multi-file topology.

### Instance 16: Breadcrumb container + item topology（cross-component-topology）

- **figmaComponent**: `Breadcrumb/Item`
- **figmaComponentSetIds**: `[5003:7495]`
- **figmaAxis**: `state`
- **figmaValue**: `*`
- **codeImplementationLayer**: `cross-component-topology`
- **codeFile**: `[src/components/Breadcrumb/Breadcrumb.vue, src/components/Breadcrumb/BreadcrumbItem.vue, src/canonical/BreadcrumbItem.vue]`
- **codeAnchor**: `Breadcrumb wrapper renders nav/ol; BreadcrumbItem maps Figma state variants; canonical BreadcrumbItem exposes item-level props`
- **verifyHint**: `grep -nE "Breadcrumb wrapper|defineProps|state" src/components/Breadcrumb/Breadcrumb.vue src/components/Breadcrumb/BreadcrumbItem.vue src/canonical/BreadcrumbItem.vue`
- **notes**: Figma publishes item-level set; code adds a container wrapper, so audit must not treat Breadcrumb container as missing Figma source.

---

## 5. audit / 工具消费契约

任何工具读本文件后的算法：

```
对每条 figma variant 的每个 axis-value：
  1. 在本文件 instances 里查匹配（figmaComponent + figmaAxis + figmaValue 三者匹配，
     figmaValue=`*` 视为通配）
  2. 找到匹配 instance：
     a. 按 instance.codeImplementationLayer 选验证策略
     b. 验证通过 → 标 ✅ token-match-via-<layer>
     c. 验证失败 → 标 ⚠️ implementation-mismatch（含 layer 类型）
  3. 没找到匹配 instance：
     a. 兜底查 css-class layer（v1 默认行为）
     b. 兜底也失败 → 标 ⚠️ unmapped-axis-value（提示开发者加进本文件）
```

**evidenceLevel 映射**（按 meta-rules § 5 + Round 1 plan 章节 3）：

| 新 verdict | evidenceLevel | evidenceSource |
|---|---|---|
| `✅ token-match-via-css-class` | direct | `[figma-tokenized-json, vue-static-css]` |
| `✅ token-match-via-prop` | direct | `[figma-tokenized-json, vue-static-css, vue-defineProps]` |
| `✅ token-match-via-indirection` | direct | `[figma-tokenized-json, vue-static-css, vue-computed-palette]` |
| `✅ token-match-via-custom-property-chain` | direct | `[figma-tokenized-json, vue-static-css, css-custom-property-chain]` |
| `✅ token-match-via-topology` | direct | `[figma-tokenized-json, axis-implementation-map.md, multi-file-resolution]` |
| `⚠️ implementation-mismatch` | direct | 视 layer 而定 |
| `⚠️ unmapped-axis-value` | heuristic | `[figma-tokenized-json, axis-implementation-map.md]` |

---

## 6. 维护规则

- 加新组件 / 新 axis → **只改这份文件**，不改 audit 脚本（meta-rules 反模式 #5）
- 修改 schema 字段 → 同步更新本文件的"3. Schema 字段定义"段 + 通知所有消费工具
- verifyHint 失败 → 该实例需复核（可能是 code 已重构，登记过时）
- 跨文件实体（多个 codeFile）→ 在同一条 instance 列数组，或拆成多条同 figmaValue 但不同 layer 的实例