kangshifu-board/docs/v16-before-after.md

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。