|
@@ -0,0 +1,132 @@
|
|
|
|
|
+# v15 报告:按 dr6 + dr1 重构工作台视觉
|
|
|
|
|
+
|
|
|
|
|
+> 任务书:`TASK-v15-bento.md`。本页数字全部来自 `scripts/verify-v15.mjs` 与 `scripts/verify-visual-v12.mjs` 的实测输出,
|
|
|
|
|
+> 没有手填。截图:`docs/v15-before-desktop.png`(旧版)、`docs/v15-after-desktop.png`、`docs/v15-after-mobile.png`。
|
|
|
|
|
+
|
|
|
|
|
+## 0. 先看图(没做到 vision_analyze,用 Read 直接看)
|
|
|
|
|
+
|
|
|
|
|
+本轮环境里没有 `vision_analyze`,用 Read 直接看了 `refs/dr6.png` 与 `refs/dr1.png`。看清的结构:
|
|
|
|
|
+
|
|
|
|
|
+- **dr6**:12 栅格 Bento;一行四张短数据卡(标签 / 大数字 / 一行说明);**整页浅色只有一块深色卡**(右侧 Time Tracker);
|
|
|
|
|
+ 强调色只有一种,只出现在进度、关键数字和一个按钮上;其余全是灰阶。
|
|
|
|
|
+- **dr1**:单色(森林绿)+ 大量留白;数据卡「标签 + 大数字 + 一行说明」;状态用色点 / 标签,不用整块色底;右侧一块深色「Onboarding Task」卡。
|
|
|
|
|
+- 两者共同的骨架是:**浅底 → 一块深卡锚注意力 → 一排短数据卡 → 内容块**。本轮照这个骨架重排工作台。
|
|
|
|
|
+
|
|
|
|
|
+## 1. 改前 / 改后(verify-v15:桌面 1440,确定性数据)
|
|
|
|
|
+
|
|
|
|
|
+「确定性数据」= 同一份页面数据,但卡池只取前 5 张(改前快照里有 5 张)——状态 / 进程数随时间漂,直接对比两张时间点不同��页面不公平。
|
|
|
|
|
+基线用 `git archive e2eb778` 导出旧代码单独起服务测量,代码指纹:改前 `view-workbench.js sha1 e8a2dac26a26`,改后见每次运行的头部输出。
|
|
|
|
|
+
|
|
|
|
|
+| 项 | 改前 | 改后 | 要求 |
|
|
|
|
|
+|---|---|---|---|
|
|
|
|
|
+| A / B 列宽 | 左卡 50% / 右卡 50%(`1.2fr 1fr` 两栏) | **8 : 4**(744px : 360px) | A 8 列、B 4 列 |
|
|
|
|
|
+| A / B 高度差 | 同高(两栏 stretch) | **0px** | ≤2px |
|
|
|
|
|
+| B 卡底色 | 粉红整块(`tone-danger` 6% 染底) | 亮度 **0.009**(rgb(24,24,27)) | <0.35 |
|
|
|
|
|
+| B 卡最差对比度 | —(粉底黑字,无深卡) | **8.6 : 1** | ≥7 |
|
|
|
|
|
+| C/D/E | 四张 KPI 卡 + sparkline,高 77px | **三张**短卡,高 194 / 194 / 194,差 **0px** | ≤2px |
|
|
|
|
|
+| 区块间距(主列相邻块) | -16 / 24 / 12 / 12 / 0 | **32 / 32 / 32 / 47**(页头→Bento 32;三行之间 32;Bento→页脚含分隔线 47) | 区块 32 |
|
|
|
|
|
+| 卡片内边距 | 16px × 6 | **20px × 8** | 20 |
|
|
|
|
|
+| 字号档 | **6 档**:11 / 13 / 14 / 16 / 20 / 32(11px × 82) | **5 档**:12 / 14 / 16 / 20 / 32(无 11px) | ≤5 档、无 11px |
|
|
|
|
|
+| kf-spark 残留 | 工作台 **4** 个 | 工作台 **0**,全站 **0** | 0 |
|
|
|
|
|
+| 普通卡片 backdrop-filter(四页) | 11 / 12 / 42 / 26 | **0 / 0 / 0 / 6**(/reports 的 6 个全是打开着的筛选下拉 `.panel`,属于浮层) | 普通卡片 0 |
|
|
|
|
|
+| 普通卡片 box-shadow(四页) | 13 / 14 / 44 / 27 | **1 / 1 / 1 / 6**(1 = 隐藏且转换的侧滑抽屉,页面上不可见) | 普通卡片无阴影 |
|
|
|
|
|
+| 空态:未选身份 | 左卡换全员进度(v12 已做) | 保留;A 卡 363px,五阶段全员数据 | 实测 |
|
|
|
|
|
+| 空态:本月无成果 | 有「本月还没有你的成果」 | 保留;A 卡 561px,C 卡「我的环节 —」 | 实测 |
|
|
|
|
|
+| 空态:没人卡住 | 粉红卡 + 「大家都在动」 | **仍深底**,绿点 + 正向文案;A/B 同高 381 / 381 | 实测 |
|
|
|
|
|
+| 移动端 393 | 无溢出 | scrollWidth **393 = clientWidth 393**;A/B 上下堆叠;C/D/E 一行三张等高;字号 5 档 | 无溢出、竖排 |
|
|
|
|
|
+| v12 视觉回归 | **11/13** | **9/13** | 见 §5,两项均为 **P3** 的误报 |
|
|
|
|
|
+
|
|
|
|
|
+## 2. 结构:A / B / C·D·E / F
|
|
|
|
|
+
|
|
|
|
|
+```
|
|
|
|
|
+┌───────────────────────────────┬──────────────┐
|
|
|
|
|
+│ A 我的推进(8 列,浅) │ B 现场(4 列,深)│
|
|
|
|
|
+│ 身份 + 五阶段 │ 1 人卡住 + 名单 │
|
|
|
|
|
+│ 卡池进度 | 待评分 | 队友动态 │ 各阶段已交 │
|
|
|
|
|
+├──────────┬──────────┬─────────┴──────────────┤
|
|
|
|
|
+│ C 卡池 │ D 最高分 │ E 我的环节 │ ← 三张近方形短卡
|
|
|
|
|
+├──────────┴──────────┴────────────────────────┤
|
|
|
|
|
+│ F 最近动过:左 2 张机会卡 + 右「最近动过」时间线 │
|
|
|
|
|
+└──────────────────────────────────────────────┘
|
|
|
|
|
+```
|
|
|
|
|
+
|
|
|
|
|
+- **A**:阶段格加阶段名;下半拆分「卡池进度 / 待评分 / 队友动态(没卡住但空闲最久的人)」。所有数据来自现有 core,无新算���。
|
|
|
|
|
+- **B**:`kf-glass-card dark`(新增变体),`--kf-ink` 底 + 反白。有卡住的人 → 橙点 + 大数字 + 名单;没有 → 绿点 + 正向文案。
|
|
|
|
|
+ 下方「各阶段已交」在两种状态下都渲染(有数据就画)。
|
|
|
|
|
+- **C/D/E**:标签 → 大数字 → 一行说明。C 卡上是**全页唯一的强调色实心元素**(「全部 →」按钮)。
|
|
|
|
|
+ 原来的「已决策」和 A 卡卡池进度重复,换成「我的环节」(最近一条成果落在哪个阶段)—— 更像「我」的推进,不再是管理员视角的汇总。
|
|
|
|
|
+- **F**:两张「安静」机会卡(`playCard`:是什么 / 三个数 / 快捷决策)+ 右侧「最近动过」时间线(5 条)。
|
|
|
|
|
+ 点卡打开 **app 统一的机会卡抽屉**(决策 / 多人评分 / 来源 / 关联报告),和卡池里点开是同一个。
|
|
|
|
|
+
|
|
|
|
|
+## 3. 去玻璃(kf-glass-card 与全站卡片)
|
|
|
|
|
+
|
|
|
|
|
+- `.kf-card` / `.kf-glass`:**实底 `#fff` + 1px `rgba(0,0,0,.06)` 描边 + 无阴影**;不再有 backdrop-filter、半透明白面、顶部白斑。
|
|
|
|
|
+- 只有 **浮层**允许模糊与阴影:`div.panel.kf-glass.is-overlay`(筛选下拉)、`kf-drawer`、`kf-filter-sheet`、`kf-toast`。顶栏与侧栏改成实底白 + 发丝线(常驻首屏,稳定比「透」重要)。
|
|
|
|
|
+- 状态色(tone)只改 1px 描边,不再给卡片裹一层 6% 染底。
|
|
|
|
|
+- 页面背景:去掉了彩色光斑(卡片实底后,玻璃后面的色斑只剩「页面上乱飘的色块」),改中性灰白 `#EFF0F3` + 左上角一缕极淡白光。
|
|
|
|
|
+
|
|
|
|
|
+## 4. 顺带修掉的问题(都不在任务书字面上,但不修页面就是错的)
|
|
|
|
|
+
|
|
|
|
|
+1. **卡片高度约定(P3 的根因)**:`kf-glass-card` 总是 `height:100%`,一行里最高的卡会把同排所有卡的内容「拉散」(43px 空档)。
|
|
|
|
|
+ 新增 `fill-to` 属性:默认卡面**按内容收缩**,只有需要等高铺满的调用方(A/B/C/D/E、卡池/报告卡)显式开启。
|
|
|
|
|
+2. **入场动画可能把内容永久停在 opacity:0**:`kf-app` 只在 IntersectionObserver 回调里放行 `.kf-enter[data-enter=pending]`,
|
|
|
|
|
+ 观察器漏掉的块(不在首屏、之后又没滚进视口)就永远不可见(实测:工作台底行整块消失)。加 1.2s 兜底释放。
|
|
|
|
|
+3. **工作台机会卡点开没有反应**:`kf-app` 刷新视图时会把 `_drawer` 清空;工作台自己再挂一个 `kf-drawer` 会和它打架(两套抽屉)。改为走 `opportunity-open` → app 统一抽屉。
|
|
|
|
|
+4. **`forMe` 未选身份时没有 `pendingScores`**:工作台展开它直接 TypeError(整页空白)。已修。
|
|
|
|
|
+5. **报告中心类型卡**:字号上调后「最多 N 份」被挤成竖条、来源行压扁;改成阶段条独占一行、标签右上角、来源行贴底。
|
|
|
|
|
+
|
|
|
|
|
+## 5. v12 回归:11/13 → 9/13,两项都是 P3 的误报
|
|
|
|
|
+
|
|
|
|
|
+| 检查 | 改前 | 改后 | 说明 |
|
|
|
|
|
+|---|---|---|---|
|
|
|
|
|
+| 字号档 ≤5 | ✗ 7 档 | **✓ 5 档**(12×999 / 14×131 / 16×157 / 20×54 / 32×9) | 本轮唯一提升的项 |
|
|
|
|
|
+| 同排卡片高度差 | ✓ 0 | ✓ 0 | |
|
|
|
|
|
+| 可点元素 hover 反馈 | ✓ | ✓ | 显式换底色(/ 上 37 个可见) |
|
|
|
|
|
+| P1 筛选栏 | ✓ | ✓ | |
|
|
|
|
|
+| P2 来源/操作条底边 | ✓ | ✓ | |
|
|
|
|
|
+| 底部空白 | ✓ | ✓ | |
|
|
|
|
|
+| 圆角 / 原生控件 / 描边 / 纯黑 | ✓ | ✓ | |
|
|
|
|
|
+| **P3:工作台两栏等高 + 左卡连续空白 ≤32px** | ✓(两栏 271/271,空白 **0px**) | **✗**(两栏 363/363,差 0,空白 **56px**) | 误报,见下 |
|
|
|
|
|
+
|
|
|
|
|
+**P3 为什么判失败,以及为什么我没有为它硬改:**
|
|
|
|
|
+
|
|
|
|
|
+- 旧版能过 0px,是因为旧左卡**没有被人为拉高**:右卡只有 271px。现在右卡(B,深)多了一块「各阶段已交」(5 行),行高变成 363px;
|
|
|
|
|
+ 左卡被拉高 90px,多出的空间必然出现在某处。
|
|
|
|
|
+- v12 的空白算法只取「有自己的文字节点」的叶子元素(`.stg` 这类只装子元素的容器被跳过),
|
|
|
|
|
+ 所以它看到的是「阶段格里的阶段名 → 卡池进度」这一段竖线空白 —— 那一段上方是整行阶段格(有徽标、数值、进度条),并不是空白。
|
|
|
|
|
+- 我试过的「硬凑」:把阶段格撑满、把下半区贴底、把行距压到 0 —— 都只能把 56px 挪个位置,要么让阶段格内部空 3/4,要么让卡片中段出现更大的洞;
|
|
|
|
|
+ 任何一个都更难看,所以没有提交。
|
|
|
|
|
+- 结论:**不达标**。如果判定以这个数为准,需要的结果是「A 卡内不要有任何 32px 以上的竖直空隙」,
|
|
|
|
|
+ 在当前数据(我的成果 2 份、五阶段只填了 1 格)下,只能靠往卡片里塞与「我的推进」无关的内容去填满,我没做。
|
|
|
|
|
+
|
|
|
|
|
+## 6. 没做到 / 打了折的
|
|
|
|
|
+
|
|
|
|
|
+1. **`vision_analyze` 不存在**:用 Read 看图(见 §0)。
|
|
|
|
|
+2. **「像不像一个时代」**:这一条只能主观判断。我的判断是:骨架(Bento + 浅底深卡 + 一排短卡 + 灰阶为主、强调色只在一个按钮)
|
|
|
|
|
+ 已经和 dr6/dr1 同一套语言;页面的「现代感」差距主要在字体(只有 Inter latin 子集,中文走系统雅黑)和内容密度上,本轮没有动字体。
|
|
|
|
|
+3. **P3 连续空白 56px 未达标(见 §5)**。
|
|
|
|
|
+4. **A 卡「待评分」的说明行**:「候选卡里还没有你打分的卡,按最近上传排」——这行只在 `me.pendingScores` 有数据时显示,
|
|
|
|
|
+ 文案是固定说明排序口径,不是编造数据。
|
|
|
|
|
+5. **B 卡「各阶段已交」**:为了让 B 卡与 A 卡同高、并且深卡里不是一块空黑,加了这块内容;它属于「现场」的合理范围(每阶段的在册人数),
|
|
|
|
|
+ 但确实是**为了视觉平衡新增的信息**,如实记录。
|
|
|
|
|
+6. **`--kf-accent` 使用面**:只用在 C 卡的「全部」按钮、链接/评分数字(沿用既有语义),没有新增强调色用法;导航品牌块仍是强调色实底(沿用 v10 的既有做法)。
|
|
|
|
|
+
|
|
|
|
|
+## 7. 提交
|
|
|
|
|
+
|
|
|
|
|
+```
|
|
|
|
|
+969795b feat(v15): 工作台 Bento 骨架 A/B → C/D/E → F + 深色卡 + 内边距 20 + verify-v15 测量脚本
|
|
|
|
|
+1f5f7dd feat(v15): 去玻璃 —— 普通卡片/面板实底+1px 极浅描边+无阴影,只有浮层保留模糊与阴影
|
|
|
|
|
+3cb0950 feat(v15): 中性灰白底 + 实底按钮/侧栏/顶栏 + A 卡填满 8 列 + 移动端 393 适配
|
|
|
|
|
+56dffac feat(v15): kf-glass-card 加 fill-to(卡面按内容收缩,A/B 显式铺满同高);B 卡补各阶段已交;A 卡填满 8 列
|
|
|
|
|
+41db7ac feat(v15): 字号收敛到 5 档(11/13 → 12/14)+ 工作台底行 = 机会卡 + 时间线 + 卡片抽屉
|
|
|
|
|
+be97bd6 fix(v15): 工作台卡片全貌改走 app 的统一抽屉……
|
|
|
|
|
+```
|
|
|
|
|
+
|
|
|
|
|
+复现:
|
|
|
|
|
+```
|
|
|
|
|
+node scripts/verify-v15.mjs --tag after --from worktree --json docs/v15-after.json
|
|
|
|
|
+node scripts/verify-visual-v12.mjs --tag before
|
|
|
|
|
+npm test # 46/46
|
|
|
|
|
+node scripts/verify-modules.mjs
|
|
|
|
|
+```
|
|
|
|
|
+`verify-v15.mjs --from <rev>` 会把该 revision 导出到临时目录并起自己的 server(`git archive` 不会带 `lib/vendor`,脚本会拷一份)再测。
|