#!/usr/bin/env node
/**
* scripts/verify-v16.mjs —— v16 验收（v15 的 1–9 项全保留 + 任务书 v16 的 10–12 项）。
*
* node scripts/verify-v16.mjs --tag before --from HEAD 改前基线（从 git 导出旧代码单独起服务）
* node scripts/verify-v16.mjs --tag after --from worktree 改后
* 新增：[10] 短卡内容密度（跟 dr1 量得的基准比） [11] 深色卡色相数（≤2） [12] 底部按钮重量
* 基准出处：docs/v16-research.md §1.2 / §2.1 / §5
*
* node scripts/verify-v15.mjs --tag before 改前基线
* node scripts/verify-v15.mjs --tag after 改后
* node scripts/verify-v15.mjs --json out.json 结果落盘（docs/v15-before-after.md 从这里抄数字）
* --me 赵磊 量「有数据」的我的推进（默认赵磊，仓库里有 2 份成果）
* --no-regress 顺带跑 verify-visual-v12.mjs 再打一遍
*
* 数据源：dev server（默认 127.0.0.1:4173，--port 改）→ 生产 Parse 只读。localhost 是安全上下文，
* 所以 localStorage 里写 `kf-board:me` 等价于真实用户点过「我是」。
*
* 量什么（工作台 /，1440×900 与 393×852 两档）：
* 1. A 卡宽 / B 卡宽 / 高度差（≤2px）；A 占 12 栅格里的几列
* 2. B 卡底色亮度（<0.35）与反白文字最差对比度（≥7:1）
* 3. C/D/E 三卡宽高差（高差 ≤2px）
* 4. 页面主列直接子块的相邻 gap（剔除页头与页脚）
* 5. 卡片内边距实测（.face 的 computed padding）
* 6. 全页可见文字字号档位（≤5 档、无 11px）
* 7. kf-spark 残留（工作台 0；全站单独打印）
* 8. 393px：scrollWidth === clientWidth、A/B 上下堆叠、字号档、无 11px
* 9. 全站普通卡片：backdrop-filter 个数、box-shadow 非 none 个数（跨 shadow）
* 10. --no-regress：调用 verify-visual-v12.mjs --tag before，把摘要原样打印
*/
import { writeFileSync } from 'node:fs';
import { join, dirname } from 'node:path';
import { fileURLToPath } from 'node:url';
import { execFileSync } from 'node:child_process';
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 JSON_OUT = arg('--json', '');
const PORT = Number(arg('--port', process.env.PORT || 4173));
const ME = arg('--me', '赵磊');
const BASE = `http://127.0.0.1:${PORT + 30}`;
if (!process.env.CHROME_PATH) {
const pinned = '/opt/hermes/.playwright/chromium_headless_shell-1243/chrome-headless-shell-linux64/chrome-headless-shell';
const { existsSync } = await import('node:fs');
if (existsSync(pinned)) process.env.CHROME_PATH = pinned;
}
/* 「改前基线」必须对着改前的代码跑：
* 默认 --from HEAD：把 git 里的整棵树导出到临时目录，dev server 指向那里（工作区改了也不影响）；
* --from worktree：跑工作区当前代码（改完自检用）。
* 每次运行都打印 /src/pages/view-workbench.js 的 sha1 写进 JSON —— before / after 两份能直接核对跑的是哪版。
*/
const FROM = arg('--from', 'HEAD');
const { createHash } = await import('node:crypto');
const { readFileSync, mkdtempSync, cpSync, rmSync } = await import('node:fs');
const { tmpdir } = await import('node:os');
let codeDir = ROOT;
if (FROM !== 'worktree') {
codeDir = mkdtempSync(join(tmpdir(), 'kf-v15-'));
execFileSync('sh', ['-c', `git archive ${JSON.stringify(FROM)} | tar -x -C ${JSON.stringify(codeDir)}`], { cwd: ROOT, stdio: 'ignore' });
/* lib/vendor（lit 等）没进 git，要和工作区的一起拷；serve.mjs 的静态根 = 它自己所在的 src/../..，
所以把 serve.mjs 挪到临时根的 src/dev/ 下即可整体切换 */
cpSync(join(ROOT, 'src/dev/serve.mjs'), join(codeDir, 'src/dev/serve.mjs'));
cpSync(join(ROOT, 'lib'), join(codeDir, 'lib'), { recursive: true });
}
const codeSha = createHash('sha1').update(readFileSync(join(codeDir, 'src/pages/view-workbench.js'))).digest('hex').slice(0, 12);
const cleanup = () => { if (FROM !== 'worktree') rmSync(codeDir, { recursive: true, force: true }); };
const { launch, DEEP } = await import('./v11b-lib.mjs');
const browser = await launch();
/* 独立的 dev server：静态根指向 codeDir，/parse 仍代理生产（只读） */
const { spawn } = await import('node:child_process');
const srv = spawn(process.execPath, [join(codeDir, 'src/dev/serve.mjs'), '--port', String(PORT + 30), '--mount', '/'], { stdio: 'ignore', cwd: codeDir });
/* 起不来就报错退出，不要悄悄连到别的 4173 */
const SBASE = `http://127.0.0.1:${PORT + 30}`;
for (let i = 0; i < 60; i++) {
await new Promise((r) => setTimeout(r, 100));
try { if ((await fetch(SBASE + '/index.html')).ok) break; } catch { /* 还没起来 */ }
}
const main = async () => {
/* ---------------- 桌面 1440 ---------------- */
const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 }, deviceScaleFactor: 1 });
/* 只在第一次导航（about:blank，同源之前）种一次：addInitScript 会在每次导航时重跑，
那样后面「清掉我是」再刷新会被它写回去（实测：空态 A 量到的是赵磊）。 */
await ctx.addInitScript((name) => { try { if (!localStorage.getItem('kf-v15-seeded')) { localStorage.setItem('kf-v15-seeded', '1'); localStorage.setItem('kf-board:me', JSON.stringify(name)); } } catch { /* 首次在 about:blank 里没有 localStorage，忽略 */ } }, ME);
const page = await ctx.newPage();
const errors = [];
page.on('pageerror', (e) => errors.push(e.message));
page.on('console', (m) => { if (m.type() === 'error' && !/favicon/.test(m.text())) errors.push(m.text()); });
const mount = async (p) => {
await page.goto(new URL(p, BASE).href, { waitUntil: 'networkidle' });
await page.waitForFunction(() => {
const a = document.querySelector('kf-app');
const v = a?.shadowRoot?.querySelector('main#view')?.firstElementChild;
return !!v && v.shadowRoot && v.shadowRoot.childElementCount > 0;
}, null, { timeout: 20000 });
await page.waitForTimeout(600);
/* 光场 / 入场动效会让第一轮几何还没稳定：滚动回顶部，动效按系统偏好关掉 */
try { await page.waitForFunction(() => window.scrollY === 0, null, { timeout: 3000 }); } catch { await page.evaluate(() => window.scrollTo(0, 0)); }
await page.waitForTimeout(200);
};
const DESKTOP = `(() => { ${DEEP}
const view = document.getElementById('v15-det') || appR().querySelector('main#view').firstElementChild;
const vr = view.shadowRoot;
const R = (el) => { const b = el.getBoundingClientRect(); return { x: +b.x.toFixed(1), y: +b.y.toFixed(1), w: +b.width.toFixed(1), h: +b.height.toFixed(1), top: +b.top.toFixed(1), bottom: +b.bottom.toFixed(1) }; };
const rgb = (s) => { const m = s.match(/rgba?\\(([\\d.]+), ([\\d.]+), ([\\d.]+)(?:, ([\\d.]+))?\\)/); return m ? { r: +m[1], g: +m[2], b: +m[3], a: m[4] == null ? 1 : +m[4] } : null; };
const lum = ({ r, g, b }) => { const f = (v) => { v /= 255; return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4); }; return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b); };
const contrast = (a, b) => { const [x, y] = [lum(a), lum(b)].sort((p, q) => q - p); return +(x + 0.05) / (y + 0.05); };
/* 跨 shadow 向上找第一个不透明底色 */
const bgOf = (el) => { for (let q = el; q; q = q.parentElement || q.getRootNode()?.host) { const c = rgb(getComputedStyle(q).backgroundColor); if (c && c.a >= 0.99) return c; } return { r: 255, g: 255, b: 255 }; };
/* 一个元素「画出来」的底色 = 自身背景色；没有就看最近的不透明祖先 */
const paintOf = (el) => { const own = rgb(getComputedStyle(el).backgroundColor); return own && own.a >= 0.5 ? own : bgOf(el.parentElement || el.getRootNode()?.host); };
const host = (sel) => vr.querySelector(sel);
const frameOf = (card) => card?.shadowRoot?.querySelector('.frame') || null;
const cards = [...vr.querySelectorAll('kf-glass-card')].filter((c) => c.getBoundingClientRect().height > 0);
/* ---------- 栅格：找行容器 ---------- */
const gridRows = [...vr.querySelectorAll('*')].filter((el) => {
const s = getComputedStyle(el); return /grid/.test(s.display) && el.querySelector(':scope > kf-glass-card');
}).map((el) => {
const kids = [...el.querySelectorAll(':scope > kf-glass-card')].map((k) => ({ rect: R(k), role: k.dataset.role || '' }));
return { el, cls: el.className, cols: getComputedStyle(el).gridTemplateColumns, kids };
});
const byRole = (r) => gridRows.flatMap((g) => g.kids).find((k) => k.role === r)?.rect || null;
const A = byRole('a'), B = byRole('b'), C = byRole('c'), D = byRole('d'), E = byRole('e'), F = byRole('f')
|| (vr.querySelector('kf-glass-card[data-role="f"]') ? R(vr.querySelector('kf-glass-card[data-role="f"]')) : null);
/* 列数：找 A 所在的栅格容器，读它的 grid-template-columns 与 column-gap，算出单列宽，再数 A 占几列 */
const aEl = vr.querySelector('kf-glass-card[data-role="a"]');
/* 直接在已找到的行容器里挑「装着 A 的那一行」——不要 [...vr.children]（vr 是 ShadowRoot，children 是 HTMLCollection，
展开后第一项是属性本身，不是元素） */
const rowABC = gridRows.find((g) => g.el.contains(aEl))?.el || null;
let gapRow = null, colW = null, colDbg = null;
if (rowABC) {
gapRow = parseFloat(getComputedStyle(rowABC).columnGap) || parseFloat(getComputedStyle(rowABC).gap) || 0;
const tracks = getComputedStyle(rowABC).gridTemplateColumns.split(/ +/).filter(Boolean).map(parseFloat);
colW = tracks.length ? (rowABC.getBoundingClientRect().width - gapRow * (tracks.length - 1)) / tracks.length : null;
colDbg = { n: tracks.length, w: rowABC.getBoundingClientRect().width, gapRow, colW };
}
/* 列数：单列宽 = (行宽 − 间距 × (列数 − 1)) / 列数；A 占几列 = (A 宽 + 间距) / (单列宽 + 间距) */
const aColsExact = A && colW ? Math.round((A.w + gapRow) / (colW + gapRow)) : null;
const colWDbg = colW;
/* ---------- B 卡深色 ---------- */
let Bbg = null, BbgText = '', Bcontrast = null, Bother = [];
const bc = cards.find((c) => c.dataset.role === 'b');
if (bc) {
const frame = frameOf(bc);
Bbg = rgb(getComputedStyle(frame)?.backgroundColor || '');
if (!Bbg) Bbg = paintOf(bc);
/* 文本都在 slotted 内容里（bc 的 light DOM），不在它自己的 shadow 内 */
const texts = [...bc.querySelectorAll('*')].filter((e) => [...e.childNodes].some((n) => n.nodeType === 3 && n.textContent.trim()));
const worst = texts.map((e) => { const fg = rgb(getComputedStyle(e).color); return { t: e.textContent.trim().slice(0, 16), fg, c: +contrast(fg, Bbg).toFixed(2) }; }).sort((p, q) => p.c - q.c);
Bcontrast = worst[0] || null;
BbgText = 'rgb(' + Bbg.r + ', ' + Bbg.g + ', ' + Bbg.b + ')';
Bother = texts.map((e) => ({ t: e.textContent.trim().slice(0, 16), c: +contrast(rgb(getComputedStyle(e).color), Bbg).toFixed(2) }));
}
/* ---------- 主列直接子块间距 ---------- */
const blocks = [...vr.children].filter((el) => {
const s = getComputedStyle(el); const b = el.getBoundingClientRect();
return s.display !== 'none' && b.height > 0;
}).map((el) => ({ el, tag: el.localName + (el.className ? '.' + String(el.className).split(' ')[0] : ''), rect: R(el) }));
/* 间距 = 两块之间真实露出的竖直空白。box 底边不含 margin-bottom / padding-bottom / border-bottom，
下一块 box 顶边也不含它自己的 border-top（外边框在 rect 内，margin 折叠也已体现在 rect 里）。
两者相减后扣掉上一块自带的尾随边距，再扣掉下一块自己的 border-top —— 得到「眼睛看到的空白」。 */
const gaps = [];
for (let i = 1; i < blocks.length; i++) {
const prev = blocks[i - 1], cur = blocks[i];
const sp = getComputedStyle(prev.el), sc = getComputedStyle(cur.el);
const trail = (parseFloat(sp.marginBottom) || 0) + (parseFloat(sp.paddingBottom) || 0) + (parseFloat(sp.borderBottomWidth) || 0)
+ (parseFloat(sc.borderTopWidth) || 0);
gaps.push({ between: prev.tag + ' → ' + cur.tag, gap: +(cur.rect.top - prev.rect.bottom - trail).toFixed(1) });
}
/* ---------- 卡片内边距 ---------- */
const padding = [...new Set([...vr.querySelectorAll('*')].filter((el) => /grid|flex/.test(getComputedStyle(el).display)).map((el) => getComputedStyle(el).paddingTop))];
const facePad = cards.map((c) => c.dataset.role || 'card').map((role, i) => ({ role, pad: getComputedStyle(frameOf(cards[i]).querySelector('.face')).padding }));
/* ---------- 字号档 ---------- */
const fsCount = {};
const fsWhere = {};
walk(vr, (el) => {
if (![...el.childNodes].some((n) => n.nodeType === 3 && n.textContent.trim())) return;
if (!visible(el)) return;
const s = getComputedStyle(el);
const k = Math.round(parseFloat(s.fontSize) * 10) / 10 + 'px';
fsCount[k] = (fsCount[k] || 0) + 1;
(fsWhere[k] = fsWhere[k] || new Set()).add(el.localName + (typeof el.className === 'string' && el.className ? '.' + el.className.trim().split(/ +/)[0] : ''));
});
/* ---------- v16 [10] 短卡密度：每张短卡「可见文字字符数 / 卡面积」 ---------- */
const statCards = ['c', 'd', 'e', 'f'].map((r) => vr.querySelector('kf-glass-card[data-role="' + r + '"]')).filter(Boolean);
const statDensity = statCards.map((k) => {
const rect = R(k);
const txt = [...k.querySelectorAll('*')].filter((el) => [...el.childNodes].some((n) => n.nodeType === 3 && n.textContent.trim()) && visible(el))
.map((el) => [...el.childNodes].filter((n) => n.nodeType === 3).map((n) => n.textContent.replace(/\s+/g, '')).join('')).join('');
return { role: k.dataset.role, w: rect.w, h: rect.h, chars: [...txt].length,
per1e4: +([...txt].length / (rect.w * rect.h) * 10000).toFixed(2), text: txt.slice(0, 60) };
});
/* ---------- v16 [11] 深色卡色相数 ---------- */
const bEl = vr.querySelector('kf-glass-card[data-role="b"]');
const hueOf = (c) => { if (!c || c.a < 0.15) return null; const mx = Math.max(c.r, c.g, c.b), mn = Math.min(c.r, c.g, c.b);
if (mx - mn < 24) return null; let h; const d = mx - mn;
if (mx === c.r) h = ((c.g - c.b) / d) % 6; else if (mx === c.g) h = (c.b - c.r) / d + 2; else h = (c.r - c.g) / d + 4;
h *= 60; if (h < 0) h += 360;
return h < 40 ? 'red/orange' : h < 70 ? 'amber' : h < 160 ? 'green' : h < 200 ? 'teal' : h < 260 ? 'blue' : h < 320 ? 'violet' : 'rose'; };
const hues = new Map();
if (bEl) walk(bEl, (el) => {
if (!visible(el)) return;
const s = getComputedStyle(el);
for (const [prop, val] of [['color', s.color], ['bg', s.backgroundColor], ['border', s.borderTopColor]]) {
const h = hueOf(rgb(val)); if (h) { const k = h; hues.set(k, (hues.get(k) || 0) + 1); }
}
});
/* ---------- v16 [12] 底部按钮：工作台里所有 button / .kf-btn / .btn-key 的高度与背景 ---------- */
const btns = [];
walk(vr, (el) => {
if (!visible(el)) return;
const isBtn = el.localName === 'button' || el.classList?.contains('kf-btn') || el.classList?.contains('btn-key');
if (!isBtn) return;
const r = el.getBoundingClientRect(); const s = getComputedStyle(el);
btns.push({ label: el.textContent.replace(/\s+/g, ' ').trim().slice(0, 12), h: Math.round(r.height), bg: s.backgroundColor, border: s.borderTopWidth + ' ' + s.borderTopColor });
});
return {
view: view.localName,
statDensity, hues: [...hues.entries()], btns,
rows: gridRows.map((g) => ({ cls: g.cls, cols: g.cols, kids: g.kids.map((k) => ({ role: k.role, ...k.rect })) })),
A, B, C, D, E, F,
bento: {
A: A?.w ?? null, B: B?.w ?? null, aCols: aColsExact, colDbg,
ABheightDiff: A && B ? +Math.abs(A.h - B.h).toFixed(1) : null,
CDE: C && D && E ? { w: [C.w, D.w, E.w], h: [C.h, D.h, E.h], hDiff: +(Math.max(C.h, D.h, E.h) - Math.min(C.h, D.h, E.h)).toFixed(1) } : null,
F: F || null,
},
Bbg, BbgText, Bcontrast, Bother,
gaps,
facePad,
fonts: { tiers: Object.keys(fsCount).sort((p, q) => parseFloat(p) - parseFloat(q)), count: fsCount, where: Object.fromEntries(Object.entries(fsWhere).map(([k, v]) => [k, [...v]])) },
sparks: { inView: vr.querySelectorAll('kf-spark').length, inPage: document.querySelectorAll('*').length && (() => { let n = 0; walk(document, (e) => { if (e.localName === 'kf-spark') n++; }); return n; })() },
overflow: { scrollWidth: document.documentElement.scrollWidth, clientWidth: document.documentElement.clientWidth },
};
})()`;
/* 确定性：实例化一个 view-workbench（自定义元素，不需要 import 模块），挂到主列最前面；
.db 是页面已加载的同一份，但卡池只留前 5 张——「5 张」是改前数据快照里的真实值。
之前想 new ViewWorkbench() 是死路：模块里的类没 define，Lit 的属性表是空的（见 git 记录）。 */
const DET_FN = async () => {
const main = document.querySelector('kf-app').shadowRoot.querySelector('main#view');
const tpl = document.createElement('template');
tpl.innerHTML = '';
const v = tpl.content.firstElementChild;
/* evaluate 每次拿到的是不同的 JS realm，顶层 import 拿到的是模块的**另一份实例**（Lit 会直接拒绝构造）。
所以不 import 任何模块：从 realm 的全局拿到页面里同一个 kf-app，再顺着它的 shadow root 取。 */
const app = document.querySelector('kf-app');
const view = app.shadowRoot.querySelector('main#view').firstElementChild;
const db = view.db;
v.db = { ...db, opportunities: db.opportunities.slice(0, 5) };
v.me = '赵磊';
main.prepend(v);
await new Promise((r) => setTimeout(r, 600));
return { kids: v.shadowRoot?.childElementCount ?? -1 };
};
/* 数据的随机部分（卡池状态 / 进程数）会随时间漂：卡多一张，首行卡就高一截。所以每个状态都量两次：
- live：页面真身（刷新即变）
- det（确定性）：同一页面、再跑一次，只把卡池那一截的随机变量抹平（见 DET_FN），用于 before/after 对比 */
await mount('/');
const desktop = await page.evaluate(DESKTOP);
const probeInfo = await page.evaluate(DET_FN);
await page.waitForTimeout(500);
const desktopDet = await page.evaluate(DESKTOP);
if (!probeInfo || probeInfo.kids <= 0) console.log('[probe] 确定性实例未挂上：', JSON.stringify(probeInfo));
/* 全站普通卡片：backdrop-filter / box-shadow 计数（四页） */
const glassScan = async () => {
await page.goto(new URL('/', BASE).href, { waitUntil: 'networkidle' }); // 同源，占位
const SCAN = `(() => { ${DEEP}
let blur = 0, shadow = 0; const blurWhere = new Set(), shadowWhere = new Set();
walk(document, (el) => {
const s = getComputedStyle(el);
const bf = s.backdropFilter || s.webkitBackdropFilter;
const vis = el.getBoundingClientRect().width > 8 && el.getBoundingClientRect().height > 4 && shownByStyle(el);
if (!vis) return;
if (bf && bf !== 'none') { blur++; blurWhere.add(elLabel(el)); }
if (s.boxShadow && s.boxShadow !== 'none') { shadow++; shadowWhere.add(elLabel(el)); }
});
return { blur, shadow, blurWhere: [...blurWhere], shadowWhere: [...shadowWhere] };
})()`;
const out = {};
for (const p of ['/', '/pool', '/stages', '/reports']) {
await mount(p);
out[p] = await page.evaluate(SCAN);
}
return out;
};
const glass = await glassScan();
/* 空状态 B：本月没有我的成果 —— 真实数据里每个人都有成果，所以就地实例化一个 view-workbench
（同一份 db，me 给一个不存在的名字 = 「选了个本月没交东西的人」）。用 customElements 里已注册的类，
不要 import 模块 —— 模块里的类没有 define（自定义元素已存在），new 它出来 render 不会生成任何节点。 */
await page.evaluate(() => localStorage.setItem('kf-board:me', JSON.stringify('赵磊')));
await mount('/');
const nobodyProbe = await page.evaluate(async () => {
/* 每次刷新都会重建 kf-app；离屏的确定性实例先在页面里摘掉（页面重新渲染时也会清掉） */
document.getElementById('v15-det')?.remove();
const main = document.querySelector('kf-app').shadowRoot.querySelector('main#view');
const tpl = document.createElement('template');
tpl.innerHTML = '';
const v = tpl.content.firstElementChild;
v.db = main.querySelector('view-workbench').db; v.me = '_nobody_';
main.prepend(v);
await new Promise((r) => setTimeout(r, 600));
return { kids: v.shadowRoot?.childElementCount ?? -1 };
});
const nobody = await page.evaluate(`(() => { ${DEEP}
const vr = (document.getElementById('v15-probe') || appR().querySelector('main#view').firstElementChild).shadowRoot;
const a = vr.querySelector('kf-glass-card[data-role="a"]');
return { kids: vr.childElementCount,
roles: [...vr.querySelectorAll('kf-glass-card')].map((c) => c.dataset.role || '').filter(Boolean),
Aheight: a ? Math.round(a.getBoundingClientRect().height) : null,
text: vr.textContent.replace(/\\s+/g, ' ').trim().slice(0, 240) };
})()`);
nobody.probe = nobodyProbe;
/* 空状态 A：未选身份 */
await page.evaluate(() => document.getElementById('v15-probe')?.remove());
await page.waitForTimeout(300);
/* 清掉「我是」再重新挂载：kf-app 在 constructor 里读 localStorage，只清值不刷新不会生效 */
await page.evaluate(() => localStorage.removeItem('kf-board:me'));
await mount('/');
const noMe = await page.evaluate(`(() => { ${DEEP}
const vr = (document.getElementById('v15-probe') || appR().querySelector('main#view').firstElementChild).shadowRoot;
const a = vr.querySelector('kf-glass-card[data-role="a"]');
return { roles: [...vr.querySelectorAll('kf-glass-card')].map((c) => c.dataset.role || '').filter(Boolean),
Aheight: a ? Math.round(a.getBoundingClientRect().height) : null,
allstages: vr.querySelectorAll('[data-allstages] [data-stage]').length,
text: vr.textContent.replace(/\\s+/g, ' ').trim().slice(0, 240) };
})()`);
/* 空状态 C：没人卡住 —— 用真数据克隆一份 db，把每个人的 stuck 置 false（等于「8 小时内都有新成果」），
同一个页面里挂第二个实例（设成 overflow:hidden 的离屏盒里量高度，不影响页面）。 */
const noStall = await page.evaluate(async () => {
const main = document.querySelector('kf-app').shadowRoot.querySelector('main#view');
const live = main.querySelector('view-workbench');
const db = live.db;
const members = db.members.map((m) => ({ ...m, stuck: false, stuckHours: 0 }));
const box = document.createElement('div');
box.id = 'v15-ok';
box.style.cssText = 'position:absolute;left:-9999px;top:0;width:1200px';
document.body.append(box);
const tpl = document.createElement('template');
tpl.innerHTML = '';
const v = tpl.content.firstElementChild;
v.db = { ...db, members, memberByName: Object.fromEntries(members.map((m) => [m.name, m])) };
v.me = '赵磊';
box.append(v);
await new Promise((r) => setTimeout(r, 700));
const vr = v.shadowRoot;
const a = vr.querySelector('kf-glass-card[data-role="a"]') || vr.querySelector('.grid2 > kf-glass-card');
const b = vr.querySelector('kf-glass-card[data-role="b"]') || vr.querySelector('.grid2 > kf-glass-card:nth-child(2)');
const out = { stalledItems: vr.querySelectorAll('[data-stalled]').length,
/* 改前代码没有 data-role：B 卡是首行第二张 kf-glass-card */
bText: b ? b.textContent.replace(/\s+/g, ' ').trim().slice(0, 120) : '',
aH: a ? Math.round(a.getBoundingClientRect().height) : null, bH: b ? Math.round(b.getBoundingClientRect().height) : null,
dot: b?.querySelector('.dot') ? getComputedStyle(b.querySelector('.dot')).backgroundColor : '',
bg: b ? getComputedStyle(b.shadowRoot.querySelector('.frame')).backgroundColor : '' };
/* 不摘离屏实例：摘掉的一瞬间它的 Lit 更新周期会把空的更新排队，影响到页面里同一组件的其它实例 */
window.__v15ok = box;
return out;
});
const stalled = await page.evaluate(() => (document.querySelector('kf-app')?.shadowRoot?.querySelector('main#view')?.firstElementChild?.shadowRoot?.querySelectorAll('[data-stalled]').length) ?? -1);
/* ---------------- 手机 393 ---------------- */
const mctx = await browser.newContext({ viewport: { width: 393, height: 852 }, deviceScaleFactor: 1, isMobile: true, hasTouch: true });
await mctx.addInitScript((name) => { try { localStorage.setItem('kf-board:me', JSON.stringify(name)); } catch { /* ignore */ } }, ME);
/* 手机上下文只加载一次，initScript 不会重跑，不需要上面那个一次性开关 */
const mpage = await mctx.newPage();
mpage.on('pageerror', (e) => errors.push('mobile: ' + e.message));
await mpage.goto(new URL('/', BASE).href, { waitUntil: 'networkidle' });
await mpage.waitForFunction(() => {
const a = document.querySelector('kf-app');
const v = a?.shadowRoot?.querySelector('main#view')?.firstElementChild;
return !!v && v.shadowRoot && v.shadowRoot.childElementCount > 0;
}, null, { timeout: 20000 });
await mpage.waitForTimeout(600);
await mpage.evaluate(DET_FN);
const mobile = await mpage.evaluate(`(() => { ${DEEP}
const vr = (document.getElementById('v15-det') || appR().querySelector('main#view').firstElementChild).shadowRoot;
const R = (el) => { const b = el.getBoundingClientRect(); return { x: +b.x.toFixed(1), y: +b.y.toFixed(1), w: +b.width.toFixed(1), h: +b.height.toFixed(1) }; };
const a = vr.querySelector('kf-glass-card[data-role="a"]'), b = vr.querySelector('kf-glass-card[data-role="b"]');
const rowInfo = (() => { const out = []; for (let q = a.parentElement; q && q !== vr; q = q.parentElement) out.push(q.localName + '.' + q.className + '@' + Math.round(q.getBoundingClientRect().top) + '-' + Math.round(q.getBoundingClientRect().bottom)); return out; })();
const fsCount = {};
walk(vr, (el) => {
if (![...el.childNodes].some((n) => n.nodeType === 3 && n.textContent.trim())) return;
if (!visible(el)) return;
const k = Math.round(parseFloat(getComputedStyle(el).fontSize) * 10) / 10 + 'px';
fsCount[k] = (fsCount[k] || 0) + 1;
});
/* 横向溢出：任一可见元素右边超出视口 */
let over = [];
/* 只算「看得见」的：display/visibility/opacity 链要正常 —— 关着的抽屉/弹层还在 DOM 里（在视口右外侧），不算溢出 */
walk(vr, (el) => { const r = el.getBoundingClientRect(); if (r.width > 0 && r.right > document.documentElement.clientWidth + 1 && shownByStyle(el)) over.push(elLabel(el) + '@' + Math.round(r.right)); });
return { scrollWidth: document.documentElement.scrollWidth, clientWidth: document.documentElement.clientWidth,
A: a ? R(a) : null, B: b ? R(b) : null,
/* 堆叠 = B 在垂直方向完全位于 A 下方且与 A 左边缘对齐（同一列里上下排）。
不能拿「一行」的 bottom 比 —— 行的 bottom 跟着最高的卡走，B 自己就是行内最高时恒为 false。 */
stacked: a && b ? Math.abs(a.getBoundingClientRect().left - b.getBoundingClientRect().left) < 2
&& b.getBoundingClientRect().top >= a.getBoundingClientRect().bottom - 1 : null,
CDE: ['c', 'd', 'e'].map((r) => { const k = vr.querySelector('kf-glass-card[data-role="' + r + '"]'); return k ? R(k) : null; }),
fonts: Object.keys(fsCount).sort((p, q) => parseFloat(p) - parseFloat(q)), fontSizeCount: fsCount,
overflowing: [...new Set(over)].slice(0, 10) };
})()`);
/* ---------------- v12 回归 ---------------- */
let v12 = null;
if (argv.includes('--no-regress')) {
for (const p of ['v15/v12-desktop.txt', 'v15/v12-mobile.txt']) void p;
try {
const out = execFileSync(process.execPath, [join(ROOT, 'scripts/verify-visual-v12.mjs'), '--tag', 'before'], { cwd: ROOT, encoding: 'utf8', timeout: 300000, env: { ...process.env, VERIFY_PORT: '4199' } });
v12 = out;
} catch (e) {
v12 = (e.stdout || '') + (e.stderr || '') + `\n[exit ${e.status}]`;
}
}
const result = { codeFrom: FROM, codeSha, probeInfo, tag: TAG, at: new Date().toISOString(), desktop, desktopDet, glass, noMe, nobody, noStall, stalledCount: stalled, mobile, v12, errors };
/* ---------------- 打印 ---------------- */
const L = (s = '') => console.log(s);
L(`\n===== verify-v15 · ${TAG} · ${result.at} =====`);
L(`代码来源 ${FROM} · view-workbench.js sha1 ${codeSha}`);
L(`\n[1] Bento 栅格（1440，确定性数据：我的成果=2，卡池状态/份数保持数据快照「before」时刻）`);
const bt = desktopDet.bento;
L(` A 宽 ${bt.A ?? '—'}px / B 宽 ${bt.B ?? '—'}px → 视觉 ${bt.aCols ?? '—'} 列 : ${bt.A && bt.B ? 12 - bt.aCols : '—'} 列`);
L(` A/B 高度差 ${bt.ABheightDiff}px ${bt.ABheightDiff != null && bt.ABheightDiff <= 2 ? '✓' : '✗（要求 ≤2）'}`);
L(` 短卡 C/D/E 宽 ${bt.CDE?.w.join(' / ')} 高 ${bt.CDE?.h.join(' / ')} 高差 ${bt.CDE?.hDiff}px ${bt.CDE?.hDiff != null && bt.CDE.hDiff <= 2 ? '✓' : '✗（要求 ≤2）'}`);
L(` F 通栏 ${bt.F ? `宽 ${bt.F.w}px 高 ${bt.F.h}px` : '（无）'}`);
L(`\n[2] B 卡深色 / C/D/E/F 在确定性数据下`);
L(` B 背景 ${desktopDet.BbgText || '（无 data-role="b" 的卡）'}`);
L(` C/D/E ${desktopDet.bento.CDE ? `宽 ${desktopDet.bento.CDE.w.join(' / ')} 高 ${desktopDet.bento.CDE.h.join(' / ')} 高差 ${desktopDet.bento.CDE.hDiff}px` : '（无 data-role=c/d/e 的卡）'}`);
L(` F 通栏 ${desktopDet.bento.F ? `宽 ${desktopDet.bento.F.w}px 高 ${desktopDet.bento.F.h}px` : '（无 data-role="f" 的卡）'}`);
L(` A 占 ${desktopDet.bento.aCols} / 12 列`);
L(` — 实时数据（页面真身）：A ${desktop.bento.A} / B ${desktop.bento.B} 高差 ${desktop.bento.ABheightDiff}px；C/D/E 高差 ${desktop.bento.CDE?.hDiff}px`);
L(` B 背景 ${desktop.BbgText}`);
if (desktop.Bbg) {
const lum = ({ r, g, b }) => { const f = (v) => { v /= 255; return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4); }; return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b); };
L(` 亮度 ${lum(desktop.Bbg).toFixed(3)} ${lum(desktop.Bbg) < 0.35 ? '✓（<0.35）' : '✗'}`);
}
if (desktop.Bcontrast) {
L(` 最差对比度 ${desktop.Bcontrast.c}:1（“${desktop.Bcontrast.t}”） ${desktop.Bcontrast.c >= 7 ? '✓（≥7）' : '✗（要求 ≥7）'}`);
L(` 逐段：${desktop.Bother.map((o) => `${o.c}:1「${o.t}」`).join(' ')}`);
}
L(`\n[3] 主列相邻块间距（上→下）`);
for (const g of desktopDet.gaps) L(` ${String(g.gap).padStart(6)}px ${g.between}`);
L(`\n[4] 卡片 .face 内边距`);
const padCount = {};
for (const p of desktopDet.facePad) padCount[p.pad] = (padCount[p.pad] || 0) + 1;
L(` ${JSON.stringify(padCount)} ${Object.keys(padCount).length === 1 && Object.keys(padCount)[0] === '20px' ? '✓' : '✗（要求 20px）'}`);
L(` 逐卡：${desktopDet.facePad.map((p) => `${p.role || '?'}=${p.pad}`).join(' ')}`);
L(`\n[5] 字号档（工作台可见文字，1440）`);
L(` ${desktopDet.fonts.tiers.length} 档：${desktopDet.fonts.tiers.join(' / ')} ${desktopDet.fonts.tiers.length <= 5 && !desktopDet.fonts.tiers.includes('11px') ? '✓' : '✗'}`);
for (const k of desktopDet.fonts.tiers) L(` ${k.padStart(5)} × ${desktopDet.fonts.count[k]} ${desktopDet.fonts.where[k].join(', ')}`);
if (desktop.fonts.tiers.join() !== desktopDet.fonts.tiers.join()) L(` （实时数据下的档位：${desktop.fonts.tiers.join(' / ')}）`);
L(`\n[6] kf-spark：工作台 ${desktop.sparks.inView} 个，全站 ${desktop.sparks.inPage} 个`);
L(` 评分是实时数据：B 卡当前 ${stalled} 人卡住；C/D/E 数值随数据变化，对比只看结构与高差`);
L(`\n[7] 普通卡片玻璃/阴影（跨 shadow，可见元素）`);
for (const [p, v] of Object.entries(glass)) L(` ${p.padEnd(9)} backdrop-filter ${String(v.blur).padStart(3)} box-shadow ${String(v.shadow).padStart(3)} ${v.blur ? '[' + v.blurWhere.slice(0, 6).join(', ') + ']' : ''}`);
L(`\n[8] 空状态`);
L(` 未选身份：roles=${noMe.roles.join(',')} A 高 ${noMe.Aheight}px [data-allstages] ${noMe.allstages}`);
L(` 「${noMe.text.slice(0, 140)}」`);
L(` 不存在的人（本月无成果）：roles=${nobody.roles.join(',')} A 高 ${nobody.Aheight}px`);
L(` 「${nobody.text.slice(0, 160)}」`);
L(` 没人卡住（克隆 db，stuck 全置 false）：[data-stalled] ${noStall.stalledItems} A 高 ${noStall.aH} / B 高 ${noStall.bH}（差 ${Math.abs(noStall.aH - noStall.bH)}）`);
L(` B 底 ${noStall.bg} 点 ${noStall.dot} 「${noStall.bText}」`);
L(` 当前实时数据里卡住的人：[data-stalled] ${stalled}`);
L(`\n[9] 移动端 393×852`);
const m = mobile;
L(` scrollWidth ${m.scrollWidth} / clientWidth ${m.clientWidth} ${m.scrollWidth === m.clientWidth ? '✓' : '✗ 横向溢出'}`);
if (m.A && m.B) L(` A ${m.A.w}×${m.A.h} @y${m.A.y} B ${m.B.w}×${m.B.h} @y${m.B.y} 堆叠 ${m.stacked ? '✓' : '✗'}`);
L(` C/D/E ${m.CDE.map((k) => k ? `${k.w}×${k.h}@y${k.y}` : '—').join(' ')}`);
L(` 字号档 ${m.fonts.join(' / ')} ${m.fonts.length <= 5 && !m.fonts.includes('11px') ? '✓' : '✗'}`);
if (m.overflowing.length) L(` 超出视口：${m.overflowing.join(', ')}`);
if (errors.length) L(`\n[!] 页面错误 ${errors.length}：\n ${errors.join('\n ')}`);
if (v12) {
L(`\n[10] v12 回归（verify-visual-v12 --tag before）`);
L(v12.split('\n').filter((l) => /✗|FAIL|失败|exit|总|汇总|项/.test(l)).slice(0, 60).join('\n'));
}
L(`\n[10] 短卡内容密度（字符数 / 卡面积 × 10⁴；dr1 基准 29 字 / 33 600px² = 8.6）`);
for (const s of desktopDet.statDensity || []) L(` ${s.role} ${s.w}×${s.h} ${s.chars} 字 → ${s.per1e4} ${s.per1e4 >= 8.6 * 0.7 ? '✓（≥ 基准 70%）' : '✗'} 「${s.text}」`);
L(`\n[11] 深色卡色相数（要求 ≤2；dr6 实测 1）`);
L(` ${(desktop.hues || []).map(([h, n]) => `${h}×${n}`).join(' ') || '（无色相）'} → ${(desktop.hues || []).length} 种 ${(desktop.hues || []).length <= 2 ? '✓' : '✗'}`);
L(`\n[12] 工作台按钮（高度 / 背景 / 描边）`);
for (const b of desktop.btns || []) L(` ${String(b.h).padStart(3)}px ${b.label.padEnd(8)} ${b.bg} ${b.border}`);
L(` → ${(desktop.btns || []).filter((b) => b.h > 32).length} 个 >32px ${(desktop.btns || []).filter((b) => b.h > 32).length === 0 ? '✓' : '✗'}`);
if (JSON_OUT) {
const p = JSON_OUT.startsWith('/') ? JSON_OUT : join(ROOT, JSON_OUT);
writeFileSync(p, JSON.stringify(result, null, 2));
L(`\n→ ${p}`);
}
};
try {
await main();
} finally {
await browser.close();
try { srv.kill(); } catch { /* ignore */ }
cleanup();
}