kangshifu-board/scripts/verify-visual-v13.mjs

#!/usr/bin/env node
/**
 * scripts/verify-visual-v13.mjs —— v13 收尾三项验收（每项打印实测原值，不看「通过」两个字）。
 *
 *   node scripts/verify-visual-v13.mjs --tag before   只打印、不判分（改前基线）
 *   node scripts/verify-visual-v13.mjs                判分：任一项不达标 exit 1
 *   --json out.json                                   结果落盘（docs 里的数字从这里抄）
 *
 * 量什么：
 *   一、排序段（/pool .seg，桌面；手机上打开 .pbar-more 里的 .pbar-sorts）
 *       - 选中项 computed background 与文字色、aria-pressed 计数
 *       - 选中 / 未选中 font-size、line-height、按钮框高
 *       - 外层：border-radius / border-width；按钮：每项各自 borderRadius = 0、相邻之间 1px 分隔线
 *   二、机会卡描述（/pool 每张 kf-opportunity-card）
 *       - .one 是否有文字、一行字高（line-height）、卡内布局方式
 *       - 无描述卡是否「没有描述区」而不是空 div；指标区上提了多少
 *       - 有描述卡 / 无描述卡「内容总高」差；每张卡最大连续空白（叶子文字的竖直间隙）
 *   三、/pool 页脚类名命中：拿 cardFooter() 的每个类名，在 /pool 页脚里查规则命中（CSSOM 遍历 shadow root 的 adoptedStyleSheets），
 *       再与 /reports 同名元素逐项比对 computed padding / border / borderRadius / 字号 / 颜色。
 *
 * 坑（见 memory kf-verify-browser-quirks）：视图异步挂载；跨 shadow 走 host；hover 要真实指针；滚动位置先归零。
 */
import { mkdirSync, writeFileSync, existsSync } from 'node:fs';
import { join, dirname } from 'node:path';
import { fileURLToPath } from 'node:url';

const ROOT = join(dirname(fileURLToPath(import.meta.url)), '..');
const argv = process.argv.slice(2);
const arg = (k, d) => (argv.includes(k) ? argv[argv.indexOf(k) + 1] : d);
const TAG = arg('--tag', 'after');
const JUDGE = TAG !== 'before';
const JSON_OUT = arg('--json', '');

if (!process.env.CHROME_PATH) {
  const pinned = '/opt/hermes/.playwright/chromium_headless_shell-1243/chrome-headless-shell-linux64/chrome-headless-shell';
  if (existsSync(pinned)) process.env.CHROME_PATH = pinned;
}

const { startServer, launch, DEEP } = await import('./v11b-lib.mjs');
const srv = await startServer(Number(process.env.VERIFY_PORT || 4194));
const browser = await launch();
const errors = [];

const newPage = async (width = 1440, height = 900) => {
  const ctx = await browser.newContext({ viewport: { width, height }, deviceScaleFactor: 1 });
  const page = await ctx.newPage();
  page.on('pageerror', (e) => errors.push(e.message));
  page.on('console', (m) => { if (m.type() === 'error' && !/favicon/.test(m.text())) errors.push(m.text()); });
  return page;
};
const page = await newPage();

const gotoView = async (p, name) => {
  await page.goto(new URL(p, srv.base).href, { waitUntil: 'networkidle' });
  await page.waitForFunction((n) => {
    const v = document.querySelector('kf-app')?.shadowRoot?.querySelector(n);
    return !!v && v.shadowRoot && v.shadowRoot.childElementCount > 0 && ('db' in v ? v.db != null : true);
  }, name, { timeout: 20000 });
  await page.waitForTimeout(700);
};

const rgb = (s) => (s.match(/\d+(\.\d+)?/g) || []).map(Number);
const hex = (rgba, under = [255, 255, 255]) => {
  /* rgba → 叠在不透明底上的实际颜色（选中态是半透明底，亮度要算合成后的） */
  const [r, g, b, a = 1] = rgba;
  return [0, 1, 2].map((i) => Math.round(rgba[i] * a + under[i] * (1 - a)));
};
const lum = ([r, g, b]) => 0.2126 * r + 0.7152 * g + 0.0722 * b;

const out = { tag: TAG, at: new Date().toISOString(), one: null, two: null, three: null };

/* ======================= 一、排序段 ======================= */
{
  await gotoView('/pool', 'view-pool');
  out.one = await page.evaluate(`(async () => {
    ${DEEP}
    const v = appR().querySelector('view-pool').shadowRoot;
    const seg = v.querySelector('.filters .seg');
    if (!seg) return { missing: true };
    const btns = [...seg.querySelectorAll('button')];
    const read = (b) => { const s = getComputedStyle(b); const r = b.getBoundingClientRect();
      return { text: b.textContent.trim(), pressed: b.getAttribute('aria-pressed'), bg: s.backgroundColor, color: s.color, fontSize: s.fontSize, lineHeight: s.lineHeight,
        h: Math.round(r.height * 10) / 10, radius: s.borderTopLeftRadius + ' ' + s.borderTopRightRadius, borderLeft: s.borderLeftWidth }; };
    const ss = getComputedStyle(seg);
    /* 分隔线：相邻按钮「左 1px」+ 第一个「无左边框」 */
    const seps = btns.map((b, i) => ({ i, left: getComputedStyle(b).borderLeftWidth, leftStyle: getComputedStyle(b).borderLeftStyle, leftColor: getComputedStyle(b).borderLeftColor }));
    /* 实际命中规则里的 background（不是 computed 的 rgba(0,0,0,0) 兜底） */
    const sel = btns.find((b) => b.getAttribute('aria-pressed') === 'true');
    const selRule = sel ? getComputedStyle(sel) : null;
    const wrap = seg.parentElement.getBoundingClientRect();
    const r = seg.getBoundingClientRect();
    return { btns: btns.map(read), seps, outer: { radius: ss.borderTopLeftRadius, border: ss.borderTopWidth + ' ' + ss.borderTopStyle + ' ' + ss.borderTopColor, h: Math.round(r.height * 10) / 10, bg: ss.backgroundColor },
      selected: sel ? read(sel) : null, unselected: btns.filter((b) => b.getAttribute('aria-pressed') !== 'true').map(read),
      selColorRule: selRule ? selRule.color : null, wrapTop: wrap.top };
  })()`);

  /* 手机档：把排序抽屉打开，量里面的段选 */
  const mpage = await newPage(393, 852);
  await mpage.goto(new URL('/pool', srv.base).href, { waitUntil: 'networkidle' });
  await mpage.waitForFunction(() => {
    const v = document.querySelector('kf-app')?.shadowRoot?.querySelector('view-pool');
    return !!v && v.shadowRoot && v.shadowRoot.childElementCount > 0 && v.db != null;
  }, null, { timeout: 20000 });
  await mpage.waitForTimeout(600);
  await mpage.evaluate(() => {
    const v = document.querySelector('kf-app').shadowRoot.querySelector('view-pool');
    v.shadowRoot.querySelector('.pbar-more').setAttribute('open', '');
  });
  await mpage.waitForTimeout(200);
  out.one.mobile = await mpage.evaluate(() => {
    const v = document.querySelector('kf-app').shadowRoot.querySelector('view-pool').shadowRoot;
    const btns = [...v.querySelectorAll('.pbar-sorts button')];
    const sel = btns.find((b) => b.getAttribute('aria-pressed') === 'true');
    const s = sel ? getComputedStyle(sel) : null;
    return sel ? { text: sel.textContent.trim(), bg: s.backgroundColor, color: s.color, fontSize: s.fontSize, lineHeight: s.lineHeight } : { missing: true };
  });
  await mpage.context().close();
}

/* ======================= 二、报告卡描述（reportCard 的 .lead） =======================
   量 /reports 与 /stages 的每一张 .rc：
     - 有无描述（.lead 元素存在且有文字）
     - 标题 → 指标区（.m）之间的缝：有描述的卡把这条缝摊给四张卡（flex 平均分），
       无描述的卡应把同一条缝均分到卡内各条缝 —— 不再是 66px 一条空缝
     - 内容总高 = .rc 内第一个可见子块顶 → 最后一个子块底
     - 最大连续空白 = .rc 内叶子文字矩形按 top 排，相邻两块之间竖直间隙的最大值 */
{
  out.two = { pages: [] };
  for (const [p, name] of [['/reports', 'view-reports'], ['/stages', 'view-stages']]) {
    await gotoView(p, name);
    const r = await page.evaluate(`(async () => {
      ${DEEP}
      const root = appR().querySelector('${name}').shadowRoot;
      const cards = [...root.querySelectorAll(".rc")].filter((c) => c.getBoundingClientRect().height > 0 && c.getBoundingClientRect().width > 0);
      const cardsInfo = cards.map((c) => {
        const lead = c.querySelector('.lead');
        const tk = c.querySelector('h3').getBoundingClientRect();
        const m = c.querySelector('.m').getBoundingClientRect();
        const kids = [...c.children].filter((e) => e.getBoundingClientRect().height > 0);
        const first = kids[0].getBoundingClientRect(), last = kids[kids.length - 1].getBoundingClientRect();
        /* 叶子文字块：先取最内层的文字元素（祖先容器不重复计，否则父盒扣掉 padding 后会造出假空白）。
           display:contents（.src 在手机档里的 .l1/.l2）没有盒，跳过。 */
        const textAll = [...c.querySelectorAll('*')].filter((e) => [...e.childNodes].some((n) => n.nodeType === 3 && n.textContent.trim()));
        const inner = textAll.filter((e) => !textAll.some((o) => o !== e && e.contains(o)));
        const leaves = inner.map((e) => e.getBoundingClientRect()).filter((r) => r.width > 0 && r.height > 0).sort((a, b) => a.top - b.top || a.left - b.left);
        let maxGap = 0, gapAt = '';
        for (let i = 1; i < leaves.length; i++) {
          if (leaves[i].top < leaves[i - 1].bottom - 1) continue;
          /* 水平不相交（并排的列）不算卡内纵向空白 */
          if (leaves[i].left >= leaves[i - 1].right - 1 || leaves[i - 1].left >= leaves[i].right - 1) continue;
          const g = Math.round(leaves[i].top - leaves[i - 1].bottom);
          if (g > maxGap) { maxGap = g; gapAt = Math.round(leaves[i - 1].bottom) + '→' + Math.round(leaves[i].top); }
        }
        /* 卡内每条缝（相邻子块之间），以及每块子块的 stretch 情况 */
        const gaps = [];
        for (let i = 1; i < kids.length; i++) gaps.push(Math.round(kids[i].getBoundingClientRect().top - kids[i - 1].getBoundingClientRect().bottom));
        return { title: (c.querySelector('h3').textContent || '').trim().slice(0, 14),
          lead: lead ? lead.textContent.trim().slice(0, 12) : null, leadTxt: lead ? lead.textContent.trim() : '',
          gapTitleToM: Math.round(m.top - tk.bottom), contentH: Math.round(last.bottom - first.top),
          cardH: Math.round(c.closest('kf-glass-card').getBoundingClientRect().height),
          maxGap, gapAt, rowIdx: Math.round(c.getBoundingClientRect().top) };
      });
      return { n: cardsInfo.length, cards: cardsInfo };
    })()`);
    /* 同排（top 相同）卡片的等高由 v12 脚本管；这里只记 */
    out.two.pages.push({ page: p, ...r });
  }
}

/* ======================= 三、页脚类名命中 ======================= */
const FOOT_PROBE = `(async () => {
  ${DEEP}
  const host = appR().querySelector(location.pathname.includes('reports') ? 'view-reports' : 'view-pool');
  const sr = host.shadowRoot;
  const foot = sr.querySelector('.cfoot[data-foot]');
  if (!foot) return { missing: true, host: host.localName };
  /* 1. 页脚里出现的每个类名，逐项查：在宿主 shadow root 的 adoptedStyleSheets 里，是否有规则的选择器能命中它 */
  const sheets = [...sr.adoptedStyleSheets, ...[...sr.querySelectorAll('style')].map((s) => s.sheet)];
  const rules = [];
  const walkRules = (list, media) => { for (const r of list || []) {
    if (r.cssRules && !r.selectorText) { walkRules(r.cssRules, r.conditionText || media); continue; }
    if (r.selectorText) rules.push({ sel: r.selectorText, media: media || '', css: r.style.cssText.slice(0, 90) });
  } };
  for (const s of sheets) if (s) { try { walkRules(s.cssRules, ''); } catch { /* 跨源 */ } }
  const classes = new Set();
  for (const el of [foot, ...foot.querySelectorAll('*')]) {
    const cn = typeof el.className === 'string' ? el.className : '';   /* svg 的 className 是 SVGAnimatedString */
    for (const c of cn.split(/\\s+/).filter(Boolean)) classes.add((el.localName === 'footer' || !/^(svg|path|circle|line|polyline|rect|g)$/.test(el.localName) ? '' : 'svg:') + c);
  }
  const hits = [];
  for (const c of classes) {
    const name = c;
    const matching = rules.filter((r) => {
      /* 规则选择器里是否以 .name 作为「完整类名」出现（避免 .cfl 命中 .cfleft） */
      return new RegExp('\\\\.' + name.replace(/[-]/g, '\\\\-') + '(?![\\\\w-])').test(r.sel);
    });
    /* 选择器是否真的能作用到页脚里的某个元素 */
    const el = [foot, ...foot.querySelectorAll('*')].find((e) => {
      const cn = typeof e.className === 'string' ? e.className : '';
      return cn.split(/\\s+/).includes(name);
    });
    const applies = matching.filter((r) => {
      if (!el) return false;
      try { return el.matches(r.sel.replace(/::?[a-z-]+(\\([^)]*\\))?/g, '')); } catch { return false; }
    });
    hits.push({ cls: name, tag: el ? elLabel(el).slice(0, 30) : '', rules: matching.length, applies: applies.length, el: el ? elLabel(el).slice(0, 30) : '' });
  }
  /* 2. 逐元素 computed 快照：footer 本身 + 里面每个元素，按「结构路径」记 */
  const snap = (f) => {
    const one = (el) => { const s = getComputedStyle(el);
      return { padding: [s.paddingTop, s.paddingRight, s.paddingBottom, s.paddingLeft].join(' '),
        border: [s.borderTopWidth, s.borderRightWidth, s.borderBottomWidth, s.borderLeftWidth].join(' ') + ' / ' + s.borderTopStyle + ' / ' + s.borderTopColor,
        radius: [s.borderTopLeftRadius, s.borderTopRightRadius, s.borderBottomRightRadius, s.borderBottomLeftRadius].join(' '),
        font: s.fontSize + '/' + s.lineHeight + ' ' + s.fontWeight, color: s.color, bg: s.backgroundColor,
        display: s.display, gap: s.gap, justify: s.justifyContent, marginTop: s.marginTop };
    };
    const list = [[f, f.parentElement && f.parentElement.classList.contains('cfoot') ? '' : '']];
    const path = (el) => { const p = []; for (let q = el; q && q !== f; q = q.parentElement) p.unshift(q.localName + (typeof q.className === 'string' && q.className ? '.' + q.className.trim().split(/\\s+/).join('.') : '')); return p.join('>'); };
    const res = { 'cfoot': one(f) };
    for (const el of f.querySelectorAll('*')) {
      if (['svg', 'path', 'circle', 'line', 'polyline', 'rect', 'g'].includes(el.localName)) continue;
      res[path(el)] = one(el);
    }
    return res;
  };
  /* 两页页脚根节点不同（/reports 是 <footer>，/pool 是 <span>）：键用 cfoot，跨页可比 */
  return { host: host.localName, footTag: foot.localName, classes: [...classes], hits, snap: snap(foot), mediaHits: rules.filter((r) => /cfoot|kf-btn/.test(r.sel)).map((r) => ({ sel: r.sel.slice(0, 70), media: r.media, css: r.css.slice(0, 70) })).slice(0, 14) };
})()`;

{
  await gotoView('/pool', 'view-pool');
  const poolFoot = await page.evaluate(FOOT_PROBE);
  await gotoView('/reports', 'view-reports');
  const repFoot = await page.evaluate(FOOT_PROBE);
  /* 同路径元素逐项比对 */
  const paths = Object.keys(poolFoot.snap || {}).filter((k) => k in (repFoot.snap || {}));
  const diff = [];
  for (const k of paths) {
    for (const prop of ['padding', 'border', 'radius', 'font', 'color', 'bg', 'display', 'gap', 'justify', 'marginTop']) {
      const a = poolFoot.snap[k][prop], b = repFoot.snap[k][prop];
      if (a !== b) diff.push({ path: k, prop, pool: a, reports: b });
    }
  }
  out.three = { pool: poolFoot, reports: repFoot, compared: paths, diff };
}

/* ======================= 汇总判分 ======================= */
const checks = [];
const check = (name, ok, detail) => { checks.push({ name, ok, detail }); console.log(`\n${JUDGE ? (ok ? '✓' : '✗') : '·'} ${name}\n    ${detail}`); };
console.log(`\n===== v13 三项验收 · tag=${TAG} =====`);

/* 一 */
{
  const o = out.one;
  const sel = o.selected, un = o.unselected?.[0];
  const composed = sel ? hex(rgb(sel.bg)) : [0, 0, 0];
  const selLum = lum(composed), oldLum = lum([24, 24, 27]);
  const brighter = composed.some((v) => v > 24);
  const fontSame = un && sel.fontSize === un.fontSize && sel.lineHeight === un.lineHeight && sel.h === un.h;
  const white = sel && rgb(sel.color).slice(0, 3).every((v) => v === 255);
  const radiiZero = o.btns?.every((b) => b.radius === '0px 0px');
  const seps1 = o.seps?.slice(1).every((s) => s.left === '1px' && s.leftStyle === 'solid') && o.seps?.[0].left === '0px';
  const outerOk = o.outer?.radius === '8px' && o.outer?.border.startsWith('1px solid');
  const h28 = o.outer?.h === 28 && o.btns?.every((b) => b.h === 28);
  const m = o.mobile || {};
  const mComposed = rgb(m.bg || 'rgb(0,0,0)');
  const mOk = m.bg && mComposed.slice(0, 3).some((v) => v > 24) && !(rgb(m.color || '').slice(0, 3).every((v) => v === 255));
  check('一 排序段：选中浅底不白字 / 字级一致 / 一整块 1px 分隔 / 高 28', brighter && !white && fontSame && radiiZero && seps1 && outerOk && h28 && mOk,
    `选中「${sel?.text}」bg=${sel?.bg} → 叠白底后 ${composed}（亮度 ${selLum.toFixed(1)}，旧 rgb(24,24,27) 亮度 ${oldLum.toFixed(1)}），字色 ${sel?.color}` +
    `；未选中 ${un?.bg} / ${un?.color}；font-size 选中 ${sel?.fontSize} vs 未选中 ${un?.fontSize}，line-height ${sel?.lineHeight} vs ${un?.lineHeight}，框高 ${sel?.h} vs ${un?.h}` +
    `；按钮圆角 [${o.btns?.map((b) => b.radius).join(' | ')}]，分隔线 [${o.seps?.map((s) => s.left).join(',')}]` +
    `；外层 radius ${o.outer?.radius} border ${o.outer?.border} 高 ${o.outer?.h}` +
    `；手机选中 bg=${m.bg} 字色 ${m.color} 字号 ${m.fontSize}`);
}

/* 二 */
function avg(arr, k) { return arr.reduce((n, x) => n + x[k], 0) / arr.length; }
{
  const parts = out.two.pages.map((pg) => {
    const withD = pg.cards.filter((c) => c.lead), without = pg.cards.filter((c) => !c.lead);
    const dh = withD.length && without.length ? Math.abs(avg(withD, 'contentH') - avg(without, 'contentH')) : null;
    const maxGap = Math.max(...pg.cards.map((c) => c.maxGap));
    const gapW = withD.length ? avg(withD, 'gapTitleToM') : 0;
    const gapN = without.length ? avg(without, 'gapTitleToM') : 0;
    const sameRow = new Set(pg.cards.filter((c) => !c.lead).map((c) => c.cardH));
    return { pg, withD, without, dh, maxGap, gapW, gapN, sameRow,
      ok: !without.length || (dh !== null && dh <= 40 && maxGap <= 24 && gapN < gapW * 0.8 && sameRow.size === 1) };
  });
  check('二 空描述卡：不渲染描述区 + 卡内重新均分 + 内容高差 ≤ 40px + 卡内空白 ≤ 24px',
    parts.every((x) => x.ok),
    parts.map(({ pg, withD, without, dh, maxGap, gapW, gapN, sameRow }) =>
      `${pg.page}：共 ${pg.n} 张，无描述 ${without.length} 张（${without.map((c) => c.title).join('、') || '—'}）` +
      `；有描述卡 gap(标题→指标) 均值 ${gapW.toFixed(1)}px / 无描述卡 ${gapN.toFixed(1)}px` +
      `；内容高 有描述 [${withD.map((c) => c.contentH).join(',')}] 无描述 [${without.map((c) => c.contentH).join(',')}] 差 ${dh == null ? '—' : dh.toFixed(1) + 'px'}` +
      `；无描述卡高去重 [${[...sameRow].join(',')}]；最大连续空白 ${maxGap}px`).join('\n    '));
}

/* 三 */
{
  const t = out.three;
  const poolMiss = (t.pool?.hits || []).filter((h) => h.applies === 0);
  const comp = t.compared || [];
  const same = comp.filter((p) => !t.diff.some((d) => d.path === p));
  check('三 /pool 页脚类名逐项命中（每个类名 ≥1 条生效规则）+ 与 /reports 同名元素 computed 逐项相等',
    !t.pool?.missing && poolMiss.length === 0 && comp.length >= 3 && (t.pool.classes || []).every((c) => (t.pool.hits || []).some((h) => h.cls === c && h.applies > 0)) && t.diff.length === 0,
    `类名 ${t.pool?.classes?.length} 个：${(t.pool?.hits || []).map((h) => `${h.cls}(${h.applies} 条生效/${h.rules} 条含)${h.applies ? '' : '✗'}`).join('、')}` +
    `；与 /reports 比对 ${comp.length} 个元素 × ${['padding', 'border', 'radius', 'font', 'color', 'bg', 'display', 'gap', 'justify', 'marginTop'].length} 项，一致 ${same.length}，不一致 ${t.diff.length}` +
    (t.diff.length ? '\n    ' + t.diff.slice(0, 8).map((d) => `${d.path}.${d.prop}: pool=${d.pool} reports=${d.reports}`).join('\n    ') : ''));
}

/* ======================= v12 回归：同原脚本判分（不能退步） ======================= */
console.log('\n----- v12 回归（子进程跑 verify-visual-v12.mjs） -----');
const { spawnSync } = await import('node:child_process');
const reg = spawnSync(process.execPath, [join(ROOT, 'scripts/verify-visual-v12.mjs'), '--json', 'tmp/v13-v12-after.json'], { encoding: 'utf8', env: { ...process.env, VERIFY_PORT: '4195' } });
const regLines = (reg.stdout || '').split('\n');
console.log(regLines.filter((l) => /^(✓|✗) |判分：/.test(l) || /^    /.test(l) && false).join('\n'));
const regLine = regLines.find((l) => /^判分：/.test(l)) || '(v12 脚本无输出)';
const [, pass, total] = regLine.match(/(\d+)\/(\d+)/) || [];
out.v12 = { pass: Number(pass), total: Number(total), line: regLine, fails: regLines.filter((l) => l.startsWith('✗')).map((l) => l.slice(2)) };
check('v12 回归不退步', out.v12.pass >= 11, `${regLine}；未达标：${out.v12.fails.join('、') || '无'}`);

if (errors.length) console.log(`\n页面错误 ${errors.length}：\n    ${[...new Set(errors)].slice(0, 10).join('\n    ')}`);
const fail = checks.filter((c) => !c.ok);
console.log(`\n${JUDGE ? '判分' : '基线（不判分）'}：${checks.length - fail.length}/${checks.length} 达标${errors.length ? `，页面错误 ${errors.length}` : ''}`);

if (JSON_OUT) {
  mkdirSync(dirname(join(ROOT, JSON_OUT)), { recursive: true });
  writeFileSync(join(ROOT, JSON_OUT), JSON.stringify({ ...out, checks, errors }, null, 2));
}

await browser.close();
srv.kill();
process.exit(JUDGE && (fail.length || errors.length) ? 1 : 0);