Jafeng
4ea91a0f59
任务3.1 实现基础 UI 组件库 - 创建 BaseIcon 组件，支持 emoji 和 SVG 图标 - 实现 CategoryIcon 组件，用于分类图标显示 - 开发 AmountInput 组件，支持金额输入和类型切换 - 创建 DatePicker 组件，支持日期选择和快捷日期 - 实现 BaseSelect 组件，支持搜索和自定义选项 - 添加 LoadingSpinner 和 EmptyState 组件 - 扩展 Tailwind 配置，完善设计系统色彩 任务3.2 创建交易列表和卡片组件 - 实现 TransactionCard 组件，展示交易详情 - 创建 TransactionList 组件，支持分组显示和批量操作 - 添加日期分组和汇总功能 - 实现无限滚动和加载更多功能 - 支持选择模式和批量删除 - 更新 TransactionsView 使用新组件 任务3.3 开发交易添加和编辑表单 - 创建 TransactionForm 组件，支持添加和编辑交易 - 集成所有输入组件（金额、分类、账户、日期等） - 实现表单验证和数据清理 - 添加重复交易检测功能 - 创建 AddTransactionView 页面 - 配置路由支持添加和编辑交易 任务3.4 实现搜索和筛选功能 - 创建 TransactionSearch 组件，支持智能搜索 - 实现搜索建议和搜索历史功能 - 开发 TransactionFilter 组件，支持多维度筛选 - 添加快速筛选标签和日期预设 - 集成搜索和筛选到 TransactionsView - 实现实时筛选和结果统计 核心特性： - 完整的交易管理界面（列表、添加、编辑、搜索、筛选） - 现代化的 neumorphic 设计风格 - 响应式布局和移动端优化 - 智能搜索和多维度筛选 - 用户友好的交互体验 - 完整的表单验证和错误处理
个人账单应用
一个现代化的个人财务管理应用，支持自动读取支付通知记账、手动记账、数据分析和云同步功能。
技术栈
- 前端: 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 文件了解详情。