Strona główna Odkrywaj Pomoc
Zarejestruj się Zaloguj się
liaoxg
/
cfc
1
1
Forkuj 0
Pliki Problemy 0 Oczekujące zmiany 0 Wiki
Drzewo: 15665f144d
Gałęzie Tagi
cfc
/
cfc-frontend
/
docs
/
beautification-plan.md

beautification-plan.md 10 KB
Historia Czysty

全站页面美化方案 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 文件）——性价比最高

三个子任务，按序：

  1. 令牌翻转（uni.scss，1 个文件）：$uni-primary 系与 --color-primary 系由旧蓝改为品牌橙系（#F97316 / #FB923C / #EA580C / 淡橙底），$uni-info 从"复用品牌蓝"独立为真 info 蓝（对齐 §13 状态体系）。一行改，全站 9 处 var() + 工具类自动归队。
  2. 旧蓝 121 处按角色分流（~40 个页面文件）：
    • 链接/信息提示 → info 蓝（新 $uni-info）
    • 主行动按钮/选中态 → 品牌橙
    • 装饰性描边/底纹 → 最近语义令牌
  3. transition: all 37 处（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。

六、风险与红线

  1. 构建必须走 HBuilderX：AGENTS.md 明令 Agent 禁止执行 npm run build:mp-weixin。本方案所有"构建验证"由人工在 HBuilderX 完成，Agent 侧只用 dart-sass 做页级编译回归。
  2. 外部进程并发写工作区：本轮已发生 4+ 次（截断文件、还原 HEAD、代为提交）。对策不变：每完成一个页面立即 commit，不信赖工作区跨轮次存活。
  3. :root 作用域待真机确认：--color-primary 定义在 uni.scss :root，微信 wxss 的标准根选择器是 page。C-1 令牌翻转时需真机确认 9 处 var() 实际取值；若 :root 不生效，这些页面现在渲染的是兜底值旧蓝，翻转后兜底值也要同步改。
  4. health 模块 46 页体量：单批过大，必须分四条小线推进，每线独立 commit、独立验收。
  5. 不做没有数据支撑的"顺手美化"：每批动哪些页，以 audit-beautify-debt.js 输出为准，不凭印象扩范围。

七、本方案附带的已完成修复

  • pages/profile/components/ProfileMenu.vue：外部提交 722ef3a86 在纯 CSS style 块写入 // 字体大小弹窗（CSS 不支持 // 行注释）导致 webpack style 编译失败 → 已改 /* */。全仓扫描确认此为唯一实例。
  • scripts/audit-beautify-debt.js：本方案的数据底座，可重复运行跟踪债务下降曲线。