v15：按 dr6 + dr1 重构工作台视觉

用户看过参考图后拍板：综合 dr6（Bento + 浅底深卡 + 单一强调色）与 dr1（大量留白 + 森林绿式克制）。目标只有一句话：让工作台看起来像 2026 年的产品，而不是一个后台管理页。

这一轮要动排版骨架，不是调间距。前五轮（v10–v14）都在调精度、指标全绿但用户说「没什么提升、还是不好看」—— 说明精度不是问题，视觉语言是问题。禁止再做「把 6px 改成 8px」这类动作。

零、先读这两张参考图（必须真的看）

/opt/data/work/kangshifu/refs/dr6.png   ← 主参考：Bento 布局 + 奶油底 + 单一明黄强调 + 浅底嵌深卡
/opt/data/work/kangshifu/refs/dr1.png   ← 次参考：森林绿单色 + 大量留白 + 四数据卡并排

用 vision_analyze 逐张看清楚再动手。要偷的是结构，不是配色：

从 dr6 偷（最重要的三条）

Bento 布局：卡片不是整齐九宫格，而是大小不等的块拼在一起（大块 2 列、小块 1 列、横条通栏）。视线有节奏，不是一片等大方块。
浅底里嵌一块深色卡：整页浅色，只有一块是深色（dr6 是右侧任务卡），用来锚定注意力。这一条直接解决我们工作台右上那块粉红卡"用颜色喊叫"的毛病。
单一强调色，只在关键处出现：dr6 全页只有一种黄，只用在进度条/关键数字/一个按钮上。其余全是灰阶。

从 dr1 偷

敢留白：卡片内部呼吸感足，不是把信息塞满。
数据卡并排且短：四个数字卡，每个只有「标签 + 大数字 + 一行趋势」，没有多余装饰。
状态用色点/标签，不用整块色底。

禁止照抄的

dr6 的奶油黄整体色调 → 我们是企业工具，底色保持中性灰白，强调色沿用现有 --kf-accent: #5B5BD6（紫），不要改成黄。
dr1 的森林绿 → 同上，不换主色。
dr2（暗色玻璃那版）完全不参考：Vercel 硬否决清单里 glass effects 就是禁项。

一、工作台重排（`src/pages/view-workbench.js`，285 行）

现状骨架（我读过，是事实）

第 174 行  head('我的推进', ...)
第 175 行  <div class="grid2">               ← 两栏等宽 50/50
第 178 行    右栏「1 人卡住」粉红卡
第 188 行  机会卡池区块（一个 hd + 四张汇总卡 .latest）
第 197 行  foot-links 更多入口

目标骨架（Bento，12 栅格）

┌──────────────────────────┬──────────────┐
│ A 我的推进（大卡，8 列）    │ B 现场（4 列）│   ← A 浅色；B 深色（就是"那一块深卡"）
│   身份 + 阶段进度条         │  1 人卡住 61h │
│   高 1.4 倍                │  或「大家都在动」│
├────────┬────────┬────────┴──────────────┤
│ C 卡池  │ D 最高分 │ E 决策数               │   ← 三张短数据卡，一行
│ 9 个    │ 81.3    │ 5 项                  │      每张只有：标签 + 大数字 + 一行说明
├────────┴────────┴───────────────────────┤
│ F 最近动过（通栏，最多 3 条）              │
└─────────────────────────────────────────┘

具体要求

A 卡占 8 列、B 卡占 4 列，两卡同高（align-items: stretch），A 内部信息按 flex 纵向分布填满 —— 现在是左卡"还没选我是"占大半卡高、右侧被粉红卡压着，整页重心歪的。
B 卡必须是深色（--kf-ink 系底 + 反白字）。深色卡是这一轮的核心手法：
- 有卡住的人 → 深底 + 橙色小圆点 + 反白数字
- 没有卡住 → 仍深底，但内容换成正向文案 + 一个绿色小点
- 禁止再用粉红/红色整块底色（这是用户点名"颜色太重、空得吓人"的那块）
C/D/E 三张短卡横排一行，等高，每张内容只有三行：小标签（12px 灰）→ 大数字（32px）→ 一行说明（12px 灰）。去掉现在四张汇总卡右侧那些小柱图（kf-spark），它们是纯装饰、还挤。
F 通栏放最近动态，最多 3 条，右对齐时间。
整页纵向间距 24px，区块之间 32px（现在是到处 16–48 混着）。
卡片内边距从 16 → 20px（dr1 的呼吸感来源），但卡内 gap 保持 12px，不要一起放大。

硬约束

交互位置不动：href、data-link、data-stage、data-allstages、kf-spark 若被移除必须连同渲染逻辑一起清干净，不能留死代码。
空状态（未选身份 / 本月无成果 / 无卡住的人）都必须实测走一遍，不许只测有数据的样子。
移动端 393px 必须同步适配：A/B 卡竖向堆叠，C/D/E 三卡变一行或两行，不许横向溢出。

二、把 `kf-glass-card` 的「玻璃」彻底降级

现在叫 glass-card，但用户看的是"色块乱"。规则：

取消所有 backdrop-filter 与半透明面板（Vercel 硬否决 glass effects，且会议室投影会糊）。浮层/抽屉可以保留，普通卡片一律实底。
卡片默认：实底 #fff + 1px 极浅描边 rgba(0,0,0,0.06) + 无阴影或极浅单层阴影。
只有浮层、抽屉、下拉允许有阴影和模糊。
圆角沿用现有三档 8 / 12 / 20，不要再引入新值。

三、字号收敛（v12 遗留，顺带解决）

现在 7 档：11×634 / 12×326 / 13×99 / 14×37 / 16×166 / 20×51 / 32×9。要求 ≤5 档：

11px → 12px   （634 处，最小字号，移动端也读得清）
13px → 12px 或 14px（99 处，看上下文挑，禁止机械替换）
保留：12 / 14 / 16 / 20 / 32

数字用 32px 大号，卡标题 16px，正文 14px，辅助 12px。不许为了凑档位把 32px 降下来。

四、必须先写测量脚本

写 scripts/verify-v15.mjs，只打印不改，逐项输出数字：

Bento 栅格：A 卡宽 / B 卡宽 / 二者高度差（要求差 ≤2px）
B 卡背景色（要求深色，亮度 < 0.35）与文字对比度（≥7:1）
C/D/E 三卡高度差（≤2px）
整页区块间距分布（打印所有相邻区块 gap 值）
卡片内边距实测（要求 20px）
字号档位统计（要求 ≤5 档，且无 11px）
kf-spark 残留计数（要求 0）
移动端 393px：scrollWidth === clientWidth（无横向溢出）、A/B 是否已堆叠
v12 回归：跑 verify-visual-v12.mjs，已达标项不得退步

先跑一遍把改动前的数字打出来，再改。改完再跑一遍，两遍数字都留在 docs/v15-before-after.md 里。

五、纪律

每完成一个区块（A/B → C/D/E → F → 移动端 → 字号）就 git commit 一次，别攒。
任一项做不到就在报告里写「没做到 + 为什么」，不许把没做的说成做了，也不许为凑指标硬改（v12 就是我把「0px 只允许分隔线」写错，你照着凑会毁页面）。
改完自检：这一页现在跟 dr6/dr1 摆在一起，像不像一个时代的？ 不像就继续改。这是唯一标准。

TASK-v15-bento.md 7.4 KB Постоянная ссылка История Исходник