beautification-plan.md 10 KB
全站页面美化方案 V1.0（UniForge 取证结论 + 分批推进）
范围：
pages/**全部 333 个页面文件（pages.json 注册 276 页 + 页面级组件），不含components/全局库 前置：五维主页面（body-detail / mind-detail / wisdom-detail / wealth / action-detail 的 index）已完成阶段一~四重制 + 成员标签，不在本方案范围 性质：只读审计 + 分批方案，本文不含代码改动 数据底座：scripts/audit-beautify-debt.js（2026-10-17 全仓实跑）
一、现状总账
| 指标 | 数值 | 说明 |
|---|---|---|
| 页面文件总数 | 333 | 注册 276（主包 7 + 56 分包 269）+ 页面级组件 |
| 硬编码色值总数 | 10,353 | 与品牌令牌体系脱钩的直接证据 |
旧品牌蓝 #5B9BD5 |
121 | 旧品牌残留，分布在 ~40 个文件 |
transition: all |
37 | AGENTS.md 明令禁止 |
getSystemInfoSync |
0 | 已清零（外部提交修复），无需处理 |
| 债务分层（已重制 5 页除外） | P0 77 / P1 132 / P2 91 / P3 28 | 债务分 = 硬编码色×3 + 旧蓝×5 + transitionAll×2 + px×0.1 |
结论先行：这不是 328 个独立的美化任务，而是 3 个根因。 按根因分批，每批内部是同质工作，可批量、可回归、可验收。
二、三个根因
根因 1 · 品牌分裂（最优先，一行令牌带动全站）
新品牌橙 $brand-primary: #F97316（uni.scss §12）与旧品牌蓝两套并存，且旧蓝还锁在全局令牌层：
| 层 | 位置 | 现状 |
|---|---|---|
| SCSS 变量 | uni.scss §2 $uni-primary/-light/-dark/-pale |
仍是 #5B9BD5 蓝系 |
| CSS 自定义属性 | uni.scss §7 :root { --color-primary... } |
仍是 #5B9BD5 蓝系 |
| 语义色 | $uni-info 注释写明"复用了品牌蓝" |
蓝 = 品牌 = info 三合一 |
| 运行时引用 | 9 处 var(--color-primary, #5B9BD5) |
ai/chat(4)、child/tasks(2)、home-pages/child-index(2)、parent-index(1) |
| 工具类 | .text-primary / .bg-primary / flat-button mixin |
默认值全是旧蓝 |
| 页面硬编码 | 121 处 | 绕过令牌直写 |
关键事实：$uni-primary 系目前零页面直接引用（引用数 0），说明页面早就用脚投票抛弃了它——令牌层翻转的回归面比想象中小得多，主要影响面是 9 处 var() + 工具类兜底值。
根因 2 · 五维生态断裂（用户旅程的视觉断崖）
5 个维度 index 页已重制，但其兄弟页全部是旧样式。用户从重制页点进子页即"穿越"：
| 模块 | 总页数 | 已重制 | 待重制 | 最高债务兄弟页 |
|---|---|---|---|---|
| mind-detail | 14 | 1 | 13 | emotion-checkin (311) |
| action-detail | 9 | 1 | 8 | interaction-log (108) |
| body-detail | 7 | 1 | 6 | health-report (264) |
| wisdom-detail | 5 | 1 | 4 | cognitive-report (261) |
| wealth-sub + wealth-detail | 5 | 0 | 5 | insurance-list (~80) |
| 合计 | 40 | 4 | 36 | —— |
另注意 mind-detail/components/FamilyTianpanCard.vue（debt 210）是页面级组件，与 index 页同屏出现，断崖更明显。
根因 3 · 长尾硬编码（10,353 处的慢性病）
模块级债务分布（已重制页除外）：
| 模块 | 页数 | 硬编码色 | 旧蓝 | 债务 |
|---|---|---|---|---|
| pages/health | 46 | 1,785 | 44 | 5,583 |
| pages/mind-detail | 15 | 628 | 2 | 1,898 |
| pages/shop | 16 | 590 | 0 | 1,770 |
| pages/action-detail | 12 | 359 | 0 | 1,077 |
| pages/family | 11 | 356 | 0 | 1,072 |
| pages/diet | 7 | 333 | 11 | 1,062 |
| pages/growth | 12 | 346 | 0 | 1,050 |
| pages/home-pages | 15 | 299 | 10 | 949 |
| pages/tianpan | 7 | 280 | 0 | 840 |
| pages/promotion | 8 | 272 | 0 | 818 |
单页债务 TOP10：health/report-detail (564)、report-confirm (552)、gut-flora-detail (441)、index-home (423)、home-pages/parent-index (341)、health/challenge-manage (329)、shop/checkout (327)、health/health-plan-summary (325)、mind-detail/emotion-checkin (311)、health-main (288)。
三、待美化页面清单（五批，按依赖排序）
A 批 · 门面批（6 页）——每次启动必见，优先级最高
| 页面 | Tab | 债务 | 核心问题 |
|---|---|---|---|
pages/index-home/index |
首页 | 423 | 141 硬编码色、2,931 行、13 处内联样式 |
pages/health-main/index |
健康 | 288 | 96 硬编码色 |
pages/profile-main/profile |
我的 | 249 | 83 硬编码色、10 处内联样式 |
pages/growth-main/index |
成长 | 219 | 73 硬编码色 |
pages/cognitive-hall |
— | 60 | 20 硬编码色 |
pages/service-center/index |
— | 60 | 20 硬编码色 |
splash（21）已够轻，不动。做法：沿用五维 index 的阶段一~四路径（语义基座 → 灰阶归一 → 状态色阶 → 局部调色板），四页共用同一套门面令牌，保证四个 Tab 视觉同族。
B 批 · 维度生态一致性批（36 页）——消除"点进去就穿越"
见根因 2 表格。做法：每页只做"对齐已重制 index 的视觉语言"——复用该维度已有局部调色板 + 全局令牌，不重新发明配色；member-*-detail 页（member-body-detail / member-mind-detail / member-wisdom-detail / member-action-detail / member-wealth-detail）额外接入 DimensionMemberTabs，与 index 页成员切换体验一致。
C 批 · 品牌收敛批（令牌层 + 121 + 37，跨 ~45 文件）——性价比最高
三个子任务，按序：
- 令牌翻转（uni.scss，1 个文件）：
$uni-primary系与--color-primary系由旧蓝改为品牌橙系（#F97316/#FB923C/#EA580C/ 淡橙底），$uni-info从"复用品牌蓝"独立为真 info 蓝（对齐 §13 状态体系）。一行改，全站 9 处 var() + 工具类自动归队。 - 旧蓝 121 处按角色分流（~40 个页面文件）：
- 链接/信息提示 → info 蓝（新
$uni-info） - 主行动按钮/选中态 → 品牌橙
- 装饰性描边/底纹 → 最近语义令牌
- 链接/信息提示 → info 蓝（新
transition: all37 处（22 个文件）：改为具体属性（transition: background-color, color, transform等），同时是 AGENTS.md 合规修复。
TOP 旧蓝文件：health/report-detail(15)、report-confirm(15)、diet/meal-config(11)、article-center/article-detail(7)、wishes/index(7)、discover/index(7)、reminder-config(7)、health/report-list(6)、home-pages/parent-index(4)、ai/chat(4)。
D 批 · 高债务业务模块批（按模块整批推进）
| 模块 | 页数 | 债务 | 切入页 |
|---|---|---|---|
| health | 46 | 5,583 | report-detail / report-confirm / gut-flora-detail |
| shop | 16 | 1,770 | checkout / cart |
| family | 11 | 1,072 | self-check-result |
| diet | 7 | 1,062 | meal-config / records |
| growth | 12 | 1,050 | exercise-checkin / diet-checkin |
| home-pages | 15 | 949 | parent-index / child-index |
| tianpan / promotion / membership / activity / discover / article-center | 34 | 4,207 | 各模块 index |
做法：每模块先打"最高债务 1~2 页"立标杆，同模块其余页复制标杆的令牌结构。health 模块（46 页 / 债务占全站 36%）建议单独成大战役，内部再分报告线 / 菌群线 / 计划线 / 挑战线四条小线。
E 批 · 长尾批（P2+P3 共 119 页，债务 < 60）
只做两项轻处置：(a) 旧蓝残留（若 C 批按角色分流后仍有漏网）；(b) 与同模块标杆明显冲突的孤立色。不做全量重制——债务 <60 的页面单页硬编码色通常 <20，改造收益低于风险。
四、验收标准（每批统一）
沿用五维阶段的验证四件套，外加本方案新增两项：
| 检查项 | 工具 / 方法 | 合格线 |
|---|---|---|
| SCSS 编译 | dart-sass 逐页编译 | ALL PASS |
| 旧蓝残留 | scripts/audit-beautify-debt.js |
目标页 0 |
transition: all |
同上 | 目标页 0 |
| 硬编码色（style 区块） | 同上 | 目标页 ≤ 令牌声明行 |
| 渐变退化 | 编译后 CSS linear-gradient 内 new Set(colors).size === 1 |
0（首尾同色中间不同的 shimmer 合法，不误报） |
| 数值等价回归 | git show HEAD:<file> → dart-sass → 与当前版逐字节比对 |
仅剩刻意语义收敛 |
| 门面同族性（A 批新增） | 四个 Tab 页的卡片圆角/间距/字号/按压反馈取自同一组令牌 | 人工走查一致 |
| 生态连贯性（B 批新增） | 从 index 页点进每个子页，无品牌色/字体/卡片样式跳变 | 人工走查 |
五、推进顺序与依赖
C-1 令牌翻转（无页面依赖，先行）
├─→ A 批 门面 6 页（站在新令牌上做，避免二次返工）
├─→ B 批 维度生态 36 页（依赖 A 批立下的门面令牌 + 已有维度调色板）
└─→ C-2/C-3 旧蓝分流 + transition:all（可与 A/B 并行，按文件不冲突）
D 批 业务模块（依赖 C-1 令牌；各模块独立可并行）
E 批 长尾（最后，只做补漏）
建议实际执行序列：C-1 → A → B（按 心/身/智/行/财富子链 分 5 次）→ C-2/C-3 → D（health 单独战役）→ E。
六、风险与红线
- 构建必须走 HBuilderX：AGENTS.md 明令 Agent 禁止执行
npm run build:mp-weixin。本方案所有"构建验证"由人工在 HBuilderX 完成，Agent 侧只用 dart-sass 做页级编译回归。 - 外部进程并发写工作区：本轮已发生 4+ 次（截断文件、还原 HEAD、代为提交）。对策不变：每完成一个页面立即 commit，不信赖工作区跨轮次存活。
:root作用域待真机确认：--color-primary定义在 uni.scss:root，微信 wxss 的标准根选择器是page。C-1 令牌翻转时需真机确认 9 处var()实际取值；若:root不生效，这些页面现在渲染的是兜底值旧蓝，翻转后兜底值也要同步改。- health 模块 46 页体量：单批过大，必须分四条小线推进，每线独立 commit、独立验收。
- 不做没有数据支撑的"顺手美化"：每批动哪些页，以
audit-beautify-debt.js输出为准，不凭印象扩范围。
七、本方案附带的已完成修复
pages/profile/components/ProfileMenu.vue：外部提交722ef3a86在纯 CSS style 块写入// 字体大小弹窗（CSS 不支持//行注释）导致 webpack style 编译失败 → 已改/* */。全仓扫描确认此为唯一实例。scripts/audit-beautify-debt.js：本方案的数据底座，可重复运行跟踪债务下降曲线。