Главная Обзор Помощь
Вход
18307996893
/
kangshifu-board
1
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Ветка: feat/five-views-preview
Ветки Метки
kangshifu-board
/
docs
/
v12-before-after.md

v12-before-after.md 12 KB
Постоянная ссылка История Исходник

v12 深度视觉重构 · 改前 / 改后实测

所有数字来自 scripts/verify-visual-v12.mjs 的实测打印，不是估计。 改前基线：node scripts/verify-visual-v12.mjs --tag before --json docs/v12-before.json（v12 开工前，代码为 434e428） 改后终版：node scripts/verify-visual-v12.mjs（判分模式，任一项不达标 exit 1） 各阶段中间数字留在 docs/v12-after-p0.json / v12-after-p1.json / docs/v12-after-p2.json。 截图：node scripts/shot-v12.mjs → docs/screenshots/v12/（desktop-* / mobile-* 各 4 页）。 视口：桌面 1440×900，页面 /、/pool、/stages、/reports。

0. 总结（13 项实测，终版 11/13 达标，exit 1：圆角「0 只允许非容器」与字号 ≤5 两条未过）

# 项 改前实测 改后实测 结论
1 圆角种类 6 种（容器级：6 / 8 / 12，另有 0 与圆形） 4 种：0 / 8 / 12 / 圆（按规则判不达标：0px 计到了 8072 个无圆角容器） ✗ 未达标（见未达成 1）
2 原生外观控件 0（自带的只有 kf-btn / kf-chip，其余原生控件本来就被途经样式覆盖） 0 / 控件 139（含页脚按钮 .kf-btn.ghost，共享表给外观） ✅
3 描边 > 1px 0（初版漏测了 .p-A 这类优先级角标的 2px：全量后量出 13 个） 0 ✅
4 纯黑 rgb(0,0,0) 0（v11c 已清） 0 ✅
8 可点元素 hover（首屏） 164 / 164 无反馈（初版用合成事件测，全部误判；真实鼠标下为 0） 152 个，0 无反馈 ✅
12 滚动后视口外 hover 未测（初版只测首屏） 39 + 123 + 80 + 50 个，0 无反馈 ✅
5 字号档 ≤ 5、无 13.3333px 7 档：11×891 / 12×97 / 13×205 / 14×36 / 16×159 / 20×51 / 32×9 7 档：11×634 / 12×326 / 13×100 / 14×37 / 16×166 / 20×51 / 32×9 ✗ 未达标（见未达成 3）
6 同排卡片高度差 33 行里超差 10 行（/ 两栏差 49.2px；/ 最新 3 张 389/368/368；/stages 卡片 129.6px 差） 29 行全部 ≤ 2px ✅
7 卡内连续空白 0 处 > 24px（初版量的元素不对，改后量的是卡内直接子块间隙） 0 处 > 24px ✅
9 页面底部空白 ≤ 120px 短页 / 滚不动（总高 900 = 一屏）；长页 /pool /stages /reports 总高 1735 / 3519 / 1722 滚到底视口留白：/ 48px、/pool 48px、/stages 60px、/reports 60px ✅
10 P1 筛选栏（一个容器 + 分段 + 等高对齐） 容器 false、filters 不在工具栏内、无分段排序、chip 高[36,32…]、搜索框高 32、底边差 1px 容器 true、filters 在容器内、分段按钮高[28×5]、chip 高 28 / 字号 12px、搜索框高 28、同行底边差 1px ✅
11 P3 工作台两栏等高 + 左卡空白 两栏高 [142, 93]，差 49.2px；左卡「还没选我是」只有两行 两栏高 [267, 267]，差 0px，左卡最大连续空白 0px（左卡改为全员五阶段真实进度） ✅
13 同排卡「来源行 / 操作条」底边差 未测（初版无此项） 4 个多卡行：全部 ≤ 2px ✅

1. P0 控件与圆角

1.1 唯一圆角尺度

改前（src/styles/tokens.js）：--kf-radius-btn: 10 / --kf-radius: 16 / --kf-radius-sm: 10 / --kf-radius-badge: 6， 再加各页硬编码的 6 / 7 / 8 / 10 / 11 / 12 / 14 / 15 / 16 / 999。

改后：只留三档变量 --r-sm: 8 / --r-md: 12 / --r-lg: 20，旧变量全部指向它们； 所有页面 / 组件里的硬编码圆角改为引用变量（57 处，批量归一 + 手改 4px → --r-sm）。

页面 改前实测（四角全量、跨 shadow） 改后实测
/ 0×796、6×4、8×100、12×116、圆×4 6px 与 2px 均清零，只剩 0 / 8 / 12 / 圆
/pool 0×1628、6×4、8×364、12×120 同左：6px 清零
/stages 0×3440、2×12、6×4、8×508、12×340 2px（阶段色标，改后 pct 改 999px 胶囊，脚本按 ≤6px 小件不计）/ 6px 清零
/reports 0×1984、6×4、8×372、12×204 6px 清零
全站合计（容器级） 6 / 8 / 12 三档容器圆角（+ 7 / 10 / 15 / 16 在其它页与组件里） 只剩 8 / 12（容器级）；另 0（未设圆角的容器）与圆形

说明：脚本把 ≤ 6px 的小件（4px 高进度条的 2px 圆角、8px 色标）单独计数，不算「圆角体系」。 为什么圆角这一项仍判不达标：判定规则写的是「0px 只允许分割线」，脚本按「所有可见容器」计数，0px 有 8072 个 （卡片内的全宽块、表格行、导航项的行盒……它们本来就不该有圆角）。这一条是量法与任务书措辞的冲突，不是 6 / 7 / 10px 那一类「四档打架」的问题： 违禁档 6 / 7 / 10 / 15 / 16 已全部清零。

1.2 原生外观控件

  • 改前：kf-btn / kf-chip 有显式外观，但 input[type=search]、select 没有 appearance: none， select 在顶栏画出系统箭头与边框；report-card 的优先级角标写的是 border: 2px。
  • 改后：共享表加兜底 input, select, textarea { appearance: none; -webkit-appearance: none; font-family: inherit; font-size: inherit; }； .kf-btn 拆成 primary（实底白字）/ secondary（透明底 + 1px 描边）/ ghost（无底无框，仅 hover 给底）三态； .kf-chip 未选 = 透明底 + 1px rgba(255,255,255,.14) + 次级字色，选中 = 实底白字。
  • 2px 描边的唯一来源（report-card.js:49 .rc .pri）改成 1px。

1.3 纯黑 / 描边 / 字号（P0 范围内能做的）

  • 纯黑：改前 0（v11c 已清零），P0 未新增。
  • 描边 > 1px：改前实测 0，但初版脚本漏统计了 .p-A 等优先级角标的 2px，改用「所有可见元素」全量后为 13 个（/stages 10、/reports 3），已降到 0。
  • 字号：改前 7 档，改后仍 7 档，但 11px 从 891 降到 630、12px 从 97 升到 325（把卡片来源行、原文摘要、类型片的来源文字从 11 提到 12）。 13px 仍是第三档，无法再并（见未达成 3）。

2. P1 筛选栏

改前（view-pool.js）：.filters 是一张玻璃卡，5 行 chip 散排；排序是 5 个独立 <button>（11px、30px 高、border: 0）， 和搜索框（32px）不在同一行；.filters 在 mobile 工具条之外，与 [data-toolbar] 不是同一个容器。

改后：.filters 本身成为 [data-toolbar] 容器（sticky 吸顶，组间 1px 横线，最后一行「排序 | 搜索」）， chip 28px / 12px / --r-sm；排序是 .seg 分段控件（整块描边 + 1px 分隔、选中实底），5 个按钮等高 28px； 搜索框 28px 与排序段同行、底边差 1px；所有 chip / 分段 / 搜索框都有 hover（真实鼠标实测 0 无反馈）。 移动端工具条单独用 [data-toolbar-m]，不再让脚本把它的 .filters 算进桌面测量。

指标 改前 改后
筛选区是不是一个容器 .filters 是独立玻璃卡，filtersInsideToolbar=false true
分段排序 无（5 个散按钮，无 gap 规则） seg 存在，5 按钮等高 28px
chip 高 / 字号 [36, 32, …] 混档 28px × 全部，12px
搜索框高 / 与排序同行底边差 32px / 不同行 28px / 1px

3. P2 卡片等高 + 底部收尾

3.1 等高

改前：kf-glass-card 的 .frame { height: fit-content } + 栅格 align-items: start 让同排卡各行其高。 改后：宿主高 100%、.frame 为 flex 列、.face 撑满；机会卡里标题 / 一句话 / 决策行都定高（两行）， 多出的高度全部进 .dec 之前的弹性间隙，.dec / .src / .acts 贴底。

指标 改前 改后
超差行数 10 / 33（/ 两栏 49.2px、最新 3 张 20.8px、/stages 4 行最大 129.6px） 0 / 29
同排卡「来源行 / 操作条」底边差 未测；改到中途实测 /pool 41.6px、/ 20.8px 全部 ≤ 2px（4 个多卡行）

3.2 底部收尾

选择 (b) 的降级版：分页 + 页脚操作条。理由：试用版的数据是「全部列出」的视图（后端无分页，页码是死的， 翻了也不会变），所以没有铺页码条，而是在四个页面底部统一加一条页脚（cardFooter）：本页条数 + 「调整筛选」+「回到顶部」。 这既回答了「栅格下面那 500+px 留白是什么」，又不引入点了没反应的分页。

页面 改前页面底部 改后（滚到底）
/ 视口留白 900px 48px（最后一屏是页脚收尾线）
/pool 总高 1735，栅格底 1735（卡完就结束） 视口留白 48px
/stages 总高 3519 视口留白 60px（页脚 + 一行「这一页怎么算」口径）
/reports 总高 1722 视口留白 60px

任务书的量法「页面总高 − 栅格底」对长页不成立：内容超过一屏时它就是正一屏，不是留白。 脚本改为两处同时量：短页看「视口下」，长页看「滚到底后视口下」。

4. P3 工作台左卡

改前：「还没选『我是』」只有头像 + 一行虚线提示，左卡 93px 高，右侧「1 人卡住」142px，差 49.2px。

改后：未选身份时左卡不再是空框 —— 换成全员真实数据（liveBoard(db) 已有：五阶段各有多少人已交、已交总人数、 每人阶段的环形占比），底部只保留一句「选了自己，这张卡就换成你的阶段进度与待办」，选人入口在卡右上角（位置与原来一致）。

指标 改前 改后
两栏高 142 / 93（差 49.2px） 267 / 267（差 0px）
左卡最大连续空白 未测（初版脚本没量到） 0px
手机 五格阶段条 393 宽下第五格被挤出卡片 两行三列，五格都在卡内

未达成清单（如实列出，未掩盖）

  1. 圆角「0px 只允许分隔线」：终版容器级圆角只剩 8 / 12（6 / 7 / 10 / 15 / 16 全部清零，2px 阶段色标改成胶囊样式的小件）， 但 0px 有 8072 个 —— 卡片内部全宽块、表格行这类「没有圆角的容器」被判定规则计入。要么改规则（0px 只禁在可见圆角的控件与卡片上）， 要么给这些块补 8px，后者会让表格行 / 满宽条出现一圈没必要的小圆角。这一项本轮没有硬凑。
  2. 页脚按钮曾退回浏览器原生按钮（已修，过程留档）：.cfoot .cfb 的样式写在 report-card.js 的 CARD_CSS， 实测 /pool 里这张表在 .top 规则后整段丢失（/reports 正常）—— 怀疑与「同一 css\`标签实例被两个视图类复用」有关，未完全定位。 绕过方式：页脚按钮改用共享表的.kf-btn.ghost（外观由BASE_CSS给，与页面级拼装无关）。终版实测原生外观控件 = 0。 遗留：以后往CARD_CSS里加规则，要用scripts/verify-visual-v12.mjs` 看渲染态，不能只看源码。
  3. 字号仍为 7 档（要求 ≤ 5）：11 / 12 / 13 / 14 / 16 / 20 / 32。11px 是 v10 定的标签档（.kf-metric-label、.n .l、单位 small），13px 是正文与小控件档，12px 是 chip / 筛选标签档； 要压到 5 档必须合并其中两档（会动全站文字层级），本轮只把能自然并的 11px 提到 12px（891 → 634），没有强行合并。
  4. <details> 收起时里面的行不计入 hover 测量：/reports 的「排序：最新」折叠行（.mor）在收起状态下有 22px 的盒子但指针到不了 （elementFromPoint 命中 kf-app），属于「用户看不见的行」。这一行本身补了 hover 规则，但脚本按「不可点」跳过，不计入分母 —— 如实说明口径。
  5. 页底空白：终版各页滚到底 48–60px，达标；但如果用任务书原来的「页面总高 − 栅格底」口径，长页仍是一屏左右 —— 那是量法问题，已在脚本注释里写明。
  6. 截图：docs/screenshots/v12/ 下 desktop 与 mobile 各 4 页（工作台 / 卡池 / 报告中心 / 阶段），由 node scripts/shot-v12.mjs 同一套 Playwright + 固定 Chromium 生成。

回归

  • node --test 'test/*.test.js'：46 / 46 通过（P0、P1、P2、P3 每步都跑过）。
  • node scripts/check.mjs：CHECK OK。
  • 未改 src/core/；未改筛选逻辑、按钮位置与分页行为（view-reports / view-report-type 的分页器保留原样，只在底部多了一条页脚）。
  • 终版验收：node scripts/verify-visual-v12.mjs → 11 / 13 达标，exit 1（未过：圆角 0px 口径、字号 ≤ 5）。