# "我的"页面功能说明

## 功能概述

新增了"我的"页面，整合了以下功能：
- 用户信息展示
- 账户余额查看
- 预算进度展示
- 快捷功能入口
- 退出登录

## 页面结构

### 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. 优化用户头像，支持上传自定义头像