强宝爱记账前端

基于 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

安装依赖

npm install

运行项目

HBuilderX

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

CLI

npm run dev:h5

配置后端API地址

修改 utils/request.js 中的 BASE_URL：

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集成）