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：控件与圆角统一 —— 先让页面「看起来是做过的」

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

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

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

要求：

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

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

同一行卡片必须等高：用 align-items: stretch + 卡内 display:flex; flex-direction:column，把「标题区 / 指标区 / 来源区」用 margin-top:auto 把来源区压到底，中间空就用 flex-grow 吃掉，但不允许出现可见的大块空白（空白高度 > 24px 判失败）。
底线对齐：同一行卡片的「分隔线 / 按钮 / 来源行」必须落在同一 y 坐标（±2px）。
底部空白要吃掉：三选一，你决定并说明理由：
- (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

三、必须交付的东西

scripts/verify-visual-v12.mjs —— 实测脚本，跑起来打印上表每一项的实际测量值，任一项不达标 exit 1。 不接受「已经改了」的口述，必须打印数字。
docs/v12-before-after.md —— 每项改动的前后实测值对照表（左列「改前实测」、右列「改后实测」）。
截图：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。

TASK-v12-visual.md 6.9 KB Постоянная ссылка История Исходник