Jafeng
bc998c35c7
- 建立基础的 Git 仓库结构 - 配置适用于 Vue.js + Node.js + Android 的 .gitignore - 添加项目说明文档和开发计划 - 包含 Kiro IDE 规格文档和项目计划
7.6 KiB
7.6 KiB
实施计划
项目约束条件
-
开发环境: Windows 11
-
服务器环境: 阿里云 Ubuntu 24.04
-
Git 服务器: 阿里云自建 Git 服务
-
开发优先级: 优先实现离线本地功能，云端登录功能可后置
-
版本管理: 必须建立完整的 Git 版本控制
-
1. 建立项目版本管理和基础架构
-
[-] 1.1 初始化 Git 版本控制
- 在阿里云自建 Git 服务器上创建项目仓库
- 配置 Windows 11 开发环境的 Git 客户端和 SSH 密钥
- 建立 .gitignore 文件和基础的分支管理策略
- 需求: 项目管理基础
-
1.2 搭建前端项目基础架构
- 创建 Vue.js 前端项目，配置 Tailwind CSS 和基础路由
- 配置 Vite 构建工具和开发服务器
- 建立组件目录结构和基础样式系统
- 需求: 6.1, 6.6
-
1.3 配置 Capacitor 和本地存储
- 将 Capacitor 添加到 Vue 项目，生成 Android 项目结构
- 集成 Capacitor SQLite 插件，配置本地数据库
- 创建本地数据访问层和基础 CRUD 操作
- 需求: 7.1, 7.2
-
-
2. 实现本地数据模型和离线功能
-
2.1 创建本地数据模型
- 设计本地 SQLite 数据库表结构（交易、分类、账户）
- 实现本地数据模型的 TypeScript 接口定义
- 创建数据验证和格式化工具函数
- 需求: 2.1, 8.1, 8.3
-
2.2 实现本地数据 CRUD 操作
- 开发本地交易数据的增删改查功能
- 实现分类和账户的本地管理功能
- 创建数据迁移和版本管理机制
- 需求: 2.2, 2.3, 2.4, 8.2, 8.4
-
2.3 建立离线优先的数据架构
- 实现本地数据的状态管理（Pinia store）
- 创建离线模式的用户界面和提示
- 建立数据同步标记和冲突检测机制
- 需求: 7.1, 7.2, 7.4
-
-
3. 开发核心交易管理界面
-
3.1 实现基础 UI 组件库
- 创建符合 neumorphic 设计风格的基础组件（按钮、输入框、卡片）
- 实现温暖现代主义色彩系统和字体层级
- 开发图标系统和分类图标组件
- 需求: 6.1, 6.3, 6.4, 6.6
-
3.2 创建交易列表和卡片组件
- 设计实现 TransactionCard 组件，展示分类图标、商户名、金额和日期
- 开发交易列表页面，支持无限滚动和下拉刷新
- 实现空状态和加载状态的 UI 组件
- 需求: 6.1, 6.5
-
3.3 开发交易添加和编辑表单
- 创建 AddTransactionPage 组件，包含金额输入、分类选择、日期选择器
- 实现 AmountInput 组件，支持数字键盘和金额格式化
- 开发 CategorySelector 组件，支持图标选择和自定义分类
- 需求: 2.1, 2.6, 2.7, 6.4
-
3.4 实现搜索和筛选功能
- 创建 SearchFilter 组件，支持文本搜索和多维度筛选
- 实现前端搜索逻辑，支持按商户名、备注、分类、账户筛选
- 开发筛选结果的实时更新和状态管理
- 需求: 3.1, 3.2, 3.3, 3.4, 3.5
-
-
4. 开发通知监听和自动记账功能
-
4.1 配置 Android 开发环境
- 在 Windows 11 上配置 Android Studio 和 SDK
- 设置 Android 模拟器和真机调试环境
- 创建基础的 Android 构建和调试流程
- 需求: 1.1
-
4.2 开发通知监听 Capacitor 插件
- 创建自定义 Capacitor 插件，实现 NotificationListenerService
- 编写 Java/Kotlin 代码监听系统通知并解析支付信息
- 实现通知数据的正则表达式解析和格式化
- 需求: 1.1, 1.2, 1.4
-
4.3 实现前端通知处理逻辑
- 集成通知监听插件到 Vue 应用中
- 创建通知确认对话框，支持用户确认和编辑自动捕获的交易
- 实现通知权限申请和状态管理
- 需求: 1.2, 1.3, 1.5
-
-
5. 实现分类和账户管理功能
-
5.1 开发分类管理功能
- 创建分类管理界面，支持添加、编辑、删除分类
- 实现分类图标和颜色选择器
- 开发默认分类的初始化和管理逻辑
- 需求: 8.1, 8.2, 8.5
-
5.2 实现账户管理功能
- 创建支付账户管理界面和 CRUD 操作
- 实现账户类型选择和图标配置
- 开发账户余额跟踪和统计功能
- 需求: 8.3, 8.4
-
-
6. 创建数据分析和图表功能
-
6.1 实现本地数据分析逻辑
- 开发本地数据的汇总统计、趋势分析、分类统计功能
- 实现数据聚合查询和性能优化
- 创建分析数据的缓存机制
- 需求: 5.1, 5.2, 5.3, 5.4
-
6.2 开发图表组件和分析页面
- 集成 ECharts，创建饼图、折线图、柱状图组件
- 实现 AnalyticsPage，展示支出构成、趋势分析和关键指标
- 开发交互式图表和时间段选择功能
- 需求: 5.1, 5.2, 5.3, 5.4, 5.5
-
-
7. 完善用户体验和界面优化
-
7.1 添加动画和交互效果
- 实现页面转场动画和按钮交互效果
- 开发列表项的添加删除动画
- 创建加载状态和骨架屏组件
- 需求: 6.2
-
7.2 优化用户体验细节
- 实现悬浮操作按钮和快速添加功能
- 开发手势操作和快捷键支持
- 创建用户引导和帮助系统
- 需求: 2.6, 6.1
-
-
8. 搭建后端服务和云同步（后置功能）
-
8.1 在阿里云 Ubuntu 24.04 上搭建 Node.js 后端
- 配置阿里云服务器环境，安装 Node.js、MongoDB 和 Nginx
- 创建 Node.js 后端项目结构，配置 Express 和基础中间件
- 建立服务器端的 Git 部署流程和自动化脚本
- 需求: 4.1
-
8.2 实现用户认证系统
- 创建 User 模型的 Mongoose Schema，包含邮箱、密码、偏好设置
- 开发注册、登录、刷新 token 的 API 端点
- 实现 JWT 中间件和前端认证状态管理
- 需求: 4.2
-
8.3 开发云同步 API 和逻辑
- 创建数据同步的 API 端点，支持增量同步和冲突检测
- 实现自动同步机制，在网络可用时上传本地更改
- 开发同步冲突解决界面和错误重试逻辑
- 需求: 4.3, 4.4, 4.5, 4.6, 7.3
-
-
9. 测试和质量保证
-
9.1 编写单元测试
- 为所有 Vue 组件编写单元测试，确保组件功能正确
- 创建本地数据操作的单元测试，覆盖所有 CRUD 操作
- 实现工具函数和数据验证的测试用例
- 需求: 所有需求的质量保证
-
9.2 实现集成测试
- 开发通知解析功能的集成测试
- 创建本地数据存储和检索的集成测试
- 实现用户界面交互的端到端测试
- 需求: 所有需求的集成验证
-
9.3 进行移动端测试
- 在多个 Android 设备上测试应用兼容性
- 验证通知权限申请和功能正确性
- 测试离线功能和本地数据存储的稳定性
- 需求: 1.5, 7.1, 7.2
-
-
10. 性能优化和部署准备
-
10.1 前端性能优化
- 实现组件懒加载和代码分割
- 优化图片资源和静态资源加载
- 实现虚拟滚动和防抖搜索优化
- 需求: 性能相关的用户体验提升
-
10.2 Android APK 构建和优化
- 配置 Android APK 的构建和签名流程
- 优化 APK 大小和启动性能
- 配置应用图标、启动画面和应用信息
- 需求: 整体系统的部署就绪
-
10.3 生产环境部署配置（云端功能启用后）
- 在阿里云上配置 Nginx 反向代理和 SSL 证书
- 设置 MongoDB 数据库的备份和恢复机制
- 配置服务器监控和日志管理系统
- 需求: 4.3, 4.4 的性能保证
-