docs(beautify): 全站页面美化审计与治理建议（2026-10-20）

- 基线对账：旧蓝 C-2 收官 0 / transition:all C-3 收官 0；硬编码色 10353->8490
- 六大类问题定量：灰阶 3100 处(38%)、品牌色直写 #F97316×689/166 文件、JS 色值 969 处、tianpan px 387 处、内联 style 56 处、图片治理 122 image
- 分批建议 A→F：A 令牌化(零视觉风险 ~4000 处) > B tianpan px→rpx > C JS 色板收编 > D P0 12 页重制 > E 图片懒加载/mode > F 组件化
- 保留项与验证手段登记

cfc-frontend/docs/beautification-audit-2026-10-20.md

@@ -0,0 +1,206 @@
+# 全站页面美化审计与治理建议（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）
+
+1. **三大根因已收官两个**：旧品牌蓝 `#5B9BD5` 121 → **0**（C-2 阶段，63 文件 285 处）；`transition: all` 37 → **0**（C-3 阶段，22 文件 35 处 + 2 处补漏）。
+2. **剩余第一债务是硬编码色 8,490 处，其中 38%（3,100 处）是中性灰阶**——全部有现成令牌可换、等值替换零视觉风险，是性价比最高的机械收敛空间。
+3. **第二债务是 brand/status 色直写**：`#F97316` 一色就被 166 个页面硬编码 689 次，令牌体系已形同虚设，品牌换色将变成 166 文件的手工人匠。
+4. **tianpan 家族 7 页 387 处 CSS px 未转 rpx**（已证实 375px 设计基准，×2 可换），是小屏/大屏自适应的现存坑；canvas 内 7 处 px 保留。
+5. 建议按 **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 变量），按色板簇分批替换：
+  1. 品牌橙族（poster 渐变、按钮阴影）
+  2. 五维色（mind/body/wisdom/action/wealth）
+  3. 健康状态色（success/warning/danger）
+  4. 中性灰
+- **优先文件**：ContentSharePoster（67）、emotion-checkin（36）、PearlDiagram（34）、energy/index（34）。
+- **注意**：canvas 色值必须是真实 hex；替换后 `node --check` + canvas 渲染抽查。
+
+### D 批 · P0 重债页重制（12 页，需排期）
+
+- **建议顺序**（业务影响 × 债务）：
+  1. health 报告链 4 页（report-detail / report-confirm / gut-flora-detail / health-plan-summary）——对外门面
+  2. 交易链 2 页（checkout / product-detail）——转化路径
+  3. parent-index（家长端首页）
+  4. 其余 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 处）
+
+1. **`#FFF → $app-surface` 全量**（999 处，等值机械替换，预计 2-3 个提交切片）。
+2. **profile-main/profile.vue 局部 `$c-*` 色板 hoist**（1 文件 73 处，含 `$c-indigo` 等 20+ 局部声明，统一收编 uni.scss 或 JS 色板）。
+3. **FamilyEnergyBar 等 6 处内联 style 收敛**为 class。
+4. **补 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 · 数据为当日全仓实跑 · 建议批次可按资源按序启动，每批独立提交可回滚*