v11b-audit.json 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
  1. {
  2. "motion": {
  3. "runtimeTransitionAll": 0,
  4. "runtimeMaxHeight999": 0,
  5. "hover": {
  6. "before": "none",
  7. "after": "matrix(1, 0, 0, 1, 0, -1)",
  8. "shadow": "rgba(16, 24, 40, 0.06) 0px 2px 8px -2px, rgba(16, 24, 40, 0.06) 0px 0px 0px 1px"
  9. },
  10. "hoverMatrix": "matrix(1, 0, 0, 1, 0, -1)",
  11. "roll": {
  12. "total": 4,
  13. "rolling": [
  14. "23",
  15. "80",
  16. "41"
  17. ],
  18. "duration": "kf-roll 0.65s cubic-bezier(0.4, 0, 0.2, 1)"
  19. },
  20. "staggerDelays": [
  21. {
  22. "y": 164,
  23. "delay": "0s",
  24. "dur": "0.4s"
  25. },
  26. {
  27. "y": 164,
  28. "delay": "0.04s",
  29. "dur": "0.4s"
  30. },
  31. {
  32. "y": 164,
  33. "delay": "0.08s",
  34. "dur": "0.4s"
  35. },
  36. {
  37. "y": 164,
  38. "delay": "0.12s",
  39. "dur": "0.4s"
  40. },
  41. {
  42. "y": 164,
  43. "delay": "0.16s",
  44. "dur": "0.4s"
  45. }
  46. ],
  47. "staggerRows": 5,
  48. "detailRows": {
  49. "closed": "20px 0px",
  50. "open": "20px 41.5938px"
  51. },
  52. "reducedDurations": [
  53. "1e-05s",
  54. "anim:1e-05s"
  55. ]
  56. },
  57. "examples": [
  58. {
  59. "no": "A1",
  60. "name": "transition: all",
  61. "hits": [],
  62. "count": 0
  63. },
  64. {
  65. "no": "A2",
  66. "name": "max-height: 999px 展开动画",
  67. "hits": [],
  68. "count": 0
  69. },
  70. {
  71. "no": "A3",
  72. "name": "hover 时 scale > 1(静态)",
  73. "hits": [],
  74. "count": 0,
  75. "note": "源码里出现的 scale(0.985) 是按下时的缩小,不是 hover 放大"
  76. },
  77. {
  78. "no": "A5",
  79. "name": "列表进场错峰 40ms(animation-delay: calc(var(--i) * 40ms))",
  80. "hits": [
  81. {
  82. "file": "src/styles/tokens.js",
  83. "line": 438,
  84. "text": ".kf-enter { animation: kf-enter 400ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay:"
  85. }
  86. ],
  87. "count": 1
  88. },
  89. {
  90. "no": "A6",
  91. "name": "展开收起 grid-template-rows: 0fr → 1fr",
  92. "hits": [
  93. {
  94. "file": "src/pages/report-card.js",
  95. "line": 73,
  96. "text": ".rc .detail { display: grid; grid-template-rows: 0fr; row-gap: 0; column-gap: 0; opacity: "
  97. }
  98. ],
  99. "count": 1
  100. },
  101. {
  102. "no": "A7",
  103. "name": "prefers-reduced-motion 关闭动效",
  104. "hits": [
  105. {
  106. "file": "src/components/kf-glass-card.js",
  107. "line": 59,
  108. "text": "@media (prefers-reduced-motion: reduce) { :host([lift]) .frame::before { display: none; } "
  109. },
  110. {
  111. "file": "src/layout/kf-app.js",
  112. "line": 461,
  113. "text": "/* 关闭动效:动画本身(不只 0.01ms 的时长)一起关掉 —— prefers-reduced-motion 与 data-motion=\"off\" 都走这条 */"
  114. },
  115. {
  116. "file": "src/layout/kf-app.js",
  117. "line": 462,
  118. "text": "@media (prefers-reduced-motion: reduce) { :host::before, :host::after { animation: none; }"
  119. },
  120. {
  121. "file": "src/styles/tokens.js",
  122. "line": 480,
  123. "text": "@media (prefers-reduced-motion: reduce) {"
  124. }
  125. ],
  126. "count": 4
  127. },
  128. {
  129. "no": "A4",
  130. "name": "数字滚动时长声明",
  131. "hits": [
  132. {
  133. "file": "src/components/kf-stat.js",
  134. "line": 63,
  135. "text": "animation: kf-roll 650ms cubic-bezier(0.4, 0, 0.2, 1) both; }"
  136. }
  137. ],
  138. "count": 1
  139. },
  140. {
  141. "no": 1,
  142. "name": "装饰性渐变 / 渐变文字标题",
  143. "hit": false,
  144. "evidence": "渐变文字(background-clip:text):0 处。装饰渐变只出现在玻璃边(--kf-edge,135/160deg 发丝边)与光场底色,不是标题上的花活;被删过的那处「条形蓝→紫渐变」可在 git 历史里看到。"
  145. },
  146. {
  147. "no": 2,
  148. "name": "glow 光晕 / blob 色块 / 条纹纹理 / 网格背景",
  149. "hit": false,
  150. "evidence": "blur 光晕(非 0 扩散的发光 box-shadow)运行时 0 处;conic 渐变 0 处;背景光场是 kf-app::before 上 5 个 radial-gradient(项目设计基色,static 动画 64s),不是装饰性 blob。"
  151. },
  152. {
  153. "no": 3,
  154. "name": "玻璃效果用在所有卡片上",
  155. "hit": false,
  156. "evidence": "内容卡 kf-glass-card 35 张:白面 .72 + blur(8px)(只求「字能压住背景」,不是全页玻璃);浮层 .kf-glass 2 处,其中 2 处在导航/顶栏/抽屉里。"
  157. },
  158. {
  159. "no": 4,
  160. "name": "彩色左边框告警条",
  161. "hit": false,
  162. "evidence": ".alert 已改成 6% 染色 + 1px 同色描边(tokens.js 的 .alert 规则),运行时 border-left-color ≠ border-top-color 的元素:0 处。"
  163. },
  164. {
  165. "no": 5,
  166. "name": "emoji 当图标(应使用 SVG)",
  167. "hit": false,
  168. "evidence": "图标全部来自 components/icons.js 的 SVG 路径(24×24 stroke 1.9);emoji 命中的元素只算到文字里的「→」「·」这类标点,不算 emoji。"
  169. },
  170. {
  171. "no": 6,
  172. "name": "max-height:999px 展开动画",
  173. "hit": false,
  174. "evidence": "grep max-height: 9999?px → 0 处(无);展开用 grid-template-rows: 0fr → 1fr(report-card.js)。"
  175. },
  176. {
  177. "no": 7,
  178. "name": "transition: all",
  179. "hit": false,
  180. "evidence": "源码 0 处;运行时 0 个元素 computed transition-property 为 all(共扫描 405 个带过渡的元素)。"
  181. },
  182. {
  183. "no": 8,
  184. "name": "阴影超过 3 档",
  185. "hit": false,
  186. "evidence": "令牌层 --elev-1/2/3 共 3 档(--sh-* 只是基本量,--ring-1 是 1px 描边层,组件只引用语义名);运行时静止 + 悬停态的阴影几何共 4 种(已剥掉颜色):C0px1px2px0px | C0px0px0px1px | C0px12px32px-8px | C0px-12px32px-8px;落在三档之外的 0 种。"
  187. },
  188. {
  189. "no": 9,
  190. "name": "纯 #000 / #FFF",
  191. "hit": false,
  192. "evidence": "computed color / background 为纯黑 rgb(0,0,0) 的元素:0 处;纯白 #FFF 只用于深色底上的反白文字(--kf-ink-inv),0 处元素背景为纯白。"
  193. },
  194. {
  195. "no": 10,
  196. "name": "所有间距都是同一个值(均匀呼吸)",
  197. "hit": false,
  198. "evidence": "版式距离(卡内 / 卡间 / 区块间)实测 4 种:16 / 12 / 24 / 48 四级,不是同一个值(详见 audit-spacing.mjs 输出)。"
  199. },
  200. {
  201. "no": 11,
  202. "name": "box-shadow 做凸起 / 凹陷(非克制的拟物)",
  203. "hit": false,
  204. "evidence": "凸起 / 凹陷拟物:inset 阴影只保留 --kf-hi(两条 1px 内高光,tokens.js:143)与抽屉顶边的柔光;3D 拟物阴影 0 处。"
  205. },
  206. {
  207. "no": 12,
  208. "name": "加班式 hover:跳动 > 2px、放大",
  209. "hit": false,
  210. "evidence": "真实指针悬停后 transform:matrix(1, 0, 0, 1, 0, -1) —— matrix 的平移分量是 -1px,缩放分量是 1(没有放大);静止态 none。"
  211. },
  212. {
  213. "no": 13,
  214. "name": "圆角 > 16px",
  215. "hit": true,
  216. "evidence": "运行时圆角最大值 50px(令牌 --kf-radius: 16px;超过 16 的只有圆形头像 / 环这类「必须圆」的元素:4 个)。"
  217. },
  218. {
  219. "no": 14,
  220. "name": "强调色面积 > 5%",
  221. "hit": false,
  222. "evidence": "工作台整屏截图里接近强调色(#5B5BD6 系:蓝 >> 红、R≈G)的像素占比 0.36%(采样基准:1440×960 整页首屏)。"
  223. },
  224. {
  225. "no": 15,
  226. "name": "所有卡片同时入场无错峰",
  227. "hit": false,
  228. "evidence": ".kf-enter 的 animation-delay 实测取值:[[\"0s\",\"0.04s\",\"0.08s\",\"0.12s\",\"0.16s\",\"0.2s\"],[\"0s\"],[\"0s\",\"0.04s\",\"0.08s\",\"0.12s\",\"0.16s\"]](--i × 40ms 阶梯;kf-app 还会把首屏外元素挂 pending,滚到再播)。"
  229. }
  230. ],
  231. "meta": {
  232. "routes": [
  233. "/",
  234. "/pool",
  235. "/reports",
  236. "/reports/voc",
  237. "/members",
  238. "/ledger",
  239. "/stages"
  240. ],
  241. "filesScanned": 58
  242. }
  243. }