danyang-match/scripts/audit-image-height.mjs

#!/usr/bin/env node
/**
 * 审计：找出「挂在 <image> 上、只写 width 不写 height」的样式类。
 *
 * 为什么值得单独审计（2026-09-23 真实缺陷）：
 *   小程序 <image> 在未指定高度时取**默认 240px（=480rpx）**。首页「善缘公益服务」
 *   「善缘安全提醒」两张卡只给封面写了 width，卡片因此被撑到约 480rpx 高 —— 用户反馈的
 *   「这两栏占用过大」即此。此类写法没有任何编译/类型报错，只能靠约定的静态审计抓。
 *
 * 判据（两道过滤，避免误报）：
 *   1) 规则体里有 width 但没有 height（min-height 不算 —— 它是下限，挡不住 240px 默认值）；
 *   2) 选择器里的类名**确实出现在某个 `<image class="...">` 上**（只在 .wxss 里找会把
 *      容器类、`<text>` 图标类一起算进来，实测误报率极高）。
 *
 * 用法：node scripts/audit-image-height.mjs
 * 退出码：0 = 无命中；1 = 命中（可接 CI，但目前故意只作为审计工具，不挂进门禁 ——
 *         门禁侧只锁「首页两张卡」这一处已确认的缺陷，见 ui-tests/miniapp-capsule-safe-contracts.mjs）
 */
import { readFileSync, readdirSync, statSync } from 'node:fs'
import { join, relative, resolve } from 'node:path'

const root = resolve(import.meta.dirname, '..')

function walk(dir, extensions, out = []) {
  for (const entry of readdirSync(dir)) {
    if (entry === 'node_modules') continue
    const full = join(dir, entry)
    if (statSync(full).isDirectory()) walk(full, extensions, out)
    else if (extensions.some((ext) => entry.endsWith(ext))) out.push(full)
  }
  return out
}

/** 收集所有出现在 <image> 上的静态类名 */
function collectImageClasses() {
  const classes = new Set()
  for (const file of walk(resolve(root, 'miniapp'), ['.wxml'])) {
    const src = readFileSync(file, 'utf8')
    for (const tag of src.matchAll(/<image\b[^>]*>/g)) {
      const classAttr = tag[0].match(/\sclass="([^"]*)"/)
      if (!classAttr) continue
      // 动态类名（含 {{}}）无法静态判断，跳过
      if (classAttr[1].includes('{{')) continue
      for (const name of classAttr[1].split(/\s+/).filter(Boolean)) classes.add(name)
    }
  }
  return classes
}

const imageClasses = collectImageClasses()
const ROLE = /([^{}]+)\{([^{}]*)\}/g

/** 按声明拆分并精确比对属性名 —— 不能用 /\bheight:/：`min-height` 里的 "height" 前是连字符，
 *  同样满足 \b，会把「只写 min-height」的缺陷写成合法（首版就踩了这个坑，自检立刻报出来）。 */
function declaresProp(body, prop) {
  return body
    .split(';')
    .map((d) => d.split(':')[0].trim())
    .some((name) => name === prop)
}

/** 纯函数：在给定 CSS 文本里找出「挂在 <image> 上、有 width 无 height」的规则 */
function analyze(css, imageClassSet) {
  const hits = []
  for (const m of css.matchAll(ROLE)) {
    const selector = m[1].split('\n').pop().trim().replace(/\s+/g, ' ')
    const body = m[2]
    const classes = [...selector.matchAll(/\.([A-Za-z0-9_-]+)/g)].map((x) => x[1])
    if (!classes.some((name) => imageClassSet.has(name))) continue
    if (!declaresProp(body, 'width')) continue
    if (declaresProp(body, 'height')) continue
    hits.push(`${selector}  {${body.trim().replace(/\s+/g, ' ')}}`)
  }
  return hits
}

// ---- 自检：证明这条审计真的有判别力（含修复前真实写法）----
const SELF_CHECK = [
  {
    name: '正向：修复前的真实写法（只写 width + min-height，挡不住 image 默认 240px）',
    css: '.service-cover { width: 210rpx; min-height: 160rpx; flex: none; }',
    classes: new Set(['service-cover']),
    expect: 1,
  },
  {
    name: '反向：写了显式 height 就不算问题',
    css: '.mini-card-cover { width: 100%; height: 100%; display: block; }',
    classes: new Set(['mini-card-cover']),
    expect: 0,
  },
  {
    name: '反向：类名没出现在 <image> 上（容器类 / <text> 图标类）不算',
    css: '.list-icon { width: 48rpx; text-align: center; }',
    classes: new Set(['service-cover']),
    expect: 0,
  },
]
for (const c of SELF_CHECK) {
  const got = analyze(c.css, c.classes).length
  if (got !== c.expect) {
    console.error(`自检失败 —— ${c.name}\n期望 ${c.expect} 条，实得 ${got} 条`)
    process.exit(1)
  }
}

const hits = []
for (const file of walk(resolve(root, 'miniapp'), ['.wxss'])) {
  const found = analyze(readFileSync(file, 'utf8'), imageClasses)
  for (const hit of found) hits.push(`${relative(root, file).replace(/\\/g, '/')}  ${hit}`)
}

console.log(`<image> 类共 ${imageClasses.size} 个；命中「有 width 无 height」${hits.length} 条`)
for (const hit of hits) console.log(' -', hit)
if (hits.length) process.exitCode = 1