From 93f60c74abd26f6e8f476c9f8983df1dfbfa0fcd Mon Sep 17 00:00:00 2001
From: czz <862977248@qq.com>
Date: Thu, 7 May 2026 16:44:13 +0800
Subject: [PATCH] docs: add message page design spec

---
 .../specs/2026-05-07-message-page-design.md   | 173 ++++++++++++++++++
 1 file changed, 173 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-05-07-message-page-design.md

diff --git a/docs/superpowers/specs/2026-05-07-message-page-design.md b/docs/superpowers/specs/2026-05-07-message-page-design.md
new file mode 100644
index 0000000..5424ec7
--- /dev/null
+++ b/docs/superpowers/specs/2026-05-07-message-page-design.md
@@ -0,0 +1,173 @@
+# 消息页面设计说明
+
+## 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 已同步说明当前新增页面