# 身体页面（小程序端）设计方案 > **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. **Goal:** 改造 TabBar 身体页面 `pages/body/index.vue`，利用已有健康检测报告数据（体检/菌群）、身体能量维度和健康打卡数据，打造完整的家庭健康管理体验。 **Architecture:** 改造 `pages/body/index.vue` 为健康仪表盘，展示身体能量概况 + 最新健康报告摘要 + 家庭成员切换 + 健康指标解读 + 健康打卡记录 + 健康小贴士。新增 `pages/body/` 下子页面用于健康报告详情和打卡。 **Tech Stack:** uni-app Vue 2, 微信小程序, Spring Boot REST API (已有 `/api/health/*` 接口) --- ## 现状分析 ### 页面结构 | 页面 | 定位 | 当前内容 | 问题 | |:----:|------|----------|:----:| | `pages/body/index.vue` | **TabBar 身体** | PageBanner + 功能入口(运动/饮食/作息/菌群/冥想) + 今日数据(步数/饮水/睡眠-硬编码) + 健康小贴士(硬编码) + 能量一周(静态) + 规划师推荐 | ❌ 全部硬编码；无真实健康数据；功能入口跳转未配置 | ### 已有后端资源 #### 健康检测报告（表 `health_reports`） ``` HealthReport ├── reportType: physical_exam(体检) / gut_flora(菌群) ├── overallScore (0-100), gutHealthScore, chronicDiseaseScore, nutritionScore ├── gutAge, gutType (菌群相关) ├── fileUrl, status, remark ``` **已有接口**（`HealthReportController` → `/api/health/*`）： - `POST /api/health/report/create` — 创建报告 - `POST /api/health/report/latest` — 最新报告 - `POST /api/health/report/list` — 报告列表 - `POST /api/health/indicator/list` — 指标明细 - `POST /api/health/body/detail` — 身体维度详情(指标解读) - `POST /api/health/report/archive` — 归档 #### 健康指标项（表 `health_indicators`） ``` HealthIndicator ├── category: 营养状况/疾病风险/肠道屏障/神经递质/短链脂肪酸/抗生素耐药/菌群状态 ├── indicatorName, indicatorValue, unit, refRange, status(正常/偏低/偏高/注意) ``` #### 身体能量维度 ``` EnergyBalance (dimensionId → body 维度) ├── balance, totalEarned, totalSpent EnergyService → calculateBodyScore(childId) 从 health_reports 计算得分 ``` #### 健康打卡（`finance_checkins` 表，`checkinType` 包含健康类） ``` FinanceCheckin ├── checkinType, checkinDate, amount, category, note, mood, earnedEnergy ``` ### 核心问题 1. **全部为硬编码数据**：今日步数、饮水量、睡眠、健康小贴士、规划师推荐全是静态占位，无真实数据 2. **功能入口空洞**：5 个功能入口（运动/饮食/作息/菌群/冥想）均未配置跳转页面 3. **健康报告数据未利用**：已有完整的健康检测报告后端，但身体页面完全没有使用 4. **能量一周是静态柱状图**：未对接真实的身体维度能量周数据 5. **每日健康打卡在财富页**：`finance_checkins` 有打卡功能但入口在财富页 --- ## 设计方案 ### 页面结构 ``` TabBar 🏃 身体 → pages/body/index.vue │ ├── 身体能量概况卡片（登录后） ├── 家庭成员切换 tabs（登录后） ├── 身体维度评分（最新健康报告得分） ├── 今日健康数据（步数/饮水/睡眠 → 待对接智能设备） ├── 健康打卡入口（对接 FinanceCheckin） ├── 最近健康报告摘要 ├── 健康指标解读（来自 health_indicators） ├── 能量一周（对接真实 body 维度数据） ├── 健康小贴士（从文章库选取 body 类） ├── 规划师推荐（种子数据或文章库） │ ├── pages/body/health-report.vue（新增：健康报告详情） └── pages/body/checkin.vue（新增：健康打卡） ``` ### 身体首页布局 ``` ┌────────────────────────────────────────────────────────────┐ │ PageBanner "科学管理全家健康" │ ├────────────────────────────────────────────────────────────┤ │ 家庭成员切换（登录后） │ │ ┌──────┐ ┌──────┐ ┌──────┐ │ │ │ 小宝 │ │ 大宝 │ │ 自己 │ ← 横向滚动 tabs │ │ │ 78分 │ │ 85分 │ │ 92分 │ │ │ └──────┘ └──────┘ └──────┘ │ ├────────────────────────────────────────────────────────────┤ │ ┌─ 身体能量概况 ────────────────────────────────────────┐ │ │ │ 身体能量 328 | 健康评分 82 │ │ │ │ 报告: 2026-05-15 体检 | 菌群检测 2026-04-20 │ │ │ │ [查看完整报告 →] │ │ │ └───────────────────────────────────────────────────────┘ │ ├────────────────────────────────────────────────────────────┤ │ ┌─ 今日健康数据 ────────────────────────────────────────┐ │ │ │ ┌──────┐ │ ┌──────┐ │ ┌──────┐ │ │ │ │ │ 6,582 │ │ │ 1.2 │ │ │ 8.5 │ │ │ │ │ │ 步 │ │ │ L │ │ │ h │ │ │ │ │ │ 今日步数│ │ │ 饮水量│ │ │ 睡眠 │ │ │ │ │ └──────┘ │ └──────┘ │ └──────┘ │ │ │ │ [对接智能设备后自动同步] │ │ │ └───────────────────────────────────────────────────────┘ │ ├────────────────────────────────────────────────────────────┤ │ ┌─ 最近健康报告（有数据时） ────────────────────────────┐ │ │ │ 📋 体检报告 2026-05-15 综合得分: 82 │ │ │ │ ├─ 营养状况: 正常 │ 疾病风险: 低 │ │ │ │ └─ [查看指标明细 →] │ │ │ │ 📋 菌群检测 2026-04-20 菌群健康: 76 │ │ │ │ ├─ 肠型: 拟杆菌型 │ 菌群年龄: 10.7 │ │ │ │ └─ [查看指标明细 →] │ │ │ │ [查看更多报告] │ │ │ └───────────────────────────────────────────────────────┘ │ ├────────────────────────────────────────────────────────────┤ │ ┌─ 无报告时引导 ────────────────────────────────────────┐ │ │ │ 📋 还没有健康检测报告 │ │ │ │ 上传体检报告或菌群检测结果，了解身体维度健康状况 │ │ │ │ [上传报告] │ │ │ └───────────────────────────────────────────────────────┘ │ ├────────────────────────────────────────────────────────────┤ │ ┌─ 健康打卡 ────────────────────────────────────────────┐ │ │ │ 今日已打卡: 运动 ✔ 喝水 ✔ 早睡 ✔ │ │ │ │ ⚡ 打卡获得能量: +15 │ │ │ │ [去打卡 →] │ │ │ └───────────────────────────────────────────────────────┘ │ ├────────────────────────────────────────────────────────────┤ │ ┌─ 能量一周（对接 real body 维度 energy_log） ─────────┐ │ │ │ ██ ████ ██ ██████ ███ ██████ ████ │ │ │ │ 一 二 三 四 五 六 日 │ │ │ └───────────────────────────────────────────────────────┘ │ ├────────────────────────────────────────────────────────────┤ │ ┌─ 健康小贴士（从文章库取 dimension=body） ────────────┐ │ │ │ · 儿童每日运动指南 │ │ │ │ · 五行饮食搭配法则 │ │ │ │ [更多 →] │ │ │ └───────────────────────────────────────────────────────┘ │ ├────────────────────────────────────────────────────────────┤ │ 功能入口 Grid │ │ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │ │ │ 🏃 │ │ 🍎 │ │ 😴 │ │ 🔬 │ │ 🧘 │ │ │ │ 运动 │ │ 饮食 │ │ 作息 │ │ 菌群 │ │ 冥想 │ │ │ └──────┘ └──────┘ └──────┘ └──────┘ └──────┘ │ └────────────────────────────────────────────────────────────┘ ``` ### 数据源汇总 | 区块 | 接口 | 现有/新增 | |------|------|:---------:| | 家庭成员切换 | `POST /api/family/children` | 现有 | | 身体能量概况 | `POST /api/energy/overview` → body 维度 | 现有 | | 健康报告摘要 | `POST /api/health/report/latest` 和 `POST /api/health/report/list` | 现有 | | 健康指标解读 | `POST /api/health/body/detail` | 现有 | | 今日数据(步数/水/睡眠) | 暂保持静态，标注"对接智能设备后同步" | 保留 | | 健康打卡 | `POST /api/checkin/today` `POST /api/checkin/do` `POST /api/checkin/list` | 新增 | | 能量一周 | `POST /api/energy/logs?dimension=body&days=7`（聚合每日 sum） | 现有改造 | | 健康小贴士 | `POST /api/article/list?category=health` | 现有 + 筛选 | | 报告详情 | — | 新增子页面 | --- ## 文件变更清单 ### 前端 | 操作 | 文件 | 说明 | |:----:|------|------| | 🔄 **改造** | **`pages/body/index.vue`** | 健康仪表盘：家庭成员切换 + 报告摘要 + 指标解读 + 打卡 + 能量一周 | | ✨ **新增** | **`pages/body/health-report.vue`** | 健康报告详情（含指标明细列表） | | ✨ **新增** | **`pages/body/checkin.vue`** | 健康打卡（复用 wealth/checkin 模式，聚焦身体健康类打卡） | | 🔄 修改 | `pages.json` | 注册新页面 | | 🔄 修改 | `utils/api.js` | 添加身体相关 API 封装 | ### 后端 | 操作 | 文件 | |:----:|------| | ✨ 新增 | `controller/CheckinController.java` — 健康打卡 CRUD | | ✨ 新增 | `service/CheckinService.java` | | ✨ 新增 | `dto/HealthCheckinDTO.java` | --- ## 新增接口需求 ``` POST /api/checkin/today 请求: { childId } 响应: { totalToday, items: [{ type, doneAt, earnedEnergy }] } POST /api/checkin/do 请求: { childId, type: "exercise"/"water"/"sleep"/"meditate" } 响应: { earnedEnergy, totalToday } POST /api/checkin/list 请求: { childId, page, size } 响应: { records, total } ``` --- ## 实现任务 ### Task 1: 身体首页健康仪表盘 **Files:** - Modify: `cfc-frontend/pages/body/index.vue` **改造点：** 1. **家庭成员切换 tabs**（横向滚动）：获取家庭中的孩子列表，显示每个孩子的身体维度评分 2. **身体能量概况**：展示 body 维度 energy_balance + 最新健康报告得分 + 报告日期 3. **今日健康数据**：保持步数/饮水/睡眠三个卡片，标注"自动同步" 4. **最近健康报告摘要**： - 有报告时：展示报告类型、日期、综合得分、关键指标摘要 - 无报告时：引导"上传报告" - 点击跳转 health-report 详情页 - [查看更多报告] 跳转报告列表 5. **健康打卡**：对接 CheckinController，展示今日打卡项目和完成状态 - [去打卡 →] 跳转 checkin 子页面 6. **能量一周**：对接 `/api/energy/logs?dimension=body&days=7` 7. **健康小贴士**：改为从文章库按 category=health 获取 8. **功能入口**：运动、饮食、作息、菌群、冥想（可跳转到对应子页面或文章） ### Task 2: 新增健康报告详情页 **Files:** - Create: `cfc-frontend/pages/body/health-report.vue` - Modify: `cfc-frontend/pages.json` **功能：** - 报告头部：类型(体检/菌群)、日期、综合评分 - 身体维度评分（来自 EnergyService calculateBodyScore） - 菌群报告专属：gutType、gutAge 展示 - 指标明细列表（按 category 分组）：指标名、检测值、单位、参考范围、状态标记 - 从 `/api/health/report/latest` + `/api/health/indicator/list` 获取数据 ### Task 3: 新增健康打卡页 **Files:** - Create: `cfc-frontend/pages/body/checkin.vue` - Modify: `cfc-frontend/pages.json` **功能：** - 今日打卡项目（运动/喝水/早睡/冥想） - 每个打卡项显示已打卡/未打卡状态 - 打卡成功获得 body 维度能量 - 打卡记录列表 - 统计卡片（总打卡、总能量、连续天数） ### Task 4: 后端健康打卡 API **Files:** - Create: `cfc-backend/.../controller/CheckinController.java` - Create: `cfc-backend/.../service/CheckinService.java` - Create: `cfc-backend/.../dto/HealthCheckinDTO.java` **接口：** - `POST /api/checkin/today` — 今日打卡状态 - `POST /api/checkin/do` — 执行打卡（写 finance_checkins + 发放 body 维度能量） - `POST /api/checkin/list` — 打卡记录