# 消息页面设计说明

## 1. 目标

在当前微信小程序项目中新增一个“消息”页面，页面风格参考提供的设计图，并与现有首页形成双向页面跳转。

本次目标是让项目从“只有首页”扩展为“首页 + 消息页”的可预览状态，同时保留后续继续新增“报告”“我的”等页面的扩展空间。

## 2. 本次范围

本次实现包含：

- 新增消息页面
- 首页与消息页之间的底部导航跳转
- 抽取一个可复用的底部导航组件
- 在消息页中实现顶部双标签、消息卡片列表、未读红点视觉
- 更新页面注册配置
- 更新 README，补充当前页面结构和消息页说明

本次不包含：

- 真正的后端消息接口
- 消息已读、删除、下拉刷新、分页加载
- “系统消息”标签下的真实内容切换接口
- “报告”“小e”“我的”真实业务页

## 3. 设计原则

- 保持项目结构简单，适合新手继续修改
- 尽量复用现有首页的深色视觉语言
- 不额外引入新的大型依赖
- 先完成静态页面和页面跳转，再为后续真实接口预留清晰结构

## 4. 页面与组件设计

### 4.1 消息页面

新增目录：

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

页面内容分为三块：

1. 顶部标签区
2. 消息卡片列表区
3. 底部导航区

顶部标签区使用两个标签：

- `体征消息`
- `系统消息`

默认高亮 `体征消息`，`系统消息` 右侧显示一个小红点作为未读提示。首版只做前端本地切换，切换后可展示不同的本地占位数据，不接接口。

消息卡片列表区使用 3 条演示数据，卡片字段参考设计图：

- 标题
- 设备 ID
- 使用人员
- 消息类型
- 检测数值
- 发生时间

页面整体继续使用深色背景、圆角卡片、浅色文字和青绿色高亮色，尽量与首页统一。

### 4.2 底部导航组件

新增目录：

- `src/components/tab-bar/index.tsx`
- `src/components/tab-bar/index.scss`

组件负责：

- 渲染统一的 5 个底部导航项
- 根据传入的当前页面 key 控制高亮状态
- 处理首页与消息页之间的跳转
- 对暂未实现的页面继续保留轻提示

组件入参保持简单，建议至少包含：

- 当前激活项 key

组件内部统一维护导航项配置，避免首页和消息页各自重复维护一份。

## 5. 交互设计

### 5.1 页面跳转

- 首页点击底部 `消息`，跳转到消息页
- 消息页点击底部 `首页`，跳转到首页
- 点击当前已激活 tab 不重复跳转
- 点击 `报告`、`小e`、`我的` 时，继续提示“功能待接入”

为了避免多层页面堆栈，首页与消息页之间的 tab 切换优先使用 `Taro.redirectTo`。

### 5.2 消息标签切换

- 点击 `体征消息`，显示体征消息列表
- 点击 `系统消息`，显示系统消息占位列表
- 当前仅做前端状态切换，不持久化

### 5.3 消息列表滚动

如果卡片数量超过一屏，允许页面自然纵向滚动。底部导航固定在底部，页面内容区域保留足够底部内边距，避免被遮挡。

## 6. 数据设计

消息页首版使用本地静态数据。建议定义明确的 TypeScript 类型，例如：

- `MessageTabKey`
- `MessageItem`

数据至少包含：

- `id`
- `title`
- `deviceId`
- `userName`
- `messageType`
- `valueText`
- `occurredAt`
- `category`

其中 `category` 用于区分 `vital` 和 `system` 两类消息，便于本地筛选。

## 7. 文件修改范围

预计涉及文件：

- `src/app.config.ts`
- `src/pages/index/index.tsx`
- `src/pages/index/index.scss`
- `src/pages/message/index.tsx`
- `src/pages/message/index.scss`
- `src/pages/message/index.config.ts`
- `src/components/tab-bar/index.tsx`
- `src/components/tab-bar/index.scss`
- `README.md`

## 8. 测试与验证

至少验证以下内容：

- 项目可以正常编译
- 首页底部 `消息` 可跳转到消息页
- 消息页底部 `首页` 可跳回首页
- 消息页顶部双标签可以切换
- 当前激活 tab 样式正确
- 页面底部内容不会被固定导航遮挡

## 9. 风险与控制

风险 1：底部导航从首页内联实现改为组件后，可能影响首页现有视觉。
控制方式：保留原有视觉结构，优先抽取已有样式命名和布局逻辑，避免大改。

风险 2：tab 切换若使用 `navigateTo`，可能导致页面堆栈不断增加。
控制方式：首页与消息页之间统一使用 `redirectTo`。

风险 3：消息页完全照搬图片可能与当前项目样式不一致。
控制方式：保留设计图核心布局，但颜色、阴影、圆角与首页现有风格保持同一体系。

## 10. 完成标准

满足以下条件即可认为本次任务完成：

- 小程序内已存在独立消息页
- 首页与消息页可通过底部导航双向切换
- 消息页主要视觉与提供的参考图接近
- 代码结构对新手友好，文件职责清晰
- README 已同步说明当前新增页面