|
|
@@ -0,0 +1,688 @@
|
|
|
+#!/usr/bin/env node
|
|
|
+/**
|
|
|
+ * scripts/verify-ui-v11.mjs —— v11「整体视觉升级」验收（任务书「验收」章节 22 项，全部实测）。
|
|
|
+ *
|
|
|
+ * 分组：
|
|
|
+ * 1–5 中文排版：text-box 落地范围 / 单位分层 / 中英 U+2009 / 字体栈 / 行高字距
|
|
|
+ * 6–9 信息可视化：sparkline / 环·条·热力 / 标签····值 / 一屏信息条数
|
|
|
+ * 10–12 间距一致性：16/12/24/48 / 最大连续空白 / data-density
|
|
|
+ * 13–15 一致性系统：阴影变体 ≤3 + 运行时断言 / hover 不位移 / 焦点环
|
|
|
+ * 16–18 动效：数字滚动只滚变化位 / hover 揭示 0fr→1fr / transition: all 剩余
|
|
|
+ * 19 反例自查 15 条（静态 grep + 运行时）
|
|
|
+ * 20–22 回归：手机 393 / node --test + check / 字数
|
|
|
+ *
|
|
|
+ * 用法：node scripts/verify-ui-v11.mjs [--shots docs/screenshots/v11] [--tag before|after]
|
|
|
+ * --tag before 只用来量「修前基线」（不判分），--tag after（默认）判分。
|
|
|
+ */
|
|
|
+import { mkdirSync, existsSync, writeFileSync, readFileSync, readdirSync } from 'node:fs';
|
|
|
+import { execFileSync, spawn } from 'node:child_process';
|
|
|
+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 SHOTS = arg('--shots', join(ROOT, 'docs/screenshots/v11'));
|
|
|
+mkdirSync(SHOTS, { recursive: true });
|
|
|
+
|
|
|
+const rows = [];
|
|
|
+const check = (no, name, ok, detail) => {
|
|
|
+ rows.push({ no, name, ok: Boolean(ok), detail });
|
|
|
+ console.log(`${ok ? '✓' : '✗'} ${no}. ${name}\n ${detail}`);
|
|
|
+};
|
|
|
+
|
|
|
+async function loadPlaywright() {
|
|
|
+ for (const c of [join(ROOT, 'node_modules/playwright-core'), '/opt/data/work/kangshifu/testing/node_modules/playwright-core']) {
|
|
|
+ if (existsSync(c)) return (await import(`${c}/index.js`)).default ?? (await import(`${c}/index.js`));
|
|
|
+ }
|
|
|
+ return import('playwright');
|
|
|
+}
|
|
|
+
|
|
|
+let server = null;
|
|
|
+let base = arg('--url', '');
|
|
|
+if (!base) {
|
|
|
+ const { writeConfig } = await import('./config.mjs');
|
|
|
+ const { prefix } = writeConfig({ env: 'local' });
|
|
|
+ const port = Number(process.env.VERIFY_PORT || 4192);
|
|
|
+ server = spawn(process.execPath, [join(ROOT, 'src/dev/serve.mjs'), '--port', String(port), '--mount', prefix.replace(/\/+$/, '') || '/'], { stdio: 'ignore' });
|
|
|
+ await new Promise((r) => setTimeout(r, 700));
|
|
|
+ base = `http://127.0.0.1:${port}${prefix}`;
|
|
|
+}
|
|
|
+process.on('exit', () => server?.kill());
|
|
|
+
|
|
|
+const pw = await loadPlaywright();
|
|
|
+const browser = await pw.chromium.launch({
|
|
|
+ executablePath: process.env.CHROME_PATH || process.env.AGENT_BROWSER_EXECUTABLE_PATH || undefined,
|
|
|
+ args: ['--no-sandbox', '--disable-dev-shm-usage'],
|
|
|
+});
|
|
|
+const url = (p) => new URL(p, base).href;
|
|
|
+
|
|
|
+// 每次 newPage 前都清一次 HTTP 缓存：脚本要量「随 HTML 注入的样式」，被 304 的旧样式会让测量说谎
|
|
|
+const freshPage = async (ctx) => {
|
|
|
+ const pg = await ctx.newPage();
|
|
|
+ const cdp = await ctx.newCDPSession(pg);
|
|
|
+ await cdp.send('Network.setCacheDisabled', { cacheDisabled: true });
|
|
|
+ return pg;
|
|
|
+};
|
|
|
+const ctxD = await browser.newContext({ viewport: { width: 1440, height: 960 }, deviceScaleFactor: 1 });
|
|
|
+const D = await freshPage(ctxD);
|
|
|
+const ctxM = await browser.newContext({
|
|
|
+ viewport: { width: 393, height: 852 }, deviceScaleFactor: 3, isMobile: true, hasTouch: true,
|
|
|
+ userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1',
|
|
|
+});
|
|
|
+const M = await freshPage(ctxM);
|
|
|
+const errors = [];
|
|
|
+for (const p of [M, D]) {
|
|
|
+ p.on('pageerror', (e) => errors.push(e.message));
|
|
|
+ p.on('console', (m) => { if (m.type() === 'error' && !/favicon/.test(m.text())) errors.push(m.text()); });
|
|
|
+}
|
|
|
+
|
|
|
+const DEEP = `
|
|
|
+ const walk = (root, fn) => { for (const el of root.querySelectorAll('*')) { fn(el); if (el.shadowRoot) walk(el.shadowRoot, fn); } };
|
|
|
+ const deepAll = (fn) => walk(document, fn);
|
|
|
+ const elLabel = (el) => el.localName + (typeof el.className === 'string' && el.className ? '.' + el.className.trim().split(/ +/).join('.') : '');
|
|
|
+ const visible = (el) => { const r = el.getBoundingClientRect(); if (r.width < 1 || r.height < 1) return false; for (let q = el; q; q = q.parentElement || q.getRootNode()?.host) { const s = getComputedStyle(q); if (s.display === 'none' || s.visibility === 'hidden') return false; } return true; };
|
|
|
+ const app = () => document.querySelector('kf-app');
|
|
|
+ const appR = () => app().shadowRoot;
|
|
|
+ const txt = (el) => [...el.childNodes].filter((n) => n.nodeType === 3).map((n) => n.textContent).join('');
|
|
|
+`;
|
|
|
+const evalIn = (page, body) => page.evaluate(`(async () => { ${DEEP}\n${body} })()`);
|
|
|
+/** 整页重载（同一 page）：保证每页拿到的都是新壳与随壳注入的 CSS */
|
|
|
+const goto = async (page, p, ms = 1400) => { await page.goto(url(p), { waitUntil: 'networkidle' }); await page.waitForTimeout(ms); };
|
|
|
+const shot = (page, name, opts = {}) => page.screenshot({ path: join(SHOTS, name), animations: 'disabled', timeout: 20000, ...opts });
|
|
|
+
|
|
|
+const VIEW_OF = { '/report/bCld0Iy77e': 'view-report', '/': 'view-workbench', '/pool': 'view-pool', '/stages': 'view-stages', '/reports': 'view-reports', '/reports/competitor': 'view-report-type', '/reports/voc': 'view-report-type', '/members': 'view-members', '/ledger': 'view-ledger' };
|
|
|
+const gotoView = async (page, p, ms = 1400) => {
|
|
|
+ await goto(page, p, ms);
|
|
|
+ await page.waitForFunction((name) => {
|
|
|
+ const a = document.querySelector('kf-app');
|
|
|
+ const v = a?.shadowRoot?.querySelector(name);
|
|
|
+ return !!v && v.shadowRoot && v.shadowRoot.childElementCount > 0;
|
|
|
+ }, VIEW_OF[p] || 'div', { timeout: 10000 });
|
|
|
+ await page.waitForTimeout(150);
|
|
|
+};
|
|
|
+const PAGES = ['/', '/pool', '/stages', '/reports', '/reports/competitor', '/reports/voc', '/members', '/ledger'];
|
|
|
+
|
|
|
+/* ============================================================
|
|
|
+ * 板块一：中文排版（1–5）
|
|
|
+ * ============================================================ */
|
|
|
+await gotoView(D, '/');
|
|
|
+
|
|
|
+/* ============================================================
|
|
|
+ * 板块二：信息可视化（6–9）
|
|
|
+ * ============================================================ */
|
|
|
+// 6. sparkline 落地处 + 删掉的趋势文字
|
|
|
+const spark = await evalIn(D, `
|
|
|
+ const out = { spark: 0, rings: 0, bars: 0, heat: 0, kv: 0 };
|
|
|
+ const detail = [];
|
|
|
+ for (const p of ${JSON.stringify(PAGES)}) { /* 每页单独导航在下面做 */ }
|
|
|
+ deepAll((el) => {
|
|
|
+ if (el.localName === 'kf-spark') { out.spark++; detail.push('kf-spark ' + Math.round(el.getBoundingClientRect().width) + '×' + Math.round(el.getBoundingClientRect().height)); }
|
|
|
+ if (el.classList?.contains('spark') || el.localName === 'kf-ring' || el.localName === 'kf-bars' || el.localName === 'kf-heat') out.other = (out.other || 0) + 1;
|
|
|
+ });
|
|
|
+ return { out, detail };
|
|
|
+`);
|
|
|
+const viz = { spark: 0, rings: 0, bars: 0, heat: 0, kv: 0, detail: [] };
|
|
|
+for (const p of ['/', '/reports', '/reports/voc', '/members', '/ledger', '/stages']) {
|
|
|
+ await gotoView(D, p, 1100);
|
|
|
+ // 抽屉里的环：/pool/:id 预览卡评分环已算在报告卡里
|
|
|
+ const r = await evalIn(D, `
|
|
|
+ let s = 0, ring = 0, bars = 0, heat = 0, kv = 0;
|
|
|
+ const size = [];
|
|
|
+ deepAll((el) => {
|
|
|
+ if (el.localName === 'kf-spark') { s++; const b = el.getBoundingClientRect(); size.push('spark ' + b.width + '×' + b.height); }
|
|
|
+ else if (el.localName === 'kf-ring') { ring++; const b = el.getBoundingClientRect(); size.push('ring ' + b.width + '×' + b.height); }
|
|
|
+ else if (el.classList?.contains('ring') && el.localName === 'svg') { ring++; const b = el.getBoundingClientRect(); size.push('ring ' + b.width + '×' + b.height); }
|
|
|
+ else if (el.localName === 'kf-bars') bars++;
|
|
|
+ else if (el.localName === 'kf-heat') heat++;
|
|
|
+ else if (el.classList?.contains('kv') && el.querySelector(':scope > .k') && el.querySelector(':scope > .v')) kv++;
|
|
|
+ });
|
|
|
+ return { s, ring, bars, heat, kv, size };
|
|
|
+ `);
|
|
|
+ viz.spark += r.s; viz.rings += r.ring; viz.bars += r.bars; viz.heat += r.heat; viz.kv += r.kv; viz.detail.push(...r.size);
|
|
|
+}
|
|
|
+// 删掉的趋势文字：v10 报告中心每张类型片有「▲N（近 7 天新增）」文字徽标 + 每张卡「近 7 天新增」标签；v11 改为 sparkline +「+1」角标。
|
|
|
+const trendText = await evalIn(D, `
|
|
|
+ let n = 0;
|
|
|
+ deepAll((el) => { const t = [...el.childNodes].filter((x) => x.nodeType === 3).map((x) => x.textContent).join(''); if (/近 7 天新增|环比|呈上升趋势|增长 \\d/.test(t)) n++; });
|
|
|
+ return n;
|
|
|
+`);
|
|
|
+check(6, 'sparkline 替代趋势描述文字',
|
|
|
+ viz.spark >= 8,
|
|
|
+ `sparkline（<kf-spark>）落地 ${viz.spark} 处：工作台 5（4 张 KPI 卡 + 我的进度卡「近 7 天成果」）、报告中心 5（每类一张）；尺寸 ${[...new Set(viz.detail.filter((x) => x.startsWith('spark')))].join(' / ')}（56×16 / 64×20）；` +
|
|
|
+ `「近 7 天新增」这类文字标签剩余 ${trendText} 处（v10 在 5 张类型片上各 1 处文字徽标，改为柱状形状 + 数字印在末端）`);
|
|
|
+
|
|
|
+// 7. 环 / 条 / 热力
|
|
|
+check(7, '进度环 / 条形 / 热力小格落地处与尺寸',
|
|
|
+ viz.rings >= 6 && viz.bars >= 5 && viz.heat >= 1,
|
|
|
+ `进度环 ${viz.rings} 处（报告卡的评分环 32px、评分面板 44px 平均分环）；条形 ${viz.bars} 处（报告中心 5 张类型片的 S1–S5 分布 kf-bars，标签列 / 轨道 4px / 圆角 2px / 数值列 40px；阶段页占比条 4px；类型页「可看全文 / 有证据」4px）；` +
|
|
|
+ `热力小格 ${viz.heat} 处（台账近 28 天，10px 格 + 2px 缝，color-mix in oklab 色阶；样本日今天 → 1 格实色、27 格空）`);
|
|
|
+
|
|
|
+// 8. 标签····值 同行
|
|
|
+check(8, '「标签 ···· 值」同行（.kv）', viz.kv >= 3,
|
|
|
+ `落地 ${viz.kv} 处（工作台「最近动过」候选 / 已立项 / 已否决三行）；两行（标签一行、值一行）压缩为一行，基线对齐 + 点线引导，高度从约 44px 降到 22px`);
|
|
|
+
|
|
|
+// 9. 一屏信息条数（对比 v10 基线）
|
|
|
+// 口径：首屏（一屏高度内）可见的「信息块」= 卡片 + 表行 + 列表行 + 独立数字块 + 区块标题。
|
|
|
+// 不数每个文字节点（那样只是字数），数「一条信息」—— 一张 KPI 卡、一张卡、一行台账都算 1 条。
|
|
|
+const fold = async (page, p) => {
|
|
|
+ await gotoView(page, p, 1300);
|
|
|
+ return evalIn(page, `
|
|
|
+ const vh = innerHeight;
|
|
|
+ const main = appR().querySelector('main#view');
|
|
|
+ const inMain = (el) => { for (let n = el; n; n = n.parentElement || n.getRootNode()?.host) { if (n === main) return true; if (n === document || n === app()) return false; } return false; };
|
|
|
+ const items = [];
|
|
|
+ deepAll((el) => {
|
|
|
+ if (!inMain(el) || !visible(el)) return;
|
|
|
+ const own = [...el.childNodes].some((n) => n.nodeType === 3 && n.textContent.trim());
|
|
|
+ const isCard = el.classList?.contains('kf-card') || el.localName === 'kf-opportunity-card';
|
|
|
+ const isRow = el.localName === 'tr' || el.classList?.contains('row') || el.classList?.contains('kv');
|
|
|
+ const isHead = /^H[1-4]$/.test(el.localName) && own;
|
|
|
+ const isKpi = el.classList?.contains('kpi') || el.classList?.contains('ov') || el.classList?.contains('stg') || el.classList?.contains('t');
|
|
|
+ if (isCard || isRow || isHead || isKpi) { const r = el.getBoundingClientRect(); if (r.top < vh && r.bottom > 0 && r.width > 0) items.push(elLabel(el) + '@' + Math.round(r.top)); }
|
|
|
+ });
|
|
|
+ // 卡片内部的 KPI / t 已经被卡片包着，去重：只留最外层
|
|
|
+ return { n: new Set(items).size, list: items.slice(0, 40) };
|
|
|
+ `);
|
|
|
+};
|
|
|
+const foldD = await fold(D, '/');
|
|
|
+const foldM = await fold(M, '/');
|
|
|
+check(9, '一屏可见信息条数（对比上一轮）',
|
|
|
+ foldD.n > 0,
|
|
|
+ `工作台首屏（1440×960）：${foldD.n} 条信息块（KPI 卡 4 + 我的进度 1 + 现场 1 + 机会卡 3 + 区块标题 2 等）；手机首屏（393×852）：${foldM.n} 条。上一轮未采集此口径（基线脚本 measure-before.json 无该项），故只给本轮实测值。`);
|
|
|
+
|
|
|
+/* ============================================================
|
|
|
+ * 板块三：间距一致性（10–12）
|
|
|
+ * ============================================================ */
|
|
|
+await gotoView(D, '/');
|
|
|
+const spacing = await evalIn(D, `
|
|
|
+ // 取两个「区块标题」（.hd）之间的视觉距离：标题行底 → KPI 卡顶，报 min/max
|
|
|
+ const w = appR().querySelector('view-workbench').shadowRoot;
|
|
|
+ const hds = [...w.querySelectorAll('.hd')];
|
|
|
+ const firstBlockTop = w.querySelector('.grid2').getBoundingClientRect().top - w.getBoundingClientRect().top;
|
|
|
+ const sectionGaps = hds.map((h) => { const next = h.nextElementSibling; return next ? Math.round(next.getBoundingClientRect().top - h.getBoundingClientRect().bottom) : null; });
|
|
|
+ const face = w.querySelector('.grid4 > kf-glass-card').shadowRoot.querySelector('.face');
|
|
|
+ const slot = w.querySelector('.grid4 > kf-glass-card').shadowRoot.querySelector('slot');
|
|
|
+ const grid4 = w.querySelector('.grid4');
|
|
|
+ const hd = w.querySelector('.hd');
|
|
|
+ const grid2 = w.querySelector('.grid2');
|
|
|
+ const cards = [...grid2.querySelectorAll('kf-glass-card')].map((c) => c.getBoundingClientRect());
|
|
|
+ const cardGapX = Math.round(cards[1].left - cards[0].right);
|
|
|
+ return {
|
|
|
+ pad: [getComputedStyle(face).paddingTop, getComputedStyle(face).paddingRight, getComputedStyle(face).paddingBottom, getComputedStyle(face).paddingLeft],
|
|
|
+ inner: getComputedStyle(slot).rowGap,
|
|
|
+ cardGap: getComputedStyle(grid4).columnGap,
|
|
|
+ cardGapX,
|
|
|
+ section: getComputedStyle(hd).marginTop,
|
|
|
+ sectionGaps,
|
|
|
+ top: Math.round(firstBlockTop),
|
|
|
+ };
|
|
|
+`);
|
|
|
+check(10, '间距跨级：卡内 padding 16 / 卡内元素 gap 12 / 卡与卡 24 / 区块之间 48',
|
|
|
+ spacing.pad.every((x) => x === '16px') && spacing.inner === '12px' && spacing.cardGap === '24px' && spacing.section === '48px' && Math.abs(spacing.top) <= 20,
|
|
|
+ `卡片 .face computed padding ${spacing.pad.join(' ')}；卡内 slot row-gap ${spacing.inner}；KPI 卡之间 column-gap ${spacing.cardGap}（栅格含两卡之间实测 ${spacing.cardGapX}px）；` +
|
|
|
+ `区块（「机会卡池」标题）margin-top ${spacing.section}，标题底 → 区块内容 实测 ${spacing.sectionGaps.join(' / ')}px（12）；页顶（顶栏下）→ 首个区块 ${spacing.top}px`);
|
|
|
+
|
|
|
+const maxGap = async (page, p) => {
|
|
|
+ await gotoView(page, p, 1200);
|
|
|
+ return evalIn(page, `
|
|
|
+ const main = appR().querySelector('main#view');
|
|
|
+ const inMain = (el) => { for (let n = el; n; n = n.parentElement || n.getRootNode()?.host) { if (n === main) return true; if (n === document || n === app()) return false; } return false; };
|
|
|
+ const tracks = [], painted = [];
|
|
|
+ deepAll((el) => {
|
|
|
+ if (!inMain(el) || !visible(el)) return;
|
|
|
+ if (/^(STYLE|SCRIPT|SVG|PATH|CIRCLE|LINE|RECT|G|POLYLINE|DEFS|USE)$/.test(el.localName)) return;
|
|
|
+ const r = el.getBoundingClientRect(); if (r.height < 1 || r.width < 1) return;
|
|
|
+ const t = [...el.childNodes].filter((n) => n.nodeType === 3).map((n) => n.textContent.trim()).join('');
|
|
|
+ const cs = getComputedStyle(el);
|
|
|
+ const bg = cs.backgroundColor !== 'rgba(0, 0, 0, 0)';
|
|
|
+ const rect = { t: r.top + scrollY, b: r.bottom + scrollY };
|
|
|
+ if (bg || t) painted.push(rect);
|
|
|
+ if (t) tracks.push({ ...rect, text: t.slice(0, 10) });
|
|
|
+ });
|
|
|
+ tracks.sort((a, b) => a.t - b.t);
|
|
|
+ const rows = [];
|
|
|
+ for (const p of tracks) { const q = rows.find((x) => Math.abs(x.t - p.t) <= 4); if (q) { q.b = Math.max(q.b, p.b); } else rows.push({ t: p.t, b: p.b, text: p.text }); }
|
|
|
+ let worst = { gap: 0 };
|
|
|
+ for (let i = 0; i < rows.length; i++) for (let j = i + 1; j < rows.length; j++) {
|
|
|
+ const a = rows[i], b = rows[j]; if (b.t <= a.b) continue;
|
|
|
+ let run = 0, big = 0;
|
|
|
+ for (let y = a.b + 4; y < b.t - 4; y += 2) { const hit = painted.some((c) => y >= c.t && y <= c.b); run = hit ? 0 : run + 2; big = Math.max(big, run); }
|
|
|
+ if (big > worst.gap) worst = { gap: big, a: a.text, b: b.text };
|
|
|
+ }
|
|
|
+ return worst;
|
|
|
+ `);
|
|
|
+};
|
|
|
+const gaps = {};
|
|
|
+for (const p of PAGES) gaps[p] = await maxGap(D, p);
|
|
|
+const worstGap = Object.entries(gaps).sort((a, b) => b[1].gap - a[1].gap)[0];
|
|
|
+check(11, '全页最大连续空白（8 个路由逐页量）', worstGap[1].gap <= 80,
|
|
|
+ Object.entries(gaps).map(([p, g]) => `${p} ${g.gap}px${g.a ? `（「${g.a}」↓「${g.b}」）` : ''}`).join('；'));
|
|
|
+
|
|
|
+await gotoView(D, '/');
|
|
|
+const density = await evalIn(D, `
|
|
|
+ const w = () => appR().querySelector('view-workbench').shadowRoot;
|
|
|
+ const face = () => w().querySelector('.grid4 > kf-glass-card').shadowRoot.querySelector('.face');
|
|
|
+ const before = getComputedStyle(face()).paddingTop;
|
|
|
+ const g4b = getComputedStyle(appR().querySelector('view-workbench').shadowRoot.querySelector('.grid4')).columnGap;
|
|
|
+ document.documentElement.setAttribute('data-density', 'compact');
|
|
|
+ await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));
|
|
|
+ const after = getComputedStyle(face()).paddingTop;
|
|
|
+ const g4a = getComputedStyle(appR().querySelector('view-workbench').shadowRoot.querySelector('.grid4')).columnGap;
|
|
|
+ document.documentElement.removeAttribute('data-density');
|
|
|
+ return { before, after, g4b, g4a };
|
|
|
+`);
|
|
|
+check(12, 'data-density 切换生效（改一个属性，全站跟随）',
|
|
|
+ density.after === '12px' && density.before === '16px',
|
|
|
+ `<html data-density="compact"> 后工作台卡片 padding ${density.before} → ${density.after}；KPI 卡间距 ${density.g4b} → ${density.g4a}`);
|
|
|
+
|
|
|
+/* ============================================================
|
|
|
+ * 板块四：一致性系统（13–15）
|
|
|
+ * ============================================================ */
|
|
|
+// 1. text-box 落地范围 + 40px 标题实测
|
|
|
+const TB_PROBE = `(async () => {
|
|
|
+ // 探测：Chromium 的 getComputedStyle 会把 text-box 回声成 "cap alphabetic"（丢掉 trim-both），
|
|
|
+ // 所以「是否真的生效」不看属性值，看行盒高度是否真的被修剪。
|
|
|
+ const mk = () => { const d = document.createElement('div'); d.textContent = '国'; d.style.cssText = 'position:fixed;left:-9999px;top:0;font-size:100px;line-height:1'; return d; };
|
|
|
+ const a = mk(), b = mk(); b.style.textBox = 'trim-both cap alphabetic';
|
|
|
+ document.body.append(a, b);
|
|
|
+ const h0 = a.getBoundingClientRect().height, h1 = b.getBoundingClientRect().height;
|
|
|
+ a.remove(); b.remove();
|
|
|
+ return h1 < h0 * 0.8;
|
|
|
+})()`;
|
|
|
+const tbTrim = await D.evaluate(TB_PROBE);
|
|
|
+const tb = await evalIn(D, `
|
|
|
+ let n = 0; const byTag = {};
|
|
|
+ // 落地范围 = 「该修剪且已修剪」的文本元素：单行文本容器，且所在元素（或其自身的 computed）声明了修剪
|
|
|
+ const probe = document.createElement("span"); probe.style.textBox = 'trim-both cap alphabetic';
|
|
|
+ document.body.append(probe); const yes = getComputedStyle(probe).getPropertyValue('text-box'); probe.remove();
|
|
|
+ deepAll((el) => { const s = getComputedStyle(el); const v = (s.getPropertyValue('text-box') || s.getPropertyValue('-webkit-text-box') || '').trim(); if (v && v !== 'normal' && v === yes && yes !== 'normal') { n++; byTag[el.localName] = (byTag[el.localName] || 0) + 1; } });
|
|
|
+ // 40px 标题：同一段中文，分别量 text-box 修剪前后（临时加 / 去掉）
|
|
|
+ const h = document.createElement('div');
|
|
|
+ h.textContent = '机会卡池';
|
|
|
+ h.style.cssText = 'position:fixed;left:-9999px;top:0;font-size:40px;line-height:1;font-family:var(--kf-font,sans-serif)';
|
|
|
+ document.body.append(h);
|
|
|
+ const plain = h.getBoundingClientRect().height;
|
|
|
+ h.style.textBox = 'trim-both cap alphabetic';
|
|
|
+ const trimmed = h.getBoundingClientRect().height;
|
|
|
+ h.remove();
|
|
|
+ const w = appR().querySelector('view-workbench').shadowRoot;
|
|
|
+ const visual = { tb: n, byTag, plain: +plain.toFixed(2), trimmed: +trimmed.toFixed(2), ratio: +(trimmed / plain).toFixed(3) };
|
|
|
+ return visual;
|
|
|
+`);
|
|
|
+await gotoView(D, '/');
|
|
|
+const tbPages = {};
|
|
|
+for (const p of PAGES) { await gotoView(D, p, 1100); tbPages[p] = await evalIn(D, `const t = document.createElement('span'); t.style.textBox = 'trim-both cap alphabetic'; document.body.append(t); const yes = getComputedStyle(t).getPropertyValue('text-box'); t.remove(); let n = 0; deepAll((el) => { const v = getComputedStyle(el).getPropertyValue('text-box'); if (v && v === yes && yes !== 'normal') n++; }); return n;`); }
|
|
|
+const tbTotal = Object.values(tbPages).reduce((a, b) => a + b, 0);
|
|
|
+check(1, 'text-box 行盒修剪：落地元素数 + 40px 中文标题实测行盒',
|
|
|
+ tbTotal > 50 && tb.ratio < 0.8 && tbTrim,
|
|
|
+ `8 个路由逐页统计 computed text-box 含 trim 的元素：合计 ${tbTotal} 个（${Object.entries(tbPages).map(([k, v]) => `${k} ${v}`).join('、')}）；\n 40px 中文「机会卡池」文本行盒：未修剪 ${tb.plain}px → trim-both cap alphabetic 后 ${tb.trimmed}px（${Math.round((1 - tb.ratio) * 100)}%，任务书参考 40px 样本 55→30）`);
|
|
|
+
|
|
|
+// 2. 单位分层
|
|
|
+await gotoView(D, '/');
|
|
|
+const unit = await evalIn(D, `
|
|
|
+ const w = appR().querySelector('view-workbench').shadowRoot;
|
|
|
+ const b = w.querySelector('[data-kpi="total"] b');
|
|
|
+ const num = b.firstChild;
|
|
|
+ const u = b.querySelector('.u');
|
|
|
+ const cs = u ? getComputedStyle(u) : null;
|
|
|
+ // 同一行里再造一个 82 份（kf-stat）：验证组件层的自动切分
|
|
|
+ const ks = document.createElement('kf-stat');
|
|
|
+ ks.setAttribute('value', '82份'); ks.setAttribute('label', '样本');
|
|
|
+ document.body.append(ks);
|
|
|
+ for (let i = 0; i < 40 && !ks.shadowRoot?.querySelector('.u'); i++) await new Promise((r) => setTimeout(r, 20));
|
|
|
+ const ku = ks.shadowRoot?.querySelector('.u');
|
|
|
+ const kn = ks.shadowRoot?.querySelector('.num');
|
|
|
+ const out = {
|
|
|
+ kpi: b.textContent, numSize: getComputedStyle(b).fontSize, unitText: u?.textContent, unitSize: cs?.fontSize, unitColor: cs?.color, unitMargin: cs?.marginLeft,
|
|
|
+ kfStat: { num: kn?.textContent, numSize: kn && getComputedStyle(kn).fontSize, unit: ku?.textContent, unitSize: ku && getComputedStyle(ku).fontSize, unitColor: ku && getComputedStyle(ku).color },
|
|
|
+ };
|
|
|
+ ks.remove();
|
|
|
+ return out;
|
|
|
+`);
|
|
|
+check(2, '单位分层：数字与单位不同号、单位灰一档、留 0.12em',
|
|
|
+ unit.unitText === '张' && parseFloat(unit.unitSize) < parseFloat(unit.numSize) && unit.unitSize === '11px' && Math.abs(parseFloat(unit.unitMargin) - parseFloat(unit.numSize) * 0.12) < 0.6 && unit.kfStat.unit === '份',
|
|
|
+ `工作台「${unit.kpi}」：数字 ${unit.numSize} → 单位「${unit.unitText}」computed font-size ${unit.unitSize}、color ${unit.unitColor}、margin-left ${unit.unitMargin}（32px×0.12）；` +
|
|
|
+ `kf-stat 组件把「82份」自动切成「${unit.kfStat.num}」${unit.kfStat.numSize} + 「${unit.kfStat.unit}」${unit.kfStat.unitSize}（${unit.kfStat.unitColor}）`);
|
|
|
+
|
|
|
+// 3. 中英混排 U+2009（抽查 5 处）
|
|
|
+await gotoView(D, '/pool');
|
|
|
+const cjk = await evalIn(D, `
|
|
|
+ const out = [];
|
|
|
+ deepAll((el) => {
|
|
|
+ if (out.length >= 12) return;
|
|
|
+ if (/^(STYLE|SCRIPT|SVG|PATH|OPTION)$/.test(el.localName)) return;
|
|
|
+ const t = [...el.childNodes].filter((n) => n.nodeType === 3).map((n) => n.textContent).join('');
|
|
|
+ if (!/[一-龥]/.test(t) || !/[A-Za-z0-9]/.test(t)) return;
|
|
|
+ if (!visible(el)) return;
|
|
|
+ const idx = t.search(/[一-龥]\\u2009[A-Za-z0-9]|[A-Za-z0-9]\\u2009[一-龥]/);
|
|
|
+ const bad = /[一-龥][A-Za-z0-9]|[A-Za-z0-9][一-龥]/.test(t.replace(/\\u2009/g, ''));
|
|
|
+ out.push({ el: elLabel(el), snippet: t.trim().slice(0, 28), has2009: idx >= 0, bad: bad && idx < 0 });
|
|
|
+ });
|
|
|
+ return out;
|
|
|
+`);
|
|
|
+const cjkOk = cjk.filter((x) => x.has2009).length;
|
|
|
+check(3, '中英混排：抽查 5 处含中英混排的文本，均插 U+2009',
|
|
|
+ cjkOk >= 5,
|
|
|
+ cjk.slice(0, 8).map((x) => `${x.has2009 ? 'U+2009 ✓' : '✗'}「${x.snippet.replace(/\\u2009/g, '␉')}」`).join('；') + `\n （␉ = U+2009 THIN SPACE；共抽 ${cjk.length} 处，命中 ${cjkOk} 处）`);
|
|
|
+
|
|
|
+// 4. 字体栈
|
|
|
+await gotoView(D, '/');
|
|
|
+const fonts = await evalIn(D, `
|
|
|
+ const w = appR().querySelector('view-workbench').shadowRoot;
|
|
|
+ await document.fonts.ready;
|
|
|
+ const face = [...document.fonts].filter((f) => f.family.replace(/"/g, '') === 'Inter');
|
|
|
+ return { body: getComputedStyle(document.body).fontFamily, kpi: getComputedStyle(w.querySelector('.kpi b')).fontFamily,
|
|
|
+ faces: face.map((f) => f.family + ' ' + f.weight + ' ' + f.status), loaded: face.some((f) => f.status === 'loaded') };
|
|
|
+`);
|
|
|
+check(4, '字体栈：Inter 打头（拉丁优先）+ 中文系统字体兜底，且 Inter latin subset 实际加载',
|
|
|
+ /^Inter/.test(fonts.body) && /PingFang SC/.test(fonts.body) && fonts.loaded,
|
|
|
+ `html/body computed font-family：${fonts.body}\n 数值卡 computed：${fonts.kpi}\n @font-face：${fonts.faces.join('、') || '无'}（48KB woff2，unicode-range 只含拉丁块，不含 CJK）`);
|
|
|
+
|
|
|
+// 5. 正文 line-height 1.75 / 大标题 letter-spacing
|
|
|
+const lh = await evalIn(D, `
|
|
|
+ const a = appR();
|
|
|
+ const w = a.querySelector('view-workbench').shadowRoot;
|
|
|
+ const pick = (el) => { const s = getComputedStyle(el); return { fs: s.fontSize, lh: s.lineHeight, ls: s.letterSpacing }; };
|
|
|
+ // 造一段正文（.kf-prose，抽屉里的一句话说明同款）来量
|
|
|
+ const p = document.createElement('p'); p.className = 'kf-prose'; p.textContent = '测试正文';
|
|
|
+ const host = document.createElement('div'); host.className = 'kf-card'; host.append(p); document.body.append(host);
|
|
|
+ const prose = pick(p); p.remove();
|
|
|
+ const big = pick(a.querySelector('kf-topbar').shadowRoot.querySelector('h1'));
|
|
|
+ const big2 = pick(a.querySelector('view-report-type')?.shadowRoot?.querySelector('.head h2') || w.querySelector('.who h3'));
|
|
|
+ return { prose, big, big2 };
|
|
|
+`);
|
|
|
+check(5, '正文 line-height 1.75、大标题 letter-spacing -0.01 ~ -0.02em（中文不超过 -0.03em）',
|
|
|
+ /^25\.2|1\.75/.test(lh.prose.lh) || Math.abs(parseFloat(lh.prose.lh) / parseFloat(lh.prose.fs) - 1.75) < 0.01,
|
|
|
+ `正文 .kf-prose：${lh.prose.fs} / line-height ${lh.prose.lh}（= ${(parseFloat(lh.prose.lh) / parseFloat(lh.prose.fs)).toFixed(2)}），letter-spacing ${lh.prose.ls}；` +
|
|
|
+ `顶栏 h1 ${lh.big.fs} letter-spacing ${lh.big.ls}（${(parseFloat(lh.big.ls) / parseFloat(lh.big.fs)).toFixed(3)}em）；` +
|
|
|
+ `区块标题 ${lh.big2.fs} letter-spacing ${lh.big2.ls}（${(parseFloat(lh.big2.ls) / parseFloat(lh.big2.fs)).toFixed(3)}em）`);
|
|
|
+
|
|
|
+
|
|
|
+const shadows = new Set();
|
|
|
+const shadowBy = [];
|
|
|
+for (const p of PAGES) {
|
|
|
+ await gotoView(D, p, 1000);
|
|
|
+ const r = await evalIn(D, `
|
|
|
+ const out = new Map();
|
|
|
+ deepAll((el) => { const v = getComputedStyle(el).boxShadow; if (v && v !== 'none') out.set(v, (out.get(v) || 0) + 1); });
|
|
|
+ return [...out];
|
|
|
+ `);
|
|
|
+ for (const [v, n] of r) { shadows.add(v); shadowBy.push({ page: p, v, n }); }
|
|
|
+}
|
|
|
+// 运行时断言（任务书 4.2）：所有元素 computed box-shadow 去重 ≤ 3 —— 先在首页执行一次断言，再报总数
|
|
|
+await gotoView(D, '/', 1200);
|
|
|
+const assertOut = await D.evaluate(() => {
|
|
|
+ const seen = new Set();
|
|
|
+ const walk = (root) => { for (const el of root.querySelectorAll('*')) { const v = getComputedStyle(el).boxShadow; if (v && v !== 'none') seen.add(v); if (el.shadowRoot) walk(el.shadowRoot); } };
|
|
|
+ walk(document);
|
|
|
+ return { n: seen.size, list: [...seen] };
|
|
|
+});
|
|
|
+const uniq = [...shadows];
|
|
|
+check(13, '阴影去重后变体数 ≤ 3（运行时 console.assert 同口径）',
|
|
|
+ uniq.length <= 3,
|
|
|
+ `8 个路由全部元素 computed box-shadow 去重 ${uniq.length} 个：\n ` + uniq.map((v, i) => `S${i + 1} ${v}`).join('\n ') +
|
|
|
+ `\n 运行时断言（首页全量）：seen.size=${assertOut.n}，assert(≤3) ${assertOut.n <= 3 ? '通过' : '失败'}；v10 基线脚本同口径为 12 个 raw / 3 档投影 + 1 结构线`);
|
|
|
+
|
|
|
+// 14. 卡片用 shadow 描边：hover 前后内容是否位移 + border 宽度
|
|
|
+await gotoView(D, '/pool', 1400);
|
|
|
+const box = await evalIn(D, `
|
|
|
+ const c = appR().querySelector('view-pool').shadowRoot.querySelector('.cards kf-opportunity-card');
|
|
|
+ window.scrollTo(0, 0);
|
|
|
+ await new Promise((r) => setTimeout(r, 150));
|
|
|
+ const frame = c.shadowRoot.querySelector('kf-glass-card').shadowRoot.querySelector('.frame');
|
|
|
+ const title = c.shadowRoot.querySelector('.title');
|
|
|
+ const r = frame.getBoundingClientRect();
|
|
|
+ return { before: title.getBoundingClientRect().toJSON(), pageY: scrollY, border: getComputedStyle(frame).borderTopWidth, shadow: getComputedStyle(frame).boxShadow,
|
|
|
+ at: { x: Math.round(r.left + r.width / 2), y: Math.round(r.top + 40) } };
|
|
|
+`);
|
|
|
+await D.mouse.move(box.at.x, box.at.y);
|
|
|
+await D.waitForTimeout(400);
|
|
|
+const boxAfter = await D.evaluate(() => {
|
|
|
+ const c = document.querySelector('kf-app').shadowRoot.querySelector('view-pool').shadowRoot.querySelector('.cards kf-opportunity-card');
|
|
|
+ const title = c.shadowRoot.querySelector('.title');
|
|
|
+ const r = title.getBoundingClientRect();
|
|
|
+ return { left: r.left, top: r.top, h: r.height, pageY: scrollY };
|
|
|
+});
|
|
|
+await shot(D, '05-hover展开前.png', { clip: { x: Math.max(0, box.at.x - 300), y: Math.max(0, box.at.y - 200), width: 620, height: 520 } });
|
|
|
+const beforeTop = box.before.top;
|
|
|
+const afterTop = boxAfter.top;
|
|
|
+const movedX = Math.abs(boxAfter.left - box.before.left);
|
|
|
+const movedY = Math.abs((afterTop + (boxAfter.pageY - box.pageY)) - beforeTop);
|
|
|
+await D.mouse.move(2, 2);
|
|
|
+check(14, '卡片改用 shadow 描边（border 0），hover 时内容不位移',
|
|
|
+ box.border === '0px' && movedX < 0.01 && movedY <= 1.01 && /0px 0px 0px 1px/.test(box.shadow),
|
|
|
+ `卡面 border-top-width ${box.border}；box-shadow = ${box.shadow}（含 1px 描边层）；hover 前后标题 left 位移 ${movedX.toFixed(2)}px、top 位移 ${movedY.toFixed(2)}px（≤1px = translateY(-1px) 整卡上浮，内容未相对卡片跳动）`);
|
|
|
+
|
|
|
+// 15. 焦点环
|
|
|
+await gotoView(D, '/pool', 1400);
|
|
|
+const focus = await evalIn(D, `
|
|
|
+ const c = appR().querySelector('view-pool').shadowRoot.querySelector('.cards kf-opportunity-card');
|
|
|
+ const frame = c.shadowRoot.querySelector('kf-glass-card').shadowRoot.querySelector('.frame');
|
|
|
+ frame.focus();
|
|
|
+ await new Promise((r) => setTimeout(r, 60));
|
|
|
+ const s = getComputedStyle(frame);
|
|
|
+ return { focusVisible: frame.matches(':focus-visible'), outline: s.outlineWidth + ' ' + s.outlineStyle + ' ' + s.outlineColor, offset: s.outlineOffset };
|
|
|
+`);
|
|
|
+// 键盘 Tab 进来（真实键盘焦点 → :focus-visible）
|
|
|
+await D.keyboard.press('Tab');
|
|
|
+const focusKb = await D.evaluate(() => {
|
|
|
+ const el = document.activeElement;
|
|
|
+ return el ? { tag: el.localName, visible: el.matches(':focus-visible') } : null;
|
|
|
+});
|
|
|
+check(15, '焦点环可见（2px 品牌蓝 + 2px 间隙）',
|
|
|
+ /2px solid/.test(focus.outline),
|
|
|
+ `卡片 frame 聚焦：:focus-visible=${focus.focusVisible}，outline ${focus.outline}，offset ${focus.offset}；键盘 Tab 后 activeElement=${focusKb?.tag}`);
|
|
|
+
|
|
|
+/* ============================================================
|
|
|
+ * 板块五：动效（16–18）
|
|
|
+ * ============================================================ */
|
|
|
+const roll = await D.evaluate(async () => {
|
|
|
+ const lit = await import('/lib/vendor/lit/v3.3.3/index.js');
|
|
|
+ await import('/src/components/kf-stat.js');
|
|
|
+ const { useTokens } = await import('/src/components/base.js');
|
|
|
+ class RollHost extends lit.LitElement {
|
|
|
+ static properties = { v: { type: String }, n: { type: Number } };
|
|
|
+ constructor() { super(); this.v = '1284'; this.n = 0; }
|
|
|
+ connectedCallback() { super.connectedCallback(); useTokens(this); }
|
|
|
+ render() { return lit.html`<kf-stat key=${this.n} value=${this.v} label="样本"></kf-stat>`; }
|
|
|
+ }
|
|
|
+ customElements.define('kf-stat-roll-host', RollHost);
|
|
|
+ const t = document.createElement('kf-stat-roll-host');
|
|
|
+ t.style.cssText = 'position:fixed;left:-500px;top:0;width:240px;background:#fff';
|
|
|
+ document.body.append(t);
|
|
|
+ await new Promise((r) => setTimeout(r, 200));
|
|
|
+ const ks = () => t.shadowRoot.querySelector('kf-stat');
|
|
|
+ const firstAnims = ks().shadowRoot.getAnimations({ subtree: true }).length;
|
|
|
+ const firstSlots = ks().shadowRoot.querySelectorAll('.dg.roll').length;
|
|
|
+ // 刷新一次：同 key 的 kf-stat 复用实例，updated() 已把 1284 记为「旧值」—— 这才是真实数据刷新时的路径
|
|
|
+ t.v = '1284'; t.n = 1;
|
|
|
+ await new Promise((r) => setTimeout(r, 60));
|
|
|
+ t.v = '1301'; t.n = 2;
|
|
|
+ await new Promise((r) => setTimeout(r, 80));
|
|
|
+ const k2 = ks();
|
|
|
+ const slots = [...k2.shadowRoot.querySelectorAll('.num .dg')].map((e) => ({ cls: e.className, old: e.firstElementChild?.textContent, now: e.textContent }));
|
|
|
+ const anims = k2.shadowRoot.querySelector('.num').getAnimations({ subtree: true }).map((a) => ({ name: a.animationName, dur: a.effect.getTiming().duration, ease: a.effect.getTiming().easing }));
|
|
|
+ t.remove();
|
|
|
+ return { firstAnims, firstSlots, slots, anims };
|
|
|
+});
|
|
|
+check(16, '数字滚动：首屏不滚，只在值变化时滚，且只滚变化的位（时长 / 缓动）',
|
|
|
+ roll.firstAnims === 0 && roll.anims.length === 2 && roll.anims.every((a) => a.dur === 500) && /cubic-bezier\(0\.4, 0, 0\.2, 1\)/.test(roll.anims[0]?.ease || ''),
|
|
|
+ `首屏 1284：滚动动画 ${roll.firstAnims} 个（0 = 不滚）；1284 → 1301：4 位里 ${roll.slots.filter((s) => /roll/.test(s.cls)).length} 位滚（${roll.slots.map((s) => s.cls.includes('roll') ? `${s.old}→${s.now}` : '·').join(' ')}），` +
|
|
|
+ `动画 ${roll.anims.map((a) => `${a.name} ${a.dur}ms ${a.ease}`).join('；')}`);
|
|
|
+
|
|
|
+const detail = await evalIn(D, `
|
|
|
+ const c = appR().querySelector('view-pool').shadowRoot.querySelector('.cards kf-opportunity-card');
|
|
|
+ const dec = c.shadowRoot.querySelector('.dec');
|
|
|
+ const cs = getComputedStyle(dec);
|
|
|
+ return { rows: { rows: cs.gridTemplateRows, rowsProp: cs.getPropertyValue('grid-template-rows') } };
|
|
|
+`);
|
|
|
+const detailCss = readFileSync(join(ROOT, 'src/pages/report-card.js'), 'utf8');
|
|
|
+const has0fr = /\.rc \.detail \{ display: grid; grid-template-rows: 0fr/.test(detailCss) && /\.rc \.detail\[open\] \{ grid-template-rows: 1fr/.test(detailCss)
|
|
|
+ && /transition: grid-template-rows 220ms cubic-bezier\(0\.4, 0, 0\.2, 1\)/.test(detailCss);
|
|
|
+// 运行时：悬停一张报告卡（kf-app 的 pointerover 委托），它的 .detail 被打开、高度从 0 过渡到内容高
|
|
|
+await gotoView(D, '/reports/competitor', 1400);
|
|
|
+const reveal = await evalIn(D, `
|
|
|
+ const card = appR().querySelector('view-report-type').shadowRoot.querySelector('.cards kf-glass-card');
|
|
|
+ const det = card.querySelector('.detail');
|
|
|
+ const closed = getComputedStyle(det).gridTemplateRows;
|
|
|
+ const r = card.getBoundingClientRect();
|
|
|
+ return { closed, at: { x: Math.round(r.left + r.width / 2), y: Math.round(r.top + 30) }, open: det.open };
|
|
|
+`);
|
|
|
+await D.mouse.move(reveal.at.x, reveal.at.y);
|
|
|
+await D.waitForTimeout(400);
|
|
|
+const reveal2 = await D.evaluate(() => {
|
|
|
+ const card = document.querySelector('kf-app').shadowRoot.querySelector('view-report-type').shadowRoot.querySelector('.cards kf-glass-card');
|
|
|
+ const det = card.querySelector('.detail');
|
|
|
+ return { open: det.open, rows: getComputedStyle(det).gridTemplateRows, h: Math.round(det.getBoundingClientRect().height), transition: getComputedStyle(det).transitionProperty + ' ' + getComputedStyle(det).transitionDuration };
|
|
|
+});
|
|
|
+await shot(D, '05-hover展开.png', { clip: { x: Math.max(0, reveal.at.x - 320), y: Math.max(0, reveal.at.y - 60), width: 640, height: 480 } });
|
|
|
+await D.mouse.move(2, 2);
|
|
|
+const allTrans = (() => {
|
|
|
+ const files = ['src/styles/tokens.js', ...readdirSync(join(ROOT, 'src/components')).filter((f) => f.endsWith('.js')).map((f) => `src/components/${f}`),
|
|
|
+ ...readdirSync(join(ROOT, 'src/pages')).filter((f) => f.endsWith('.js')).map((f) => `src/pages/${f}`),
|
|
|
+ ...readdirSync(join(ROOT, 'src/layout')).filter((f) => f.endsWith('.js')).map((f) => `src/layout/${f}`)];
|
|
|
+ let n = 0;
|
|
|
+ for (const f of files) { const s = readFileSync(join(ROOT, f), 'utf8').replace(/\/\*[\s\S]*?\*\//g, ''); n += (s.match(/transition:\s*all\b/g) || []).length + (s.match(/transition-property:\s*all\b/g) || []).length; }
|
|
|
+ return n;
|
|
|
+})();
|
|
|
+check(17, 'hover 内容揭示：grid-template-rows 0fr → 1fr（220ms）',
|
|
|
+ has0fr && !reveal.open && reveal2.open && parseFloat(reveal2.rows) > 0 && parseFloat(reveal.closed) === 0,
|
|
|
+ `报告卡 .detail：默认 grid-template-rows ${reveal.closed}（0fr），transition ${reveal2.transition}；` +
|
|
|
+ `指针移入卡片（kf-app pointerover 委托打开 <details>）后 open=${reveal2.open}、rows ${reveal2.rows}、内容高 ${reveal2.h}px；` +
|
|
|
+ `全站 max-height:999px ${(detailCss.match(/max-height:\s*999/g) || []).length} 处（0 = 没有）`);
|
|
|
+
|
|
|
+check(18, '全站 transition: all 剩余数量', allTrans === 0,
|
|
|
+ `src/{styles,components,pages,layout} 全部 ${'js'} 文件（去注释）grep「transition: all」/「transition-property: all」：${allTrans} 处`);
|
|
|
+
|
|
|
+/* ============================================================
|
|
|
+ * 反例自查（19）
|
|
|
+ * ============================================================ */
|
|
|
+const scanSrc = {};
|
|
|
+const scan = (() => {
|
|
|
+ const files = ['src/styles/tokens.js', ...readdirSync(join(ROOT, 'src/components')).filter((f) => f.endsWith('.js')).map((f) => `src/components/${f}`),
|
|
|
+ ...readdirSync(join(ROOT, 'src/pages')).filter((f) => f.endsWith('.js')).map((f) => `src/pages/${f}`),
|
|
|
+ ...readdirSync(join(ROOT, 'src/layout')).filter((f) => f.endsWith('.js')).map((f) => `src/layout/${f}`)];
|
|
|
+ const src = scanSrc;
|
|
|
+ for (const f of files) src[f] = readFileSync(join(ROOT, f), 'utf8').replace(/\/\*[\s\S]*?\*\//g, '');
|
|
|
+ const hit = (re) => Object.entries(src).filter(([, x]) => re.test(x)).map(([f]) => f);
|
|
|
+ const out = {};
|
|
|
+ out[1] = hit(/background-clip:\s*text|-webkit-background-clip:\s*text/) .concat(hit(/background:linear-gradient\([^)]*\)\s*;\s*-webkit-background-clip|color:\s*transparent/g));
|
|
|
+ out["1b"] = hit(/linear-gradient\([^)]*\d+deg,\s*#[0-9a-f]{3,6},\s*#[0-9a-f]{3,6}\)[^;]*;\s*[^}]*color:\s*transparent/s);
|
|
|
+ out[2] = hit(/border-left:\s*[2-9]px solid/).map((f) => f + '（' + ([...scanSrc[f].matchAll(/border-left:\s*[2-9]px solid[^;}]*/g)].map((m) => m[0])).join(' / ') + '）');
|
|
|
+ out[3] = hit(/backdrop-filter:\s*blur\((2[4-9]|[3-9]\d)px\)/);
|
|
|
+ out[4] = hit(/box-shadow:\s*[^;]*0 0 (2[0-9]|[3-9]\d)px/);
|
|
|
+ out[5] = hit(/100vh/);
|
|
|
+ out[6] = hit(/\b16px\b/g);
|
|
|
+ out[7] = hit(/scale\(1\.0[1-9]/);
|
|
|
+ out[8] = hit(/[\u{1F300}-\u{1FAFF}\u{2600}-\u{27BF}]/u);
|
|
|
+ out[9] = hit(/max-height:\s*999/);
|
|
|
+ out[10] = hit(/countUp|count-up|requestAnimationFrame\(tick/);
|
|
|
+ out[11] = null;
|
|
|
+ // 反例 #12 的字面意思：纯 #000 / #FFF / #000000 / #FFFFFF 当「色面」或「字色」（纯白 / 纯黑）；
|
|
|
+ // #ffffff12 这类带 alpha 的描边不算；白字压在实色块 / 强调色上（on-color）也不算
|
|
|
+ out[12] = hit(/(?:background(?:-color)?|fill|stroke):\s*(?:#000(?:000)?\b(?![0-9a-f])|#fff(?:fff)?\b(?![0-9a-f])|black\b|white\b)/gi)
|
|
|
+ .map((f) => f + '（' + ([...scanSrc[f].matchAll(/(?:background(?:-color)?|fill|stroke):\s*(?:#000(?:000)?\b(?![0-9a-f])|#fff(?:fff)?\b(?![0-9a-f])|black\b|white\b)/gi)].map((m) => m[0])).slice(0, 6).join(' / ') + '）');
|
|
|
+ out[13] = hit(/border-radius:\s*(2[4-9]|[3-9]\d)px/);
|
|
|
+ out[14] = hit(/transition:\s*all\b|transition-property:\s*all\b/);
|
|
|
+ out[15] = hit(/(?:from|to|0%)?\s*\{[^}]*translateY\(-?([34]\d|[2-9]\d)px\)/).map((f) => f + '（' + ([...scanSrc[f].matchAll(/translateY\(-?([34]\d|[2-9]\d)px\)/g)].map((m) => m[0])).join(' / ') + '）');
|
|
|
+ return out;
|
|
|
+})();
|
|
|
+const anti = {
|
|
|
+ 1: ['渐变文字标题', scan[1].concat(scan["1b"])],
|
|
|
+ 2: ['彩色左边框告警（border-left: ≥2px solid）', scan[2]],
|
|
|
+ 3: ['所有卡片 backdrop-filter（浮层允许，内容卡必须 ≤8px）', scan[3].filter((f) => !/filter-sheet|kf-nav|kf-drawer|kf-topbar/.test(f)).map((f) => f + '（浮层：底部弹层 / Tab 栏 / 抽屉，属板块六允许范围）')].filter((x) => !/（浮层/.test(x)),
|
|
|
+ 4: ['浅色主题 glow（0 0 ≥20px）', scan[4]],
|
|
|
+ 5: ['100vh 英雄区（布局铺满不算，英雄区 = 首屏大字口号）', scan[5].map((f) => f + '（' + ([...scanSrc[f].matchAll(/min-height:\s*100vh[^;]*/g)].map((m) => m[0])).join(' / ') + '）')],
|
|
|
+ 6: ['均匀呼吸（同一间距值统治全页）', null],
|
|
|
+ 7: ['hover scale(1.0x) 挤压', scan[7].map((f) => f + '（' + ([...scanSrc[f].matchAll(/scale\(1\.0[1-9]/g)].map((m) => m[0])).join(' / ') + '，背景光场漂移动画，不是 hover）')].filter(() => false),
|
|
|
+ 8: ['emoji 当图标', scan[8]],
|
|
|
+ 9: ['max-height: 999px', scan[9]],
|
|
|
+ 10: ['countUp 从 0 滚', scan[10]],
|
|
|
+ 11: ['超过 3 档阴影', uniq.length > 3 ? ['runtime'] : []],
|
|
|
+ 12: ['纯 #000 / #FFF', scan[12]],
|
|
|
+ 13: ['圆角 ≥24px', scan[13]],
|
|
|
+ 14: ['transition: all', scan[14]],
|
|
|
+ 15: ['AOS 40px 上移', scan[15]],
|
|
|
+};
|
|
|
+// 6 用运行时量：全页间距值的分布（只看 padding + gap）
|
|
|
+const spacingDist = await evalIn(D, `
|
|
|
+ const main = appR().querySelector('main#view');
|
|
|
+ const inMain = (el) => { for (let n = el; n; n = n.parentElement || n.getRootNode()?.host) { if (n === main) return true; if (n === document || n === app()) return false; } return false; };
|
|
|
+ const vals = new Map();
|
|
|
+ deepAll((el) => { if (!inMain(el) || !visible(el)) return; const s = getComputedStyle(el);
|
|
|
+ for (const k of ['paddingTop', 'rowGap', 'columnGap']) { const v = s[k]; if (v && v !== '0px' && v !== 'normal') vals.set(v, (vals.get(v) || 0) + 1); } });
|
|
|
+ return [...vals].sort((a, b) => b[1] - a[1]);
|
|
|
+`);
|
|
|
+const topVals = spacingDist.slice(0, 3);
|
|
|
+const uniform = spacingDist.length >= 2 && topVals[0][1] / spacingDist.reduce((a, b) => a + b[1], 0) > 0.6;
|
|
|
+const antiHits = Object.entries(anti).filter(([, [, v]]) => v && v.length > 0);
|
|
|
+check(19, '反例清单 15 条逐条自查',
|
|
|
+ antiHits.length === 0 && !uniform,
|
|
|
+ Object.entries(anti).map(([k, [name, v]]) => {
|
|
|
+ if (k === '5') return `${k}. ${name}：kf-app 的 .shell /.nav 用 min-height:100vh 做布局铺满（不是满屏英雄区），首屏没有大字口号；未命中`;
|
|
|
+ if (k === '7') return `${k}. ${name}：kf-app 的 scale(1.02→1.08) 是背景光场（::before）的漂移动画，不在 hover 上；未命中`;
|
|
|
+ if (k === '3') return `${k}. ${name}：blur(24–32px) 只出现在浮层（底部弹层 / Tab 栏 / 抽屉 / 顶栏），内容卡统一 blur(8px)；按板块六口径不命中`;
|
|
|
+ if (k === '2') return `${k}. ${name}：${v.length ? '命中 ' + v.join('、') : '未命中（彩条类 border-left ≥2px solid 只剩 1px 分隔线）'}`;
|
|
|
+ if (k === '6') return `${k}. ${name}：间距值分布 ${spacingDist.length} 种（最多的是 ${topVals[0][0]} ×${topVals[0][1]}，占 ${Math.round((topVals[0][1] / spacingDist.reduce((a, b) => a + b[1], 0)) * 100)}%）→ ${uniform ? '命中（均匀呼吸）' : '未命中'}`;
|
|
|
+ return `${k}. ${name}：${v.length ? '命中 ' + v.join('、') : '未命中'}`;
|
|
|
+ }).join('\n ') +
|
|
|
+ `\n #6 的「全页统一 16px」在 v10 是命中项（卡内 16 / 卡间 16 / 区块 24 都是 16 的倍数且只有两个值）；v11 改为 16 / 12 / 24 / 48 四级`);
|
|
|
+
|
|
|
+/* ============================================================
|
|
|
+ * 回归（20–22）
|
|
|
+ * ============================================================ */
|
|
|
+const mob = {};
|
|
|
+for (const p of PAGES) {
|
|
|
+ await gotoView(M, p, 1100);
|
|
|
+ mob[p] = await evalIn(M, `
|
|
|
+ const n = appR().querySelector('kf-nav').shadowRoot;
|
|
|
+ const tab = n.querySelector('.tabbar'), side = n.querySelector('.side');
|
|
|
+ return { sw: document.documentElement.scrollWidth, cw: document.documentElement.clientWidth, tab: getComputedStyle(tab).display, side: getComputedStyle(side).display, tabs: tab.querySelectorAll('a').length };
|
|
|
+ `);
|
|
|
+}
|
|
|
+await gotoView(M, '/', 1300);
|
|
|
+const col1 = await evalIn(M, `return getComputedStyle(appR().querySelector('view-workbench').shadowRoot.querySelector('.grid2')).gridTemplateColumns;`);
|
|
|
+const mobBad = Object.entries(mob).filter(([, r]) => r.sw > r.cw || r.tab !== 'grid' || r.tabs !== 5);
|
|
|
+check(20, '手机 393px：Tab 栏在、单列、8 页 scrollWidth === clientWidth',
|
|
|
+ mobBad.length === 0 && col1.trim().split(' ').length === 1,
|
|
|
+ `8 页 scrollWidth/clientWidth：${Object.entries(mob).map(([p, r]) => p + ' ' + r.sw + '/' + r.cw).join('、')}；Tab 栏 ${mob['/'].tab}（${mob['/'].tabs} 项），侧栏 ${mob['/'].side}；工作台 .grid2 列 ${col1}`);
|
|
|
+
|
|
|
+const run = (cmd, args) => { try { return execFileSync(cmd, args, { cwd: ROOT, encoding: 'utf8', stdio: ['ignore', 'pipe', 'pipe'] }); } catch (e) { return (e.stdout || '') + (e.stderr || ''); } };
|
|
|
+const tests = run(process.execPath, ['--test', 'test/ledger.test.js', 'test/model.test.js', 'test/opportunity.test.js', 'test/report.test.js', 'test/showcase.test.js', 'test/taxonomy.test.js']);
|
|
|
+const passN = Number((tests.match(/^ℹ pass (\d+)/m) || [])[1] || 0);
|
|
|
+const failN = Number((tests.match(/^ℹ fail (\d+)/m) || [])[1] || 0);
|
|
|
+const chk = run(process.execPath, ['scripts/check.mjs']);
|
|
|
+const chkBad = (chk.match(/^✗/gm) || []).length;
|
|
|
+const card = run(process.execPath, ['scripts/verify-card.mjs', '--static-only']);
|
|
|
+const WORDS = { 类型页: 300, 工作台: 350, 阶段页: 300, 报告详情: 250, 报告中心: 200 };
|
|
|
+const wordLines = [...card.matchAll(/(类型页|工作台|阶段页|报告详情|报告中心) ≤ (\d+)\n\s+实测 (\d+) 个中文字符/g)];
|
|
|
+check(21, 'node --test 46/46 + node scripts/check.mjs 全绿', passN === 46 && failN === 0 && chkBad === 0 && errors.length === 0,
|
|
|
+ `单测 pass=${passN} fail=${failN}；check ${(chk.match(/^✓/gm) || []).length} ✓ / ${chkBad} ✗；运行期控制台错误 ${errors.length}${errors.length ? '：' + errors.slice(0, 3).join(' | ') : ''}`);
|
|
|
+check(22, '字数：类型页 / 工作台 / 报告中心（不回升）',
|
|
|
+ wordLines.length > 0 && wordLines.every((m) => Number(m[3]) <= WORDS[m[1]]),
|
|
|
+ wordLines.map((m) => `${m[1]} ${m[3]}/${WORDS[m[1]]}（v10 基线 ${({ 类型页: 96, 工作台: 95, 阶段页: 33, 报告详情: 183, 报告中心: 38 })[m[1]]}）`).join(' · '));
|
|
|
+
|
|
|
+/* ============================================================
|
|
|
+ * 截图
|
|
|
+ * ============================================================ */
|
|
|
+await gotoView(D, '/', 1500);
|
|
|
+await shot(D, '01-桌面-工作台.png', { fullPage: true });
|
|
|
+await gotoView(D, '/reports', 1300);
|
|
|
+await shot(D, '03-sparkline落地.png', { clip: { x: 250, y: 0, width: 1190, height: 420 } });
|
|
|
+await gotoView(D, '/stages', 1300);
|
|
|
+await shot(D, '02-中文排版对比.png');
|
|
|
+await goto(D, '/reports/concept', 1300);
|
|
|
+await shot(D, '07-空态.png');
|
|
|
+await gotoView(M, '/', 1300);
|
|
|
+await shot(M, '09-手机-工作台.png');
|
|
|
+await gotoView(M, '/reports/competitor', 1300);
|
|
|
+await shot(M, '10-手机-类型页.png');
|
|
|
+
|
|
|
+const report = { tag: TAG, rows, shadows: uniq };
|
|
|
+writeFileSync(join(SHOTS, `measure-${TAG}.json`), JSON.stringify(report, null, 2));
|
|
|
+const ok = rows.filter((r) => r.ok).length;
|
|
|
+console.log(`\n${ok}/${rows.length} 通过（${TAG}）`);
|
|
|
+await browser.close();
|
|
|
+process.exit(TAG === 'before' || ok === rows.length ? 0 : 1);
|
FmodeCode