115 lines
4.7 KiB
JavaScript
115 lines
4.7 KiB
JavaScript
|
#!/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
|