MailUI4Agents/web/test/manual/theme-verify.mjs

/**
 * 深色主题手工验收。
 *
 * 需要共享 Chromium（CDP 9222）。结构性检查已在 test/theme.test.mjs 里，
 * 这里验的是**真实渲染出来的对比度** —— 那是唯一能发现白底白字的判据。
 *
 * 用法：
 *   ADMIN_USER=jianf ADMIN_PW=... AGENTMAIL_URL=http://127.0.0.1:8180 \
 *     node web/test/manual/theme-verify.mjs
 */
import { openApp, WIDE } from './narrow-probe-helper.mjs';

let pass = 0, fail = 0;
const check = (name, ok, detail = '') => {
  if (ok) { pass++; console.log(`  通过  ${name}`); }
  else { fail++; console.log(`  失败  ${name}${detail ? ' — ' + detail : ''}`); }
};

/** 相对亮度（WCAG）。用于判断 body 底色是否真的变暗。 */
function luminance([r, g, b]) {
  const f = c => {
    c /= 255;
    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
  };
  return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b);
}

const parseRgb = s => {
  const m = String(s).match(/(\d+),\s*(\d+),\s*(\d+)/);
  return m ? [Number(m[1]), Number(m[2]), Number(m[3])] : null;
};

const { browser, page, issues } = await openApp(WIDE);

try {

  for (const mode of ['light', 'dark']) {
    console.log(`\n── ${mode} ──`);
    await page.evaluate(m => {
      localStorage.setItem('agentmail.theme', m);
      document.documentElement.classList.toggle('dark', m === 'dark');
      document.documentElement.style.colorScheme = m;
    }, mode);
    await page.waitForTimeout(400);

    const body = parseRgb(await page.evaluate(() =>
      getComputedStyle(document.body).backgroundColor));
    check(`${mode}: body 底色可读取`, body !== null, String(body));

    if (mode === 'dark') {
      // 深色下 body 必须是暗的。这一条挂掉说明变量没生效
      check('dark: body 底色确实是暗的', luminance(body) < 0.2,
        `亮度 ${luminance(body).toFixed(3)}`);
    }

    // 遍历可见文本节点，算每个的前景/背景对比度。
    // 4.5:1 是 WCAG AA 的正文标准；大字放宽到 3:1。
    const bad = await page.evaluate(() => {
      const out = [];
      const els = document.querySelectorAll('button, a, h1, h2, h3, p, span, div, label, li');
      const lum = ([r, g, b]) => {
        const f = c => { c /= 255; return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4; };
        return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b);
      };
      const parse = s => {
        const m = String(s).match(/(\d+),\s*(\d+),\s*(\d+)/);
        return m ? [+m[1], +m[2], +m[3]] : null;
      };
      /** 往上找第一个不透明的背景。 */
      const bgOf = el => {
        let cur = el;
        while (cur && cur !== document.documentElement) {
          const cs = getComputedStyle(cur);
          const c = parse(cs.backgroundColor);
          const alpha = String(cs.backgroundColor).match(/rgba?\([^)]*,\s*([\d.]+)\)/);
          if (c && (!alpha || Number(alpha[1]) > 0.85)) return c;
          cur = cur.parentElement;
        }
        return parse(getComputedStyle(document.body).backgroundColor);
      };
      for (const el of els) {
        // 只看直接含文本的元素
        const text = [...el.childNodes]
          .filter(n => n.nodeType === 3)
          .map(n => n.textContent.trim())
          .join('');
        if (!text) continue;
        const r = el.getBoundingClientRect();
        if (r.width < 4 || r.height < 4) continue;
        const cs = getComputedStyle(el);
        if (cs.visibility === 'hidden' || cs.opacity === '0') continue;
        const fg = parse(cs.color);
        const bg = bgOf(el);
        if (!fg || !bg) continue;
        const la = lum(fg), lb = lum(bg);
        const [hi, lo] = la > lb ? [la, lb] : [lb, la];
        const ratio = (hi + 0.05) / (lo + 0.05);
        const size = parseFloat(cs.fontSize);
        const bold = Number(cs.fontWeight) >= 700;
        const large = size >= 24 || (size >= 18.66 && bold);
        const need = large ? 3 : 4.5;
        if (ratio < need) {
          out.push({
            text: text.slice(0, 24),
            ratio: Number(ratio.toFixed(2)),
            need,
            fg: cs.color,
            bg: `rgb(${bg.join(',')})`
          });
        }
      }
      return out;
    });

    // 允许少量刻意的低对比装饰（占位符、禁用态）
    const severe = bad.filter(x => x.ratio < 2.5);
    check(`${mode}: 无严重低对比文本（< 2.5:1）`, severe.length === 0,
      severe.slice(0, 4).map(x => `"${x.text}" ${x.ratio}`).join(' | '));
    if (bad.length) {
      console.log(`    （${bad.length} 处低于 AA 阈值，最差 ${Math.min(...bad.map(x => x.ratio))}:1）`);
      // 逐条列出来而不只报个数：不知道是哪一处就没法修
      for (const x of bad.slice(0, 8)) {
        console.log(`      ${x.ratio}:1 (需 ${x.need}) "${x.text}"  ${x.fg} on ${x.bg}`);
      }
    }

    // 白底白字的典型形态：前景与背景几乎相同
    const invisible = bad.filter(x => x.ratio < 1.3);
    check(`${mode}: 没有不可见文本（< 1.3:1）`, invisible.length === 0,
      invisible.slice(0, 3).map(x => `"${x.text}"`).join(' | '));

    await page.screenshot({ path: `/tmp/theme-${mode}.png`, fullPage: false });
  }

  // 刷新后主题必须保持（localStorage + 内联脚本）
  await page.evaluate(() => localStorage.setItem('agentmail.theme', 'dark'));
  await page.reload({ waitUntil: 'domcontentloaded' });
  await page.waitForTimeout(600);
  const stillDark = await page.evaluate(() =>
    document.documentElement.classList.contains('dark'));
  check('刷新后深色保持（内联脚本生效）', stillDark);

  check('无 JS 运行时错误', issues.length === 0, issues.slice(0, 3).join(' | '));
} finally {
  await page.close();
  await browser.close();
}

console.log(`\n主题验收：${pass} 通过${fail ? `，${fail} 失败` : ''}`);
console.log('截图：/tmp/theme-light.png  /tmp/theme-dark.png');
process.exit(fail ? 1 : 0);