159 lines
3.7 KiB
Markdown
159 lines
3.7 KiB
Markdown
# 我的页面设计说明
|
||
|
||
**日期：** 2026-05-07
|
||
|
||
## 目标
|
||
|
||
新增一个“我的 / 个人中心”页面，尽量贴近提供的深色参考图，展示用户信息、VIP 状态和常用个人中心入口，并为后续业务接入预留清晰的二级页面骨架。
|
||
|
||
## 范围
|
||
|
||
- 新增独立的“我的”主页面
|
||
- 新增“我的”页面涉及的二级页面骨架
|
||
- 主页面使用本地 mock 数据渲染用户信息
|
||
- 使用 `Taro + React + TypeScript + SCSS`
|
||
- 不处理其他 Tab 页面的正式实现
|
||
- 不接入真实后端接口
|
||
- 不新增大型依赖
|
||
- 不更新 `README.md`
|
||
|
||
## 页面结构
|
||
|
||
### 我的主页面
|
||
|
||
- 顶部用户卡片：头像、昵称、手机号、VIP 状态
|
||
- 顶部快捷入口：个人信息、设置、帮助与客服
|
||
- 功能列表区：
|
||
- 我的设备
|
||
- 设备报修
|
||
- 问题反馈
|
||
- 教学视频
|
||
- 关注我们
|
||
- 当前版本
|
||
|
||
### 二级页面
|
||
|
||
- 个人信息页
|
||
- 设置页
|
||
- 帮助与客服页
|
||
- 我的设备页
|
||
- 设备报修页
|
||
- 问题反馈页
|
||
- 教学视频页
|
||
- 关注我们页
|
||
|
||
## 视觉设计
|
||
|
||
- 主页面整体使用深蓝灰色背景，尽量贴近参考图的沉稳医疗科技感
|
||
- 顶部用户卡片使用圆角深色容器，突出头像、昵称和 VIP 信息
|
||
- 功能列表使用独立卡片容器，列表项之间通过浅色分隔和悬停反馈增强层级
|
||
- 强调色优先使用参考图中的青绿色，用于 VIP 文案、图标高亮和关键信息
|
||
- 二级页面延续主页面的深色风格，但布局更简洁，优先保证信息清楚和后续易扩展
|
||
|
||
## 交互设计
|
||
|
||
### 主页面加载
|
||
|
||
1. 打开“我的”页面
|
||
2. 读取本地 mock 用户信息
|
||
3. 渲染头像、昵称、手机号、VIP 状态和版本号
|
||
4. 展示功能列表
|
||
|
||
### 页面跳转
|
||
|
||
- 点击“个人信息”进入个人信息页
|
||
- 点击“设置”进入设置页
|
||
- 点击耳机按钮进入帮助与客服页
|
||
- 点击“我的设备”进入设备管理页
|
||
- 点击“设备报修”进入报修页
|
||
- 点击“问题反馈”进入反馈页
|
||
- 点击“教学视频”进入视频列表页
|
||
- 点击“关注我们”进入关注我们页
|
||
|
||
### 当前版本
|
||
|
||
1. 点击“当前版本”
|
||
2. 保留检查更新交互占位
|
||
3. 当前阶段使用 `Toast` 提示“当前已是最新版本”或“检查更新待接入”
|
||
|
||
## 数据设计
|
||
|
||
主页面先使用本地 mock 数据，字段结构保持与 PRD 一致：
|
||
|
||
```json
|
||
{
|
||
"userName": "张天爱",
|
||
"phone": "135****2598",
|
||
"vip": true,
|
||
"avatar": "",
|
||
"deviceCount": 0
|
||
}
|
||
```
|
||
|
||
后续如果接真实接口，优先只替换主页面数据源，不改变页面结构和跳转关系。
|
||
|
||
## 二级页面骨架设计
|
||
|
||
### 个人信息页
|
||
|
||
- 头像区域
|
||
- 昵称展示与修改入口
|
||
- 手机号展示与修改入口
|
||
- 修改密码入口
|
||
|
||
### 设置页
|
||
|
||
- 通知设置
|
||
- 权限管理
|
||
- 清理缓存
|
||
- 关于我们
|
||
- 退出登录
|
||
|
||
### 帮助与客服页
|
||
|
||
- 在线客服
|
||
- 联系售后
|
||
- 帮助中心
|
||
|
||
### 我的设备页
|
||
|
||
- 设备数量概览
|
||
- 添加设备入口
|
||
- 设备列表空状态或占位内容
|
||
|
||
### 设备报修页
|
||
|
||
- 报修说明
|
||
- 故障图片上传占位
|
||
- 问题描述输入占位
|
||
- 维修进度入口占位
|
||
|
||
### 问题反馈页
|
||
|
||
- 问题反馈说明
|
||
- 建议内容输入占位
|
||
- 截图上传占位
|
||
- 反馈记录入口占位
|
||
|
||
### 教学视频页
|
||
|
||
- 视频分类说明
|
||
- 使用教程占位列表
|
||
- 安装教程占位列表
|
||
- 健康指导视频占位列表
|
||
|
||
### 关注我们页
|
||
|
||
- 官方公众号信息占位
|
||
- 官方网站入口占位
|
||
- 联系方式占位
|
||
- 社区入口占位
|
||
|
||
## 实现边界
|
||
|
||
- 本次只实现“我的”主页面和其二级页面
|
||
- 其他 Tab 页面先不展开
|
||
- 二级页面优先提供结构和跳转，不实现真实表单提交和接口请求
|
||
- 不新增全局状态管理
|
||
- 不删除任何目录或批量删除任何文件
|