docs: 小程序首页重设计落地修改计划 v1（含能量沙盘保留细则与批次拆分）

docs/2026-10-27-index-home-redesign-plan.md

@@ -0,0 +1,214 @@
+# 小程序首页（家庭总览）重设计 · 落地修改计划
+
+> 版本：v1 ｜ 日期：2026-10-27 ｜ 性质：单一事实源（前端首页改造的唯一依据）
+> 设计依据：`cfc-frontend/design/cfc-home-redesign.html`（单文件设计稿，已过四道门禁）
+> 硬要求：**首页必须保留能量沙盘**（主理人拍板）
+
+---
+
+## 0. 目标（一句话）
+
+把 `pages/index-home/index.vue`（3062 行）按新设计方案改造为「温暖清爽的家庭总览页」，**保留并适配能量沙盘（wuxing-sandbox）**，按批次增量落地，每次可独立构建验证。
+
+---
+
+## 1. 现状实证（已核，勿重复调研）
+
+### 1.1 首页区块清单（`pages/index-home/index.vue`）
+
+| 行号 | 区块 | 说明 |
+|---|---|---|
+| 54 | ① 自测大卡 `self-test-card` | 引导"从了解开始"，含 ⚡ 图标、标题/副标题/调研徽章 |
+| 67 | ①.b 行动引导条 Next Best Action | 仅登录态，"现在该做的一件事" |
+| **81** | **② 能量沙盘 `WuxingSandbox`（live）** | **Canvas 五行星图，本次必保** |
+| 101 | ② 上传报告 | — |
+| 109 | ④ 推荐文章 | — |
+| 124 | ④ 快捷功能入口 | 动态渲染，应用库可配 |
+| 143 | ④ 家庭动态 | — |
+| 168 | ③ 家庭挑战任务 | — |
+| 190 | ③ 会员入口 | 非会员=开通 / 快到期=续费 |
+| 194 | ③ 我的任务 | 仅有待完成时显示 |
+| 204 | ③ 今日任务 | — |
+| 217 | ④ 推荐商品 | — |
+| **251** | **品牌 Hero 区** | logo+品牌名+身份句+slogan+五行 dims（🌏身 ⚡智 💧富 🌿行 🔥心）+ 登录 CTA。**属未登录态内容** |
+| **272** | **价值主张 `value-prop-section`** | 5 张 card。**属未登录态/营销内容** |
+| **331** | **`wuxing-sandbox` mode="preview"** | badgeText「登录查看完整报告」 |
+
+### 1.2 两种状态（关键，勿混淆）
+
+- **未登录态**：品牌 Hero + value-prop + 沙盘 `mode="preview"`
+- **登录态**：自测大卡 + 沙盘 `mode="live"` + 任务/动态/会员/快捷入口
+
+> 本次新设计方案替代的是**登录后的家庭总览**；未登录态改造范围见 §9 待确认 D1。
+
+### 1.3 能量沙盘组件实证（`components/wuxing-sandbox.vue`）
+
+- 标题「浠艾福能量沙盘」；header 左 logo+标题，右上 **live=个人/全家切换**、**preview=徽章文案**
+- 主体：Canvas 2D 星图 `starCanvas` + 粒子动画层 `flowCanvas` + 点击感应层
+- 依赖 helpers：`render.js` / `animation.js` / `flow-animation.js` / `hitdetect.js`
+- 5 顶点 = 圆点（五行元素色）+ 图标 + 名称 + 能量值
+- 未测评时由 **GateLock 沙盘锁** 拦截显示引导卡（`sandboxLocked` / `sandboxLockGate`）
+- live 模式 props 契约（**必须原样保留，改动即破坏**）：
+
+| prop | 含义 |
+|---|---|
+| `scores` | `familySandboxScores` 家庭五维分 |
+| `overallScore` | `familySandboxOverall` 综合分 |
+| `members` | `familySandboxMembers` 成员列表 |
+| `personalData` | `sandboxPersonalData` 个人数据 |
+| `dimensions` | `energyDimensions` 维度定义 |
+| `totalEnergy` / `totalHealthIndex` | 总能量 / 总健康指数 |
+| `currentView` | `currentSandboxView` 当前视图 |
+| `familyUnlocked` | 家庭版解锁标记 |
+
+---
+
+## 2. 新方案结构（设计稿自上而下）
+
+```
+问候条（家庭成员 + 通知铃 + 问候整句）
+五维状态主角带（健康指数 + 身/智/富/行/心 五行状态）
+★ 能量沙盘（本次补回，作为五维可视化焦点）
+今日待办带（待办 + 完成态）
+近期健康数据带（loading / error / empty 三态）
+服务入口（10 项 5×2）
+推荐阅读
+tabBar（首页 / 健康 / 成长 / 我的）
+```
+
+---
+
+## 3. 新旧区块映射
+
+| 原区块 | 去向 | 处理方式 |
+|---|---|---|
+| 自测大卡 54 | 保留，样式按新令牌刷新 | 重样式，不删功能 |
+| Next Best Action 67 | 并入「今日待办带」顶部 | 合并 |
+| **能量沙盘 81** | **保留为「★能量沙盘」** | **见 §5** |
+| 今日任务 204 / 我的任务 194 | 并入「今日待办带」 | 合并去重 |
+| 推荐文章 109 | →「推荐阅读」 | 重样式 |
+| 快捷功能入口 124 | →「服务入口 10 项」 | 重样式 |
+| 家庭动态 143 | → 近期健康数据带旁 / 折叠 | 待确认 D3 |
+| 上传报告 101 / 家庭挑战 168 / 会员入口 190 / 推荐商品 217 | 见 §9 D3 | 待确认 |
+| Hero 251 / value-prop 272 | 未登录态，是否纳入本次见 D1 | 待确认 |
+
+---
+
+## 4. 设计令牌落地表
+
+### 4.1 色彩（继承设计稿已定稿值）
+
+| 用途 | 值 | 约束 |
+|---|---|---|
+| 品牌橙·装饰 | `#F97316` | 仅装饰，**不得印文字**（对白底 2.80:1 不达 AA） |
+| 品牌橙·承文字 | `#C2410C` | 深档，白字对比 5.18:1 |
+| 品牌橙·按下 | `#9A3412` | accent-strong |
+| 五维·身 | `#C2703D` | **赤陶/土调（主理人拍板偏土色）** |
+| 五维·智 | `#6366F1` | — |
+| 五维·富 | `#F59E0B` | — |
+| 五维·行 | `#10B981` | — |
+| 五维·心 | `#FF6B9D` | — |
+
+> 五维身份色仅用于「五维状态带」与沙盘；其余区域由品牌橙 + 暖中性承担。
+
+### 4.2 五维顺序（双约定，★易错）
+
+- **线性列表/状态行**：身 → 智 → 富 → 行 → 心
+- **星图环形顺时针**：心 → 身 → 智 → 富 → 行（`sortedDimensions` 顺序，**不可改**）
+
+### 4.3 按钮八态（主理人拍板）
+
+- **除禁用态外，一律白色字体**
+- 禁用态：暖灰中性底 + 深字（`text-2`），**不加白字、不淡出**
+- 八态：默认 / 悬停 / 焦点 / 按下 / 禁用 / 加载中 / 出错 / 成功，文字对比均须 ≥4.5:1
+
+### 4.4 其余令牌
+
+- 圆角 4 档（8/16/24/999rpx，沿用已收敛值）
+- 间距 4/8/12/16/24rpx 令牌
+- 动效 120/200/260ms，尊重 `prefers-reduced-motion`
+- 触控目标 ≥44px
+
+---
+
+## 5. ★ 能量沙盘保留细则（本次硬要求）
+
+### 5.1 保留清单（不得删除/重写）
+
+- 组件 `wuxing-sandbox.vue` 及其 helpers（render/animation/flow-animation/hitdetect）
+- Canvas 双 canvas 结构 + 点击感应层
+- live / preview 双模式、右上切换/徽章逻辑
+- GateLock 沙盘锁链路（`sandboxLocked` / `sandboxLockGate`）
+- §1.3 全部 props 契约
+- 环形顶点顺序 `[心,身,智,富,行]`
+
+### 5.2 三处冲突（必须处理）
+
+| # | 冲突 | 处理要求 |
+|---|---|---|
+| C1 | 顶点图标为 emoji（🔥🌿💧⚡🌏），违反无 emoji 门禁 | 保留五行语义与星图几何，图标改**内联 SVG / 极简几何符号**；须在 20–24px 下可辨识 |
+| C2 | 沙盘"身"为土棕 `$brown-warm→#5D4037`，设计稿"身"为赤陶 `#C2703D` | 统一为土系，**一稿内不得出现两个明显不同的"身"色**；最终值由设计稿确认后回填此处 |
+| C3 | 星图是 Canvas，新布局需给固定高度容器 | CSS 需给 `sandbox-star` 明确高度，避免 flex 下塌陷 |
+
+### 5.3 落地位置
+
+- 首页：**五维状态带下方**，作为家庭五维的视觉焦点
+- 同时给三千行巨型文件减负：沙盘相关 UI 尽量复用组件，不新增行内 Canvas 逻辑
+
+---
+
+## 6. 实施批次（增量可验证）
+
+| 批次 | 优先级 | 内容 | 目标文件 | 验收 |
+|---|---|---|---|---|
+| **B1** | P0 | 设计令牌落地（色彩/间距/圆角/字阶）+ 问候条 + 五维状态带 + 按钮八态规则 | `uni.scss` / `index-home.vue` 样式段 | 令牌无硬编码；五维线性顺序正确；按钮非禁用态白字、禁用态深字；`npm run build:mp-weixin` 通过 |
+| **B2** | P0 | ★能量沙盘保留与适配：组件保留 + C1/C2/C3 三冲突处理 + 在新布局中就位 | `components/wuxing-sandbox.vue`、`index-home.vue` | 沙盘 live/preview 正常渲染；顶点非 emoji；"身"色统一；props 契约无缺失；构建通过 |
+| **B3** | P1 | 今日待办带（并入 Next Best Action / 今日任务 / 我的任务） | `index-home.vue` | 计数与展示一致；完成态切换正常 |
+| **B4** | P1 | 近期健康数据带（三态 loading/error/empty）+ 服务入口 10 项 + 推荐阅读归并 | `index-home.vue` | 三态可切换；入口 10 项；构建通过 |
+| **B5** | P2 | 旧区块清理与冗余 CSS 回收（视 D1/D3 结论） | `index-home.vue` | 无死链；构建通过；行数显著下降 |
+
+---
+
+## 7. 验收标准
+
+**自动化门禁（四道，须全部 0 违例）**
+- `lint_hardcodes`：无硬编码 hex/裸值（须走令牌）
+- `check_no_emoji`：0 emoji
+- `slop_tells --strict`：0 命中（无紫蓝渐变/单侧彩条/营销词/假标签/玻璃拟态）
+- `contrast`：正文 ≥4.5:1，UI 元素 ≥3:1
+
+**构建与手工**
+- `npm run build:mp-weixin` exit 0
+- 390px 下无横向溢出；沙盘星图完整可见；五维状态行与沙盘不重复等权
+- 未测评时 GateLock 引导卡正常；已测评时星图正常
+- 个人/全家切换（live）正常
+- reduced-motion 下动画降级
+
+**小程序红线（AGENTS.md）**
+- 无 CSS Grid（用 flexbox）
+- 无可选链 `?.`
+- 无 `:key` 表达式
+- 无直接 `new Date(string)`
+
+---
+
+## 8. 参考文件
+
+| 内容 | 路径 |
+|---|---|
+| 设计稿 | `cfc-frontend/design/cfc-home-redesign.html` |
+| 首页 | `cfc-frontend/pages/index-home/index.vue` |
+| 沙盘组件 | `cfc-frontend/components/wuxing-sandbox.vue` |
+| 沙盘 helpers | `cfc-frontend/components/wuxing-sandbox-helpers/` |
+| 五维配色参考 | `cfc-frontend/pages/health-main/index.vue`（`.wc-body` 等） |
+| 门禁工具 | design-studio 技能 `references/`、`tools/` |
+
+---
+
+## 9. 待主理人确认项
+
+- **D1**：未登录态 Hero 区 + value-prop 是否一并按新方案改造？（本计划默认：本次仅改登录态家庭总览）
+- **D3**：`家庭动态`、`上传报告`、`推荐商品`、`会员入口` 四个区块的去留/位置
+- **C2**：沙盘"身"最终色值待设计稿确认后回填
+
+> 以上未决项不影响 B1/B2 开工；涉及 Б3–B5 时须先回收结论。