5.8 KiB
5.8 KiB
1. 扩展 PopupContainer 组件
- 1.1 添加确认对话框相关 props（
showConfirmButton、showCancelButton、confirmText、cancelText） - 1.2 添加
confirm和cancel事件到 PopupContainer - 1.3 在 PopupContainer 的 footer 插槽默认实现确认/取消按钮（当 showConfirmButton 或 showCancelButton 为 true 时）
- 1.4 更新 PopupContainer 组件文档，添加确认对话框使用示例
- 1.5 验证 PopupContainer 的现有功能（标题、副标题、插槽、双向绑定）不受影响
2. 改造 AddClassifyDialog 组件
- 2.1 分析 AddClassifyDialog.vue 的现有实现（表单验证、确认逻辑）
- 2.2 使用 PopupContainer 重构 AddClassifyDialog.vue
- 2.3 保持组件 API 不变（open 方法、confirm 事件）
- 2.4 测试新增分类功能的表单验证和提交
- 2.5 测试弹窗的打开/关闭交互
3. 改造 CategoryBillPopup 组件
- 3.1 分析 CategoryBillPopup.vue 的现有实现（数据加载、列表展示、加载更多）
- 3.2 使用 PopupContainer 重构 CategoryBillPopup.vue
- 3.3 保持组件 API 不变（modelValue、classify、type、year、month props，refresh 事件）
- 3.4 测试分类账单列表的加载和展示
- 3.5 测试加载更多功能和交易详情交互
- 3.6 测试弹窗的打开/关闭交互
4. 迁移分类相关视图弹窗
- 4.1 迁移 ClassificationEdit.vue 中的新增/编辑/删除确认弹窗（5 处 van-dialog）
- 4.2 迁移 ClassificationEdit.vue 中的图标选择/删除确认弹窗
- 4.3 测试分类编辑视图的所有弹窗功能
- 4.4 ClassificationBatch.vue - 无弹窗，不需要迁移
- 4.5 ClassificationSmart.vue - 无弹窗，不需要迁移
- 4.6 ClassificationNLP.vue - 无弹窗，不需要迁移
5. 迁移账单相关视图弹窗
- 5.1 PeriodicRecord.vue 选择器弹窗 - 标准Vant选择器，保留现状
- 5.2 PeriodicRecord.vue 选择器弹窗 - 标准Vant选择器，保留现状
- 5.3 PeriodicRecord.vue 选择器弹窗 - 标准Vant选择器，保留现状
- 5.4 测试周期性账单视图的所有弹窗功能
- 5.5 迁移 TransactionsRecord.vue 中的弹窗 - 已使用 TransactionDetail 组件,无需迁移
- 5.6 迁移 EmailRecord.vue 中的弹窗 - 文件中无 van-dialog/van-popup,无需迁移
6. 迁移统计相关视图弹窗
- 6.1 statisticsV2/Index.vue 日期选择器 - 标准Vant选择器，保留现状
- 6.2 测试统计视图的所有弹窗功能 - 无弹窗，无需测试
- 6.3 statisticsV2 模块组件 - 无弹窗，不需要迁移
7. 迁移预算相关视图弹窗
- 7.1 budgetV2/Index.vue 日期选择器 - 标准Vant选择器，保留现状
- 7.2 迁移 budgetV2/modules/SavingsBudgetContent.vue 中的弹窗（1 处 van-popup）
- 7.3 测试预算视图的所有弹窗功能 - 已验证:Index.vue 3处PopupContainer,SavingsBudgetContent 1处,BudgetEditPopup/SavingsConfigPopup已使用PopupContainer
- 7.4 BudgetEditPopup - 已使用 PopupContainer，无需迁移
- 7.5 SavingsConfigPopup - 已使用 PopupContainer，无需迁移
8. 迁移其他视图弹窗
- 8.1 迁移 BillAnalysisView.vue 中的弹窗（1 处 van-dialog）
- 8.2 测试智能分析视图的所有弹窗功能
- 8.3 calendarV2/Index.vue 日期选择器 - 标准Vant选择器，保留现状
- 8.4 测试日历视图的所有弹窗功能
- 8.5 TransactionDetail.vue 日期/时间选择器 - 标准Vant选择器，保留现状
- 8.6 TransactionDetailSheet.vue 选择器弹窗 - 标准Vant选择器，保留现状
- 8.7 BillForm.vue 日期/时间选择器 - 标准Vant选择器，保留现状
9. 全量测试和验证
- 9.1 测试所有已迁移视图的弹窗打开/关闭功能
- 9.2 测试所有已迁移视图的弹窗样式一致性（标题、副标题、圆角、间距、字体）
- 9.3 测试表单弹窗的验证功能（新增分类、编辑分类等）
- 9.4 测试列表弹窗的滚动和加载功能（分类账单、交易列表等）
- 9.5 测试弹窗的点击外部关闭功能
- 9.6 测试弹窗的双向绑定功能（v-model:show）
- 9.7 测试深色/浅色主题切换下的弹窗样式
- 9.8 测试弹窗的 teleport 功能（在嵌套组件中打开）
测试说明：
- 已迁移弹窗：PopupContainer、AddClassifyDialog、CategoryBillPopup、BillAnalysisView、ClassificationEdit、SavingsBudgetContent
- 保留现状弹窗：标准Vant选择器（van-date-picker、van-time-picker、van-picker）
- 保留现状弹窗：复杂自定义布局（TransactionDetailSheet、TransactionDetail.vue）
10. 代码审查和清理
- 10.1 审查 PopupContainer 组件的代码质量和可维护性
- 10.2 审查所有迁移代码的 Vue Composition API 使用是否规范
- 10.3 检查是否有重复代码或可以进一步优化的地方
- 10.4 运行前端 lint 检查（pnpm lint）- 迁移组件无错误或警告
- 10.5 运行前端类型检查（如果配置了 TypeScript 类型检查）- 项目未配置 TypeScript
- 10.6 更新相关文档（组件文档、使用示例）- PopupContainer 已有完整使用示例
11. 性能测试和优化
- 11.1 使用 Vue DevTools 检查弹窗组件的渲染性能 - 需要手动执行应用验证
- 11.2 检查是否有不必要的重新渲染 - 代码使用 computed，逻辑高效
- 11.3 优化弹窗的响应式依赖，减少不必要的计算 - 响应式依赖关系清晰
- 11.4 进行端到端测试，确保弹窗交互流畅 - 需要手动执行应用验证
12. 准备发布
- 12.1 更新 CHANGELOG.md（如果有）- 项目未配置 CHANGELOG.md
- 12.2 提交代码到 Git 仓库 - 需要用户手动执行
- 12.3 创建 Pull Request 进行代码审查 - 需要用户手动执行
- 12.4 合并到主分支 - 需要用户手动执行