# sumui-front

**Repository Path**: sumuy/sumui-front

## Basic Information

- **Project Name**: sumui-front
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-02-21
- **Last Updated**: 2025-02-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

my-project/
├── src/
│   ├── assets/
│   ├── components/
│   ├── router/
│   ├── store/
│   ├── utils/
│   ├── views/
│   ├── App.vue
│   └── main.js
├── public/
├── package.json
└── vue.config.js

## 需求清单

### 1. 账单管理功能
- 支持多账本管理(日常账本、旅行账本等)
- 记录账单基本信息:类别、日期、金额、支付方式
- 支持账单分类管理
- 支持收入/支出记录

### 2. 数据统计与展示
- 展示账单总收入/支出统计
- 提供账单列表浏览
- 支持按时间、类别等维度筛选账单
- 展示账单趋势分析

### 3. 移动端适配
- 响应式布局,适配手机等移动设备
- 优化移动端交互体验
- 调整移动端字体大小和间距

### 4. 用户体验
- 简洁直观的界面设计
- 便捷的账单录入流程
- 清晰的数据可视化展示

### 5. 技术实现
- 基于 Vue 3 开发
- 使用 Ant Design Vue 组件库
- 采用 Vue Router 实现路由管理
- 文件结构清晰,遵循最佳实践

## 数据库设计

### 1. 账本表(books)
| 字段名 | 类型 | 说明 |
|--------|------|------|
| id | int | 主键 |
| name | varchar(50) | 账本名称 |
| type | varchar(20) | 账本类型(日常、旅行等) |
| created_at | timestamp | 创建时间 |
| updated_at | timestamp | 更新时间 |

### 2. 账单表(bills)
| 字段名 | 类型 | 说明 |
|--------|------|------|
| id | int | 主键 |
| book_id | int | 所属账本ID(外键) |
| category_id | int | 分类ID(外键) |
| amount | decimal(10,2) | 金额 |
| type | tinyint | 类型(1:支出 2:收入) |
| payment_method | varchar(50) | 支付方式 |
| bill_date | date | 账单日期 |
| remark | varchar(255) | 备注 |
| created_at | timestamp | 创建时间 |
| updated_at | timestamp | 更新时间 |

### 3. 账单分类表(categories)
| 字段名 | 类型 | 说明 |
|--------|------|------|
| id | int | 主键 |
| name | varchar(50) | 分类名称 |
| type | tinyint | 类型(1:支出 2:收入) |
| icon | varchar(50) | 分类图标 |
| created_at | timestamp | 创建时间 |
| updated_at | timestamp | 更新时间 |

### 4. 用户表(users)
| 字段名 | 类型 | 说明 |
|--------|------|------|
| id | int | 主键 |
| username | varchar(50) | 用户名 |
| password | varchar(255) | 密码(加密存储) |
| email | varchar(100) | 邮箱 |
| created_at | timestamp | 创建时间 |
| updated_at | timestamp | 更新时间 |

### 5. 用户账本关联表(user_books)
| 字段名 | 类型 | 说明 |
|--------|------|------|
| id | int | 主键 |
| user_id | int | 用户ID(外键) |
| book_id | int | 账本ID(外键) |
| role | varchar(20) | 权限角色(owner/editor/viewer) |
| created_at | timestamp | 创建时间 |
| updated_at | timestamp | 更新时间 |

```sql
-- 创建数据库
CREATE DATABASE IF NOT EXISTS bill_management DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;

USE bill_management;

-- 用户表
CREATE TABLE users (
    id BIGINT UNSIGNED NOT NULL AUTO_INCREMENT,
    username VARCHAR(50) NOT NULL UNIQUE,
    password VARCHAR(255) NOT NULL,
    email VARCHAR(100) NOT NULL UNIQUE,
    avatar VARCHAR(255),
    status TINYINT NOT NULL DEFAULT 1 COMMENT '用户状态：1-正常，0-禁用',
    created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户表';

-- 账本表
CREATE TABLE books (
    id BIGINT UNSIGNED NOT NULL AUTO_INCREMENT,
    name VARCHAR(50) NOT NULL,
    type VARCHAR(20) NOT NULL COMMENT '账本类型：daily-日常，travel-旅行等',
    description TEXT,
    cover_image VARCHAR(255),
    status TINYINT NOT NULL DEFAULT 1 COMMENT '账本状态：1-正常，0-已删除',
    created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='账本表';

-- 用户账本关联表
CREATE TABLE user_books (
    id BIGINT UNSIGNED NOT NULL AUTO_INCREMENT,
    user_id BIGINT UNSIGNED NOT NULL,
    book_id BIGINT UNSIGNED NOT NULL,
    role VARCHAR(20) NOT NULL COMMENT '权限角色：owner-拥有者，editor-编辑者，viewer-查看者',
    created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    PRIMARY KEY (id),
    UNIQUE KEY `uk_user_book` (user_id, book_id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户账本关联表';

-- 账单分类表
CREATE TABLE categories (
    id BIGINT UNSIGNED NOT NULL AUTO_INCREMENT,
    name VARCHAR(50) NOT NULL,
    type TINYINT NOT NULL COMMENT '类型：1-支出，2-收入',
    icon VARCHAR(50),
    parent_id BIGINT UNSIGNED DEFAULT NULL COMMENT '父分类ID，用于支持二级分类',
    created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='账单分类表';

-- 账单表
CREATE TABLE bills (
    id BIGINT UNSIGNED NOT NULL AUTO_INCREMENT,
    book_id BIGINT UNSIGNED NOT NULL,
    category_id BIGINT UNSIGNED NOT NULL,
    amount DECIMAL(12,2) NOT NULL COMMENT '金额',
    type TINYINT NOT NULL COMMENT '类型：1-支出，2-收入',
    payment_method VARCHAR(50) NOT NULL COMMENT '支付方式',
    bill_date DATE NOT NULL COMMENT '账单日期',
    remark VARCHAR(255),
    location VARCHAR(255) COMMENT '消费地点',
    images TEXT COMMENT '票据图片，JSON数组存储多个图片URL',
    created_by BIGINT UNSIGNED NOT NULL COMMENT '创建人ID',
    created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    PRIMARY KEY (id),
    KEY `idx_book_date` (book_id, bill_date)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='账单表';

-- 标签表
CREATE TABLE tags (
    id BIGINT UNSIGNED NOT NULL AUTO_INCREMENT,
    name VARCHAR(50) NOT NULL,
    created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='标签表';

-- 账单标签关联表
CREATE TABLE bill_tags (
    bill_id BIGINT UNSIGNED NOT NULL,
    tag_id BIGINT UNSIGNED NOT NULL,
    created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
    PRIMARY KEY (bill_id, tag_id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='账单标签关联表';
```