206 lines
5.9 KiB
Markdown
206 lines
5.9 KiB
Markdown
# 家庭记账APP - 前端开发文档
|
||
|
||
## 项目概述
|
||
|
||
这是一个基于 uni-app 框架开发的跨平台家庭记账应用前端，支持个人记账和家庭共享记账功能。
|
||
|
||
## 已实现功能
|
||
|
||
### 1. 账单管理
|
||
- ✅ 添加账单（收入/支出）
|
||
- ✅ 账单列表（按日期分组显示）
|
||
- ✅ 月份切换查看
|
||
- ✅ 本月收支统计
|
||
- ✅ 多种分类（餐饮、交通、购物、娱乐等）
|
||
- ✅ 支持备注和日期选择
|
||
|
||
### 2. 家庭管理
|
||
- ✅ 创建家庭
|
||
- ✅ 加入家庭（通过邀请码）
|
||
- ✅ 查看家庭信息
|
||
- ✅ 查看家庭成员列表
|
||
- ✅ 家主功能：
|
||
- 生成/重新生成邀请码
|
||
- 复制邀请码
|
||
- 移除家庭成员
|
||
- ✅ 退出家庭
|
||
- ⏳ 转让家主（待实现）
|
||
|
||
### 3. 统计分析
|
||
- ✅ 收支概览（收入、支出、结余）
|
||
- ✅ 月份切换
|
||
- ✅ 支出分类统计（带进度条和百分比）
|
||
- ✅ 收支趋势图（最近7天）
|
||
- ✅ 可视化图表展示
|
||
|
||
### 4. 用户中心
|
||
- ✅ 登录/注册
|
||
- ✅ 个人信息管理
|
||
- ✅ 用户协议和隐私政策
|
||
|
||
## 技术栈
|
||
|
||
- **框架**: uni-app (Vue 3)
|
||
- **状态管理**: Vuex
|
||
- **UI组件**: uni-ui
|
||
- **HTTP请求**: luch-request
|
||
- **样式**: SCSS
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
resources/mobile/
|
||
├── api/ # API接口模块
|
||
│ ├── index.js # API自动导入
|
||
│ └── modules/
|
||
│ ├── auth.js # 认证相关API
|
||
│ ├── bill.js # 账单相关API
|
||
│ ├── family.js # 家庭管理API
|
||
│ ├── sms.js # 短信相关API
|
||
│ └── statistics.js # 统计分析API
|
||
├── components/ # 公共组件
|
||
│ ├── pages/ # 页面组件
|
||
│ └── tab-bar/ # 底部导航栏
|
||
├── config/ # 配置文件
|
||
├── mixins/ # 混入
|
||
│ └── auth.js # 登录验证混入
|
||
├── pages/ # 页面
|
||
│ ├── index/ # 首页
|
||
│ ├── account/ # 账单管理
|
||
│ │ ├── bill/ # 账单页面
|
||
│ │ │ ├── add.vue # 添加账单
|
||
│ │ │ └── index.vue # 账单列表
|
||
│ │ └── statistics/ # 统计分析
|
||
│ │ └── index.vue # 统计页面
|
||
│ ├── family/ # 家庭管理
|
||
│ │ ├── index.vue # 家庭主页
|
||
│ │ ├── create.vue # 创建家庭
|
||
│ │ └── join.vue # 加入家庭
|
||
│ └── ucenter/ # 用户中心
|
||
│ ├── index.vue # 个人中心
|
||
│ ├── login/ # 登录
|
||
│ └── register/ # 注册
|
||
├── static/ # 静态资源
|
||
├── store/ # Vuex状态管理
|
||
│ ├── index.js # Store自动导入
|
||
│ └── modules/
|
||
│ ├── user.js # 用户状态
|
||
│ └── family.js # 家庭状态
|
||
└── utils/ # 工具函数
|
||
├── auth.js # 认证工具
|
||
├── request.js # HTTP请求封装
|
||
└── tool.js # 通用工具
|
||
```
|
||
|
||
## API接口说明
|
||
|
||
### 账单API (`/api/bill/*`)
|
||
- `GET /api/bill/list` - 获取账单列表
|
||
- `POST /api/bill/add` - 添加账单
|
||
- `POST /api/bill/edit` - 编辑账单
|
||
- `POST /api/bill/delete` - 删除账单
|
||
- `GET /api/bill/detail` - 获取账单详情
|
||
|
||
### 家庭API (`/api/family/*`)
|
||
- `GET /api/family/info` - 获取家庭信息
|
||
- `POST /api/family/create` - 创建家庭
|
||
- `POST /api/family/join` - 加入家庭
|
||
- `POST /api/family/leave` - 退出家庭
|
||
- `GET /api/family/invite-code` - 获取邀请码
|
||
- `POST /api/family/regenerate-invite-code` - 重新生成邀请码
|
||
- `POST /api/family/remove-member` - 移除家庭成员
|
||
- `GET /api/family/members` - 获取家庭成员列表
|
||
- `POST /api/family/transfer-owner` - 转让家主
|
||
|
||
### 统计API (`/api/statistics/*`)
|
||
- `GET /api/statistics/overview` - 获取统计概览
|
||
- `GET /api/statistics/trend` - 获取收支趋势
|
||
- `GET /api/statistics/category` - 获取分类统计
|
||
- `GET /api/statistics/monthly` - 获取月度报表
|
||
- `GET /api/statistics/yearly` - 获取年度报表
|
||
|
||
## 功能特点
|
||
|
||
### 1. 家庭管理
|
||
- 一个人只能创建或加入一个家庭
|
||
- 家主可以管理家庭成员（添加、移除）
|
||
- 家主可以生成邀请码邀请成员
|
||
- 支持转让家主功能
|
||
|
||
### 2. 账单分类
|
||
- 支出分类：餐饮、交通、购物、娱乐、医疗、教育、居住、其他
|
||
- 收入分类：工资、奖金、投资、兼职、其他
|
||
- 每个分类都有独立的图标和颜色
|
||
|
||
### 3. 数据可视化
|
||
- 支出分类统计使用进度条展示占比
|
||
- 收支趋势使用柱状图展示最近7天数据
|
||
- 支持月份切换查看不同时间段的数据
|
||
|
||
### 4. 用户体验
|
||
- 渐变色主题设计
|
||
- 流畅的动画效果
|
||
- 下拉刷新支持
|
||
- 加载状态提示
|
||
- 空数据友好提示
|
||
|
||
## 开发说明
|
||
|
||
### 环境要求
|
||
- Node.js >= 14
|
||
- HBuilderX 或 VS Code
|
||
- uni-app CLI
|
||
|
||
### 安装依赖
|
||
```bash
|
||
cd resources/mobile
|
||
yarn install
|
||
```
|
||
|
||
### 运行项目
|
||
- 使用 HBuilderX 运行到不同平台
|
||
- 或使用 CLI 命令：`npm run dev:mp-weixin` (微信小程序)
|
||
|
||
### 构建项目
|
||
```bash
|
||
npm run build:mp-weixin
|
||
```
|
||
|
||
## 注意事项
|
||
|
||
1. **API接口**: 需要后端提供对应的接口支持，返回格式统一为：
|
||
```json
|
||
{
|
||
"code": 200,
|
||
"message": "success",
|
||
"data": {}
|
||
}
|
||
```
|
||
|
||
2. **Token认证**: 所有需要登录的接口都需要在请求头中携带Token：
|
||
```
|
||
Authorization: Bearer {token}
|
||
```
|
||
|
||
3. **家庭限制**: 用户只能加入一个家庭，后端需要验证此限制
|
||
|
||
4. **邀请码**: 邀请码建议使用10位随机字符串，确保唯一性
|
||
|
||
5. **日期格式**: 统一使用 `YYYY-MM-DD` 格式
|
||
|
||
## 待优化功能
|
||
|
||
1. 账单编辑功能
|
||
2. 转让家主功能
|
||
3. 账单搜索和筛选
|
||
4. 导出数据功能
|
||
5. 预算管理
|
||
6. 账单提醒功能
|
||
7. 更多的统计图表（饼图、折线图等）
|
||
|
||
## 作者
|
||
molong <ycgpp@126.com>
|
||
|
||
## 许可证
|
||
MIT
|