v11b-audit.md 6.3 KB

v11b 15 条反例自查(补交,v11c P1)

数据来源:node scripts/audit-examples.mjs --json docs/v11b-audit.json(v11c 重新跑过一遍,61 个源文件 + 运行时 computed + 工作台整屏像素采样)。 每条给「命中 / 未命中」、证据(文件:行号 或实测数值)、以及命中的判定(可接受 / 已修 / 未修)。

# 反例 命中 判定
1 装饰性渐变 / 渐变文字标题 否 —
2 glow 光晕 / blob / 条纹 / 网格背景 否 —
3 玻璃效果用在所有卡片上 是 可接受(暂不修)—— 换成实白面属于视觉改版
4 彩色左边框告警条 否 —
5 emoji 当图标 否 —
6 max-height:999px 展开动画 否 —
7 transition: all 否 —
8 阴影超过 3 档 否 —
9 纯 #000 / #FFF 否 —
10 所有间距同一个值 否 —
11 box-shadow 做凸起 / 凹陷 否 —
12 hover 跳动 > 2px 或放大 否 —
13 圆角 > 16px 是(圆形元素) 可接受(圆形,不是设计圆角)
14 强调色面积 > 5% 否 —
15 所有卡片同时入场无错峰 否 —

命中 2 条,其中 0 条属于「已修」、2 条属于「可接受」。


逐条

1. 装饰性渐变 / 渐变文字标题 —— 未命中

渐变文字(background-clip: text):0 处。源码里出现的 linear-gradient 只有两类:玻璃芯片边(--kf-glass-chip / --kf-edge-chip,src/pages/card-toolbar.js:53-55)与背景光场,不是标题上的花活。条形的「蓝→紫渐变」在 v11 已删,改成单色(src/pages/view-stages.js:64,.ov .bar i { background: var(--tone, …) })。

2. glow 光晕 / blob 色块 / 条纹纹理 / 网格背景 —— 未命中

运行时非 0 扩散的发光阴影 0 处、conic-gradient 0 处、repeating-linear-gradient 0 处。背景光场是 kf-app::before 上 5 个 radial-gradient(项目设计基色,64s 极慢漂移),属于背景层而不是卡片旁的装饰 blob。

3. 玻璃效果用在所有卡片上 —— 命中(可接受,暂不修)

  • 内容卡 kf-glass-card 仍是「白面 .72 + backdrop-filter: blur(8px)」:工作台 .grid2 两张卡(src/pages/view-workbench.js:172-173)、成员页 .gcard(src/pages/view-members.js:90)、机会卡外壳、各页筛选卡都走它。
  • 浮层也是玻璃:导航 aside.side.kf-glass.is-panel(src/layout/kf-nav.js:128)、kf-drawer、手机筛选 sheet(src/pages/filter-sheet.js:94)。
  • 即反例描述成立:玻璃没有限定在浮层。未修:任务书说「内容卡应为实白面 + 发丝描边」,这是视觉改版;v11c 是架构收尾,明确「不是视觉改版」「不要改任何视觉参数」。留到下一轮视觉任务。玻璃光场依赖宿主透明(见 kf-glass-needs-transparent-host),换实白面要连带改 backdrop-filter 链路,不能在收尾轮顺手做。

4. 彩色左边框告警条 —— 未命中

border-left-color ≠ border-top-color 的运行时元素:0 处。告警样式 .alert 改成 6% 同色染色 + 1px 同色描边(src/styles/tokens.js 的 .alert 规则)。

5. emoji 当图标 —— 未命中

图标全部来自 src/components/icons.js(24×24 SVG 路径,stroke 1.9)。文本里出现的「→」「·」「↗」「▲」是排版标点(箭头 / 间隔点 / 增量三角),不是 emoji 字符(U+2192 等,So 类)。

6. max-height:999px 展开动画 —— 未命中

grep -rn "max-height: *999" src → 0 处。展开用 grid-template-rows: 0fr → 1fr(src/pages/report-card.js:73,运行时实测 .detail 闭合 20px 0px → 展开 20px 41.59px)。

7. transition: all —— 未命中

源码 0 处;运行时遍历全部 shadow root,transition-property 为 all 的元素 0 个(共扫描 405 个带过渡的元素)。

8. 阴影超过 3 档 —— 未命中

令牌层 --elev-1/2/3 共 3 档;组件只引用语义名。运行时(静止 + hover)阴影几何去色后共 4 种:0 1px 2px 0(1px 描边层 --ring-1,不算投影)、0 12px 32px -8px(elev-3)、0 -12px 32px -8px(抽屉上浮),以及静止态无阴影。投影几何 3 种,未超档。

9. 纯 #000 / #FFF —— 未命中

computed color / background-color 为 rgb(0,0,0) 的元素 0 处;#FFF 只在 --kf-ink-inv(深色底反白文字)里出现,作为元素背景的纯白 0 处。

10. 所有间距同一个值 —— 未命中

版式距离四档:卡内 padding 16 / 卡内 gap 12 / 卡片之间 24 / 区块之间 48(令牌 --kf-space-card / --kf-space-in / --kf-space-card-gap / --kf-space-section,src/styles/tokens.js;使用见 src/pages/shared.js 的 .p-sec 注释)。另用 4 / 8 做行内小缝(4pt 栅格)。详见 docs/v11b-spacing.txt 与 scripts/audit-spacing.mjs。

11. box-shadow 做凸起 / 凹陷 —— 未命中

拟物:3D 凸起 / 凹陷阴影 0 处。inset 阴影只有 --kf-hi(两条 1px 内高光,src/styles/tokens.js:143)与抽屉顶边柔光,是发丝高光不是拟物浮雕。

12. hover 跳动 > 2px 或放大 —— 未命中

真实指针悬停后 transform = matrix(1, 0, 0, 1, 0, -1):平移 -1px,缩放 1(无放大);静止态 none。过渡 150ms。

13. 圆角 > 16px —— 命中(可接受)

设计圆角令牌 --kf-radius: 16px。运行时最大值 50px,全部来自圆形元素:头像、进度环外框(4 个)。圆形不是设计圆角,判定可接受;没有把圆形改成 16px 方形。

14. 强调色面积 > 5% —— 未命中

工作台 1440×960 首屏截图里接近强调色(#5B5BD6 系:蓝 ≫ 红、R≈G)的像素占比 0.36%。阈值 5%。

15. 所有卡片同时入场无错峰 —— 未命中

.kf-enter 的 animation-delay 实测:["0s","0.04s","0.08s","0.12s","0.16s","0.2s"] 等阶梯(--i × 40ms,src/styles/tokens.js:438 的 .kf-enter),时长 400ms;kf-app 用 IntersectionObserver 把首屏外元素挂住、滚到视口才播。


复现

node scripts/audit-examples.mjs --json docs/v11b-audit.json   # 15 条 + 动效 A1-A7
node scripts/audit-spacing.mjs                                # 四档间距