|
|
@@ -0,0 +1,99 @@
|
|
|
+# 首页重构 — 主动健康漏斗设计（了解 → 发现 → 改变）
|
|
|
+
|
|
|
+**日期:** 2026-08-18
|
|
|
+**状态:** 已确认（方案 A）
|
|
|
+**关联背景:** `specs/2026-07-22-active-health-six-stage-design.md`（主动健康六阶模型 P0-P3 已全栈交付，本次为首页落地其理念）
|
|
|
+**目标文件:** `cfc-frontend/pages/index-home/index.vue`
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 一、背景与理念
|
|
|
+
|
|
|
+平台已交付主动健康六阶模型（P0 微启动 → P1 即时反馈/智能预警 → P2 身份重塑/家庭互动 → P3 社区扩散），但**首页仍是信息流结构**（沙盘 → 动态 → 快捷栏 → 任务 → 挑战 → 今日任务 → 上传报告 → 阅读 → 商品），未体现"先发现后改变、从了解开始"的主动健康叙事。
|
|
|
+
|
|
|
+本次重构目标：把首页改造成一条**健康漏斗**，降低用户参与门槛，让用户**从了解开始**（自测），经历**发现**（沙盘/报告/测评），走向**改变**（任务/挑战/方案）。
|
|
|
+
|
|
|
+## 二、核心决策
|
|
|
+
|
|
|
+| 决策点 | 结论 |
|
|
|
+|--------|------|
|
|
|
+| 核心用户 | **以家长为主**（家庭健康决策者）；孩子/规划师保持可正常使用 |
|
|
|
+| "了解"路径 | **自测先行**：首屏放 15 题五维健康自检入口（低门槛，约 20 秒） |
|
|
|
+| "改变"落点 | **行动区聚合入口**：今日任务 + 家庭挑战 + 健康方案/会员 聚合为一个"行动区" |
|
|
|
+| 结构 | 四段式漏斗：① 了解区 → ② 发现区 → ③ 行动区 → ④ 内容区 |
|
|
|
+| 复用原则 | 全部复用现有组件，不新增依赖；未登录态（discover-container）完全不动 |
|
|
|
+
|
|
|
+## 三、页面结构（登录态）
|
|
|
+
|
|
|
+```
|
|
|
+┌───────────────────────────────┐
|
|
|
+│ ① 了解区 │ 品牌头部 + 理念语 + 自测大卡
|
|
|
+├───────────────────────────────┤
|
|
|
+│ ② 发现区 │ 能量沙盘 + 上传报告 + 测评状态
|
|
|
+├───────────────────────────────┤
|
|
|
+│ ③ 行动区 │ 旅程卡 + 今日任务 + 我的任务 + 家庭挑战 + 会员
|
|
|
+├───────────────────────────────┤
|
|
|
+│ ④ 内容区 │ 快捷栏 + 家庭动态 + 推荐阅读 + 推荐商品
|
|
|
+└───────────────────────────────┘
|
|
|
+```
|
|
|
+
|
|
|
+### ① 了解区（首屏）
|
|
|
+
|
|
|
+- **品牌头部**：保留 `PageBanner theme="action"`
|
|
|
+- **自测大卡（新增）**：置于品牌头部下方
|
|
|
+ - 视觉：复用 health-main 的 `.self-test-card` 样式（紫蓝渐变 `#667eea→#764ba2` + ⚡图标）
|
|
|
+ - 文案：`先花 1 分钟，了解全家健康状况` / `15 题五维自检 · 约 20 秒`
|
|
|
+ - 点击：`uni.navigateTo({ url: '/pages/health/survey-questionnaire?dim=all' })`
|
|
|
+ - 文案用"了解/发现"代替"测试/测评"，降低心理门槛
|
|
|
+ - **条件渲染**：
|
|
|
+ - 新用户（无报告、无测评）→ 完整引导卡
|
|
|
+ - 已有数据 → 卡上显示最近得分摘要 + "再次了解"按钮（数据源：`getLatestHealthReport` / `getAssessmentLatestResult`，如数据缺失则降级为纯引导卡）
|
|
|
+
|
|
|
+### ② 发现区
|
|
|
+
|
|
|
+- **能量沙盘**：保留 `WuxingSandbox` / `GateLock` 现状逻辑（未测评显示引导卡）
|
|
|
+- **上传报告卡**：`ReportUploadCard`（已统一组件）从底部上移到沙盘下方，与自测卡形成"了解→发现"闭环
|
|
|
+- **测评状态条（可选）**：一行显示"认知测评 ✓ / 心理测评 未完成"，点击跳对应测评页。**若后端无现成聚合接口则先跳过，不阻塞本次交付**
|
|
|
+
|
|
|
+### ③ 行动区（聚合）
|
|
|
+
|
|
|
+按顺序排列，全部保留现有逻辑：
|
|
|
+
|
|
|
+1. `JourneyCard`（旅程进度，从顶部移入；仅 C 类意图用户显示）
|
|
|
+2. `DailyTaskCard`（今日任务，从第 10 位上提）
|
|
|
+3. "我的任务"（`hasPendingTasks` 条件显示）
|
|
|
+4. "家庭挑战"（`FamilyChallengeCard`）
|
|
|
+5. 会员入口（`showMemberEntry` 条件显示）
|
|
|
+
|
|
|
+### ④ 内容区（降级）
|
|
|
+
|
|
|
+1. 快捷栏（从第 6 位移到此处顶部——本质是"去别的地方"，不打断健康漏斗）
|
|
|
+2. `FamilyFeed` 家庭动态（从顶部移入，作为"了解他人/家庭状态"的信息补充）
|
|
|
+3. `ArticleBookshelf` 推荐阅读
|
|
|
+4. `DimensionProducts` 推荐商品（最底）
|
|
|
+
|
|
|
+## 四、涉及文件
|
|
|
+
|
|
|
+| 文件 | 改动 |
|
|
|
+|------|------|
|
|
|
+| `cfc-frontend/pages/index-home/index.vue` | 主要改动：模板区块重排 + 新增自测卡 + 条件渲染逻辑 |
|
|
|
+| `cfc-frontend/pages/health-main/index.vue` | 不动（自测卡样式从 `.self-test-card` 复制，不抽取依赖） |
|
|
|
+| `cfc-frontend/components/report-upload-card.vue` | 已存在，不动 |
|
|
|
+
|
|
|
+## 五、验收标准
|
|
|
+
|
|
|
+- [ ] 登录态首页从上到下为：了解区 → 发现区 → 行动区 → 内容区
|
|
|
+- [ ] 首屏可见自测大卡，点击进入 `/pages/health/survey-questionnaire?dim=all`
|
|
|
+- [ ] `ReportUploadCard` 位于能量沙盘下方
|
|
|
+- [ ] `DailyTaskCard` 位于行动区（旅程卡/今日任务位置）
|
|
|
+- [ ] 快捷栏、家庭动态、推荐阅读、推荐商品依次位于底部内容区
|
|
|
+- [ ] `JourneyCard` 从首屏移到行动区顶部，C 类用户可见、A 类隐藏逻辑不变
|
|
|
+- [ ] 未登录态首页（discover-container）无任何改动
|
|
|
+- [ ] 所有页面/组件 JS 语法检查通过；HBuilderX 重新打包后显示正常
|
|
|
+
|
|
|
+## 六、明确不做（YAGNI）
|
|
|
+
|
|
|
+- ❌ 不做角色分流（家长/孩子首页不拆分）
|
|
|
+- ❌ 不做后端新接口（除非测评状态条需要，且可暂缓）
|
|
|
+- ❌ 不改未登录态
|
|
|
+- ❌ 不新增组件依赖，不抽取 self-test-card 为共享组件（避免过度设计）
|
iwt