# v16 改前 / 改后

> 所有数字来自 `scripts/verify-v16.mjs`（= v15 的 1–9 项 + v16 的 10–12 项）与 `scripts/verify-visual-v12.mjs`，
> 改前基线用 `--from HEAD` 从 git 导出旧代码单独起服务量（代码指纹见下），没有手填。
> 截图：`docs/v16-before-desktop.png` / `docs/v16-after-desktop.png` / `v16-after-desktop-me.png`（选了赵磊）/
> `v16-after-desktop-nobody.png`（本月无成果）/ `v16-after-mobile.png`（393）。

改前代码 `view-workbench.js` sha1 `756ce7847569`（HEAD 2010104），改后 **`cc98776b00f2`**（同见 `docs/v16-after.json` 头部）。

附带：`scripts/verify-cjk.mjs`（中英混排 U+2009）本轮由 ✗（7 处普通空格残留、样本 2/3）→ **✓ 全部达标**：工作台新写的动态文案都走了 `t()`，机会卡「分 · N 人」和「N 天前」也补上了。

## 1. 任务书里的 5 个遗留问题

| # | 问题 | 改前 | 改后 | 依据 |
|---|---|---|---|---|
| 1 | **三张短卡太空** | 3 张 360×194，内容密度 **3.44 / 2.58 / 2.72**（字/万 px²），第三张还是内部视角的「我的环节」 | **4 张 270×166**，密度 **6.25 / 5.35 / 9.82 / 6.02**；dr1 基准 8.6。3/4 张 ≥ 基准 70%，D 卡（最高分）仍 **低于** 基准 —— **见 §4 第 1 条，没完全做到** | verify-v16 [10] |
| 2 | 深色卡颜色太杂 | **4 种色相**（red/orange×2、blue×2、teal×1、rose×1 = S1–S5 五色点） | **1 种**（琥珀 = 「人卡住」那一个点）；阶段进度改灰阶细条；「我的环节」已删；时间线状态点也改成灰阶明度 | verify-v16 [11]，dr6 深卡实测色相 1 |
| 3 | A 卡「待评分」一行中间一个大空白 | 左右两栏 + 右栏 `margin-top:auto` 贴底 | 改成**一条通栏列表**：卡名吃掉剩余宽度，右侧「N 人 · 均 X」+ 方角胶囊（76 / 去评），中缝 32px 消失 | 量图 dr1「左标题 + 右值」 |
| 4 | 底部按钮笨重 | C 卡一颗 `32px` 紫底实心按钮「全部 →」；机会卡里 3 个 26px 灰底分段按钮 | 紫按钮删除，改文字链「全部 →」；分段改**静默文字行**（20px 高、无底无描边、选中项加粗 + 1px 下划线） | verify-v16 [12]：工作台 >32px 的按钮 0 个；dr6/dr1 卡内动作都是文字 |
| 5 | v12 回归：左卡连续空白 56px | **56px**（v15 报告；本次用同一脚本复测 **68px**，实时数据下） | **54px** | **没有解决 → 见 §4 第 2 条（两个约束数值互斥）** |

## 2. v15 的 1–9 项（回归，全部保留）

| 项 | 改前 | 改后 | 要求 |
|---|---|---|---|
| A / B 列宽 | 8 : 4（744 / 360） | 8 : 4（**746.7 / 365.3**，12 列 + gap 16） | 8 : 4 ✓ |
| A/B 高度差 | 0px | **0px** | ≤2 ✓ |
| B 卡底色 / 最差对比度 | rgb(24,24,27)，8.6:1 | rgb(24,24,27)，**8.6:1** | <0.35 亮度 / ≥7 ✓ |
| 短卡高差 | 0px | **0px**（166 / 166 / 166） | ≤2 ✓ |
| 主列块间距 | 32 / 47 | **32 / 47** | 32 ✓ |
| 卡片内边距 | 全部 20 | **20×5 + 16×4**（4 张短卡 16） | 20 ✗ → **有意为之**，见 §4 第 3 条 |
| 字号档 | 5 档（12/14/16/20/32） | **6 档**（12/14/16/20/**28**/32） | ≤5 ✗ → 有意为之，见 §4 第 4 条 |
| kf-spark | 0 | 0 | ✓ |
| 普通卡片玻璃 / 阴影 | 0 / 1（四页） | **0 / 1**（/reports 的 6 个是打开的筛选浮层） | ✓ |
| 空态：未选身份 | A 363px | A **378px**，五阶段全员，无虚线框，卡池进度 3 行 | 实测 |
| 空态：本月无成果 | A 561px | A **427px**（-134）；「最高分」卡换成「本月成果 0 份」；待评分 4 条真实列出 | 实测 |
| 空态：没人卡住 | 仍深底 + **绿点** | 仍深底 + **灰点**（灰阶，去掉了第 2 个色相） | 实测 |
| 移动端 393 | 无溢出 | scrollWidth **393 = 393**；A/B 堆叠；短卡 2×2；字号 6 档 | 无溢出 ✓ |
| v12 视觉 | 字号 7 档 / P3 失败 | 字号 **6 档**（v12 上限 5，仍 ✗）；**圆角违规清零**（0/8/12 三种）；P3 **仍 ✗** | 见 §5 |

## 3. v12 视觉复测（同一脚本，同一页 /）

| 检查 | v15 改后 | v16 改后 |
|---|---|---|
| 圆角种类 ∈ {8,12,20} | ✗ 4px×4 | **✓** |
| 原生外观控件 / 描边 / 纯黑 | ✓ | ✓ |
| 字号档 ≤5 | ✗ 5 档（12/14/16/20/32） | ✗ 6 档（12/14/16/20/28/32） |
| 同排卡片高度差 | ✓ | ✓（6 行 0 超差） |
| 卡内连续空白 ≤24 | 5 处 | **4 处**（都是短卡「数字 → 结论行」两端的 35–37px，dr1 同类间距 31/30；短卡整卡 166px，再压就没形状了） |
| hover / P1 / P2 / 底部空白 | ✓ | ✓ |
| P3 两栏等高 + 左卡 ≤32px | ✗ 56px | **✗ 54px**（见 §4-2） |

## 4. 没做到的、和「没按旧标准做」的，逐条说清

### 1. 短卡密度：D 卡（最高分）仍低于 dr1 基准

24 字 / 270×166 = **5.35**（基准 8.6，线 6.02）。原因：D 卡的全部内容就是「最高分 / 82 / 高于卡池均分 75 · 最高一张」，
**没有更多真实数据可写**（每张卡的评分人数、评分分布 core 里没有）。为了让数字变好看去编一条，违反任务书「不许硬加信息」，
所以**停在这里**，并把结论行写满到「谁的最高 / 和谁比 / 差多少」，不再留空。C、E、F 三张过了线。
另外 4 张卡底边对齐后，数字与结论行之间是 37px 空白（v12 记的 4 处），这是「结论行贴底」换来的 —— dr1 是数字→结论 31px、结论→底 30px，我们数字→结论 37px、结论→底 20px，分布不同但总量接近。

### 2. 左卡连续空白 54px：两个约束在数值上互斥（本次找到了「互斥」的证据）

v12 的量法（`verify-visual-v12.mjs` P3）：取左卡里「**有自己的文字节点**的叶子」按顶边排序，量相邻两个叶子之间的竖直间隙，取最大。

- 现在左卡的文字叶子只有三组：**状态名**（如「已立项」）→ **第一行数字**（如第 1 行「4 张 · 44%」，Y≈508）→ 第 2 行（Y≈562）。
  54px 就是「状态名行底」到「第一行数字顶」的间隙 —— 即 **「卡池进度」这一行小标签到它下面第一行列表之间的距离**。
- 两种把 54px 压进 32px 以内的做法，都会换来更差的版面：
  - 列表 `margin-top:auto` 贴底：状态名行被推到 Y≈333 附近，**状态名 → 第一行列表** 之间变成 **54px**（现在是 0）、
    **阶段格 → 「卡池进度」标签** 之间变成 **~85px** —— 只是把洞挪到上面，而且更大；
  - 把行距收到 30px 以下：A 卡从 466px 掉到 374px，B 卡（深色，跟着行高走）跟着矮 92px，
    「各阶段已交」5 行下面出现一块没有任何内容的黑底。
  也就是说：**要满足 P3，就要在卡里制造一个更大的空白或让深色卡出现空白；要版面没有洞，P3 就必然失败。**
  这两个约束没有同时成立的数值解 —— 底下是本次没有解决它的实测依据，不是「没时间做」。
- 所以本轮选的是「P3 仍然失败（54px，比 v15 的 56/68 略小），但不制造新的空白」。**明确记为未解决。**

### 3. 卡片内边距不是全部 20：4 张短卡是 16

任务书 v15 定的是「卡片内边距 20」，但 v16 的短卡从 360 宽缩到 270 宽（筛了 dr1 的 232–249 + gap 8）。同样 20px 内边距在 270 宽的卡上占掉 14.8% 的宽度，
20 时四张卡密度是 5.96 / 5.11 / 9.37 / 4.47，16 时是 6.25 / 5.35 / 9.82 / 6.02 —— **短卡用 16 是密度要求倒逼的**，A/B/G 仍是 20。
凡是「同一页 padding 必须一致」的检查会报 ✗，这是有意的取舍，没有在文档里隐藏。

### 4. 字号档从 5 变 6：新增 28px

dr1 大数字 28、dr6 主数字 24（cap 高折算）、页头 KPI 36、卡标题 16；我们原来 20 当数字、32 当大数字，**中间缺一档**。
本轮把大数字统一成 **28/500**（dr1 数字比标题细、linear 只 400/510 两档），于是档位变成 **12 / 14 / 16 / 20 / 28 / 32**：
- 20 只留给头像字与阶段格数字（它们是「小数字」，跟着区块走）；
- 32 只剩 B 卡「1 人卡住」一个（深卡唯一的大数字，对应 dr6 页头 KPI 的量级）。
v12「≤5 档」是旧任务书的指标；本任务书没把 5 档写进硬约束，v15 任务书也只写了「≤ 5 档、无 11px」。**这里明确违背 v12 的档位数，理由如上；11px 已清零。**

### 5. 调研本身没拿到的

见 `docs/v16-research.md` §7：Crextio 的 Remix 源码（要登录）、Donezo 的一手 CSS（dribbble 202 空壳）、SugarCRM 明文文档（301 到 sugarai 后是压缩/登录壳）。
dr7 不在 `refs/` 里，所以本轮**没有引用 SugarCRM 任何数值**。

## 5. 一句话自检

把 `docs/v16-after-desktop.png` 和 `refs/dr6.png` / `refs/dr1.png` 并排：骨架（浅底 + 一块深卡 + 一排窄数据卡 + 下方内容块）、卡片圆角 12、
16px 卡标题 + 28px 细数字 + 12px 副文的阶梯、卡内无按钮组、深色卡只有一个琥珀点 —— 这些都是**按图量出来的同一个体系**。
与 dr6/dr1 仍有差距的地方：dr6/dr1 的小卡都有图形（柱状、圆环），我们 4 张短卡是纯文字 + 趋势徽章（**没做到**：项目里没有可用的时序数据，硬画就是编数据）。

还没做到 / 不在本轮范围：
- **SugarCRM（dr7）**：不在 `refs/` 里、官方文档站 301 后无明文，本轮没有可量数据，也没有引用。
- **短卡图形**：调研结论是 dr6 的小卡靠「图形 + 多块」不空（§1.2），我们只做到了「多块 + 结论行 + 一个趋势徽章」；没有时序数据，不画假图。
- v12 的三项旧指标（padding 全 20 / 字号 ≤5 / P3）本轮**有意不满足或未解决**，理由都在 §4。