v16-before-after.md 9.7 KB
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。