#!/usr/bin/env node /** * 审计:找出「挂在 上、只写 width 不写 height」的样式类。 * * 为什么值得单独审计(2026-09-23 真实缺陷): * 小程序 在未指定高度时取**默认 240px(=480rpx)**。首页「善缘公益服务」 * 「善缘安全提醒」两张卡只给封面写了 width,卡片因此被撑到约 480rpx 高 —— 用户反馈的 * 「这两栏占用过大」即此。此类写法没有任何编译/类型报错,只能靠约定的静态审计抓。 * * 判据(两道过滤,避免误报): * 1) 规则体里有 width 但没有 height(min-height 不算 —— 它是下限,挡不住 240px 默认值); * 2) 选择器里的类名**确实出现在某个 `` 上**(只在 .wxss 里找会把 * 容器类、`` 图标类一起算进来,实测误报率极高)。 * * 用法: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 } /** 收集所有出现在 上的静态类名 */ 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(/]*>/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 文本里找出「挂在 上、有 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: '反向:类名没出现在 上(容器类 / 图标类)不算', 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(` 类共 ${imageClasses.size} 个;命中「有 width 无 height」${hits.length} 条`) for (const hit of hits) console.log(' -', hit) if (hits.length) process.exitCode = 1