# bookkeeping-app

**Repository Path**: yangLLHGS/bookkeeping-app

## Basic Information

- **Project Name**: bookkeeping-app
- **Description**: 基于vue3+vite+Pina+supabase的记账APP
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-30
- **Last Updated**: 2026-01-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, Pinia, Echarts, supabase

## README



# Bookkeeping App

一个基于 Vue 3 的个人记账应用，提供完整的收支记录、统计分析和数据备份功能。

## 功能特性

### 💰 记账功能
- 快速添加收入/支出记录
- 支持分类管理（餐饮、交通、购物等）
- 选择日期和时间
- 添加备注说明
- 图片附件支持

### 📊 数据统计
- 日/周/月收支概览
- 余额卡片展示
- 折线图趋势分析
- 饼图分类占比

### 📅 日历视图
- 按月查看每日记录
- 快速选择日期
- 每日消费标记

### ⚙️ 更多功能
- 深色/浅色主题切换
- 数据本地存储
- 数据备份与恢复
- 用户认证

## 技术栈

- **前端框架**: Vue 3
- **状态管理**: Pinia
- **路由**: Vue Router
- **构建工具**: Vite
- **UI 组件**: 自定义 CSS (玻璃拟态设计)

## 项目结构

```
src/
├── assets/styles/      # 全局样式
├── components/
│   ├── common/         # 通用组件
│   │   ├── BackNavBar.vue
│   │   ├── DatePicker.vue
│   │   ├── DateSelectModal.vue
│   │   ├── FormSection.vue
│   │   ├── ImageUpload.vue
│   │   └── Toast.vue
│   ├── features/       # 功能组件
│   │   ├── AddRecordModal.vue
│   │   ├── BalanceCard.vue
│   │   ├── LineChart.vue
│   │   ├── PieChart.vue
│   │   ├── QuickActions.vue
│   │   └── TransactionItem.vue
│   └── layout/         # 布局组件
│       ├── Header.vue
│       └── TabBar.vue
├── router/             # 路由配置
├── stores/             # Pinia 状态管理
│   ├── records.js      # 记录数据
│   ├── ui.js           # UI 状态
│   └── user.js         # 用户数据
├── utils/              # 工具函数
│   ├── date.js
│   ├── format.js
│   ├── message.js
│   └── storage.js
└── views/              # 页面视图
    ├── Auth.vue
    ├── Backup.vue
    ├── Calendar.vue
    ├── FieldEditPage.vue
    ├── Home.vue
    ├── Profile.vue
    ├── Settings.vue
    ├── Stats.vue
    └── Welcome.vue
```

## 快速开始

### 环境要求
- Node.js 16+
- npm 或 yarn

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
npm run dev
```

应用将在 http://localhost:3000 启动。

### 生产构建

```bash
npm run build
```

### 预览生产构建

```bash
npm run preview
```

## 使用说明

1. **首次使用**: 在欢迎页面完成注册/登录
2. **添加记录**: 点击底部tabbar的"+"按钮或首页快捷操作
3. **查看统计**: 进入"统计"页面查看收支分析
4. **日历视图**: 进入"日历"页面按日期浏览
5. **数据备份**: 进入"我的"页面进行数据备份

## 存储方式

- 使用 localStorage 进行本地数据持久化
- 支持数据导出为 JSON 格式
- 支持数据导入恢复

## License

MIT License