首页重构 — 主动健康漏斗设计（了解 → 发现 → 改变）

日期: 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）完全不动

三、页面结构（登录态）

┌───────────────────────────────┐
│ ① 了解区                       │  自测大卡（品牌头部已由 07d897a1 全局移除）
├───────────────────────────────┤
│ ② 发现区                       │  能量沙盘 + 上传报告 + 测评状态
├───────────────────────────────┤
│ ③ 行动区                       │  旅程卡 + 今日任务 + 我的任务 + 家庭挑战 + 会员
├───────────────────────────────┤
│ ④ 内容区                       │  快捷栏 + 家庭动态 + 推荐阅读 + 推荐商品
└───────────────────────────────┘

① 了解区（首屏）

自测大卡（新增，首屏首个元素）：
- 视觉：复用 health-main 的 .self-test-card 样式（紫蓝渐变 #667eea→#764ba2 + ⚡图标）
- 文案：先花 1 分钟，了解全家健康状况 / 15 题五维自检 · 约 20 秒
- 点击：uni.navigateTo({ url: '/pages/health/survey-questionnaire?dim=all' })
- 文案用"了解/发现"代替"测试/测评"，降低心理门槛
- 条件渲染：
- 新用户（无报告、无测评）→ 完整引导卡
- 已有数据 → 卡上显示最近得分摘要 + "再次了解"按钮（实现说明：已有数据判定复用首页已加载的 sandboxData（沙盘解锁即有自检数据），得分摘要取 sandboxData.overallScore，避免新增 API 调用；如后续需要更细报告摘要再接入 getLatestHealthReport / getAssessmentLatestResult）

② 发现区

能量沙盘：保留 WuxingSandbox / GateLock 现状逻辑（未测评显示引导卡）
上传报告卡：ReportUploadCard（已统一组件）从底部上移到沙盘下方，与自测卡形成"了解→发现"闭环
测评状态条（可选）：一行显示"认知测评 ✓ / 心理测评未完成"，点击跳对应测评页。若后端无现成聚合接口则先跳过，不阻塞本次交付

③ 行动区（聚合）

按顺序排列，全部保留现有逻辑：

JourneyCard（旅程进度，从顶部移入；仅 C 类意图用户显示）
DailyTaskCard（今日任务，从第 10 位上提）
"我的任务"（hasPendingTasks 条件显示）
"家庭挑战"（FamilyChallengeCard）
会员入口（showMemberEntry 条件显示）

④ 内容区（降级）

快捷栏（从第 6 位移到此处顶部——本质是"去别的地方"，不打断健康漏斗）
FamilyFeed 家庭动态（从顶部移入，作为"了解他人/家庭状态"的信息补充）
ArticleBookshelf 推荐阅读
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 为共享组件（避免过度设计）

2026-08-18-homepage-health-funnel-design.md 5.8 KB История Директен файл