# v12：深度视觉重构（不是微调）

> 用户判词：「现在的视图和 UI 看起来有点怪怪的，还有这个筛选框这里的按钮边框也不好看，整体的视觉效果不好，需要深度升级，不能当成小任务。」
> **本轮是结构性重做，不是加几条 CSS。** 验收按「一个外行打开会不会觉得这是个成品」来判。

---

## 零、我已经测出的根因（这些是事实，不是猜测）

在 1440×900 实测 `/pool`、`/reports`、`/stages`，得到以下硬数据：

### 1. 控件的浏览器默认样式没被覆盖 —— 这是「按钮边框不好看」的真因

```
/pool 排序按钮：border-radius: 0px，border: 0px none
               背景 rgb(24,24,27)，文字 rgb(255,255,255)
/pool 原生 <button>：borderWidth 2px，背景 rgb(239,239,239)，文字 rgb(0,0,0)
```

后者是**浏览器默认外观直接暴露**（`2px outset` 加灰底），说明按钮的样式选择器根本没命中。全站 `/pool` 检出 17 个这类「裸控件」。

### 2. 圆角是四档打架，不是一套体系

```
/pool    ：6px ×23、8px ×2、16px ×1
/reports ：6px ×36、7px ×6、10px ×6、0px ×5
/stages  ：6px ×8
```

**6 / 7 / 10 / 0 四档并存**，7px 和 6px 差 1px 肉眼看得出来是「不齐」。0px 是没设。这不是设计，是各页各写各的。

### 3. 卡片高度参差 21px

```
/pool 9 张卡：368 ×5、389 ×4，align-items: normal，gap 16px
```

同一行的卡因为文案行数不同被撑成两种高度，底边不齐。

### 4. 页面底部空白（不是 bug，是内容撑不满）

```
栅格高 1946px，最后一行卡片底 → 栅格底 gap = 0（布局没问题）
但页面总高 2462px，栅格之外还有 516px 空区
```

原因：9 张卡排 3 行就结束，下方没有任何收尾内容。**这是信息架构问题，靠 CSS 补不了。**

### 5. 字号与色阶也偏散

```
字号：20 / 16 / 14 / 13.33 / 13 / 11 六档（13.33px 是浏览器默认值泄漏）
颜色：rgb(24,24,27) ×49、rgb(63,63,70) ×41、rgb(75,85,99) ×11、rgb(0,0,0) ×10
```

**纯黑 `rgb(0,0,0)` 出现 10 次**——这与 v10 定的「禁用纯黑」直接矛盾。

### 6. 工作台左卡是大空框

「还没选『我是』」占近半卡高，右侧「1 人卡住」信息密。左右严重失衡。

---

## 一、本轮目标（按优先级）

### P0：控件与圆角统一 —— 先让页面「看起来是做过的」

1. **建立唯一圆角尺度**，全站只允许 3 个 token：
   - `--r-sm: 8px`（chip、小按钮、输入框、标签）
   - `--r-md: 12px`（卡片、面板、抽屉内块）
   - `--r-lg: 20px`（浮层、大卡、模态）
   - **禁止出现 6px / 7px / 10px / 0px**（0px 仅允许用于分隔线等非容器元素）
2. **彻底消除浏览器默认控件外观**：所有 `button/input/select` 必须显式覆盖
   `appearance: none`、`background`、`border`、`border-radius`、`font`、`padding`。
   **验收脚本要能数出「原生外观控件 = 0」。**
3. **按钮要有三种明确形态**（现在全是糊的）：
   - `primary`：实底、无边框、白字
   - `secondary`：透明底、1px 描边（`rgba(255,255,255,.14)`）、浅字
   - `ghost`：无底无框、只在 hover/active 时给背景
   - **筛选 chip 用 secondary**，选中态才用实底。
4. 描边统一 `1px`，**禁止 2px 以上**（现在有 2px 的）。

### P1：筛选栏重做 —— 用户点名的地方

现状：排序按钮是 30px 高、11px 字、无圆角无描边，一排 5 个挤在一起，视觉噪音大。

要求：
- 筛选区做成**一个统一的容器**（不是一堆散按钮），内部分组：
  `状态 | 优先级 | 阶段 | 品类 | 上传人 | 排序`，组间用 1px 竖线或间距区分；
- chip 高度统一 **28–32px**、字号 **12px**、圆角 `--r-sm`；
- 选中态：实底 + 白字；未选中：透明底 + 1px 描边 + 次级字色；
- **hover 要有反馈**（现在完全没有）；
- 排序控件做成 **单选段（segmented）**，视觉上是一整块被分割，不是 5 个独立按钮；
- 右侧搜索框与左侧筛选**底边对齐**、等高。

### P2：卡片等高 + 底部收尾 —— 消灭参差和大空白

1. **同一行卡片必须等高**：用 `align-items: stretch` + 卡内 `display:flex; flex-direction:column`，
   把「标题区 / 指标区 / 来源区」用 `margin-top:auto` 把来源区压到底，**中间空就用 flex-grow 吃掉**，
   但**不允许出现可见的大块空白**（空白高度 > 24px 判失败）。
2. **底线对齐**：同一行卡片的「分隔线 / 按钮 / 来源行」必须落在同一 y 坐标（±2px）。
3. **底部空白要吃掉**：三选一，你决定并说明理由：
   - (a) 卡片区下方加「本页统计条」（本期新增/已立项/待评估），
   - (b) 改成分页 + 页脚操作条（上一页/下一页/每页数），
   - (c) 让卡片 grid 用 `auto-fill` 撑成 4 列，减少留白。
   **我倾向 (b)**：既解决空白又符合「操作逻辑更丰富」。

### P3：工作台左卡失衡

- 「还没选『我是』」空状态卡：**压缩到内容高度**（不再撑满），或者放入真实数据（阶段进度条 + 待办数）。
- 左右两卡**必须等高**，且左卡不得出现 > 32px 的连续空白。

---

## 二、硬性数值规范（验收脚本按这个量）

| 项 | 要求 |
|---|---|
| 圆角种类 | **≤3 种**，且必须是 8/12/20 |
| 原生外观控件 | **= 0** |
| 2px 以上描边 | **= 0** |
| 纯黑 `rgb(0,0,0)` | **= 0**（用 `#18181b` 系） |
| 字号档数 | **≤5 种**，且禁止 13.3333px |
| 同排卡片高度差 | **≤2px** |
| 卡内可见空白 | **≤24px** 连续 |
| 控件 hover 反馈 | 每个可点元素都有 |
| 页面底部空白 | **≤120px** |

---

## 三、必须交付的东西

1. `scripts/verify-visual-v12.mjs` —— **实测脚本**，跑起来打印上表每一项的实际测量值，任一项不达标 `exit 1`。
   **不接受「已经改了」的口述，必须打印数字。**
2. `docs/v12-before-after.md` —— 每项改动的前后实测值对照表（左列「改前实测」、右列「改后实测」）。
3. 截图：`docs/screenshots/v12/` 下桌面 1440 与手机 393 各 4 页（工作台/卡池/报告中心/阶段）。

## 四、禁止事项

- **不改交互习惯**：按钮位置、筛选逻辑、分页行为一律不动（这是用户的既有要求）。
- 不加装饰性渐变、发光、玻璃堆叠（v10 已定：克制）。
- 不为了「看起来丰富」塞无意义图标。
- 不用 `transition: all`。
- 不改 `src/core/` 下任何纯逻辑。
- 单测 `test/*.test.js` 必须保持 46/46。

## 五、Claude Code 执行提示

- 单轮会撞 turn 上限，**按 P0 → P1 → P2 → P3 顺序做，每完成一个 P 就落盘**，不要全做完再存。
- 先写 `verify-visual-v12.mjs` 的**测量部分**（只打印不改），看清现状再动手改。
- 每改完一个 P，跑一次脚本，把数字记进 `docs/v12-before-after.md`。