# 强宝爱记账前端

基于 uni-app + Vue 3 开发的记账应用前端项目。

## 功能特性

- ✅ 用户登录/注册
- ✅ 手动记账
- ✅ OCR识别记账（支持截图识别金额）
- ✅ 账单列表展示（按日期分组）
- ✅ 统计功能（按日/周/月统计）
- ✅ 分类管理

## 技术栈

- **框架**: uni-app + Vue 3
- **状态管理**: Pinia
- **UI组件**: uni-ui
- **HTTP请求**: uni.request 封装

## 项目结构

```
frontend/
├── pages/                    # 页面
│   ├── login/               # 登录页
│   ├── index/               # 首页（账单列表）
│   ├── add/                 # 添加账单
│   └── statistics/          # 统计页
├── api/                     # API接口封装
│   ├── auth.js             # 认证接口
│   ├── bill.js             # 账单接口
│   ├── category.js         # 分类接口
│   ├── statistics.js       # 统计接口
│   └── ocr.js              # OCR接口
├── store/                   # Pinia状态管理
│   └── user.js             # 用户状态
├── utils/                   # 工具函数
│   ├── request.js          # HTTP请求封装
│   └── date.js             # 日期工具
├── static/                  # 静态资源
├── App.vue                  # 应用根组件
├── main.js                  # 入口文件
└── pages.json               # 页面配置
```

## 开发说明

### 环境要求

- Node.js >= 14
- HBuilderX（推荐）或 uni-app CLI

### 安装依赖

```bash
npm install
```

### 运行项目

#### HBuilderX

1. 使用 HBuilderX 打开项目
2. 选择运行 -> 运行到浏览器 -> Chrome

#### CLI

```bash
npm run dev:h5
```

### 配置后端API地址

修改 `utils/request.js` 中的 `BASE_URL`：

```javascript
const BASE_URL = process.env.NODE_ENV === 'development' 
  ? 'http://localhost:8080/api'  // 开发环境
  : 'https://your-api-domain.com/api'  // 生产环境
```

## 页面说明

### 登录页 (`pages/login/login.vue`)

- 支持登录和注册
- 自动保存token和用户信息
- 登录成功后跳转到首页

### 首页 (`pages/index/index.vue`)

- 显示本月收支统计
- 账单列表按日期分组展示
- 支持下拉刷新
- 点击账单可查看详情（待完善）

### 添加账单页 (`pages/add/add.vue`)

- **手动记账**: 手动输入分类、金额、日期、备注
- **OCR识别**: 
  - 选择图片（相机/相册）
  - 上传识别
  - 自动填充金额、商户、日期
  - 可手动修改识别结果

### 统计页 (`pages/statistics/statistics.vue`)

- 按日/周/月切换统计
- 显示总收入、总支出、余额
- 分类统计展示（带进度条）

## API接口

### 认证接口

- `POST /api/auth/register` - 注册
- `POST /api/auth/login` - 登录

### 账单接口

- `GET /api/bills` - 获取账单列表
- `POST /api/bills` - 创建账单
- `GET /api/bills/:id` - 获取账单详情
- `PUT /api/bills/:id` - 更新账单
- `DELETE /api/bills/:id` - 删除账单

### 分类接口

- `GET /api/categories` - 获取分类列表
- `POST /api/categories` - 创建分类
- `PUT /api/categories/:id` - 更新分类
- `DELETE /api/categories/:id` - 删除分类

### 统计接口

- `GET /api/statistics/daily` - 按日统计
- `GET /api/statistics/weekly` - 按周统计
- `GET /api/statistics/monthly` - 按月统计

### OCR接口

- `POST /api/ocr/recognize` - OCR识别

## 注意事项

1. **登录状态**: 所有页面都会检查登录状态，未登录会自动跳转到登录页
2. **Token管理**: Token存储在本地存储中，过期后会自动跳转登录
3. **图片上传**: OCR功能需要上传图片，注意图片大小限制
4. **平台差异**: 注意H5和App平台的API差异，部分功能可能需要平台判断

## 待完善功能

- [ ] 账单编辑功能
- [ ] 账单删除功能
- [ ] 分类管理页面
- [ ] 账单详情页面
- [ ] 图表展示（echarts集成）