94 lines
2.6 KiB
Markdown
94 lines
2.6 KiB
Markdown
# "我的"页面功能说明
|
||
|
||
## 功能概述
|
||
|
||
新增了"我的"页面，整合了以下功能：
|
||
- 用户信息展示
|
||
- 账户余额查看
|
||
- 预算进度展示
|
||
- 快捷功能入口
|
||
- 退出登录
|
||
|
||
## 页面结构
|
||
|
||
### 1. 用户信息卡片
|
||
- 显示用户头像（emoji）
|
||
- 显示用户昵称/用户名
|
||
- 显示用户ID
|
||
|
||
### 2. 账户余额卡片（可点击）
|
||
- 显示当前账户余额
|
||
- 显示总收入和总支出
|
||
- 点击可跳转到账户管理页面
|
||
|
||
### 3. 预算卡片（可点击）
|
||
- 显示本月预算进度条
|
||
- 显示预算金额、已用金额、剩余金额
|
||
- 点击可跳转到预算设置页面
|
||
|
||
### 4. 功能菜单
|
||
- 统计分析：跳转到统计页面
|
||
- 账户管理：跳转到账户管理页面
|
||
- 预算设置：跳转到预算设置页面
|
||
|
||
### 5. 退出登录按钮
|
||
- 点击后弹出确认对话框
|
||
- 确认后清除本地存储并跳转到登录页
|
||
|
||
## 技术特点
|
||
|
||
### 1. 滚动功能
|
||
- 使用 `<scroll-view>` 组件实现页面滚动
|
||
- 支持长内容的流畅滚动
|
||
- 底部留有安全区域，避免被导航栏遮挡
|
||
|
||
### 2. 样式设计
|
||
- 延续现有的金色渐变主题风格
|
||
- 使用 rpx 单位，适配不同屏幕尺寸
|
||
- 卡片式布局，清晰美观
|
||
- 添加阴影和圆角，提升视觉效果
|
||
|
||
### 3. 交互体验
|
||
- 卡片点击有视觉反馈（背景色变化）
|
||
- 按钮点击有缩放动画
|
||
- 进度条有动画效果
|
||
- 退出登录有二次确认
|
||
|
||
### 4. 数据加载
|
||
- 页面加载时自动获取用户信息、账户信息、预算信息
|
||
- 使用 computed 计算预算进度百分比
|
||
- 错误处理，避免数据加载失败导致页面崩溃
|
||
|
||
## 导航栏配置
|
||
|
||
在 `pages.json` 中添加了：
|
||
1. 页面路由配置
|
||
2. TabBar 配置（新增"我的"标签）
|
||
|
||
## 图标说明
|
||
|
||
临时使用了 home 图标作为占位符，建议后续替换为专门的"我的"图标。
|
||
|
||
详细说明请查看：`frontend/static/tabbar/ICON_GUIDE.md`
|
||
|
||
## 使用方法
|
||
|
||
1. 启动应用后，底部导航栏会显示4个标签：首页、记账、统计、我的
|
||
2. 点击"我的"标签即可进入该页面
|
||
3. 在页面中可以查看账户信息、预算信息，并快速跳转到相关功能页面
|
||
|
||
## 注意事项
|
||
|
||
1. 确保用户已登录，否则用户信息可能显示不完整
|
||
2. 账户和预算数据需要后端API支持
|
||
3. 图标文件需要替换为合适的"我的"图标
|
||
4. 页面使用了 `scroll-view`，确保内容可以正常滚动
|
||
|
||
## 后续优化建议
|
||
|
||
1. 添加更多个人设置选项（如修改密码、修改昵称等）
|
||
2. 添加数据统计概览（如本月记账天数、最大单笔支出等）
|
||
3. 添加主题切换功能
|
||
4. 添加关于页面和帮助文档入口
|
||
5. 优化用户头像，支持上传自定义头像
|