 WorkBuddy
|
f4e00b4d95
|
feat(miniapp): 首页 4×2 入口宫格图标改版为参考图 2 的渐变砖 + 白色图形
参考图 2 的视觉语言是「高饱和渐变圆角砖 + 白色描画图形 + 主标题/副标题双层文字」，
原实现是「浅色底砖 + 彩色线性 PNG + 单行标题」，两者差异较大，本轮按参考图重做。
- app.wxss：新增 8 个 --gradient-entry-* 渐变 token 与 --mini-entry-shadow。
白图形的判据取**非文本图形 3:1**（WCAG 1.4.11）；渐变是斜向的、图形又跨在两色之间，
故以「较亮端」为准逐色实算（3.00~3.02:1，较暗端 3.54~4.08:1），实算值写在 token 注释里。
- index.wxss：.entry-icon 由 72rpx 浅色砖改为 96rpx 渐变砖（radius 28rpx + 落影）；
图形改用 data-uri SVG 背景层（几何图形统一 24×24 viewBox），砖面走 --gradient-entry-*；
新增 .entry-sub（12px muted 副标题）；删除已无用的 .entry-icon-image。
小屏 @media(≤340px) 同步收紧，副标题不降到 micro —— micro 在本项目是「仅角标/装饰」档位，
这行字承载语义，不属于装饰。
- index.wxml：宫格项去掉 <image>，图标改为纯 CSS 砖；补 aria-label 承接图形语义。
- index.ts：tone 名与色相语义对齐（rose/orange/violet/blue/purple/pink/green/amber），
并补 subtitle；entry 不再持有 iconAsset（图标不再是图片资源）。
- preview-miniapp.mjs：首页 mock 同步 tone/subtitle，预览才能看到真实砖面与副标题。
渲染态实测（无头浏览器 + CDP，非真机渲染）：
- 8 个 .entry-item 均渲染出 label + subtitle；.entry-icon 计算样式 48×48px / radius 14px /
background-image 含 svg 且为两层（图形 26px + 渐变铺满）；label 14px/600；sub 12px #7D839B。
- 证据截图：artifacts/ui-redesign/miniapp/home-entries-page.png 与 home-entries-grid-zoom.png。
门禁：UI 契约 23/23；语种审计 0 命中；tsc --noEmit 通过；wcc/wcsc 真编译 88 WXSS + 86 WXML / 0 失败。
未改（需产品确认）：第 8 项业务名仍是「善缘服务站」（参考图 2 写作「万善缘地」），
副标题自拟为「就在身边」；渐变整体比参考图略深，以保证白图形对比度达标。
|
2026-09-23 15:22:23 +08:00 |
|
|
WorkBuddy
|
2c325136ab
|
fix(miniapp): 修复 WXSS 通配符导致编译失败，并把 WXSS 校验升级为真编译
问题
- v2 设计收敛在 app.wxss 新增 `.tap-gap > * + *`。WXSS 不支持通配符 `*`，
wcc/wcsc 编译期直接报 `error at token '*'`，整个小程序编译不过。
- 更值得警惕的是当时 19 个 UI 契约守卫全绿：静态守卫刻意只扫
`miniapp/components/`（page 的 wxss 允许标签选择器，套用会误报），
app.wxss 落在扫描范围外，且判据里根本没有通配符这一项。
修复
- 移除 `.tap-gap > * + *`。复检 v2 新增的 .tap-min / .tap-gap / .focusable / .pressable
四个工具类全仓零引用（等价能力已各自写在组件样式内，如 button/index.wxss 直接用
`min-height: var(--tap-min)`），且 `.focusable:focus` / `.pressable:active` 在 view 上
不生效（小程序须用 hover-class），属"写了等于没写"，故整块移除，只保留 token。
- 修掉同块注释里的嵌套 `/* */`：内层结束标记会提前终止外层注释，其后的文字会被
当成真实样式解析。该约束已写进注释，防止后人再踩。
守卫加固
- scripts/lib/wxss-selectors.mjs
* 新增 findUniversalSelectors（通配符判据，排除 `*=` 属性匹配符与注释内星号）
* 新增 findNestedComments（注释嵌套判据）
* 修 stripComments：原实现用等长空格替换，把注释内的换行也吃掉，导致报错行号
整体偏移（实测偏差 68 行）；现保留换行，并在定位时跳过选择器前的注释占位空白
- ui-tests/wxss-component-selector-contracts.mjs
* 第 1 级：miniapp/components/（原判据，保留）
* 第 2 级（新增）：全量 miniapp/**/*.wxss，覆盖 app.wxss 与 pages
* 第 3 级（新增）：注释嵌套
* 三级各自带正/反自检样例
新增
- scripts/miniapp-compile-check.mjs：直接调用微信开发者工具内置的 wcc/wcsc 做真编译预检
（wcsc 单独调用不解析 @import 相对路径，脚本会先内联再编译）。
CI runner 无该工具时输出 SKIPPED 并退出 0；刻意不挂进 run-ui-contracts —— 一个在 CI 里
什么都不做的守卫被计入"全绿"，正是本项目反复强调的假绿。CI 拦截由上面的静态守卫承担。
验证（均实际执行）
- node scripts/miniapp-compile-check.mjs → WXSS 88 个 + WXML 86 个，0 失败
- 负向注入：把 `.tap-gap > * + *` 改回去 → 预检 FAIL(exit 1)，报错与用户原始报错逐字一致
`app.wxss(364:12): error at token '*'`；已还原并复测通过
- node scripts/run-ui-contracts.mjs → 20 / 20 PASS
|
2026-09-23 08:25:11 +08:00 |
|
|
WorkBuddy
|
269adf1fed
|
小程序端：设计系统收敛与排版层级修复
问题：88 个 wxss 里散落大量硬编码颜色/字号/字重，无法统一调整；
部分正文对比度不达 WCAG AA（4.5:1）；组件触摸目标偏小。
改动：
- 硬编码颜色收敛到语义 token（颜色统一走 design token，不再散落字面值）
- 修正全站字号阶梯：正文 ≥12px、角标 ≥11px；字重只用 400/500/600/700
- 组件触摸目标提升到 ≥44px，并补交互反馈
- 首页补氛围层次、强化排版层级
验证（本轮实测）：
- UI 契约门禁 18/18 PASS（含 wxml 结构、wxss 组件选择器、token 显式值断言）
- 声明级体检 88/88 通过（全部 wxss 声明合法）
交付物：artifacts/miniapp-design-v2-preview.html
|
2026-09-23 01:06:46 +08:00 |
|
|
Codex
|
311f251609
|
test: lock miniapp reference page scope
|
2026-09-14 06:19:11 +08:00 |
|
 admin
|
45ca118453
|
feat: deliver V1.1 dual-client UI fidelity milestone
|
2026-09-10 16:06:11 +08:00 |
|
|
admin
|
b46b48eb33
|
chore: establish V1.1 recovery baseline
|
2026-09-09 22:05:00 +08:00 |
|