kangshifu-board/docs/screenshots/v10/measure-after.json

{
  "tag": "after",
  "rows": [
    {
      "no": 1,
      "name": ".grid2 改为 align-items: start（computed）",
      "ok": true,
      "detail": "computed align-items=start；inline style「--i:0」；grid 高 110px，列宽 610.906px 509.094px"
    },
    {
      "no": 2,
      "name": "两张卡高度 = 各自内容高度（卡高 − 内容高 ≤ 40px）",
      "ok": true,
      "detail": "卡1「?选「我是」」高 78px，内容 44px，差 34px（.frame display=flex justify=normal）；卡2「1 人卡住 」高 109.8px，内容 75.8px，差 34px（.frame display=flex justify=normal）；两卡高度差 31.8px"
    },
    {
      "no": 3,
      "name": "全页最大连续空白 ≤ 80px（9 个路由逐页量；按横截面采样，卡片面 / 表格行 / 空态面板算内容）",
      "ok": true,
      "detail": "/ 26px（「?」(@101) ↓ 「A 级」(@380)）；/pool 46px（「状态」(@192) ↓ 「池子」(@499)）；/stages 32px（「S1」(@101) ↓ 「35」(@221)）；/reports 46px（「1」(@101) ↓ 「阶段」(@270)）；/reports/competitor 38px（「品类分析」(@84) ↓ 「阶段」(@228)）；/reports/voc 38px（「品类分析」(@84) ↓ 「阶段」(@228)）；/members 50px（「成员」(@90) ↓ 「G2」(@568)）；/ledger 38px（「证据台账」(@96) ↓ 「点击行查看证据链」(@453)）；工作台 .grid2 卡片底 → 下一区块标题 24px"
    },
    {
      "no": 4,
      "name": "全站「并排多卡」无 align-items: stretch 拉伸",
      "ok": true,
      "detail": "9 个路由，并排多卡的 grid/flex 容器 align-items 均非 stretch（剩余只有单卡内部 .frame 的纵向 flex，属正常）"
    },
    {
      "no": 5,
      "name": "主数值 32px / 600 / -0.02em / tabular-nums / line-height 1.1",
      "ok": true,
      "detail": "主数值「9」：font-size 32px，font-weight 600，letter-spacing -0.64px（= 32px × -0.02，浏览器按 0.1px 精度取值），line-height 35.2px，font-variant-numeric tabular-nums，color rgb(24, 24, 27)；四张数据卡数值字号 32px/600 -0.64px、32px/600 -0.64px、32px/600 -0.64px、32px/600 -0.64px；kf-stat 数值 本页无"
    },
    {
      "no": 6,
      "name": "标签 11px / 500 / 0.06em / gray-9",
      "ok": true,
      "detail": "标签「432」：font-size 11px，font-weight 500，letter-spacing 0.66px（11px×0.06=0.66px），color rgb(75, 85, 99)"
    },
    {
      "no": 7,
      "name": "全站字号去重 ≤ 6 档（11/13/14/16/20/32）",
      "ok": true,
      "detail": "桌面 + 手机 9 页去重：11px / 13px / 14px / 16px / 20px / 32px（共 6 档）；越界 0"
    },
    {
      "no": 8,
      "name": "全站字重只有 400/500/600（无 700/800）",
      "ok": true,
      "detail": "去重：400 / 500 / 600；700/800 命中 0"
    },
    {
      "no": 9,
      "name": "全站投影档位 ≤ 3 档（--shadow-1/2/3）",
      "ok": true,
      "detail": "12 种 computed box-shadow；去重后：投影 3 档 + 结构线（环 / 内描边）1 种：\n     S1 0px 1px 2px 0px a0.04 | 0px 8px 24px -8px a0.08\n     S2 0px 1px 1px 0px a0.03 | 0px 1px 2px 0px a0.04\n     S3 0px 16px 48px -12px a0.18 | 0px 1px 2px 0px a0.04\n     镜像档（与某档同形、offset-y 取反）不计：0px 16px 48px -12px a0.18 | 0px 1px 2px 0px a0.04；0px -16px 48px -12px a0.18 | 0px -1px 2px 0px a0.04\n     结构线：R1 0px 0px 0px 3px a0.15\n     含 inset 的全部原值（12 种）见 docs/screenshots/v10/shadow-report.json"
    },
    {
      "no": 10,
      "name": "玻璃卡含 inset 0 1px 0 rgba(255,255,255,.70) + blur(28px) saturate(180%)",
      "ok": true,
      "detail": ".frame box-shadow = rgba(255, 255, 255, 0.7) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.08) 0px -1px 0px 0px inset, rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.08) 0px 8px 24px -8px\n     backdrop-filter = blur(28px) saturate(1.8)"
    },
    {
      "no": 11,
      "name": "卡片圆角 16px（桌面），全站无 ≥24px",
      "ok": true,
      "detail": "类型页卡片 16px，工作台数据卡 16px；类型页全页圆角分布：50% ×51 (span.live,span.dot)；16px ×15 (aside.side.kf-glass.is-panel,header.bar.kf-glass)；15px ×12 (div.face,div.face)；10px ×19 (span.mark,a)；8px ×18 (span.ic,span.ic)；7px ×6 (button,button)；6px ×67 (span.badge,span.badge.danger)；5px ×2 (span.pri.p-A,span.pri.p-S)；4px ×17 (span.ck,span.ck)；2px ×51 (span.sw.t-blue,span.sw.t-violet)"
    },
    {
      "no": 12,
      "name": "强调色 #5B5BD6 占比 ≤ 5%（按面积）",
      "ok": true,
      "detail": "命中元素面积合计 7632px² / 首屏可见元素面积 13217493px² = 0.06%；命中 6 个元素：span.mark「康」 40×40、div.avatar「?」 44×44、span.ic 32×32、span.ic 32×32、span.ic 32×32、span.ic 32×32"
    },
    {
      "no": "12b",
      "name": "对比度 ≥ 4.5:1：桌面 + 手机逐页逐文字节点（玻璃后按光场最深色斑算）",
      "ok": true,
      "detail": "桌面 9 个页面共 3164 个文字节点；正文（gray-12 / gray-11）最低 6.14:1「9」11px；全节点最低 3:1「?」11px（rgb(255, 255, 255)，渐变底白字单列）；手机 9 个页面共 2846 个，最低 3:1「?」13px（rgb(255, 255, 255)）；--kf-ink-3（rgb(75,85,99)）辅助文字 1724 处，最低 4.63:1；渐变底白字（头像 / 品牌块）42 个单列；低于阈值的 0 个"
    },
    {
      "no": 13,
      "name": "hover：150ms cubic-bezier(.2,0,0,1)，translateY(-1px)；press scale(.985) 80ms",
      "ok": true,
      "detail": "可点卡（lift）.frame transition = transform, box-shadow, border-color, background-color, color | 0.15s, 0.15s, 0.15s, 0.15s, 0.15s | cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1)；hover 实测 transform = matrix(1, 0, 0, 1, 0, -1)；按下实测 transform = matrix(0.985, 0, 0, 0.985, 0, 0)"
    },
    {
      "no": 14,
      "name": "prefers-reduced-motion: reduce 覆盖",
      "ok": true,
      "detail": "模拟 reduce 媒体后 matchMedia=true，卡片 transition-duration computed = 1e-05s"
    },
    {
      "no": 15,
      "name": "手机 393px：Tab 栏在、工作台单列、9 页 scrollWidth === clientWidth",
      "ok": true,
      "detail": "9 页 scrollWidth/clientWidth：/ 393/393、/pool 393/393、/stages 393/393、/reports 393/393、/reports/competitor 393/393、/reports/voc 393/393、/members 393/393、/ledger 393/393；Tab 栏 grid（5 项，底边 852=视口 852），侧栏 none；工作台 .grid2 列 345px，两卡 345×78@24 / 345×130@24"
    },
    {
      "no": 16,
      "name": "node --test 46/46 + check.mjs 全绿 + 字数不回升",
      "ok": true,
      "detail": "单测 pass=46 fail=0；check 13 ✓ / 0 ✗；字数 类型页 96/300 · 工作台 95/350 · 阶段页 33/300 · 报告详情 183/250 · 报告中心 38/200；控制台错误 0"
    }
  ],
  "collected": {
    "grid2": {
      "alignItems": "start",
      "inlineStyle": "--i:0",
      "gridH": 110,
      "cols": "610.906px 509.094px",
      "cards": [
        {
          "id": "?选「我是」",
          "cardH": 78,
          "contentH": 44,
          "faceH": 76,
          "display": "flex",
          "justify": "normal",
          "dir": "column"
        },
        {
          "id": "1 人卡住 ",
          "cardH": 109.8,
          "contentH": 75.8,
          "faceH": 107.8,
          "display": "flex",
          "justify": "normal",
          "dir": "column"
        }
      ]
    },
    "gaps": {
      "/": {
        "gap": 26,
        "span": 235.171875,
        "a": "「?」(@101)",
        "b": "「A 级」(@380)",
        "rows": 23,
        "tracks": 106,
        "painted": 140,
        "docH": 976
      },
      "/pool": {
        "gap": 46,
        "span": 291.5,
        "a": "「状态」(@192)",
        "b": "「池子」(@499)",
        "rows": 73,
        "tracks": 320,
        "painted": 359,
        "docH": 1779
      },
      "/stages": {
        "gap": 32,
        "span": 101,
        "a": "「S1」(@101)",
        "b": "「35」(@221)",
        "rows": 116,
        "tracks": 549,
        "painted": 1142,
        "docH": 3671
      },
      "/reports": {
        "gap": 46,
        "span": 133.59375,
        "a": "「1」(@101)",
        "b": "「阶段」(@270)",
        "rows": 77,
        "tracks": 320,
        "painted": 620,
        "docH": 1599
      },
      "/reports/competitor": {
        "gap": 38,
        "span": 110.1875,
        "a": "「品类分析」(@84)",
        "b": "「阶段」(@228)",
        "rows": 65,
        "tracks": 283,
        "painted": 553,
        "docH": 1497
      },
      "/reports/voc": {
        "gap": 38,
        "span": 110.1875,
        "a": "「品类分析」(@84)",
        "b": "「阶段」(@228)",
        "rows": 68,
        "tracks": 261,
        "painted": 496,
        "docH": 1539
      },
      "/members": {
        "gap": 50,
        "span": 452.484375,
        "a": "「成员」(@90)",
        "b": "「G2」(@568)",
        "rows": 30,
        "tracks": 121,
        "painted": 136,
        "docH": 1169
      },
      "/ledger": {
        "gap": 38,
        "span": 331.296875,
        "a": "「证据台账」(@96)",
        "b": "「点击行查看证据链」(@453)",
        "rows": 51,
        "tracks": 393,
        "painted": 394,
        "docH": 1853
      }
    },
    "grid2Gap": 24,
    "stretches": {},
    "typo": {
      "value": {
        "fs": "32px",
        "fw": "600",
        "ls": "-0.64px",
        "lh": "35.2px",
        "fvn": "tabular-nums",
        "color": "rgb(24, 24, 27)",
        "text": "9"
      },
      "label": {
        "fs": "11px",
        "fw": "500",
        "ls": "0.66px",
        "lh": "15.4px",
        "fvn": "normal",
        "color": "rgb(75, 85, 99)",
        "text": "432"
      },
      "valTag": "B",
      "allValues": [
        {
          "fs": "32px",
          "fw": "600",
          "ls": "-0.64px",
          "lh": "35.2px",
          "fvn": "tabular-nums",
          "color": "rgb(24, 24, 27)",
          "text": "9"
        },
        {
          "fs": "32px",
          "fw": "600",
          "ls": "-0.64px",
          "lh": "35.2px",
          "fvn": "tabular-nums",
          "color": "rgb(24, 24, 27)",
          "text": "82"
        },
        {
          "fs": "32px",
          "fw": "600",
          "ls": "-0.64px",
          "lh": "35.2px",
          "fvn": "tabular-nums",
          "color": "rgb(24, 24, 27)",
          "text": "8人"
        },
        {
          "fs": "32px",
          "fw": "600",
          "ls": "-0.64px",
          "lh": "35.2px",
          "fvn": "tabular-nums",
          "color": "rgb(24, 24, 27)",
          "text": "5"
        }
      ],
      "statNum": null
    },
    "sizes": [
      "11px",
      "13px",
      "14px",
      "16px",
      "20px",
      "32px"
    ],
    "weights": [
      "400",
      "500",
      "600"
    ],
    "shadowRaw": [
      "rgba(255, 255, 255, 0.7) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.08) 0px -1px 0px 0px inset, rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.08) 0px 8px 24px -8px",
      "rgba(255, 255, 255, 0.22) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.03) 0px 1px 1px 0px",
      "rgb(255, 255, 255) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.03) 0px 1px 1px 0px",
      "rgba(46, 125, 91, 0.15) 0px 0px 0px 3px",
      "rgba(255, 255, 255, 0.7) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.03) 0px 1px 1px 0px",
      "rgba(255, 255, 255, 0.3) 0px 1px 0px 0px inset",
      "rgba(255, 255, 255, 0.7) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.18) 0px 16px 48px -12px",
      "rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.18) 0px 16px 48px -12px",
      "rgba(255, 255, 255, 0.7) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.04) 0px -1px 2px 0px, rgba(0, 0, 0, 0.18) 0px -16px 48px -12px",
      "rgba(255, 255, 255, 0.18) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.03) 0px 1px 1px 0px",
      "rgba(255, 255, 255, 0.6) 0px 1px 0px 0px inset",
      "rgba(255, 255, 255, 0.7) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.08) 0px 8px 24px -8px"
    ],
    "shadowLevels": [
      "0px 1px 2px 0px a0.04 | 0px 8px 24px -8px a0.08",
      "0px 1px 1px 0px a0.03 | 0px 1px 2px 0px a0.04",
      "0px 0px 0px 3px a0.15",
      "",
      "0px 16px 48px -12px a0.18 | 0px 1px 2px 0px a0.04",
      "0px -16px 48px -12px a0.18 | 0px -1px 2px 0px a0.04"
    ],
    "glass": {
      "shadow": "rgba(255, 255, 255, 0.7) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.08) 0px -1px 0px 0px inset, rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.08) 0px 8px 24px -8px",
      "blur": "blur(28px) saturate(1.8)",
      "radius": "16px",
      "bg": "linear-gradient(rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.62)), linear-gradient(rgba(255, 255, 255, 0.9), rgba(25"
    },
    "contrast": {
      "minMeta": {
        "dMeta": {
          "text": "9",
          "ratio": 6.14,
          "need": 4.5,
          "size": 11,
          "color": "rgb(63, 63, 70)",
          "where": "nav>kf-nav»>a>kf-nav»>span.badge"
        },
        "dAll": {
          "text": "?",
          "ratio": 3,
          "need": 3,
          "size": 11,
          "color": "rgb(255, 255, 255)",
          "where": "span.who",
          "plate": true
        },
        "mAll": {
          "text": "?",
          "ratio": 3,
          "need": 3,
          "size": 13,
          "color": "rgb(255, 255, 255)",
          "where": "span.who",
          "plate": true
        }
      },
      "nD": 3164,
      "nM": 2846,
      "minD": {
        "text": "?",
        "ratio": 3,
        "need": 3,
        "size": 11,
        "color": "rgb(255, 255, 255)",
        "where": "span.who",
        "plate": true
      },
      "minM": {
        "text": "?",
        "ratio": 3,
        "need": 3,
        "size": 13,
        "color": "rgb(255, 255, 255)",
        "where": "span.who",
        "plate": true
      },
      "under": [],
      "ink3min": {
        "text": "▦",
        "ratio": 4.63,
        "need": 4.5,
        "size": 11,
        "color": "rgb(75, 85, 99)",
        "where": "div.thumb>view-stages»>div.cap>view-stages»>span"
      }
    },
    "hover": {
      "transition": "all | 0s | ease",
      "transformBefore": "none",
      "rect": {
        "x": 573,
        "y": 123,
        "width": 611,
        "height": 78
      },
      "transform": "none",
      "shadow": "rgba(255, 255, 255, 0.7) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.08) 0px -1px 0px 0px inset, rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.08) 0px 8",
      "trans": {
        "transition": "transform, box-shadow, border-color, background-color, color | 0.15s, 0.15s, 0.15s, 0.15s, 0.15s | cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1), cubic-bezier(0.2, 0, 0, 1)",
        "at": {
          "x": 452,
          "y": 427
        }
      },
      "liftHov": {
        "transform": "matrix(1, 0, 0, 1, 0, -1)",
        "x": 452,
        "y": 426
      },
      "liftAct": "matrix(0.985, 0, 0, 0.985, 0, 0)"
    },
    "liftBox": {
      "x": 452,
      "y": 427
    }
  },
  "shadowRaw": [
    "rgba(255, 255, 255, 0.7) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.08) 0px -1px 0px 0px inset, rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.08) 0px 8px 24px -8px",
    "rgba(255, 255, 255, 0.22) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.03) 0px 1px 1px 0px",
    "rgb(255, 255, 255) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.03) 0px 1px 1px 0px",
    "rgba(46, 125, 91, 0.15) 0px 0px 0px 3px",
    "rgba(255, 255, 255, 0.7) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.03) 0px 1px 1px 0px",
    "rgba(255, 255, 255, 0.3) 0px 1px 0px 0px inset",
    "rgba(255, 255, 255, 0.7) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.18) 0px 16px 48px -12px",
    "rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.18) 0px 16px 48px -12px",
    "rgba(255, 255, 255, 0.7) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.04) 0px -1px 2px 0px, rgba(0, 0, 0, 0.18) 0px -16px 48px -12px",
    "rgba(255, 255, 255, 0.18) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.03) 0px 1px 1px 0px",
    "rgba(255, 255, 255, 0.6) 0px 1px 0px 0px inset",
    "rgba(255, 255, 255, 0.7) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.08) 0px 8px 24px -8px"
  ]
}