fmode-app/scripts/verify-ui.mjs

#!/usr/bin/env node
/**
 * verify:ui —— FR-12 / FR-13 / FR-15 的静态断言
 *
 * 依据《设计令牌.md》v3.0 §十二。测量口径（评审 G3 要求）：
 *   · **口径 A（强制）**：业务目录 `src/app/{core,components,desktop,mobile,pages}` 的 .ts/.scss/.html
 *   · **口径 B（豁免）**：`src/app/ui/**`（底座生成物，禁改）
 *
 * 用法：node scripts/verify-ui.mjs
 * 退出码 0 = 全部通过；非 0 = 有断言失败。
 */
import { readdirSync, readFileSync, statSync } from 'node:fs';
import { join, relative } from 'node:path';

const ROOT = process.cwd();
const SRC = join(ROOT, 'src');

/** 业务目录（口径 A） */
const BIZ_DIRS = ['app/core', 'app/components', 'app/desktop', 'app/mobile', 'app/pages', 'environments'];
/** 全局样式文件（单独检查行数） */
const GLOBAL_STYLES = ['styles.scss', 'app/core/styles/_base.scss', 'app/core/styles/_palette.scss'];
/** 覆盖块行数预算（评审 G5 / AC-12.4） */
const BUDGET_LINES = 300;

const results = [];
const fail = (name, detail, hits = []) => results.push({ name, ok: false, detail, hits });
const pass = (name, detail) => results.push({ name, ok: true, detail });

function walk(dir, out = []) {
  let entries;
  try {
    entries = readdirSync(dir);
  } catch {
    return out;
  }
  for (const e of entries) {
    const p = join(dir, e);
    const st = statSync(p);
    if (st.isDirectory()) walk(p, out);
    else out.push(p);
  }
  return out;
}

const bizFiles = BIZ_DIRS.flatMap((d) => walk(join(SRC, d))).filter((f) =>
  /\.(ts|scss|html)$/.test(f),
);

/** 逐行扫描，返回命中 {file, line, text} */
function scan(files, regex) {
  const hits = [];
  for (const f of files) {
    const lines = readFileSync(f, 'utf-8').split('\n');
    lines.forEach((text, i) => {
      if (regex.test(text)) hits.push({ file: relative(ROOT, f), line: i + 1, text: text.trim() });
    });
  }
  return hits;
}

/** 从样式/模板中提取所有「代码实参」，用于去重档位统计 */
function extractCssValues(files, propRegex) {
  const values = new Set();
  for (const f of files) {
    const src = readFileSync(f, 'utf-8');
    let m;
    const re = new RegExp(propRegex.source, 'g');
    while ((m = re.exec(src)) !== null) values.add(m[1].trim());
  }
  return [...values];
}

/* ------------------------------------------------------------------ */
/* AC-12.1 硬编码色值 → 0 处                                          */
/* ------------------------------------------------------------------ */
{
  // 允许在「注释行」与「令牌定义文件」中出现色值（令牌定义是取值的唯一真源）
  const ALLOW_FILES = GLOBAL_STYLES.map((f) => 'src/' + f);
  const files = bizFiles.filter((f) => !ALLOW_FILES.includes(relative(ROOT, f).replace(/\\/g, '/')));
  const hits = scan(files, /#[0-9a-fA-F]{3,8}\b|\brgba?\(|\bhsla?\(/).filter(
    // 排除注释行与文档说明中的示例
    (h) => !/^\s*(\/\/|\*|\/\*)/.test(h.text),
  );
  if (hits.length === 0) pass('AC-12.1 硬编码色值', '业务目录 0 处');
  else fail('AC-12.1 硬编码色值', `业务目录 ${hits.length} 处（目标 0）`, hits.slice(0, 20));
}

/* ------------------------------------------------------------------ */
/* AC-12.2 自有前缀 / 双轨语义色 → 0 处                                */
/* ------------------------------------------------------------------ */
{
  const hits = scan(bizFiles, /--(?:fx|wecom|dk)-|--ok\b|--crit\b|--warn-(?:ink|bg)\s*:/).filter(
    (h) => !/^\s*(\/\/|\*|\/\*)/.test(h.text),
  );
  if (hits.length === 0) pass('AC-12.2 令牌前缀单轨', '0 处自有前缀 / 双轨语义色');
  else fail('AC-12.2 令牌前缀单轨', `${hits.length} 处（目标 0）`, hits.slice(0, 20));
}

/* ------------------------------------------------------------------ */
/* AC-12.3a 字号档位 ≤8                                               */
/* ------------------------------------------------------------------ */
{
  const styles = bizFiles.filter((f) => /\.(scss|ts)$/.test(f));
  // 只统计「字面量 px/数值」形式；var(--fs-*) 是令牌引用，不参与档位统计
  const literal = extractCssValues(
    styles,
    /font-size:\s*(?!var\(|inherit|1em)([0-9.]+(?:px|rem))/,
  );
  const token = new Set();
  for (const f of styles) {
    const src = readFileSync(f, 'utf-8');
    for (const m of src.matchAll(/var\((--fs-[0-9]+)\)/g)) token.add(m[1]);
  }
  if (literal.length === 0 && token.size <= 8) {
    pass('AC-12.3a 字号 ≤8 档', `字面量 0 个；令牌 ${token.size} 档（${[...token].join(', ')}）`);
  } else {
    fail(
      'AC-12.3a 字号 ≤8 档',
      `字面量 ${literal.length} 个 / 令牌 ${token.size} 档（目标 ≤8）`,
      literal.map((v) => ({ file: '(字面量)', line: 0, text: v })),
    );
  }
}

/* ------------------------------------------------------------------ */
/* AC-12.3b 圆角档位 ≤4                                               */
/* ------------------------------------------------------------------ */
{
  const styles = bizFiles.filter((f) => /\.(scss|ts)$/.test(f));
  const token = new Set();
  for (const f of styles) {
    const src = readFileSync(f, 'utf-8');
    for (const m of src.matchAll(/var\((--r-[a-z]+)\)/g)) token.add(m[1]);
  }
  if (token.size <= 4) pass('AC-12.3b 圆角 ≤4 档', `令牌 ${token.size} 档（${[...token].join(', ')}）`);
  else fail('AC-12.3b 圆角 ≤4 档', `令牌 ${token.size} 档（目标 ≤4）`);
}

/* ------------------------------------------------------------------ */
/* AC-12.4 覆盖块行数 ≤300                                            */
/* ------------------------------------------------------------------ */
{
  let total = 0;
  const parts = [];
  for (const f of GLOBAL_STYLES) {
    try {
      const n = readFileSync(join(SRC, f), 'utf-8').split('\n').length;
      total += n;
      parts.push(`${f}=${n}`);
    } catch {
      /* 缺失则跳过 */
    }
  }
  if (total <= BUDGET_LINES) pass('AC-12.4 覆盖块行数', `${total} ≤ ${BUDGET_LINES}（${parts.join(' + ')}）`);
  else fail('AC-12.4 覆盖块行数', `${total} 行 > ${BUDGET_LINES}（${parts.join(' + ')}）`);
}

/* ------------------------------------------------------------------ */
/* AC-12.5 单例服务：ThemeService / PaletteService 各一处              */
/* ------------------------------------------------------------------ */
{
  const hits = scan(bizFiles, /new\s+(?:ThemeService|PaletteService)\s*\(/);
  if (hits.length === 0) pass('AC-12.5 服务单例', '无手工 new，均走 DI');
  else fail('AC-12.5 服务单例', `${hits.length} 处手工实例化（应走 DI）`, hits);
}

/* ------------------------------------------------------------------ */
/* AC-12.6 ui-kit 组件引用去重 ≥30                                    */
/* ------------------------------------------------------------------ */
{
  // 用 fs 递归统计（避免 Windows 下 grep 不可用）
  const bizRoot = join(SRC, 'app');
  const scanDirs = ['desktop', 'mobile', 'components', 'pages', 'core'].map((d) => join(bizRoot, d));
  const selectors = new Set();
  for (const d of scanDirs) {
    for (const f of walk(d)) {
      if (!/\.(ts|html)$/.test(f)) continue;
      const src = readFileSync(f, 'utf-8');
      for (const m of src.matchAll(/<(ui-[a-z-]+)/g)) selectors.add(m[1]);
    }
  }
  const count = selectors.size;

  if (count >= 30) pass('AC-12.6 ui-kit 覆盖率', `${count} 个不同组件（门槛 30）：${[...selectors].sort().join(', ')}`);
  else
    fail(
      'AC-12.6 ui-kit 覆盖率',
      `${count} 个（门槛 30）`,
      [{ file: '(统计)', line: 0, text: [...selectors].sort().join(', ') }],
    );
}

/* ------------------------------------------------------------------ */
/* AC-13.3 触达区 ≥44px                                               */
/* ------------------------------------------------------------------ */
{
  const styles = bizFiles.filter((f) => /\.(scss|ts)$/.test(f));
  // 只检查交互元素的高度声明是否 < 44px（图标按钮/筛选 chip 等）
  const hits = [];
  for (const f of styles) {
    const src = readFileSync(f, 'utf-8');
    // 形如 height: 28px / min-height: 30px 且未走 --touch-min 的交互控件
    for (const m of src.matchAll(/(?:^|\s)(?:min-)?height:\s*([0-9]+)px/g)) {
      const n = Number(m[1]);
      if (n > 0 && n < 44) {
        const line = src.slice(0, m.index).split('\n').length;
        hits.push({ file: relative(ROOT, f), line, text: m[0].trim() });
      }
    }
  }
  // 视觉高 < 44 是允许的（用 ::after 撑开触达区）；此处只报告供人工核对
  pass(
    'AC-13.3 触达区（提示）',
    `视觉高 <44px 的声明 ${hits.length} 处 —— 需人工确认均有 ::after 撑开触达区（筛选 chip/徽标属此列）`,
  );
}

/* ------------------------------------------------------------------ */
/* AC-15.1 调试残留 → 0 处                                            */
/* ------------------------------------------------------------------ */
{
  const hits = scan(bizFiles, /\bconsole\.(log|debug)\s*\(/);
  if (hits.length === 0) pass('AC-15.1 无 console 残留', '0 处');
  else fail('AC-15.1 无 console 残留', `${hits.length} 处`, hits.slice(0, 20));
}

/* ------------------------------------------------------------------ */
/* 全局 outline: none → 0 处                                          */
/* ------------------------------------------------------------------ */
{
  const hits = scan(bizFiles, /outline:\s*none/).filter((h) => !/focus-visible/.test(h.text));
  if (hits.length === 0) pass('全局 outline:none', '0 处');
  else fail('全局 outline:none', `${hits.length} 处（禁止全局移除焦点环）`, hits);
}

/* ------------------------------------------------------------------ */
/* 裸断点（未走 mixin）→ 0 处                                         */
/* ------------------------------------------------------------------ */
{
  const styles = bizFiles.filter((f) => /\.(scss|ts)$/.test(f));
  const hits = scan(styles, /@media[^{]*\d+px/).filter(
    (h) => !/_breakpoints\.scss$/.test(h.file) && !/prefers-reduced-motion/.test(h.text),
  );
  if (hits.length === 0) pass('断点令牌化', '无裸断点');
  else
    fail(
      '断点令牌化',
      `${hits.length} 处裸断点（应用 _breakpoints.scss 的 mixin）`,
      hits.slice(0, 20),
    );
}

/* ------------------------------------------------------------------ */
/* 输出                                                               */
/* ------------------------------------------------------------------ */
const failed = results.filter((r) => !r.ok);
console.log('\n[verify:ui] Fmode v2 · UI 规范断言');
console.log(`口径：业务目录 ${bizFiles.length} 个文件；底座 src/app/ui/** 豁免\n`);

for (const r of results) {
  const mark = r.ok ? '\x1b[32m✓\x1b[0m' : '\x1b[31m✗\x1b[0m';
  console.log(`${mark} ${r.name}`);
  console.log(`    ${r.detail}`);
  for (const h of r.hits ?? []) {
    console.log(`      · ${h.file}:${h.line}  ${h.text}`);
  }
}

console.log('');
if (failed.length === 0) {
  console.log(`\x1b[32m[verify:ui] ✓ ${results.length} 项断言全部通过\x1b[0m\n`);
  process.exit(0);
} else {
  console.log(`\x1b[31m[verify:ui] ✗ ${failed.length}/${results.length} 项未通过\x1b[0m\n`);
  process.exit(1);
}