- 实现完整的数据分析和图表功能 - 创建 ECharts 图表组件(饼图、折线图、柱状图) - 开发分析服务和数据处理逻辑 - 实现智能洞察和趋势分析 - 支持灵活的时间范围筛选 - 完善用户体验和界面优化 - 添加动画和交互效果组件 - 创建骨架屏加载状态 - 实现悬浮操作按钮和快捷操作 - 开发完整的帮助系统 - 支持手势操作和键盘快捷键 - 完成分类和账户管理功能 - 创建分类管理界面和表单 - 实现账户管理和余额统计 - 支持自定义图标和颜色 - 完善数据管理页面 - 实现通知监听和自动记账功能 - 配置 Android 开发环境 - 开发通知监听 Capacitor 插件 - 实现前端通知处理逻辑 - 支持多平台支付通知解析 - 技术改进 - 完善 TypeScript 类型定义 - 优化组件架构和状态管理 - 增强 CSS 动画系统 - 提升移动端适配性
个人账单应用
一个现代化的个人财务管理应用,支持自动读取支付通知记账、手动记账、数据分析和云同步功能。
技术栈
- 前端: Vue.js 3 + Tailwind CSS + TypeScript
- 移动端: Capacitor.js (Android)
- 后端: Node.js + Express.js + MongoDB
- 数据库: SQLite (本地) + MongoDB (云端)
核心功能
- 🔔 自动读取支付宝、微信等支付通知进行记账
- 📝 手动添加、编辑、删除交易记录
- 🔍 强大的搜索和筛选功能
- 📊 数据分析和趋势图表
- ☁️ 云端同步和离线支持
- 🎨 现代化的 neumorphic 设计风格
开发环境
- 开发平台: Windows 11
- 服务器: 阿里云 Ubuntu 24.04
- Git 服务器: 阿里云自建
项目结构
bill/
├── frontend/ # Vue.js 前端应用
├── backend/ # Node.js 后端 API
├── .kiro/ # Kiro IDE 配置和规格文档
│ └── specs/ # 项目规格说明
├── android/ # Android 项目 (Capacitor 生成)
└── docs/ # 项目文档
开发计划
项目采用离线优先的开发策略:
- ✅ 建立 Git 版本控制和基础架构
- 🔄 实现本地数据模型和离线功能
- 📱 开发核心交易管理界面
- 🔔 集成通知监听和自动记账
- 📊 添加数据分析和图表功能
- ☁️ 后期添加云端同步功能
快速开始
前端开发
cd frontend
npm install
npm run dev
后端开发
cd backend
npm install
npm run dev
Android 构建
cd frontend
npm run build
npx cap sync android
npx cap open android
贡献指南
- Fork 项目
- 创建功能分支 (
git checkout -b feature/AmazingFeature
) - 提交更改 (
git commit -m 'Add some AmazingFeature'
) - 推送到分支 (
git push origin feature/AmazingFeature
) - 打开 Pull Request
许可证
本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。
Description
Languages
Markdown
100%