159 lines
3.9 KiB
Markdown
159 lines
3.9 KiB
Markdown
# 强宝爱记账前端
|
||
|
||
基于 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集成）
|