taiheEhu/docs/superpowers/specs/2026-05-08-sleep-report-design.md

# 睡眠报告页设计说明

**日期：** 2026-05-08

## 目标

新增一个“健康报告页 / 睡眠健康分析页”，为用户提供宝宝睡眠质量、呼吸状态、心率状态、HRV 分析、异常事件统计、睡眠评分和 AI 分析建议等完整的睡眠健康信息展示能力。

首版定位为“可交互演示版”：

- 页面结构完整
- 使用本地 mock 数据驱动
- 支持核心筛选和切换交互
- 图表以轻量演示方式实现
- 暂不接入真实后端接口

## 范围

- 新增独立页面 `pages/report/index`
- 首页保留现有设备绑定页
- 新增两个进入报告页的入口：
  - 底部导航里的“报告”
  - 首页主体区域里的“查看睡眠报告”入口
- 报告页支持 `日报 / 周报 / 月报` 切换
- 报告页支持日期、房间、设备筛选
- 报告页包含评分总览、趋势图、统计卡片、AI 分析、异常统计、HRV、低氧、打鼾、睡眠结构、日间状态预测等模块
- 不接入真实接口，不新增大型依赖，不引入全局状态管理

## 页面定位

这是一个面向宝宝睡眠监测场景的深色数据报告页。页面需要延续当前首页已经建立的深色监测风格，让“首页”和“报告页”看起来属于同一个产品，而不是两个割裂的界面。

页面重点不是营销展示，而是帮助用户快速判断一晚睡眠是否稳定、有没有异常风险、接下来应关注什么。

## 页面结构

### 1. 页面入口

- 首页底部导航“报告”点击后跳转到报告页
- 首页新增一个明显的“查看睡眠报告”入口卡片或快捷入口
- 报告页顶部返回按钮点击后返回首页

### 2. 顶部区域

- 返回按钮
- 宝宝名称
- 日期展示与切换
- 分享按钮

说明：

- 分享按钮首版只做 `toast` 占位，提示“分享功能待接入”
- 宝宝名称使用 mock 数据，如“安安的睡眠报告”

### 3. 时间维度切换

- 日报
- 周报
- 月报

默认选中：

- 日报

切换后行为：

- 重新读取对应维度的 mock 数据
- 同步更新评分、趋势图、统计卡片和分析模块

### 4. 顶部筛选区

- 日期选择
- 房间选择
- 设备选择

首版交互：

- 使用页面内本地状态维护当前筛选条件
- 切换筛选项后刷新页面展示内容
- 日期切换以预设 mock 日期集合实现，不引入复杂日期组件

### 5. 评分总览区

显示内容：

- 综合睡眠评分
- 睡眠评级
- 睡眠质量状态
- 评分组成项：入睡速度、睡眠稳定性、呼吸状态、心率状态、异常事件

评分规则：

- `90-100`：优秀
- `75-89`：良好
- `60-74`：合格
- `0-59`：异常

视觉要求：

- 使用明显的中心评分视觉
- 颜色随等级变化
- 同时展示评分细分项，避免只有总分

### 6. 睡眠趋势与核心图表区

包含两组主要内容：

- 整夜睡眠趋势图
- 睡眠分数趋势图

整夜趋势图展示：

- 深睡
- 浅睡
- REM
- 清醒
- 呼吸波动

睡眠分数趋势图展示：

- 时间
- 睡眠评分
- 阶段变化

首版支持：

- 切换时间维度后刷新图表
- 点击数据点后显示当前时间点的简要数值

首版不做：

- 手势缩放
- 复杂联动高亮
- 大型图表引擎能力

### 7. 睡眠数据统计卡片区

展示以下 9 项核心指标：

1. 入睡时长
2. 平均呼吸率
3. 平均血氧
4. 呼吸暂停次数
5. 平均 HRV
6. 平均心率
7. 异常翻身次数
8. 呼吸暂停时长
9. 心率过快次数

每张卡片显示：

- 指标名称
- 数值
- 单位
- 状态标签

状态分级：

- 正常
- 注意
- 异常

### 8. AI 分析模块

模块拆分为两部分：

- AI 睡眠分析摘要
- 睡眠改善建议

分析内容包括：

- 睡眠稳定性分析
- 呼吸状态分析
- 心率变化分析
- 异常风险提醒
- 睡眠改善建议

首版要求：

- 文案由本地 mock 数据提供
- 页面结构按真实业务报告组织
- 保留后续接 AI 接口的扩展空间

### 9. 深度分析模块

包含以下内容：

- 异常统计模块
- HRV 分析模块
- 心率散点图
- 呼吸波形图
- 低氧统计模块
- 打鼾监测模块
- 异常事件散点图
- 睡眠结构模块
- 自主神经分析模块
- 日间状态预测模块

各模块展示重点如下：

#### 异常统计

- 心率异常
- 呼吸异常
- 血氧异常
- 呼吸暂停
- 离床行为

显示：

- 次数
- 最大值
- 平均值
- 持续时长

#### HRV 分析

- HRV 值
- RMSSD
- SDNN
- LF/HF
- 压力指数

状态：

- 正常
- 压力偏高
- 疲劳风险

#### 心率散点图

- 横轴：时间
- 纵轴：心率值
- 异常点高亮

#### 呼吸波形图

- 呼吸波动曲线
- 异常点标记
- 呼吸暂停标记

#### 低氧统计

- 最低血氧
- 低氧次数
- 持续时长

状态：

- 正常
- 低氧风险
- 高风险

#### 打鼾监测

- 打鼾时长
- 打鼾频率
- 峰值强度

#### 异常事件散点图

事件类型：

- 呼吸暂停
- 心率异常
- 哭闹
- 离床

#### 睡眠结构

- 深睡比例
- 浅睡比例
- REM 比例
- 清醒比例

#### 自主神经分析

- 交感活跃度
- 副交感活跃度
- 压力状态

#### 日间状态预测

- 精神状态
- 疲劳程度
- 情绪状态

状态颜色：

- 优秀：绿色
- 良好：青色
- 注意：橙色
- 异常：红色

## 交互设计

### 1. 首页跳转

- 点击底部导航“报告”进入报告页
- 点击首页快捷入口进入报告页

### 2. 报表维度切换

- 点击 `日报 / 周报 / 月报`
- 更新当前维度状态
- 刷新当前维度下的所有展示数据

### 3. 筛选切换

- 日期切换：切换到不同 mock 日期
- 房间切换：切换到不同房间 mock 数据
- 设备切换：切换到不同设备 mock 数据

### 4. 图表点按

- 点击折线图或散点图中的数据点
- 页面显示对应时间点的数据提示

### 5. 分享

- 点击分享按钮
- 弹出“分享功能待接入”

## 数据组织设计

建议新增本地 mock 数据文件：

- `src/pages/report/mock.ts`

数据按三个时间维度组织：

- `daily`
- `weekly`
- `monthly`

每个维度下再包含不同日期、房间、设备的数据组合。每组数据至少包含：

- 页面头部信息
- 睡眠评分总览
- 评分组成项
- 趋势图数据
- 核心统计卡片
- AI 分析文案
- 异常统计数据
- HRV 数据
- 心率与呼吸图表数据
- 低氧、打鼾、睡眠结构、自主神经、日间状态数据

这样做的目的：

- 首版无需后端即可完整演示
- 后续接接口时，页面结构可以保持不变
- 只需要把 mock 数据来源替换成接口返回

## 实现建议

### 1. 页面与组件拆分

新增页面：

- `src/pages/report/index.tsx`
- `src/pages/report/index.scss`
- `src/pages/report/index.config.ts`

建议补充少量组件，避免单文件过长：

- `src/components/report-header/`
- `src/components/report-score-card/`
- `src/components/report-metric-grid/`
- `src/components/report-chart-card/`

拆分原则：

- 页面文件负责组装和状态控制
- 组件负责展示某一类稳定模块
- 保持文件数量适中，优先让新手易读

### 2. 状态管理

仅使用 React 自带状态管理当前页面所需状态：

- 当前时间维度
- 当前日期
- 当前房间
- 当前设备
- 当前图表选中点

不引入全局状态库。

### 3. 图表实现方式

首版不引入重型图表依赖。

推荐实现方式：

- 使用 `View` 组合、绝对定位、渐变背景和简单几何块实现折线、散点、柱条和波形效果
- 圆环评分使用纯样式方案或可被 Taro 兼容的轻量视觉实现
- 图表重点是表达业务信息和交互反馈，而不是实现完整图表引擎

这样更符合当前项目目标：

- 依赖更少
- 结构更简单
- 更适合零基础项目维护

## 视觉方向

- 延续首页现有深色监测风格
- 页面背景保持深灰蓝色系
- 模块之间通过卡片分组，但避免过度装饰
- 信息密度高，但层次必须清楚
- 使用状态色表达风险等级：
  - 绿色：优秀 / 正常
  - 青色：良好
  - 橙色：注意
  - 红色：异常

## 实现边界

首版明确不包含以下内容：

- 真实接口请求
- 真正的小程序分享链路
- 手势缩放图表
- 图表间复杂联动
- 大型第三方 UI 库
- 大型第三方图表库
- 全局状态管理方案

## 验收标准

### 页面与导航

- 首页正常显示，不影响原有设备绑定逻辑
- 底部“报告”点击可进入报告页
- 首页新增入口点击可进入报告页
- 报告页返回按钮可回到首页

### 交互行为

- `日报 / 周报 / 月报` 切换后，页面摘要和图表同步变化
- 日期、房间、设备切换后，报告内容同步变化
- 点击趋势图或散点图数据点时，能显示对应数值提示
- 分享按钮点击后有 `toast` 占位反馈

### 视觉与内容

- 页面整体风格与首页一致
- 核心模块齐全，长页面滚动时层级清晰
- 状态色使用一致，不混乱
- 重点信息在首屏和前几屏内能快速看到

### 代码与维护

- 不新增重型依赖
- 使用本地 mock 数据驱动
- 代码结构保持简单，适合新手阅读
- `README.md` 更新新增报告页说明

### 验证方式

- 至少运行一次 `npm run build:weapp`
- 确认没有新增 TypeScript 或 Taro 构建错误
- 对可抽离的纯逻辑补最小必要测试，例如：
  - 评分等级映射
  - 状态颜色映射
  - mock 数据选择逻辑