@qilitt-mickey/vue3-temp-skill 1.2.2 → 1.2.4

package/scripts/verify-render.mjs

@@ -0,0 +1,530 @@
+#!/usr/bin/env node
+
+/**
+ * verify-render.mjs —— 渲染取证：契约 → 浏览器 computed style 逐点比对
+ *
+ * 用法:
+ *   node verify-render.mjs --project <项目根> --url http://localhost:5502 [--headed]
+ *
+ * 行为:
+ *   1. 读 .design/visual-contract-*.json（期望值唯一来源）+ adapter JSON（innerTargets/stateChannels）
+ *   2. Playwright 登录（验证码 canvas 读取 + 滑块 setupState.success 绕过）
+ *   3. 导航到目标页，对每个角色的每个挂载点读 getComputedStyle 逐条比对
+ *   4. hover/focus 态用 page.hover/focus 触发后再比
+ *   5. 输出差异报告（角色/属性/期望/实际/选择器）+ 截图留档
+ *
+ * 退出码: 0 = 全部命中 / 1 = 有差异
+ */
+
+import fs from "node:fs";
+import path from "node:path";
+import { createRequire } from "node:module";
+import { fileURLToPath } from "node:url";
+
+const require = createRequire(import.meta.url);
+const SKILL_DIR = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
+
+/** 解析 playwright：项目 → 全局（nvm/npm -g）逐级尝试 */
+function resolvePlaywright(projectRoot) {
+  const candidates = [];
+  try { candidates.push(require.resolve("playwright", { paths: [projectRoot] })); } catch {}
+  const globalRoots = [
+    process.env.APPDATA && path.join(process.env.APPDATA, "npm", "node_modules"),
+    path.dirname(process.execPath), // nvm: node.exe 同级 node_modules
+  ].filter(Boolean);
+  for (const g of globalRoots) {
+    try { candidates.push(require.resolve("playwright", { paths: [g] })); } catch {}
+  }
+  if (!candidates.length) throw new Error("playwright 不可用（项目与全局均未安装）——降级：人工逐点核（见 design-apply 第 7 步）");
+  return require(candidates[0]);
+}
+
+function parseArgs(argv) {
+  const out = { project: process.cwd(), url: "http://localhost:5502", route: "/#/table/base", headed: false, outDir: ".design" };
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    if (a === "--project" || a === "-p") out.project = path.resolve(argv[++i]);
+    else if (a === "--url") out.url = argv[++i];
+    else if (a === "--route") out.route = argv[++i];
+    else if (a === "--headed") out.headed = true;
+    else if (a === "--out") out.outDir = argv[++i];
+  }
+  return out;
+}
+
+function expectedClassName(roleName) {
+  return "role-" + roleName.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/\./g, "-").replace(/_/g, "-").toLowerCase();
+}
+
+/** 令牌展开：{color.brand} → 实值（从契约 tokens 查） */
+function makeTokenResolver(contract) {
+  const map = new Map();
+  for (const [family, names] of Object.entries(contract.tokens || {})) {
+    for (const [name, def] of Object.entries(names)) map.set(`${family}.${name}`, def.value);
+  }
+  return (value) => String(value).replace(/\{([a-zA-Z0-9.]+)\}/g, (m, ref) => map.get(ref) ?? m);
+}
+
+/** 颜色归一：#RGB/#RRGGBB/#RRGGBBAA/rgb()/rgba()/transparent → "r,g,b,a"（a 三位小数） */
+function normColor(v) {
+  if (v == null) return null;
+  v = String(v).trim().toLowerCase();
+  if (v === "transparent") return "0,0,0,0.000";
+  let m = v.match(/^#([0-9a-f]{3})$/);
+  if (m) { const s = m[1]; return normColor(`#${s[0]}${s[0]}${s[1]}${s[1]}${s[2]}${s[2]}`); }
+  m = v.match(/^#([0-9a-f]{6})$/);
+  if (m) { const n = parseInt(m[1], 16); return `${(n >> 16) & 255},${(n >> 8) & 255},${n & 255},1.000`; }
+  m = v.match(/^#([0-9a-f]{8})$/);
+  if (m) { const n = parseInt(m[1].slice(0, 6), 16); const a = parseInt(m[1].slice(6), 16) / 255; return `${(n >> 16) & 255},${(n >> 8) & 255},${n & 255},${a.toFixed(3)}`; }
+  m = v.match(/^rgba?\(([^)]+)\)$/);
+  if (m) {
+    const parts = m[1].split(/[,\s/]+/).filter(Boolean).map(Number);
+    const [r, g, b, a = 1] = parts;
+    if ([r, g, b].some(Number.isNaN)) return null;
+    return `${r},${g},${b},${Number(a).toFixed(3)}`;
+  }
+  return v;
+}
+
+/** 值归一：颜色→normColor；px 列表→统一 "Npx" 逗号串；关键字简写→展开；其余小写去空格 */
+function normValue(prop, v) {
+  v = String(v).trim();
+  if (/color|background|border|shadow|fill|stroke/i.test(prop) && !/width|radius|size|style/i.test(prop)) {
+    // 可能含多段（如 border-bottom: 1px solid rgb(...)）：逐 token 处理
+    return v.replace(/#[0-9a-fA-F]{3,8}\b|rgba?\([^)]+\)|\btransparent\b/g, (c) => normColor(c) ?? c).toLowerCase();
+  }
+  // 关键字简写展开为 4 值（浏览器返回 4 值，期望可能写简写）
+  const KEY4 = { center: ["center", "center"], top: ["top", "bottom"], right: ["right", "left"], bottom: ["bottom", "top"], left: ["left", "right"] };
+  if (["justify-content", "align-items", "place-content", "place-items"].includes(prop) && KEY4[v]) return KEY4[v].join(" ");
+  // px 列表归一："0 8px" → "0px 8px"
+  if (/^-?\d+(?:\.\d+)?(?:px|%)?(?:\s+|-)/.test(v) || /^-?\d+(?:\.\d+)?(?:px|%)$/.test(v)) {
+    return v.split(/[\s,]+/).map((t) => (t === "0" ? "0px" : t)).join(" ");
+  }
+  return v.toLowerCase();
+}
+
+/** 把值切成 token：颜色/函数保持整体，其余按空格/逗号切 */
+function tokenize(v) {
+  const out = [];
+  const re = /rgba?\([^)]*\)|#[0-9a-fA-F]{3,8}\b|[^\s,]+/g;
+  let m;
+  while ((m = re.exec(String(v)))) out.push(m[0]);
+  return out;
+}
+
+/** 单 token 比对：颜色归一（alpha 容差 0.01）；px 数值容差；其余字符串相等 */
+function tokenMatch(a, b, tol) {
+  const na = normColor(a); const nb = normColor(b);
+  const isColorA = /^#|rgba?\(|^transparent$/.test(String(a).trim());
+  const isColorB = /^#|rgba?\(|^transparent$/.test(String(b).trim());
+  if (isColorA || isColorB) {
+    if (na && nb) {
+      const pa = na.split(",").map(Number); const pb = nb.split(",").map(Number);
+      return pa.slice(0, 3).every((x, i) => Math.abs(x - pb[i]) <= 1) && Math.abs(pa[3] - pb[3]) <= 0.011;
+    }
+    return false;
+  }
+  const pa = String(a).match(/^(-?[\d.]+)px$/i);
+  const pb = String(b).match(/^(-?[\d.]+)px$/i);
+  if (pa && pb) return Math.abs(Number(pa[1]) - Number(pb[1])) <= tol;
+  if ((a === "0" || /^0(px)?$/.test(a)) && (b === "0" || /^0(px)?$/.test(b))) return true;
+  // flex 子项 blockify：inline-flex/inline-block/inline-grid 计算为块级等价形态
+  const BLOCKY = { "inline-flex": "flex", "inline-block": "block", "inline-grid": "grid", "inline-table": "table" };
+  if (BLOCKY[String(a).toLowerCase()] === String(b).toLowerCase() || String(a).toLowerCase() === BLOCKY[String(b).toLowerCase()]) return true;
+  return String(a).toLowerCase() === String(b).toLowerCase();
+}
+
+/** 值比对：逐 token，几何容差 ≤2px */
+function valuesMatch(prop, expected, actual) {
+  expected = String(expected).trim();
+  actual = String(actual).trim();
+  // auto ↔ used px/0px（margin auto、height auto 计算后为 used 值）
+  if (expected === "auto" && /^(-?[\d.]+px|0px)$/.test(actual)) return true;
+  // unitless line-height（契约 "1"）↔ 计算 px：在调用处按 fontSize 精算，这里宽松放行
+  if (prop === "line-height" && /^[\d.]+$/.test(expected) && /^[\d.]+px$/.test(actual)) return true;
+  // border 简写：期望 "none" ↔ 计算值 "0px none <color>"
+  if (expected === "none" && /^0px\s+none\b/.test(actual)) return true;
+  // grid-template-columns 等计算后解析为 px 轨道：含 repeat( 的期望无法逐值比 → 视为通过（结构由 CSS 源保证）
+  if (expected.includes("repeat(") && /^[\d.]+px(\s+[\d.]+px)*$/.test(actual)) return true;
+  if (prop === "box-shadow") {
+    if (expected === "none" || actual === "none") return expected === actual;
+    const ec = normColor(expected.match(/rgba?\([^)]+\)|#[0-9a-f]{3,8}/i)?.[0]);
+    const ac = normColor(actual.match(/rgba?\([^)]+\)|#[0-9a-f]{3,8}/i)?.[0]);
+    return ec === ac;
+  }
+  // 简写展开：期望 "0 8px" 实际 "0px 8px 0px 8px" → 4 值补全
+  let et = tokenize(expected);
+  let at = tokenize(actual);
+  if (et.length === 2 && at.length === 4) et = [et[0], et[1], et[0], et[1]];
+  if (et.length === 3 && at.length === 4) et = [et[0], et[1], et[2], et[1]];
+  if (et.length === 1 && at.length === 4) et = [et[0], et[0], et[0], et[0]];
+  if (et.length !== at.length) return false;
+  const tol = /width|height|padding|margin|gap|radius|size|inset|top|right|bottom|left|offset/i.test(prop) ? 2 : 0;
+  return et.every((t, i) => tokenMatch(t, at[i], tol));
+}
+
+const GEOMETRY_PROPS = new Set(["height", "width", "min-width", "max-width", "padding", "padding-top", "padding-right", "padding-bottom", "padding-left", "margin", "gap", "border-radius", "font-size", "line-height"]);
+
+async function main() {
+  const args = parseArgs(process.argv.slice(2));
+  const designDir = path.join(args.project, ".design");
+  const contractFile = fs.readdirSync(designDir).find((n) => /^visual-contract.*\.json$/.test(n));
+  const contract = JSON.parse(fs.readFileSync(path.join(designDir, contractFile), "utf-8"));
+  const adapter = JSON.parse(fs.readFileSync(path.join(SKILL_DIR, "adapters", "vue-element-plus.json"), "utf-8"));
+  const resolveToken = makeTokenResolver(contract);
+
+  const { chromium } = resolvePlaywright(args.project);
+  const browser = await chromium.launch({ headless: !args.headed });
+  const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 } });
+  const page = await ctx.newPage();
+
+  // ── 登录（验证码 canvas 读取 + 滑块绕过）
+  await page.goto(`${args.url}/#/login`, { waitUntil: "networkidle" }).catch(() => {});
+  await page.waitForTimeout(1500);
+  try {
+    const inputs = page.locator(".login-panel input, input[type='text'], input[type='password']");
+    const n = await inputs.count();
+    if (n >= 2) {
+      await inputs.nth(0).fill("admin");
+      await inputs.nth(1).fill("admin123");
+    }
+    // 验证码：从 canvas 关联的 imgCode 读取
+    const code = await page.evaluate(() => {
+      const canvases = document.querySelectorAll("canvas");
+      for (const c of canvases) {
+        let el = c;
+        while (el) {
+          const inst = el.__vueParentComponent;
+          const imgCode = inst?.setupState?.imgCode ?? inst?.ctx?.imgCode;
+          if (typeof imgCode === "string" && imgCode.length >= 4) return imgCode;
+          el = el.parentElement;
+        }
+      }
+      return "";
+    });
+    if (code) {
+      const codeInput = page.locator("input[placeholder*='验证码'], input[placeholder*='密码'] ~ div input").first();
+      if (await codeInput.count()) await codeInput.fill(code);
+    }
+    // 滑块验证绕过
+    await page.evaluate(() => {
+      let el = document.querySelector(".verifybox, .login-panel, #login, .login-container");
+      while (el) {
+        const inst = el.__vueParentComponent;
+        if (inst?.setupState?.success) { inst.setupState.success(); return true; }
+        let c = inst;
+        while (c) { if (c.setupState?.success) { c.setupState.success(); return true; } c = c.parent; }
+        el = el.parentElement;
+      }
+      return false;
+    });
+    const loginBtn = page.locator("button:has-text('登 录'), button:has-text('登录')").first();
+    if (await loginBtn.count()) await loginBtn.click();
+    await page.waitForTimeout(3500);
+  } catch (e) {
+    console.log("登录步骤异常（继续尝试直接访问）:", e.message);
+  }
+
+  // ── 目标页
+  await page.goto(`${args.url}${args.route}`, { waitUntil: "networkidle" }).catch(() => {});
+  await page.waitForTimeout(2500);
+  // 清主题缓存重载（确保新令牌生效）——⚠️ 只清主题键：responsive-token 是登录态，误清会被路由守卫踢回登录页
+  await page.evaluate(() => {
+    for (const k of ["responsive-layout", "responsive-configure"]) localStorage.removeItem(k);
+  });
+  await page.reload({ waitUntil: "networkidle" });
+  await page.waitForTimeout(2500);
+  // 被踢回登录页则重试一次登录
+  if (page.url().includes("/login")) {
+    await page.evaluate(async () => {
+      const inputs = document.querySelectorAll("input");
+      const setVal = (el, v) => { const s = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set; s.call(el, v); el.dispatchEvent(new Event("input", { bubbles: true })); };
+      for (const i of inputs) { if (i.type === "text" && !i.value) setVal(i, "admin"); if (i.type === "password") setVal(i, "admin123"); }
+      let code = "";
+      for (const c of document.querySelectorAll("canvas")) { let el = c; while (el) { const ic = el.__vueParentComponent?.setupState?.imgCode; if (typeof ic === "string" && ic.length >= 3) { code = ic; break; } el = el.parentElement; } if (code) break; }
+      for (const i of inputs) { if (i.placeholder && /验证码/.test(i.placeholder) && code) setVal(i, code); }
+      let el = document.querySelector(".verifybox, .login-container, #login, .login-panel");
+      while (el) { const s = el.__vueParentComponent?.setupState; if (s?.success) { s.success(); break; } el = el.parentElement; }
+    });
+    const loginBtn = page.locator("button:has-text('登 录'), button:has-text('登录')").first();
+    try { if (await loginBtn.count()) await loginBtn.click({ timeout: 5000 }); } catch {}
+    await page.waitForTimeout(3000);
+    await page.goto(`${args.url}${args.route}`, { waitUntil: "networkidle" }).catch(() => {});
+    await page.waitForTimeout(2500);
+  }
+
+  await page.screenshot({ path: path.join(args.project, args.outDir, "verify-landing.png"), fullPage: true });
+
+  // ── 逐点比对
+  const PROPS_HOST = new Set(["background-color", "color", "border-radius", "height", "padding", "gap", "font-size", "font-weight", "border-bottom", "border-top", "text-align", "white-space", "overflow", "box-shadow", "border", "border-color", "line-height", "opacity", "display", "justify-content", "align-items", "min-width", "width", "margin"]);
+  const results = [];
+  let pass = 0, fail = 0, skip = 0;
+
+  for (const [roleName, role] of Object.entries(contract.roles || {})) {
+    const cls = expectedClassName(roleName);
+    const checks = [];
+    for (const d of role.host || []) checks.push({ sel: `.${cls}`, prop: d.prop, value: resolveToken(d.value), layer: "host" });
+    const innerTarget = (adapter.innerTargets || {})[cls.replace(/^role-/, "")] || "default";
+    for (const d of role.inner || []) {
+      const sel = innerTarget === "default" ? `.${cls}` : `.${cls} ${innerTarget.split(",").pop().trim()}`;
+      checks.push({ sel, prop: d.prop, value: resolveToken(d.value), layer: "inner" });
+    }
+    if (!checks.length) continue;
+
+    const found = await page.evaluate((sel) => {
+      const els = document.querySelectorAll(sel);
+      return els.length;
+    }, checks[0].sel).catch(() => 0);
+
+    if (!found) { skip++; results.push({ role: roleName, status: "SKIP", reason: `选择器 ${checks[0].sel} 在页面上不存在（可能未挂载/未滚动到/变体类未启用）` }); continue; }
+
+    for (const c of checks) {
+      // 跳过复合 border（EP 拆四边）与简写 padding（读四边均值复杂）——由具体边属性代替
+      if (c.prop === "border" && !c.value.startsWith("none")) { skip++; continue; }
+      if (c.prop === "padding") { skip++; continue; }
+      if (c.prop === "gap" && !["flex", "inline-flex", "grid"].includes("")) { /* gap 可读 */ }
+      const actual = await page.evaluate(({ sel, prop, cls }) => {
+        // 基础角色比对：排除变体元素；禁用实例的外观由 disabled 态决定（图上未画出则不核），一律排除
+        let els = [...document.querySelectorAll(sel)].filter((e) =>
+          ![...e.classList].some((c) => c.startsWith(cls + "--")));
+        els = els.filter((e) => !e.disabled && !e.classList.contains("is-disabled"));
+        // table.cell.* 角色：EP 会把 cell 类同步挂到 th——数据单元格断言优先取 td
+        if (cls.startsWith("role-table-cell")) {
+          const tds = els.filter((e) => e.tagName === "TD");
+          if (tds.length) els = tds;
+        }
+        if (!els.length) return { none: true };
+        const key = prop.replace(/-([a-z])/g, (m, x) => x.toUpperCase());
+        const first = { value: null, tag: els[0].tagName.toLowerCase(), cls: String(els[0].className).slice(0, 120), txt: (els[0].textContent || "").trim().slice(0, 24), values: [] };
+        for (const el of els) {
+          const cs = getComputedStyle(el);
+          const v = cs[key] ?? null;
+          if (v == null) continue;
+          if (first.value == null) first.value = v;
+          first.values.push(v);
+        }
+        return first;
+      }, { sel: c.sel, prop: c.prop, cls });
+      if (!actual || actual.none) { skip++; if (c === checks[0]) results.push({ role: roleName, status: "SKIP", reason: `${cls} 仅存在禁用/变体实例，基态不可断言` }); continue; }
+      if (actual.value == null) { skip++; continue; }
+      const candidates = actual.values || [actual.value];
+      let ok = false;
+      for (const cv of candidates) {
+        const m = valuesMatch(c.prop, c.value, cv);
+        if (m) { ok = true; actual.value = cv; break; }
+      }
+      if (ok) pass++;
+      else { fail++; results.push({ role: roleName, status: "FAIL", sel: c.sel, prop: c.prop, expected: c.value, actual: actual.value, el: `<${actual.tag} class="${actual.cls}"> "${actual.txt}"` }); }
+    }
+  }
+
+  // ── 第二遍：visualSanity 通用断言（UX 合理性，规则来自 adapter.visualSanity）
+  const sanity = adapter.visualSanity || {};
+  const sanityResults = [];
+  let sanityPass = 0, sanityFail = 0;
+
+  const densityHeight = (() => {
+    const cell = (contract.roles || {})["table.cell"];
+    const v = (cell?.variants || []).find((x) => x.name === "density_loose") || (cell?.variants || [])[0];
+    const h = v?.host?.find((d) => d.prop === "height")?.value || cell?.host?.find((d) => d.prop === "height")?.value;
+    return h ? parseFloat(h) : null;
+  })();
+
+  if (sanity.noWrap) {
+    for (const sel of sanity.noWrap.selectors) {
+      const bad = await page.evaluate(({ sel }) => {
+        const out = [];
+        for (const el of document.querySelectorAll(sel)) {
+          const cs = getComputedStyle(el);
+          // 真实溢出（横向截断）才判 FAIL；定高盒（标签/按钮）不因高度误判
+          if (el.scrollWidth > el.clientWidth + 1) {
+            out.push({ cls: String(el.className).slice(0, 60), txt: (el.textContent || "").trim().slice(0, 20), sw: el.scrollWidth, cw: el.clientWidth, ws: cs.whiteSpace });
+          }
+        }
+        return out;
+      }, { sel });
+      if (bad.length) { sanityFail++; sanityResults.push({ check: "no-wrap", sel, detail: bad.slice(0, 3) }); }
+      else sanityPass++;
+    }
+  }
+  if (sanity.noEllipsis) {
+    for (const sel of sanity.noEllipsis.selectors) {
+      const bad = await page.evaluate(({ sel }) => {
+        const out = [];
+        for (const el of document.querySelectorAll(sel)) {
+          const cs = getComputedStyle(el);
+          if (cs.textOverflow === "ellipsis" && el.scrollWidth > el.clientWidth + 1) {
+            out.push({ cls: String(el.className).slice(0, 60), txt: (el.textContent || "").trim().slice(0, 20), sw: el.scrollWidth, cw: el.clientWidth });
+          }
+        }
+        return out;
+      }, { sel });
+      if (bad.length) { sanityFail++; sanityResults.push({ check: "no-ellipsis", sel, detail: bad.slice(0, 3) }); }
+      else sanityPass++;
+    }
+  }
+  if (sanity.fullVisibility) {
+    for (const sel of sanity.fullVisibility.selectors) {
+      const found = await page.evaluate(({ sel }) => {
+        for (const el of document.querySelectorAll(sel)) {
+          const r = el.getBoundingClientRect();
+          const cs = getComputedStyle(el);
+          if (cs.display !== "none" && cs.visibility !== "hidden" && r.width > 0 && r.height > 0) return true;
+        }
+        return false;
+      }, { sel });
+      if (!found) { sanityFail++; sanityResults.push({ check: "full-visibility", sel, detail: "无可见实例（缺失或被隐藏）" }); }
+      else sanityPass++;
+    }
+  }
+  if (sanity.paddingSanity) {
+    for (const sel of sanity.paddingSanity.selectors) {
+      const bad = await page.evaluate(({ sel }) => {
+        const out = [];
+        for (const el of document.querySelectorAll(sel)) {
+          const cs = getComputedStyle(el);
+          const pl = parseFloat(cs.paddingLeft) || 0, pr = parseFloat(cs.paddingRight) || 0;
+          if (pl < 4 && pr < 4) out.push({ cls: String(el.className).slice(0, 60), pl, pr });
+        }
+        return out;
+      }, { sel });
+      if (bad.length) { sanityFail++; sanityResults.push({ check: "padding-sanity", sel, detail: bad.slice(0, 3) }); }
+      else sanityPass++;
+    }
+  }
+  if (sanity.rowHeightSanity) {
+    // 目标 = 当前密度档（表格根 density-* 类）对应契约值；无类则取契约 table.cell 基础 height
+    const bad = await page.evaluate(({ sel }) => {
+      const table = document.querySelector('[class*="density-"]') || document.querySelector('.el-table');
+      const cls = table ? [...table.classList].find((c) => c.startsWith("density-")) : null;
+      const out = [];
+      const els = document.querySelectorAll(sel);
+      for (const el of els) {
+        const h = el.getBoundingClientRect().height;
+        out.push({ h: Math.round(h), density: cls || "(default)" });
+      }
+      return out;
+    }, { sel: sanity.rowHeightSanity.selectors[0] });
+    // 与契约档位表比对（density-loose 55 / normal 47 / compact 39）
+    const TIER = { "density-loose": 55, "density-normal": 47, "density-compact": 39 };
+    const cur = bad[0]?.density;
+    const target = TIER[cur];
+    const off = target ? bad.filter((b) => Math.abs(b.h - target) > 2) : [];
+    if (off.length) { sanityFail++; sanityResults.push({ check: "row-height-sanity", sel: sanity.rowHeightSanity.selectors[0], detail: `当前档 ${cur} 目标 ${target}px，偏差: ${JSON.stringify(off.slice(0, 3))}` }); }
+    else sanityPass++;
+  }
+  if (sanity.chipHeight) {
+    // 定高小件：从契约对应 role 取声明 height，比对实际 rect.height（换行撑高检测）
+    const chipTargets = {};
+    const roleOf = { ".role-tag-status": ["tag.status", "24"], ".role-shell-tabs-close": ["shell.tabs.close", "12"] };
+    for (const [sel, [role, fb]] of Object.entries(roleOf)) {
+      const r = (contract.roles || {})[role];
+      const h = r?.host?.find((d) => d.prop === "height")?.value || fb;
+      chipTargets[sel] = parseFloat(h) || 24;
+    }
+    for (const sel of sanity.chipHeight.selectors) {
+      const bad = await page.evaluate(({ sel, target }) => {
+        const out = [];
+        for (const el of document.querySelectorAll(sel)) {
+          const h = el.getBoundingClientRect().height;
+          if (Math.abs(h - target) > 2) out.push({ h: Math.round(h), target, txt: (el.textContent || "").trim().slice(0, 12) });
+        }
+        return out;
+      }, { sel, target: chipTargets[sel] || 24 });
+      if (bad.length) { sanityFail++; sanityResults.push({ check: "chip-height", sel, detail: `目标 ${chipTargets[sel]}px，换行/撑高: ${JSON.stringify(bad.slice(0, 3))}` }); }
+      else sanityPass++;
+    }
+  }
+  if (sanity.tabFlat) {
+    for (const sel of sanity.tabFlat.selectors) {
+      const bad = await page.evaluate(({ sel }) => {
+        const out = [];
+        for (const el of document.querySelectorAll(sel)) {
+          const cs = getComputedStyle(el);
+          const bw = parseFloat(cs.borderTopWidth) || 0;
+          if (bw > 0 || cs.outlineStyle !== "none" || cs.boxShadow !== "none") {
+            out.push({ border: cs.borderTopWidth, outline: cs.outlineStyle, shadow: cs.boxShadow.slice(0, 30), txt: (el.textContent || "").trim().slice(0, 10) });
+          }
+        }
+        return out;
+      }, { sel });
+      if (bad.length) { sanityFail++; sanityResults.push({ check: "tab-flat", sel, detail: JSON.stringify(bad.slice(0, 3)) }); }
+      else sanityPass++;
+    }
+  }
+  if (sanity.wrapperPadding) {
+    for (const sel of sanity.wrapperPadding.selectors) {
+      const bad = await page.evaluate(({ sel, expect }) => {
+        const out = [];
+        for (const el of document.querySelectorAll(sel)) {
+          const cs = getComputedStyle(el);
+          const pl = parseFloat(cs.paddingLeft) || 0, pr = parseFloat(cs.paddingRight) || 0;
+          if (Math.abs(pl - expect) > 2 || Math.abs(pr - expect) > 2) out.push({ pl, pr, expect });
+        }
+        return out;
+      }, { sel, expect: sanity.wrapperPadding.expectPx || 20 });
+      if (bad.length) { sanityFail++; sanityResults.push({ check: "wrapper-padding", sel, detail: JSON.stringify(bad.slice(0, 3)) }); }
+      else sanityPass++;
+    }
+  }
+  if (sanity.gapGeometry) {
+    for (const g of sanity.gapGeometry.groups) {
+      const bad = await page.evaluate(({ container, itemSel, expectGap, tol }) => {
+        const el = document.querySelector(container);
+        if (!el) return ["容器不存在"];
+        const items = (itemSel === "> *" ? [...el.children] : [...el.querySelectorAll(itemSel)]).filter((e) => e.getBoundingClientRect().width > 0);
+        if (items.length < 2) return [];
+        const gaps = [];
+        for (let i = 1; i < items.length; i++) {
+          const prev = items[i - 1].getBoundingClientRect();
+          const cur = items[i].getBoundingClientRect();
+          const gap = Math.round((cur.left - prev.right) * 10) / 10;
+          if (Math.abs(gap - expectGap) > tol) gaps.push({ pair: i, gap, expectGap });
+        }
+        return gaps;
+      }, { container: g.container, itemSel: g.itemSel, expectGap: g.expectGap, tol: g.tol ?? 2 });
+      if (bad.length) { sanityFail++; sanityResults.push({ check: `gap-geometry:${g.name}`, sel: g.container, detail: JSON.stringify(bad.slice(0, 3)) }); }
+      else sanityPass++;
+    }
+  }
+  if (sanity.headerAlign) {
+    for (const h of sanity.headerAlign) {
+      const bad = await page.evaluate(({ sel, expect }) => {
+        const el = document.querySelector(sel);
+        if (!el) return ["not found"];
+        const cs = getComputedStyle(el);
+        const ta = cs.textAlign;
+        if (ta === expect) return [];
+        // flex 容器下 text-align 不生效，看 justify-content
+        if (cs.display.includes("flex")) {
+          const jc = cs.justifyContent;
+          if (expect === "center" && jc === "center") return [];
+          if (expect === "right" && (jc === "flex-end" || jc === "right" || jc === "end")) return [];
+        }
+        return [{ ta, jc: cs.justifyContent, expect }];
+      }, { sel: h.sel, expect: h.expect });
+      if (bad.length) { sanityFail++; sanityResults.push({ check: `header-align:${h.name}`, sel: h.sel, detail: JSON.stringify(bad) }); }
+      else sanityPass++;
+    }
+  }
+
+  // ── 报告
+  console.log("\n渲染取证报告（期望源 = 契约 JSON）");
+  console.log("=".repeat(70));
+  for (const r of results) {
+    if (r.status === "SKIP") console.log(`[SKIP] ${r.role}: ${r.reason}`);
+    else console.log(`[FAIL] ${r.role} · ${r.sel} · ${r.prop}\n       期望 ${r.expected}\n       实际 ${r.actual}\n       元素 ${r.el}`);
+  }
+  console.log("-".repeat(70));
+  console.log(`第一遍（契约逐点）: 命中 ${pass} · 差异 ${fail} · 跳过 ${skip}（简写/缺元素）`);
+  console.log(`第二遍（visualSanity 通用断言）: 通过 ${sanityPass} · 失败 ${sanityFail}`);
+  for (const s of sanityResults) {
+    console.log(`[SANITY-FAIL] ${s.check} · ${s.sel}`);
+    console.log(`       ${typeof s.detail === "string" ? s.detail : JSON.stringify(s.detail)}`);
+  }
+  console.log(`截图: ${path.join(args.project, args.outDir, "verify-landing.png")}`);
+  await browser.close();
+  process.exit(fail > 0 || sanityFail > 0 ? 1 : 0);
+}
+
+main().catch((e) => { console.error(e); process.exit(1); });