# Phase 6.2a Token Mapping Plan

## 映射表

| 组件 | 文件:行号 | CSS 属性 | 当前 hex / token | 决策 | Token 名（建议） | Token 值（建议） | 备注 |
| --- | --- | --- | --- | --- | --- | --- | --- |
| FormItem | `FormItem.vue:152` | `--fi-label` | `#9e9e9e` | A | `--text-tips` | dark `#9e9e9e`, light `#595959` | 深色标签精确命中；浅色主题可自动切到次级文本色 |
| FormItem | `FormItem.vue:153` | `--fi-text` | `#f8f8f8` | A | `--text-body` | dark `#f8f8f8`, light `#141414` | 文本语义明确 |
| FormItem | `FormItem.vue:154` | `--fi-placeholder` | `#7b7b7b` | A | `--text-placeholder` | dark `#7b7b7b`, light `#9e9e9e` | 现值命中深色；替换后浅色占位也会校正 |
| FormItem | `FormItem.vue:155` | `--fi-surface` | `#353535` | A | `--bg-layer4` | dark `#353535`, light `#dbdbdb` | 深色输入面精确命中 |
| FormItem | `FormItem.vue:157` | `--fi-choice-border` | `#595959` | A | `--line-border` | dark `#595959`, light `#f0f0f0` | 复选/单选边框语义更像边线 token |
| FormItem | `FormItem.vue:161` | `--fi-label` | `#434343` | A | `--text-2` | dark `#cccccc`, light `#434343` | 浅色次级文案精确命中 |
| FormItem | `FormItem.vue:162` | `--fi-text` | `#434343` | A | `--text-2` | dark `#cccccc`, light `#434343` | 浅色文本当前更接近次级文本而非正文 |
| FormItem | `FormItem.vue:163` | `--fi-placeholder` | `#7b7b7b` | A | `--text-placeholder` | dark `#7b7b7b`, light `#9e9e9e` | 替换后浅色占位会从当前硬编码提升为主题自适应 |
| FormItem | `FormItem.vue:164` | `--fi-surface` | `#ffffff` | A | `--bg-layer1` | dark `#141414`, light `#ffffff` | 浅色容器背景建议用层级背景语义 |
| FormItem | `FormItem.vue:165` | `--fi-border` | `#595959` | D | 候选：`--line-border` | 候选：dark `#595959`, light `#f0f0f0` | 当前硬编码更像深色边线；浅色 Figma 真值需人工确认 |
| FormItem | `FormItem.vue:166` | `--fi-choice-border` | `#bdbdbd` | D | 候选：`--line-light` 或新建 `--form-item-choice-border-light` | 候选：`#cccccc` 或保留 `#bdbdbd` | 现有 token 无精确值，且语义可能是浅色控件边框特例 |
| FormItem | `FormItem.vue:202` | color | `#ea4233` | A | `--red` | dark `#ea4233`, light `#dc2717` | 错误/必填语义明确 |
| FormItem | `FormItem.vue:243` | border-color | `#ed5b4e` | A | `--red-hover` | dark `#ed5b4e`, light `#eb493a` | 错误态边框 hover 语义可直接复用 |
| FormItem | `FormItem.vue:318` | background | `#2fb54e` | A | `--brand` | dark `#2fb54e`, light `#299f45` | 激活色语义明确 |
| FormItem | `FormItem.vue:339` | background | `#2fb54e` | A | `--brand` | dark `#2fb54e`, light `#299f45` | Switch 轨道可复用品牌色 |
| FormItem | `FormItem.vue:349` | background | `#ffffff` | A | `--color-white` | `#ffffff` | 白色旋钮稳定值 |
| FormItem | `FormItem.vue:360` | color | `#ea4233` | A | `--red` | dark `#ea4233`, light `#dc2717` | 错误文案语义明确 |
| Notification | `Notification.vue:177` | background | `#353535` | A | `--bg-layer4` | dark `#353535`, light `#dbdbdb` | 深色卡片背景命中 |
| Notification | `Notification.vue:178` | border-color | `#434343` | A | `--line-light` | dark `#434343`, light `#cccccc` | 深色边框命中 |
| Notification | `Notification.vue:179` | color | `#f8f8f8` | A | `--text-body` | dark `#f8f8f8`, light `#141414` | 深色正文命中 |
| Notification | `Notification.vue:183` | background | `#f8f8f8` | A | `--bg-layer2` | dark `#1f1f1f`, light `#f8f8f8` | 浅色卡片背景更像 layer2 |
| Notification | `Notification.vue:184` | border-color | `#cccccc` | A | `--line-light` | dark `#434343`, light `#cccccc` | 浅色边框命中 light override |
| Notification | `Notification.vue:185` | color | `#141414` | A | `--text-body` | dark `#f8f8f8`, light `#141414` | 浅色正文命中 light override |
| Notification | `Notification.vue:264` | color | `#9e9e9e` | A | `--text-tips` | dark `#9e9e9e`, light `#595959` | 深色描述次级文案 |
| Notification | `Notification.vue:268` | color | `#595959` | A | `--text-tips` | dark `#9e9e9e`, light `#595959` | 浅色描述命中 light override |
| Notification | `Notification.vue:285` | color | `#9e9e9e` | A | `--icon-default` | dark `#9e9e9e`, light `#595959` | close icon 语义更适合 icon token |
| Notification | `Notification.vue:323` | border-color | `#434343` | A | `--line-light` | dark `#434343`, light `#cccccc` | 次按钮深色边框 |
| Notification | `Notification.vue:324` | color | `#cccccc` | A | `--text-2` | dark `#cccccc`, light `#434343` | 次按钮文案命中 |
| Notification | `Notification.vue:328` | border-color | `#dbdbdb` | A | `--line-deep` | dark `#353535`, light `#dbdbdb` | 浅色次按钮边框命中 light override |
| Notification | `Notification.vue:329` | color | `#434343` | A | `--text-2` | dark `#cccccc`, light `#434343` | 浅色次按钮文案命中 light override |
| Notification | `Notification.vue:333` | background | `#33ab4f` | A | `--brand` | dark `#2fb54e`, light `#299f45` | 当前值错误；推荐直接切到品牌 token，light override 已是 Figma 真值 |
| Notification | `Notification.vue:334` | color | `#f8f8f8` | A | `--text-primary-btn` | `#ffffff` | 主按钮文字建议统一走主按钮文案 token |
| Notification | `Notification.vue:338` | background | `#ec5050` | A | `--red` | dark `#ea4233`, light `#dc2717` | 当前值错误；推荐切到危险色 token，light override 已是 Figma 真值 |
| Notification | `Notification.vue:339` | color | `#f8f8f8` | A | `--text-primary-btn` | `#ffffff` | 主按钮文字应统一 token 化 |
| PromptMessage | `PromptMessage.vue:31` | `paletteMap.success.background` | `#f1fbf3` | C | `--prompt-success-bg` | `#f1fbf3` | 现有 `--brand-match` 会随全局 theme 变化，不适合固定成功消息背景 |
| PromptMessage | `PromptMessage.vue:32` | `paletteMap.success.text` | `#2fb54e` | C | `--prompt-success-text` | `#2fb54e` | 成功消息文字建议独立语义 token |
| PromptMessage | `PromptMessage.vue:35` | `paletteMap.info.background` | `#e1eefd` | A | `--blue-bg` | `#e1eefd` | 现有 token dark/light 同值，可直接复用 |
| PromptMessage | `PromptMessage.vue:36` | `paletteMap.info.text` | `#3892f3` | C | `--prompt-info-text` | `#3892f3` | 现有 `--blue` light override 改值，不适合固定提示色 |
| PromptMessage | `PromptMessage.vue:39` | `paletteMap.error.background` | `#fff1f0` | A | `--red-bg` | `#fff1f0` | 现有 token dark/light 同值 |
| PromptMessage | `PromptMessage.vue:40` | `paletteMap.error.text` | `#ea4233` | C | `--prompt-error-text` | `#ea4233` | 现有 `--red` 会随 theme 改值，消息色建议固定 |
| PromptMessage | `PromptMessage.vue:43` | `paletteMap.warning.background` | `#fff3db` | A | `--orange-bg` | `#fff3db` | 现有 token dark/light 同值 |
| PromptMessage | `PromptMessage.vue:44` | `paletteMap.warning.text` | `#f68512` | C | `--prompt-warning-text` | `#f68512` | 现有 `--orange` light override 改值，消息色建议固定 |
| PromptMessage | `PromptMessage.vue:152` | color | `#9e9e9e` | A | `--icon-default` | dark `#9e9e9e`, light `#595959` | close icon 适合走 icon 语义 token |
| Tooltip | `Tooltip.vue:94` | `--tooltip-bg` | `#ffffff` | A | `--bg-layer1` | dark `#141414`, light `#ffffff` | 浅色 tooltip 背景建议复用层级背景 |
| Tooltip | `Tooltip.vue:95` | `--tooltip-text` | `#141414` | A | `--text-body` | dark `#f8f8f8`, light `#141414` | 浅色 tooltip 正文语义明确 |
| Tooltip | `Tooltip.vue:96` | `--tooltip-border` | `#f0f0f0` | A | `--line-border` | dark `#595959`, light `#f0f0f0` | 浅色边框命中 light override |
| Tooltip | `Tooltip.vue:100` | `--tooltip-bg` | `#353535` | A | `--bg-layer4` | dark `#353535`, light `#dbdbdb` | 深色 tooltip 背景命中 |
| Tooltip | `Tooltip.vue:101` | `--tooltip-text` | `#f8f8f8` | A | `--text-body` | dark `#f8f8f8`, light `#141414` | 深色 tooltip 正文命中 |
| Tooltip | `Tooltip.vue:102` | `--tooltip-border` | `#595959` | A | `--line-border` | dark `#595959`, light `#f0f0f0` | 深色边框命中 |
| Input | `Input.vue:68` | comment reference: filled bg (dark) | `#353535` | D | 候选：`--input-filled-bg` | dark `var(--bg-layer4)` | 注释里的示例值，不是运行时硬编码；6.2b 可不动源码逻辑，只决定是否同步注释 |
| Input | `Input.vue:68` | comment reference: filled bg (light) | `#ffffff` | D | 候选：`--input-filled-bg` | light `var(--bg-layer1)` | 同上，属于注释真值说明，不是 runtime CSS |

## 未定义 token 建议

| 组件 | 文件:行号 | 当前 token | 决策 | Token 名（建议） | Token 值（建议） | 备注 |
| --- | --- | --- | --- | --- | --- | --- |
| FormItem | `FormItem.vue:147` | `--form-item-root-width` | D | 候选：`--form-item-root-width-single-line` / `--form-item-root-width-two-lines` | 当前运行时值：`638px` / `440px` | 单一 token 名无法表达两种布局宽度；建议拆成布局级尺寸 token |
| FormItem | `FormItem.vue:185` | `--form-item-label-width` | D | 候选：`--form-item-label-width-120` / `--form-item-label-width-200` / `--form-item-label-width-dynamic` | 当前运行时值：`120px` / `200px` / `auto` | 与 Figma `Label Width` 枚举一一对应，更适合尺寸 token 组而不是单值 token |
| PromptMessage | `PromptMessage.vue:101` | `--prompt-bg` | D | 候选：状态化 token 组（如 `--prompt-success-bg` 等） | success/info/error/warning 分别为 `#f1fbf3` / `#e1eefd` / `#fff1f0` / `#fff3db` | 单一 `--prompt-bg` 只是运行时桥接变量，不适合直接进全局 token 文件 |
| PromptMessage | `PromptMessage.vue:122` | `--prompt-text` | D | 候选：状态化 token 组（如 `--prompt-success-text` 等） | success/info/error/warning 分别为 `#2fb54e` / `#3892f3` / `#ea4233` / `#f68512` | 单一 `--prompt-text` 只是运行时桥接变量，不适合直接进全局 token 文件 |

## 风险与不确定性

- **局部 theme prop vs 全局 theme token**：`FormItem`、`Notification`、`Tooltip` 都有组件内的 `dark/light` 变体，但现有 token 体系主要依赖全局 `[data-theme="light"]`。即使表中推荐了 A 类替换，6.2b 执行时也需要确认是直接引用全局 token，还是先落组件级 alias 再由类名切换。
- **Notification 两个错值的副作用**：`#33ab4f` 和 `#ec5050` 推荐映射到 `--brand` / `--red`，但这会把当前局部错误值改成 token 的 theme 值。若组件继续保持“局部 light，不依赖全局 theme”，则仍需在 6.2b 里补局部 theme 绑定策略。
- **PromptMessage 的状态色更像固定消息语义，而不是全局主题色**：尤其 `success/info/error/warning` 文本色，如果直接用 `--brand` / `--blue` / `--red` / `--orange`，在 light theme 下会变成另一组值，可能偏离当前 Figma 实测。
- **FormItem 的浅色边框**：`#595959` 和 `#bdbdbd` 都不像现有 light line token 的标准值，建议 6.2b 前人工再核一次 Figma 真值。
- **Input 的 2 个 hex 只存在于注释**：这两项不影响运行时，但会影响“源码是否还有硬编码 hex”的静态扫描结果；是否连注释一起规范化，需要人工决定。
- **B 类决策本轮实际没有安全落点**：当前盘点里没有发现“token 语义命中但 token 自身值也需要同步修正”的低风险案例。若后续发现某 token 定义本身错误，再补充 B 类处理更稳妥。