cfc/docs/superpowers/specs/2026-08-08-health-data-center-design.md

健康数据中心 — 看见 · 主动健康闭环

版本: v1.0 日期: 2026-08-08 状态: 设计稿

1. 概述

将身维度首页（body/index.vue）改造为"健康数据中心"，聚焦主动健康闭环中"看见"环节——用户上传报告、完成测评、查看数据、生成方案，形成"采集→看见→行动"的递进闭环。

2. 页面布局

┌──────────────────────────────────────┐
│  [🟠 健康] [认知] [心理] [社会性]     │  ← Tab栏，切换仅刷新数据图区
│  ┌──────────────────────────────┐   │
│  │       📊 维度数据图           │   │  ← 按Tab展示不同可视化
│  └──────────────────────────────┘   │
├──────────────────────────────────────┤
│  🏠 家庭成员选择条                   │  ← 不随Tab切换
├──────────────────────────────────────┤
│  🔍 看见 · 健康数据中心              │
│  ┌── 数据采集 ──────────────────┐  │
│  │ 📋 上传健康报告               │  │
│  │ 📝 在线测评（认知/心理/关系）  │  │
│  └──────────────────────────────┘  │
│              ↓                      │
│  ┌── 数据查看 ──────────────────┐  │
│  │ 最近报告/测评结果 · 查看全部   │  │
│  └──────────────────────────────┘  │
│              ↓                      │
│  ┌── 方案汇总 ──────────────────┐  │
│  │ 选维度+成员+目标→LangGraph生成 │  │
│  └──────────────────────────────┘  │
├──────────────────────────────────────┤
│  活动 / 商品 / 文章（弱化展示）       │
└──────────────────────────────────────┘

3. 顶部 Tab 栏

3.1 Tab 定义

Tab	维度	图标色	数据图类型	数据来源
健康	身	#FF8C42	七维雷达图（保留现有）	getDimensionOverview('body')
认知	智	#6366F1	五维蛛网图（新建）	认知测评结果
心理	心	#FF6B9D	心理状态图（新建）	心理测评结果
社会性	行	#10B981	关系质量图（新建）	关系问卷结果

3.2 交互行为

• 默认选中"健康"Tab
• 点击 Tab 切换时，仅重新渲染数据图区域，页面其他部分不变
• 当前选中 Tab 配有对应维度色 + 下划线/高亮
• 数据图下方显示"无数据"提示（如"上传报告后显示个人数据"）

3.3 数据图实现

• 健康： 保留现有 RadarChart 组件，七维标签
• 认知： 复用 RadarChart 组件，标签改为：记忆力/注意力/逻辑推理/空间想象/语言表达，配色 #6366F1
• 心理： 复用 RadarChart 组件，标签改为：情绪稳定性/抗压能力/自我认知/社交意愿/幸福感，配色 #FF6B9D
• 社会性： 复用 RadarChart 组件，标签改为：亲子关系/夫妻关系/亲友关系/同事关系/社区参与，配色 #10B981

无数据时各图显示默认均值（灰色半透明），与现有健康雷达图行为一致。

4. 家庭成员选择条

保持现有 FamilyMemberStrip 组件，位置在数据图下方，不随 Tab 切换。

5. 看见 · 健康数据中心

5.1 数据采集区

两个卡片上下排列：

卡片 1：上传健康报告

• 图标 + 标题："上传健康报告"
• 描述："体检/肠道/舌诊报告 · AI智能解读"
• 点击跳转 /pages/health/report-upload

卡片 2：在线测评

• 标题："在线测评"
• 三个测评项，每行一个 + [开始] 按钮：
  • 认知能力测评 → /pages/body-detail/dimension-questionnaire?dim=cognitive&memberId=xxx
  • 心理健康测评 → /pages/body-detail/dimension-questionnaire?dim=mental&memberId=xxx
  • 关系质量测评 → /pages/body-detail/dimension-questionnaire?dim=relationship&memberId=xxx
• 已完成的测评显示分数（如"85分"）替代[开始]按钮

5.2 数据查看区

• 展示最近一份报告/测评结果的摘要卡片（类型图标 + 名称 + 日期 + 分数）
• 右侧箭头 → 跳转对应的详情页
• 底部"[查看全部 X 份报告]" → 跳转 /pages/health/report-list?memberId=xxx

无数据时显示空状态："暂无报告和测评结果，上传报告或完成测评开启健康之旅"

5.3 方案汇总区

• 展示上次方案摘要（如果有）或空状态
• 标题 + [生成新方案] 按钮
• 点击 → 跳转到方案汇总页（详见第7节）

6. 在线测评题库（dimension-questionnaire.vue 扩展）

6.1 新增维度

在现有 dimensions 数组新增：

{ code: 'cognitive', label: '认知能力', icon: '🧠' },
{ code: 'mental', label: '心理健康', icon: '💖' },
{ code: 'relationship', label: '关系质量', icon: '🤝' }

6.2 认知能力题库（示例 8 题）

#	题目	选项
1	你能同时记住几件事而不遗漏？	1-2件/3-4件/5-6件/7件以上
2	解决复杂问题时你通常？	凭直觉/逐步分析/找人帮忙/回避
3	学习新技能的速度？	很快/一般/较慢/很困难
4	你能清晰地表达自己的想法吗？	非常清晰/基本可以/有时困难/很难
5	做决定时你会考虑多种可能性？	总是/经常/有时/很少
6	空间方向感如何？	很好/一般/较差/完全没有
7	你能快速发现事物之间的关联？	总是/经常/偶尔/很少
8	注意力集中的持续时间？	1小时+/30分钟/10分钟/几分钟

6.3 心理健康题库（示例 8 题）

#	题目	选项
1	最近一个月你感到心情愉快的频率？	经常/有时/偶尔/几乎没有
2	面对压力时你通常？	轻松应对/基本能处理/有些吃力/很难应对
3	你觉得自己了解自己的情绪吗？	非常了解/基本了解/不太了解/完全不了解
4	与人相处时你感到？	自在舒适/基本自在/有些不自在/很拘谨
5	你对目前的生活满意度？	很满意/比较满意/一般/不满意
6	遇到挫折后你多久能恢复？	很快/一两天/一周以上/很久
7	你觉得自己有价值感吗？	很有价值/有时有/很少/没有
8	你是否有固定的放松方式？	有且坚持/有时有/想过没做/没有

6.4 关系质量题库（示例 8 题）

#	题目	选项
1	你与家人的沟通频率？	每天/每周几次/每周一次/很少
2	遇到困难时你能找到人倾诉？	总是可以/经常/偶尔/很难
3	你觉得自己被家人理解？	非常理解/基本理解/不太理解/完全不理解
4	你与伴侣的关系满意度？	很满意/比较满意/一般/不满意
5	你与孩子的关系如何？	亲密/良好/一般/疏远
6	你在社交中感到？	轻松愉快/基本舒适/有些紧张/很焦虑
7	你愿意主动联系朋友吗？	经常/有时/被动/几乎不
8	你觉得家庭氛围如何？	温馨和谐/基本融洽/有些紧张/压抑

6.5 跳转逻辑

从数据中心跳转时，URL 带 dim 参数，页面直接跳过 Step 1（选维度），进入 Step 2（答题）。

onLoad(options) {
  if (options.dim) {
    this.selectedDimension = options.dim
    this.step = 2 // 直接进入答题
  }
}

提交接口复用现有 submitDimensionQuestionnaire（后端需扩展支持新增维度）。

7. 方案汇总页（新建）

7.1 页面结构

┌──────────────────────────────┐
│  ← 方案汇总                  │
├──────────────────────────────┤
│  [历史方案]  Tab 切换          │
│                              │
│  ┌── 生成新方案 ──────────┐  │
│  │ 选择维度: [健康][认知].. │  │
│  │ 选择成员: [成员列表]     │  │
│  │ 目标设定: [输入框]       │  │
│  │ 例："改善孩子睡眠质量"   │  │
│  │ [生成方案]              │  │
│  └────────────────────────┘  │
│                              │
│  ┌── 方案结果 ────────────┐  │
│  │ (LangGraph 返回内容)    │  │
│  │ 富文本展示              │  │
│  │ [保存方案] [重新生成]   │  │
│  └────────────────────────┘  │
│                              │
│  ┌── 历史方案列表 ────────┐  │
│  │ 方案1 · 2026-08-07    │  │
│  │ 方案2 · 2026-08-01    │  │
│  └────────────────────────┘  │
└──────────────────────────────┘

7.2 功能流程

1. 用户进入页面 → 展示"生成新方案"表单 + 历史方案列表
2. 选择维度（多选：健康/认知/心理/社会性）
3. 选择成员（从家庭列表选取，可多选）
4. 输入目标（自由文本，如"改善孩子睡眠质量""提升夫妻关系亲密度"）
5. 点击[生成方案] → 调用 LangGraph analysis/run 接口
   • 请求体包含：维度、成员、目标、该成员最近的报告/测评数据
6. LangGraph 返回方案 → 格式化展示（富文本：标题 + 现状分析 + 具体建议 + 预期效果）
7. 用户可[保存方案]（写入 health_plans 表）或[重新生成]
8. 历史方案列表按时间倒序排列，点击查看详情

7.3 数据模型

health_plans 表：

CREATE TABLE IF NOT EXISTS health_plans (
  id BIGINT AUTO_INCREMENT PRIMARY KEY,
  family_id BIGINT NOT NULL COMMENT '家庭ID',
  member_ids VARCHAR(200) NOT NULL COMMENT '目标成员ID列表(逗号分隔)',
  dimensions VARCHAR(100) NOT NULL COMMENT '维度列表(逗号分隔)',
  goal TEXT NOT NULL COMMENT '用户输入的目标',
  plan_content TEXT COMMENT 'LangGraph生成的方案内容(JSON/HTML)',
  member_name VARCHAR(50) COMMENT '成员名称摘要',
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
  INDEX idx_family (family_id),
  INDEX idx_created (created_at)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='健康方案汇总记录';

7.4 历史方案

• 列表项：生成日期 + 维度标签 + 目标摘要 + 成员名称
• 点击展开/跳转详情
• 空状态："暂无历史方案，生成第一个方案"

8. 后端改动

8.1 新增表

health_plans 表（见 7.3）

8.2 迁移

DatabaseInitializer.runMigrations() 新增迁移194：

// 迁移194: 创建 health_plans 表（健康方案汇总记录）
try {
    jdbcTemplate.execute("CREATE TABLE IF NOT EXISTS health_plans (" +
        "id BIGINT AUTO_INCREMENT PRIMARY KEY, " +
        "family_id BIGINT NOT NULL, " +
        "member_ids VARCHAR(200) NOT NULL, " +
        "dimensions VARCHAR(100) NOT NULL, " +
        "goal TEXT NOT NULL, " +
        "plan_content TEXT, " +
        "member_name VARCHAR(50), " +
        "created_at DATETIME DEFAULT CURRENT_TIMESTAMP, " +
        "INDEX idx_family (family_id), " +
        "INDEX idx_created (created_at)" +
        ") ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='健康方案汇总记录'");
    log.info("已创建health_plans表");
} catch (Exception e) {
    log.warn("创建health_plans表失败（可能已存在）: {}", e.getMessage());
}

8.3 新增接口

方法	路径	说明
POST	/api/health/plan/save	保存方案 plan_content
POST	/api/health/plan/list	查询历史方案列表
POST	/api/health/plan/detail	查询方案详情
POST	/api/health/plan/generate	调用LangGraph生成方案

8.4 扩展 dimension-questionnaire 接口

确保 submitDimensionQuestionnaire 后端支持 cognitive/mental/relationship 维度（现有可能只处理了身维度，需确认和扩展）。

9. 前端改动清单

文件	改动内容
pages/body/index.vue	新增Tab栏、数据图切换、替换功能入口网格为数据中心区块
pages/body-detail/dimension-questionnaire.vue	新增认知/心理/关系题库 + dim 参数锁定维度
新建 pages/health/health-plan-summary.vue	方案汇总页（含历史记录）
utils/api.js	新增方案汇总接口
pages.json	注册 health-plan-summary 页面

10. 页面注册

在 pages.json 的 pages/health 分包中新增：

{
  "path": "health-plan-summary",
  "style": {
    "navigationBarTitleText": "方案汇总"
  }
}

11. 移除项

• 移除 body/index.vue 中现有的 funcList 功能入口网格（运动/饮食/作息/冥想/舌诊/健康维度）
• 移除 DimensionTasks 组件及引用
• 移除现有的"精准营养"区块（上传报告卡片保留并升级）

12. 保留项

• 七维雷达图（作为"健康"Tab 的数据图）
• FamilyMemberStrip 家庭成员选择条
• 活动/商品/文章推荐（视觉弱化，收窄宽度）
• AIFloatingAvatar