diff --git a/docs/superpowers/specs/2026-05-07-mine-page-design.md b/docs/superpowers/specs/2026-05-07-mine-page-design.md new file mode 100644 index 0000000..c41bd0b --- /dev/null +++ b/docs/superpowers/specs/2026-05-07-mine-page-design.md @@ -0,0 +1,158 @@ +# 我的页面设计说明 + +**日期:** 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 页面先不展开 +- 二级页面优先提供结构和跳转,不实现真实表单提交和接口请求 +- 不新增全局状态管理 +- 不删除任何目录或批量删除任何文件