taiheEhu/docs/superpowers/specs/2026-05-07-message-page-design.md

消息页面设计说明

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 已同步说明当前新增页面