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