身体页面（小程序端）设计方案

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

核心问题

全部为硬编码数据：今日步数、饮水量、睡眠、健康小贴士、规划师推荐全是静态占位，无真实数据
功能入口空洞：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

改造点：

家庭成员切换 tabs（横向滚动）：获取家庭中的孩子列表，显示每个孩子的身体维度评分
身体能量概况：展示 body 维度 energy_balance + 最新健康报告得分 + 报告日期
今日健康数据：保持步数/饮水/睡眠三个卡片，标注"自动同步"
最近健康报告摘要：
- 有报告时：展示报告类型、日期、综合得分、关键指标摘要
- 无报告时：引导"上传报告"
- 点击跳转 health-report 详情页
- [查看更多报告] 跳转报告列表
健康打卡：对接 CheckinController，展示今日打卡项目和完成状态
- [去打卡 →] 跳转 checkin 子页面
能量一周：对接 /api/energy/logs?dimension=body&days=7
健康小贴士：改为从文章库按 category=health 获取
功能入口：运动、饮食、作息、菌群、冥想（可跳转到对应子页面或文章）

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 — 打卡记录

2026-06-12-body-page-design.md 16 KB Kalıcı Bağlantı Geçmiş Ham

身体页面（小程序端）设计方案

现状分析

页面结构

已有后端资源

健康检测报告（表 health_reports）

健康指标项（表 health_indicators）

身体能量维度

健康打卡（finance_checkins 表，checkinType 包含健康类）

核心问题

设计方案

页面结构

身体首页布局

数据源汇总

文件变更清单

前端

后端

新增接口需求

实现任务

Task 1: 身体首页健康仪表盘

Task 2: 新增健康报告详情页

Task 3: 新增健康打卡页

Task 4: 后端健康打卡 API

2026-06-12-body-page-design.md 16 KB

Kalıcı Bağlantı Geçmiş Ham

健康检测报告（表 `health_reports`）

健康指标项（表 `health_indicators`）

健康打卡（`finance_checkins` 表，`checkinType` 包含健康类）