174 lines
5.0 KiB
Markdown
174 lines
5.0 KiB
Markdown
# 消息页面设计说明
|
||
|
||
## 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 已同步说明当前新增页面
|