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