beautification-audit-2026-10-20.md 11 KB
全站页面美化审计与治理建议（2026-10-20）
范围：
pages/**335 个页面文件 +components/**（审计数据含 global 组件）+custom-tab-bar/数据底座：scripts/audit-beautify-debt.js（2026-10-20 实跑）+ 分类深扫（JS 色值 / px / 内联样式 / 图片） 性质：审计 + 分批建议。上一版方案见beautification-plan.md（2026-10-17，V1.0），本文是其进度对账与增量建议。
结论先行（TL;DR）
- 三大根因已收官两个：旧品牌蓝
#5B9BD5121 → 0（C-2 阶段，63 文件 285 处）；transition: all37 → 0（C-3 阶段，22 文件 35 处 + 2 处补漏）。 - 剩余第一债务是硬编码色 8,490 处，其中 38%（3,100 处）是中性灰阶——全部有现成令牌可换、等值替换零视觉风险，是性价比最高的机械收敛空间。
- 第二债务是 brand/status 色直写：
#F97316一色就被 166 个页面硬编码 689 次，令牌体系已形同虚设，品牌换色将变成 166 文件的手工人匠。 - tianpan 家族 7 页 387 处 CSS px 未转 rpx（已证实 375px 设计基准，×2 可换），是小屏/大屏自适应的现存坑；canvas 内 7 处 px 保留。
- 建议按 A→F 六个批次推进：A 批（灰阶/状态色令牌化）预计砍掉约 4,000 处且零视觉风险，应最先做；D 批（12 个 P0 重债页重制）是唯一需要按业务优先级排期的大工程。
一、与 10-17 基线对账（进度表）
| 指标 | 10-17 基线 | 10-20 现状 | 说明 |
|---|---|---|---|
| 页面文件总数 | 333 | 335 | 外部新增 2 页 |
| 硬编码色值总数 | 10,353 | 8,490 | C-2 批次 + 外部 token 化共收敛 ~1,860 处 |
旧品牌蓝 #5B9BD5 |
121 | 0 | ✅ C-2 收官（含 uni.scss 令牌族删除） |
transition: all |
37 | 0 | ✅ C-3 收官（35 处 + service-role-apply / custom-tab-bar 补漏 3 处） |
getSystemInfoSync |
0 | 0 | ✅ 维持 |
| 债务分层 | P0 77 / P1 132 / P2 91 / P3 28 | P0 59 / P1 114 / P2 84 / P3 73 | P0 -18 页；P3 页数上升是债务下降后分层阈值效应，非恶化 |
债务分公式（audit 脚本）：硬编码色×3 + 旧蓝×5 + transitionAll×2 + px×0.1
二、剩余问题分类（6 大类，按收敛性价比排序）
类别 1 · 中性灰阶硬编码 —— 3,100 处 / 38%（最大机械空间）
| 硬编码值 | 处数 | 涉及文件 | 对应令牌（等值或近值） |
|---|---|---|---|
#FFF / #FFFFFF |
999 + 204 | 243 + 59 | $app-surface（#FFFFFF，等值） |
#333 |
655 | 202 | $facade-text-strong |
#999 |
582 | 186 | $facade-text-muted |
#666 |
273 | 147 | $facade-text-body |
#F5F5F5 / #F0F0F0 |
212 + 152 | 101 + 96 | $facade-fill 系 |
#CCC / #DDD / #EEE |
95 + 74 + 71 | 69 + 41 + 42 | 禁用灰/描边灰（需补 2 个语义令牌，见建议） |
#FAFAFA / #F9FAFB |
60+ | 22+ | $facade-fill-ghost / gray-50 浅底 |
判断：灰阶与品牌色完全解耦，替换不涉任何品牌决策，是「无脑执行区」。
类别 2 · 品牌/状态色直写 —— 令牌已存在但被绕过
| 硬编码值 | 处数 | 涉及文件 | 对应令牌 |
|---|---|---|---|
#F97316 |
689 | 166 | $brand-primary |
#FF8C42 |
133 | 37 | $dim-body（五维身色） |
#FFF7ED |
123 | 77 | $uni-primary-pale |
#FB923C |
92 | 58 | $brand-primary-light |
#10B981 |
108 | 51 | $status-success |
#EF4444 |
69 | 43 | $status-danger |
#6366F1 |
72 | 25 | $dim-wisdom |
#C62828 |
63 | 15 | $status-danger-strong 深档 |
判断：这是「令牌体系空转」——令牌建了但页面用脚投票直写 hex。危害不在视觉，在品牌换色时 166 文件的手工回归面。
类别 3 · JS / canvas 硬编码色值 —— 969 处 / 86 文件
TOP：ContentSharePoster 67、emotion-checkin 36、PearlDiagram 34、energy/index 34、ArticleBookshelf 30、index-home 30、FamilyTianpanCard 29、SharePoster 29、PageBanner 26、tianpan/index 24。
判断：canvas / 海报 / 动态色板场景，SCSS 变量编译期不可达（C-2 阶段已验证：JS 内写 $var 会原样输出成无效值）。需建 JS 侧色板常量模块收编，不可与 SCSS 批混处理。
类别 4 · px 单位 —— CSS 460 处 / 31 文件（tianpan 家族占 84%）
| 文件 | CSS px | canvas px（保留） |
|---|---|---|
| tianpan/index | 85 | 7 |
| tianpan/relation-detail | 71 | 0 |
| tianpan/member-detail | 69 | 0 |
| tianpan/traditional | 60 | 0 |
| tianpan/daily-fortune | 38 | 0 |
| tianpan/annual-energy | 36 | 0 |
| tianpan/related-items | 28 | 0 |
| 其余 24 文件 | ~73 | — |
判断：tianpan/index.vue L748 width: 375px 证实全族按 375px 逻辑宽设计 → CSS px ×2 = rpx 等值；canvas 字号必须保留 px。转完后 tianpan 家族才真正自适应。
类别 5 · 模板内联 style —— 56 处 / 27 文件
TOP：FamilyEnergyBar 6、parent-index 5、emotion-trend 5、create-task 4。多为动态宽度/渐变/定位，部分必要（数据驱动），部分可收敛为 class。
类别 6 · 图片治理
- 全站 122 个
<image>，仅 2 个文件用lazy-load→ 长列表（discover / article-center / 商品列表）滚动卡顿风险。 - 仅 1 处显式
objectFit，其余走默认（scaleToFill 拉伸）→ 非等比图变形风险。保原图比例应显式mode="aspectFit"（适应）或aspectFill（裁切）。
三、P0 债务 TOP 12 页（debt > 240）
| 页 | debt | 行数 | 硬编码色 | 聚类 |
|---|---|---|---|---|
| health/report-detail | 432 | 2,232 | 144 | health 报告链 |
| health/report-confirm | 420 | 1,826 | 140 | health 报告链 |
| health/gut-flora-detail | 417 | 1,490 | 139 | health 报告链 |
| health/health-plan-summary | 351 | 1,913 | 117 | health 报告链 |
| shop/checkout/checkout | 330 | 1,927 | 110 | 交易链 |
| home-pages/parent-index | 321 | 2,257 | 107 | 首页系 |
| health/challenge-manage | 321 | 1,322 | 107 | health |
| profile-extra/family-members | 291 | 1,324 | 97 | 家庭管理 |
| activity/activity-detail | 282 | 1,461 | 94 | 活动 |
| discover-detail/product-detail | 252 | 1,183 | 84 | 交易链 |
| growth/sleep-checkin | 246 | 834 | 82 | 成长记录 |
| membership/upgrade | 246 | 843 | 82 | 会员 |
特征：health 报告链占 4/12 且包揽前三——与 10-17 方案「D 批 health 46 页」判断一致，仍是最大重债区。
四、分批治理建议（A→F，按性价比排序）
A 批 · 中性灰阶 + 品牌/状态色令牌化（最高优先，零视觉风险）
- 范围：类别 1 全部（~3,100 处）+ 类别 2 中与品牌令牌等值的部分（~1,300 处）。
- 方法：按「同值同令牌」写批量脚本，一文件一验证，沿用 C-2 视觉变更验证法（before + 预期替换 == after 逐字节相同）。
- 注意点：
#FFF → $app-surface已确认等值（#FFFFFF）。#CCC/#DDD/#EEE建议先在 uni.scss 补$status-disabled/$facade-hairline-3两个语义令牌再翻，避免直接映射到近值令牌造成 1-2 像素灰度偏差。#C62828 → $status-danger-strong-2需先核对令牌值一致性。
- 预期收益：硬编码色池 -4,000 左右；品牌换色回归面从 166 文件降到 ~0。
- 切片：按分包切片，每片一提交（参考 C-2a 批次纪律）。
B 批 · tianpan 家族 px→rpx（适配修复，7 文件）
- 范围：387 处 CSS px ×2 换 rpx；canvas 7 处保留。
- 方法：style 块内正则替换 + dart-sass 编译验证 + 真机/模拟器抽查 index 与 relation-detail 两页布局。
- 风险：低（等值换算），但必须抽查找茬——重点看绝对定位元素与 canvas 容器尺寸联动处。
C 批 · JS 色板收编（86 文件 969 处）
- 动作：新建
utils/brand-colors.js（JS 侧单一事实源，禁依赖 SCSS 变量），按色板簇分批替换：- 品牌橙族（poster 渐变、按钮阴影）
- 五维色（mind/body/wisdom/action/wealth）
- 健康状态色（success/warning/danger）
- 中性灰
- 优先文件：ContentSharePoster（67）、emotion-checkin（36）、PearlDiagram（34）、energy/index（34）。
- 注意：canvas 色值必须是真实 hex；替换后
node --check+ canvas 渲染抽查。
D 批 · P0 重债页重制（12 页，需排期）
- 建议顺序（业务影响 × 债务）：
- health 报告链 4 页（report-detail / report-confirm / gut-flora-detail / health-plan-summary）——对外门面
- 交易链 2 页（checkout / product-detail）——转化路径
- parent-index（家长端首页）
- 其余 5 页
- 方法：UniForge 取证 → 重制 → C-2 式验证，一页一提交，每页控制在 1-2 个迭代轮次。
E 批 · 图片治理（122 个 image）
- 长列表页补
lazy-load（discover / article-center / shop 列表 / member 列表优先）。 - 头像、商品图、封面图显式声明
mode（保比例aspectFit，裁切aspectFill）——与知识库「保原图比例」口径一致。 - 静态资源检查
static/33 张 png 是否有未压缩大图（本轮未做体积分析，列为待办）。
F 批 · 重复模式组件化（消灭重复，非消灭颜色）
已识别的重复样式簇：
| 模式 | 重复位置 | 建议 |
|---|---|---|
tag-btn / tag-active 选择标签 |
diet-checkin、exercise-checkin | 抽 TagChip 组件 |
role-card / 选择卡（透明边+选中变橙） |
user-edit、service-role-apply | 抽 SelectableCard |
step-dot / 步骤圆点 |
health-plan-summary、self-quiz | 抽 StepDots |
submit-btn 渐变主按钮 |
3 个 checkin 页 | 收敛到 PlayfulButton primary |
五、快赢清单（本周可做完，合计 <250 处）
#FFF → $app-surface全量（999 处，等值机械替换，预计 2-3 个提交切片）。- profile-main/profile.vue 局部
$c-*色板 hoist（1 文件 73 处，含$c-indigo等 20+ 局部声明，统一收编 uni.scss 或 JS 色板）。 - FamilyEnergyBar 等 6 处内联 style 收敛为 class。
- 补 2 个语义令牌（
$status-disabled、$facade-hairline-3）为 A 批清障。
六、边界与保留项（勿翻）
- 深面板 chrome：wuxing-sandbox / energy-detail / gate-guide-bar 的
#8FC5E8+ rgba(143,197,232,x)（C-2a 已登记）。 - material 蓝徽章
#42A5F5、五行水行#42A5F5语义色。 - canvas 字号与 canvas px 尺寸。
- JS/模板色值禁写 SCSS 变量（编译期不可达）。
- quiz 深底
#24243E（logic-test / psych-assessment 暗色测评场景，属场景色非债务）。
七、验证与回归（既有手段复用）
| 手段 | 用途 |
|---|---|
scripts/tmp_c2_verify.js（before+预期替换==after 逐字节） |
每文件颜色类替换的零漂移证明 |
scripts/audit-beautify-debt.js |
批次前后债务曲线对比（硬编码色应单调下降） |
dart-sass 页级编译 + node --check |
语法与令牌悬空检查 |
| 三大硬指标门禁 | 旧蓝 = 0 / transition:all = 0 / getSystemInfoSync = 0（已达成，保持） |
| HBuilderX 真机打包 | B/D/E 批的最终视觉验收（Agent 侧禁跑 build:mp-weixin） |
报告生成：2026-10-20 · 数据为当日全仓实跑 · 建议批次可按资源按序启动，每批独立提交可回滚