个人记账应用 — 记录每一笔收支，掌握每一分钱的去向。
- 收支双模式：支持记录支出和收入，一键切换
- 二级分类：10 个支出大类 + 6 个收入大类，每个大类下有多级小类
- 自定义分类：可增删改自己的分类，预置分类锁保护
- 明细列表：按时间倒序展示，支持按类型/分类筛选
- 月度统计：总收入、总支出、结余一目了然，含分类排行柱状图
- 本地存储：数据保存在浏览器 localStorage，无需联网，隐私安全
底部 4 个 Tab 切换不同页面：
| Tab |
功能 |
| ✏️ 记账 |
添加收支记录，支持支出/收入切换 |
| 📋 明细 |
按时间查看所有记录，支持筛选和删除 |
| 📊 统计 |
月度收支总览 + 分类排行 |
| 🏷️ 分类 |
管理支出/收入的自定义分类 |
| 层级 |
技术 |
| 框架 |
React 18 |
| 语言 |
TypeScript |
| 构建 |
Vite 5 |
| 存储 |
localStorage |
| 样式 |
CSS |
# 安装依赖
npm install
# 开发模式（浏览器打开 http://localhost:5173）
npm run dev
# 生产打包
npm run build
# 预览打包产物
npm run preview
src/
├── types.ts # 类型定义、预置分类
├── storage.ts # localStorage 数据读写
├── App.tsx # 根组件（Tab 切换）
├── components/
│ ├── AddExpense.tsx # 记账页面
│ ├── CategorySelector.tsx # 分类级联选择器
│ ├── CategoryManager.tsx # 分类管理页面
│ ├── ExpenseList.tsx # 明细列表页面
│ └── MonthlyStats.tsx # 月度统计页面
└── styles/
└── app.css # 全局样式
| 大类 |
小类 |
| 🍜 餐饮饮食 |
早餐、午餐、晚餐、零食饮料、外卖、聚餐 |
| 🚗 交通出行 |
公交地铁、打车、加油、停车费、火车机票 |
| 🛒 购物消费 |
日用品、电子产品、服饰鞋包、美妆护肤、家居用品 |
| 🏠 住房居住 |
房租、水电费、物业费、维修、宽带网费 |
| 🎮 娱乐休闲 |
电影、游戏、旅游度假、运动健身、KTV酒吧 |
| 💊 医疗健康 |
看病买药、体检、牙科、保健品 |
| 📚 教育学习 |
书籍、课程培训、考试报名、文具 |
| 🎁 人情往来 |
送礼、红包、聚餐AA、捐款 |
| 💰 投资理财 |
股票基金、保险、储蓄 |
| 📦 其他支出 |
快递、手续费、其他 |
| 大类 |
小类 |
| 💼 工资薪水 |
月薪、年终奖、绩效奖金、加班费 |
| 📈 投资理财 |
股票基金、利息、分红、租金收入 |
| 💻 兼职副业 |
接外包、自媒体、稿费、咨询 |
| 🎁 红包礼金 |
节日红包、生日礼金、结婚礼金、压岁钱 |
| ↩️ 退款报销 |
购物退款、报销款、押金退回 |
| 📦 其他收入 |
二手转让、零花钱、其他 |
MIT