# 家庭记账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