czz/taiheEhu

Fork 0

Files

czz 054d8e3519 docs: add sleep report page design spec

2026-05-08 09:17:09 +08:00

9.3 KiB

Raw Blame History

睡眠报告页设计说明

日期： 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 项核心指标：

入睡时长
平均呼吸率
平均血氧
呼吸暂停次数
平均 HRV
平均心率
异常翻身次数
呼吸暂停时长
心率过快次数

每张卡片显示：

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

状态分级：

正常
注意
异常

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 数据选择逻辑

9.3 KiB Raw Blame History Unescape Escape