# VibeCodingTest

**Repository Path**: chouchousgl_admin/vibe-coding-test

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-21
- **Last Updated**: 2026-07-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 💰 记账App

> 基于浏览器的个人记账 Web 应用，无需安装，打开即用。数据存储在浏览器本地，无需联网。

## ✨ 功能特性

- **📝 记一笔** — 记录每笔开销，支持金额、日期、两级分类、备注
- **📋 消费历史** — 按时间倒序展示，支持按月、按分类筛选，支持删除
- **📊 消费统计** — 月度总览（总支出、日均支出）、分类饼图、近6月趋势图
- **🏷️ 两级分类** — 9 个一级分类 + 44 个二级小类，覆盖日常所有消费场景
- **💾 本地存储** — 基于 IndexedDB，数据保存在浏览器中，离线可用
- **📱 响应式** — 适配电脑、平板、手机浏览器

## 🚀 快速开始

```bash
# 1. 进入项目目录
cd "记账App"

# 2. 安装依赖（仅首次）
npm install

# 3. 启动开发服务器
npm run dev

# 4. 打开浏览器访问 http://localhost:5173
```

## 📦 构建部署

```bash
# 构建生产版本（输出到 dist/ 目录）
npm run build

# 预览生产版本
npm run preview
```

`dist/` 目录可部署到任何静态服务器（Nginx、GitHub Pages、Gitee Pages 等）。

## 🛠️ 技术栈

| 层面 | 选型 | 说明 |
|------|------|------|
| 前端框架 | React 18 | 构建用户界面 |
| 开发语言 | TypeScript | 类型安全 |
| UI 组件库 | Ant Design 5 | 阿里出品，中文文档完善 |
| 图表库 | ECharts 5 | 饼图、折线图等统计图表 |
| 数据库 | Dexie.js (IndexedDB) | 浏览器本地数据库 |
| 状态管理 | Zustand | 轻量级状态管理 |
| 路由 | React Router v6 | 前端路由（Hash 模式） |
| 构建工具 | Vite 5 | 极速开发与构建 |
| 日期处理 | dayjs | 轻量日期库 |

## 📁 项目结构

```
记账App/
├── src/
│   ├── db/
│   │   └── index.ts             # Dexie.js 数据库定义和 CRUD 操作
│   ├── components/
│   │   └── AppLayout.tsx        # 侧边栏布局 + 导航
│   ├── pages/
│   │   ├── AddExpense.tsx       # 记一笔页面
│   │   ├── ExpenseList.tsx      # 消费历史页面
│   │   └── Statistics.tsx       # 消费统计页面
│   ├── stores/
│   │   └── expenseStore.ts      # Zustand 状态管理
│   ├── utils/
│   │   └── categories.ts        # 两级分类数据定义
│   ├── App.tsx                  # 根组件（路由配置）
│   ├── main.tsx                 # 应用入口
│   ├── index.css                # 全局样式
│   └── env.d.ts                 # TypeScript 类型声明
├── index.html                   # HTML 入口
├── vite.config.ts               # Vite 配置
├── package.json
├── tsconfig.json
└── README.md
```

## 🏷️ 消费分类

| 一级分类 | 二级小类 |
|----------|----------|
| 🍽️ 餐饮美食 | 早午晚餐、零食饮料、水果生鲜、外卖配送、聚餐请客 |
| 🚗 交通出行 | 公交地铁、出租车/网约车、加油充电、停车费、火车飞机 |
| 🛒 购物消费 | 服饰鞋包、数码产品、家居用品、个护美妆、日用杂货 |
| 🏠 住房生活 | 房租月供、水电燃气、物业费、维修保养、家居装修 |
| 💊 医疗健康 | 看病挂号、药品购买、体检检查、运动健身、保健养生 |
| 🎮 休闲娱乐 | 电影演出、游戏充值、旅游度假、运动健身、宠物开销 |
| 🎁 人情往来 | 请客送礼、红包礼金、孝敬长辈、慈善捐款 |
| 📚 教育学习 | 书籍资料、培训课程、考试报名、文具用品 |
| 💰 其他支出 | 金融服务、快递物流、意外损失、其他杂项 |

## 📄 开源协议

MIT License