# 我的页面设计说明

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