WorkBuddy
1fc34f1bcd
问题 1：五个导航页顶部与右上角胶囊按钮（··· ⊙）重合 - 根因：自定义导航用 env(safe-area-inset-top) 取的是设备物理安全区， 在 Android 上常为 0，完全不反映胶囊位置；且右对齐元素从未为胶囊让出宽度。 - 新增 miniapp/utils/nav-metrics.js 作为唯一事实源：以 wx.getMenuButtonBoundingClientRect() 实测胶囊矩形，反推并导出四个 CSS 变量 --nav-status / --nav-h / --nav-right / --nav-top，并提供无接口时的兜底值。 - nav-bar 组件改为自行获取导航度量（attached + observer 双触发）， 标题按胶囊垂直居中并收窄 max-width；外部传参降级为兜底。 - index / discover / messages / activity / mine 五页根结点注入同一组变量， WXSS 里的 env(safe-area-inset-top)、硬编码 88rpx 与右对齐 right:0 全量替换。 问题 2：首页「善缘公益服务」「善缘安全提醒」两个栏目过宽 - 根因：封面 <image> 只声明 width 未声明 height，小程序默认按 240px 计算， 实际把卡片撑到约 480rpx 高。 - 按「整体等比缩到 1/3」重构：两栏改为 mini-card 小卡，宽度 calc((100% - 2*gap)/3)、高度写死 168rpx，封面 height:100%； 公益服务一行三卡横向排布，安全提醒为「标题小卡 + 右侧文案条」， 长文案收进详情页，安全提示原文保留。 守卫与验证 - 新增 ui-tests/miniapp-capsule-safe-contracts.mjs： A 层多机型断言导航行与胶囊垂直居中、右对齐让位、navTop 与兜底值； B 层纯函数审计五个自带导航行页面（页面清单由文件系统推导，失配直接报红）； C 层断言首页小卡宽为 1/3 且显式声明高度，并钉住旧 service-/safety- 选择器回归。 审计前剥离注释，避免守卫被自身示例文本误伤。 - 新增 scripts/audit-image-height.mjs：按属性名精确比对，审计全仓 「有 width 无 height」的 <image>，当前 30 个类 0 命中。 - 负向注入 N1~N7（含 nav-safe 未接入、旧选择器回归、极小屏幕、无胶囊兜底等） 全部被守卫咬住并 exit 1，还原后复跑通过。 - 真编译（wcc/wcsc）：WXSS 88 / WXML 86，失败 0； tsc --noEmit 通过；UI 契约门控 21/21 PASS（新增第 21 个守卫并抬高 MIN_GUARDS）。 - 渲染探针实测：单卡 213rpx x 168rpx；五页右对齐元素右缘 423~528px， 均在胶囊右缘 365px 之外。 未纳入本次提交：miniapp/project.config.json（微信开发者工具自动改写， 仅追加若干布尔开关并删掉文件末换行）与生成的预览页 artifacts preview.html （约 7900 行生成产物），以免淹没代码评审视线。
111 lines
5.5 KiB
JavaScript
111 lines
5.5 KiB
JavaScript
#!/usr/bin/env node
|
||
// UI 契约门禁统一执行器（本地 + CI 共用入口）
|
||
//
|
||
// 背景：ui-tests/*.mjs 是一组「源码结构与关键行为断言」守卫（纯 node 内建模块、零 npm 依赖），
|
||
// 2026-09-18 之前**只在本地手工逐个执行** —— 没有 CI 把关，改坏了没人知道。
|
||
// 本脚本把「逐个跑 + 汇总 + 非零退出」固化下来：
|
||
//
|
||
// node scripts/run-ui-contracts.mjs # 跑 ui-tests/ 下全部守卫（默认）
|
||
// node scripts/run-ui-contracts.mjs <file...> # 只跑指定守卫（排查用）
|
||
//
|
||
// 三条约定（都对应踩过的坑）：
|
||
// 1) **子进程 cwd 固定为仓库根**。守卫分两类路径风格：多数用 `import.meta.dirname` 自锚定，
|
||
// 但 phase03/04/06/07、tabbar-icons、miniapp-auth 用相对路径 —— 在别处调用会假红。
|
||
// 2) **守卫数量下限硬校验**：防止「守卫被删除/改名」后依然报绿（Phase 19 教训：扫描清单本身会漏）。
|
||
// 新增守卫要上调 MIN_GUARDS；有意删减则下调，二者都必须显式改这行，不能默默变绿。
|
||
// 3) 任一守卫非零退出 → 本脚本非零退出（CI 才会红），并打印该守卫的原始输出便于定位。
|
||
|
||
import { spawnSync } from 'node:child_process'
|
||
import { readdirSync } from 'node:fs'
|
||
import { basename, dirname, resolve } from 'node:path'
|
||
import { fileURLToPath } from 'node:url'
|
||
|
||
const root = resolve(dirname(fileURLToPath(import.meta.url)), '..')
|
||
const UI_TESTS_DIR = resolve(root, 'ui-tests')
|
||
|
||
// 2026-09-19 基线：ui-tests/ 下 18 个守卫
|
||
// 14 → 15：新增 wxml-structure-contracts（补「WXML 能否编译」这一层 ——
|
||
// 此前 14 绿时小程序仍有两个页面编译失败）；
|
||
// 15 → 17：新增 miniapp-self-method-contracts（`this._x()` 无定义 → 运行期 TypeError，
|
||
// 且该调用位于 resolve 之前时会让所有请求的 Promise 永不 settle）、
|
||
// wxss-component-selector-contracts（组件 wxss 用了标签/ID/属性选择器）；
|
||
// 17 → 18：新增 miniapp-api-client-behavior（**唯一一组行为断言**：桩掉 wx.request，
|
||
// 真跑 api.js，验证成功/失败/幂等键释放/收尾容错 4 组行为）。
|
||
// 18 → 19：新增 admin-design-tokens（管理端设计 token 守卫：未定义 token / 硬编码色值 /
|
||
// 字号下限 / 非法字重 / EP 调色板残留 / **对比度实算** —— 最后一项是此前
|
||
// 完全无人把关的一类，且人工目视很难覆盖 24 个页面）。
|
||
// 19 → 20：新增 admin-reactivity-contracts（管理端响应式契约：**非响应式状态**——
|
||
// 普通 `const x = [...]` 被直接改元素且绑到 v-for 时，改动了但渲染不更新，
|
||
// 界面显示陈旧/默认值。2026-09-23 实测数据统计页漏斗卡恒为 0 即此因。
|
||
// 该缺陷无 TS/lint/构建报错，前 19 个守卫全绿也抓不到，只有真跑起来看渲染
|
||
// 结果才暴露 → 必须由源码结构断言接管）。
|
||
// 新增/删减守卫时同步修改本默认值。
|
||
// 可用环境变量 UI_GUARDS_MIN 覆盖 —— 唯一目的是让「数量下限」这条分支本身可被自检
|
||
// （`UI_GUARDS_MIN=99 node scripts/run-ui-contracts.mjs` 必须拒绝报绿）。
|
||
const MIN_GUARDS = Number(process.env.UI_GUARDS_MIN ?? 21)
|
||
|
||
const cliArgs = process.argv.slice(2)
|
||
const explicit = cliArgs.length > 0
|
||
|
||
const guards = explicit
|
||
? cliArgs.map((p) => resolve(root, p))
|
||
: readdirSync(UI_TESTS_DIR)
|
||
.filter((f) => f.endsWith('.mjs'))
|
||
.sort()
|
||
.map((f) => resolve(UI_TESTS_DIR, f))
|
||
|
||
if (guards.length === 0) {
|
||
console.error('ERROR: 未找到任何守卫（ui-tests/*.mjs）')
|
||
process.exit(1)
|
||
}
|
||
|
||
if (!explicit && guards.length < MIN_GUARDS) {
|
||
console.error(
|
||
`ERROR: 只发现 ${guards.length} 个守卫，少于下限 ${MIN_GUARDS} —— 守卫可能被删除或改名，拒绝报绿。`,
|
||
)
|
||
console.error(' 新增守卫请上调 MIN_GUARDS；确为有意删减请下调（并说明原因）。')
|
||
process.exit(1)
|
||
}
|
||
|
||
console.log(`UI 契约门禁（源码结构与关键行为断言）— ${guards.length} 个守卫\n`)
|
||
|
||
const pad = String(guards.length).length
|
||
const failures = []
|
||
const t0 = Date.now()
|
||
|
||
guards.forEach((file, i) => {
|
||
const name = basename(file)
|
||
const started = Date.now()
|
||
const r = spawnSync(process.execPath, [file], {
|
||
cwd: root,
|
||
encoding: 'utf8',
|
||
env: { ...process.env, NO_COLOR: '1' },
|
||
})
|
||
const ms = Date.now() - started
|
||
const tag = `[${String(i + 1).padStart(pad)}/${guards.length}]`
|
||
if (r.status === 0) {
|
||
console.log(`${tag} PASS ${name} (${ms}ms)`)
|
||
} else {
|
||
console.log(`${tag} FAIL ${name} (${ms}ms)`)
|
||
failures.push({ name, status: r.status, stdout: r.stdout, stderr: r.stderr })
|
||
}
|
||
})
|
||
|
||
if (failures.length > 0) {
|
||
console.log(`\n${'='.repeat(64)}\n失败详情（守卫原始输出）\n${'='.repeat(64)}`)
|
||
for (const f of failures) {
|
||
console.log(`\n--- ${f.name}（exit ${f.status ?? 'null'}）---`)
|
||
const out = [f.stdout, f.stderr].filter(Boolean).join('\n').trim()
|
||
console.log(out || '(无输出 —— 守卫自身异常退出，需人工排查)')
|
||
}
|
||
}
|
||
|
||
const secs = ((Date.now() - t0) / 1000).toFixed(1)
|
||
console.log('')
|
||
if (failures.length === 0) {
|
||
console.log(`✅ PASS ${guards.length} / ${guards.length}，0 失败，用时 ${secs}s`)
|
||
process.exit(0)
|
||
}
|
||
console.log(`❌ PASS ${guards.length - failures.length} / ${guards.length}，${failures.length} 失败，用时 ${secs}s`)
|
||
process.exit(1)
|