# Codex Prompt: Phase 6.2b — 视觉层 Token 替换执行

按 `docs/internal/phase-6.2a-token-mapping-plan.md` 已批准的计划，把 5 个 runtime 组件中的 38 个硬编码 hex 替换为 token，并补 4 个未定义 token 定义。

**架构性改动（组件级 theme prop 的 scoped class）不在本轮范围**——见末尾 6.2c 预告。

---

## 必读前置（按顺序，必须读完才动手）

1. `docs/PROJECT_GOAL.md`（项目目标）
2. `docs/working-principles.md` 原则 4（颜色硬编码 = bug，颜色必须用 token）
3. `docs/internal/phase-6.2a-token-mapping-plan.md`（**本任务的核心输入：38 行 hex → token 映射表 + 4 个未定义 token 建议**）
4. `docs/internal/phase-6.2a-token-inventory.md`（现有 token 清单 + 引用次数）
5. `src/tokens/variables.css`（现有 token 定义文件）
6. `src/components/{FormItem,Notification,PromptMessage,Tooltip,Input}/*.vue`（待修改的 5 个 runtime 组件）

---

## 任务 1：在 `src/tokens/variables.css` 新增 9 个 token

### 1.1 PromptMessage 状态色（C 类决策，5 个）

理由：消息色是固定语义（success 永远绿，不随全局 theme 变），需独立 token 避免被 brand 色 override。

在 `:root` 中加：

```css
/* PromptMessage 状态色（固定语义，dark/light 两 theme 同值） */
--prompt-success-bg:    #f1fbf3;
--prompt-success-text:  #2fb54e;
--prompt-info-text:     #3892f3;
--prompt-error-text:    #ea4233;
--prompt-warning-text:  #f68512;
```

`[data-theme="light"]` 中**无需重定义**（dark/light 同值）。

注意：success/info/error/warning 的 **背景**（`--prompt-success-bg` 已加；info/error/warning 复用现有 `--blue-bg` / `--red-bg` / `--orange-bg` 三个已存在 token，不新增）。

### 1.2 FormItem width token 拆分（D 类决策，4 个）

理由：原代码引用了未定义的 `--form-item-root-width` 和 `--form-item-label-width`，单值 token 无法表达两种布局宽度和 3 档 label 宽。按 6.2a plan 拆分。

```css
/* FormItem layout widths */
--form-item-root-width-single-line:  638px;
--form-item-root-width-two-lines:    440px;
--form-item-label-width-120:         120px;
--form-item-label-width-200:         200px;
--form-item-label-width-dynamic:     auto;
```

注：5 个新增（不是 4）。一个为 root width 双值（single-line / two-lines），三个为 label 宽（120 / 200 / dynamic）。

合计本任务在 `variables.css` 共加 **10 个新 token**（5 个 prompt + 5 个 form-item）。

---

## 任务 2：组件 hex 替换（按 6.2a plan 表逐行执行）

**严格按 `docs/internal/phase-6.2a-token-mapping-plan.md` 的"映射表"执行**。每一行的修改按"决策"列处理：

### A 类（33 行，直接替换）

把 hex 替换为 `var(--token-name)`。具体 token 名查 plan 表"Token 名（建议）"列。

例（plan 表第 1 行）：
- 文件：`FormItem.vue:152`
- 当前：`--fi-label: #9e9e9e;`
- 改后：`--fi-label: var(--text-tips);`

逐行执行表中所有 A 类。

### C 类（5 行，PromptMessage 状态色）

把 hex 替换为任务 1.1 新建的 `--prompt-*` token。

具体（plan 表中标 C 的行）：
- `PromptMessage.vue:31`  `paletteMap.success.background`：`'#f1fbf3'` → `'var(--prompt-success-bg)'`
- `PromptMessage.vue:32`  `paletteMap.success.text`：`'#2fb54e'` → `'var(--prompt-success-text)'`
- `PromptMessage.vue:36`  `paletteMap.info.text`：`'#3892f3'` → `'var(--prompt-info-text)'`
- `PromptMessage.vue:40`  `paletteMap.error.text`：`'#ea4233'` → `'var(--prompt-error-text)'`
- `PromptMessage.vue:44`  `paletteMap.warning.text`：`'#f68512'` → `'var(--prompt-warning-text)'`

注意：info/error/warning 的 **background** 用 plan 中标 A 的现有 token（`--blue-bg` / `--red-bg` / `--orange-bg`）。

### D 类（4 处，按用户已批准决策）

| 位置 | 用户决策 | 操作 |
|---|---|---|
| `FormItem.vue:165` 浅色边框 `#595959` | 用 `--line-border` | 替换为 `var(--line-border)` |
| `FormItem.vue:166` 浅色 `#bdbdbd` | 用 `--text-disabled` | 替换为 `var(--text-disabled)` |
| `Input.vue:68` 注释中的 2 个 hex | 同步注释为 token reference | 把注释改为：`/* --input-filled-bg resolves to: dark var(--bg-layer4) / light var(--bg-layer1) */` 形式，移除字面 hex |
| 4 个未定义 token | 任务 1.2 已新建定义 | 组件代码中保持 `var(--form-item-...)` 引用，但 **替换为新 token 名**（如把 `var(--form-item-root-width)` 改为按上下文用 `var(--form-item-root-width-single-line)` 或 `var(--form-item-root-width-two-lines)`，取决于该规则块对应布局；label-width 同理按 layout 选 120/200/dynamic）|

### PromptMessage.vue:101 / :122 / :137 桥接变量

`--prompt-bg` / `--prompt-text` 是 PromptMessage 内部桥接变量（运行时根据 status 动态赋值）。这些 `var(--prompt-bg)` / `var(--prompt-text)` 引用**不需要改**——它们在 `paletteMap` 中被赋值，paletteMap 的值在任务 2-C 已 token 化，桥接传递自动生效。

---

## 任务 3：验证（不动手代码，只跑命令）

执行以下命令并捕获输出：

```bash
# 1. hex 残留扫描（运行时 CSS / SFC 中应为 0）
grep -E "#[0-9a-fA-F]{3,6}\b" src/components/{Notification,PromptMessage,Tooltip,FormItem,Input}/*.vue 2>&1

# 期望结果：
#  - FormItem/Notification/PromptMessage/Tooltip 的 hex 数 → 0
#  - Input.vue 仅注释里若按"决策"还需要保留少量 hex（如 dark/light 真值说明），可接受
#  - 0 hex 是理想目标，1-2 个注释里的可解释例外可以接受

# 2. 构建 + 测试
pnpm build 2>&1 | tail -20
pnpm test  2>&1 | tail -10

# 3. 项目自带审计（如有）
pnpm audit:design-system 2>&1 | tail -20
```

---

## 任务 4：写改动报告

输出位置：`docs/internal/phase-6.2b-execution-report.md`

格式：

```markdown
# Phase 6.2b Execution Report

跑时间：YYYY-MM-DD HH:MM:SS

## 任务 1：variables.css 新增 token
- prompt-* 5 个：[列出]
- form-item-* 5 个：[列出]

## 任务 2：组件 hex 替换统计
- FormItem.vue：替换 N 行（A: x, C: y, D: z）
- Notification.vue：替换 N 行
- PromptMessage.vue：替换 N 行
- Tooltip.vue：替换 N 行
- Input.vue：替换 N 行（含注释更新）

## 任务 3：验证结果
### grep hex 残留
[完整 grep 输出]

### pnpm build
[退出码 + 关键输出]

### pnpm test
[X passed (X) / 退出码]

### pnpm audit:design-system（如可跑）
[输出摘要]

## 异常项（如有）
[任何无法按 plan 直接执行的边角情况]

## 6.2c 预告（架构性 theme prop scoping）
- 本轮未做：组件级 theme prop（Notification.theme=dark|light、PromptMessage.theme、Tooltip.theme、FormItem.theme）的 scoped CSS class + 组件内 token alias 模式
- 当前组件 CSS 中处理 theme=light 的代码块仍可能保留少量 light 值
- 建议作为 6.2c 单独阶段处理，参考 Element Plus / Naive UI 的 scoped theme override 模式
```

---

## 禁止

- ❌ 不动 `src/canonical/` 任何文件（canonical 是 thin wrapper，没有自己的 hex）
- ❌ 不动 `src/icons/`
- ❌ 不动 `figma-data/`、`figma-sync/`
- ❌ 不动 `docs/site-review-manifest.json`、`AGENTS.md`、`CLAUDE.md`、`working-principles.md`
- ❌ 不动 `src/design-system/translation/`
- ❌ 不修 plan 表外的 hex（如有发现新增 hex，只在报告里 flag，不动）
- ❌ 不在本轮做"组件级 theme prop scoped class"架构性改动（推迟到 6.2c）
- ❌ 不顺手修 figma-conformance / docs-site 等审计的预存问题
- ❌ 失败的 pnpm test 不要 force-pass，如实报告

---

## 完成条件

1. 任务 1：10 个新 token 在 variables.css 中存在
2. 任务 2：plan 表中所有 A/C/D 行被处理
3. 任务 3：3 个验证命令都跑过并捕获输出
4. 任务 4：execution-report.md 写完
5. **必须：`pnpm build` 通过，`pnpm test` 全绿**——任一失败即 STOP 报告，不强行通过

完成后 STOP。等用户审 diff + report，决定是否 commit + 进 6.3。