财务记账

一个使用 React、Vite、Recharts 和 lucide-react 构建的中文记账应用，用于记录收入、支出，并按类别查看支出分布。

功能

• 添加收入或支出记录
• 按类型和分类筛选交易
• 删除交易记录
• 自动计算总收入、总支出和结余
• 使用 Recharts 按类别展示支出柱状图
• 使用 lucide-react 提供一致的线性图标

技术栈

• React 19：组件化 UI 和状态管理
• Vite：本地开发服务器和生产构建
• Recharts：支出分类柱状图
• lucide-react：标题、按钮和操作图标
• ESLint：代码质量检查
• Vitest + Testing Library：业务工具函数与核心界面流程测试

项目结构

src/
  App.jsx                    # 应用状态和页面组合
  App.test.jsx               # 核心界面流程测试
  App.css                    # 应用样式
  components/
    ExpenseChart.jsx         # 按类别汇总支出的图表
    Summary.jsx              # 收入、支出、结余摘要
    TransactionForm.jsx      # 添加交易表单
    TransactionFilters.jsx   # 交易筛选控件
    TransactionList.jsx      # 交易列表容器
    TransactionRow.jsx       # 单条交易记录
  data/
    transactions.js          # 初始交易数据、分类和交易类型常量
  utils/
    transactions.js          # 金额格式化、汇总和分类聚合逻辑
    transactions.test.js     # 业务计算工具测试

本地运行

npm install
npm run dev

然后在浏览器打开 http://localhost:5173。如果该端口被占用，Vite 会自动切换到下一个可用端口，请以终端输出的地址为准。

验证

npm run lint
npm run test:run
npm run build

npm run test 会启动 Vitest 监听模式，npm run test:run 用于一次性 CI/提交前验证。npm run build 会生成 dist/ 目录；Recharts 已懒加载，图表相关代码会被拆到独立 chunk。

测试覆盖

当前测试覆盖初始摘要金额、添加收入/支出、删除交易、按类型/分类筛选、表单校验，以及 src/utils/transactions.js 中的汇总和分类聚合逻辑。图表数据通过工具函数测试，避免测试依赖 Recharts 内部 DOM。

开发说明

• 组件标题和操作按钮统一使用 lucide-react 图标。
• 交易示例数据和分类维护在 src/data/transactions.js。
• 收入、支出、结余和分类支出聚合逻辑维护在 src/utils/transactions.js。
• 新增 UI 文案保持中文，金额显示使用人民币符号 ¥。
• Vitest 使用 vite.config.js 中的 jsdom 环境配置。
• 当前 npm audit 会报告构建链依赖风险；处理前请评估版本兼容性，不要直接盲目运行 npm audit fix。