docs: add mine page design spec

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 页面先不展开
+- 二级页面优先提供结构和跳转，不实现真实表单提交和接口请求
+- 不新增全局状态管理
+- 不删除任何目录或批量删除任何文件