32d5ed62d0
All checks were successful
Docker Build & Deploy / Build Docker Image (push) Successful in 16s
Docker Build & Deploy / Deploy to Production (push) Successful in 6s
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 1s
Docker Build & Deploy / WeChat Notification (push) Successful in 1s
3.8 KiB
3.8 KiB
1. 准备和分析阶段
- 1.1 审查 18 个待迁移文件，确认每个文件使用的 V1 功能（subtitle、buttons、header-actions）
- 1.2 为每个文件创建迁移清单，标记需要特殊处理的部分（如 v-html、复杂布局）
- 1.3 备份当前代码（确保 Git 工作区干净，可以随时回滚）
2. 核心组件迁移 - 第一批（基础用法）
- 2.1 迁移
MessageView.vue- 基础弹窗用法，无 subtitle 和按钮 - 2.2 迁移
EmailRecord.vue- 基础弹窗用法 - 2.3 迁移
PeriodicRecord.vue- 基础弹窗用法 - 2.4 迁移
ClassificationNLP.vue- 基础弹窗用法 - 2.5 迁移
BillAnalysisView.vue- 基础弹窗用法 - 2.6 验证第一批迁移：运行
pnpm lint，手动测试每个页面的弹窗功能
3. 带 subtitle 的组件迁移 - 第二批
- 3.1 迁移
CategoryBillPopup.vue- 处理 subtitle（统计信息） - 3.2 迁移
BudgetChartAnalysis.vue- 处理 subtitle - 3.3 迁移
TransactionDetail.vue- 处理 subtitle 和自定义内容 - 3.4 迁移
ReasonGroupList.vue- 处理 subtitle - 3.5 验证第二批迁移：检查 subtitle 在默认插槽中的样式和位置
4. 带确认/取消按钮的组件迁移 - 第三批
- 4.1 迁移
AddClassifyDialog.vue- 转换 show-confirm-button 和 show-cancel-button 为 footer 插槽 - 4.2 迁移
IconSelector.vue- 处理确认/取消按钮和事件绑定 - 4.3 迁移
ClassificationEdit.vue- 处理确认/取消按钮 - 4.4 验证第三批迁移：测试按钮点击事件是否正确触发
5. 复杂布局组件迁移 - 第四批（header-actions 和自定义布局）
- 5.1 迁移
BudgetCard.vue- 处理 header-actions 插槽，移至内容区域顶部 - 5.2 迁移
BudgetEditPopup.vue- 处理 header-actions 和 footer - 5.3 迁移
SavingsConfigPopup.vue- 处理自定义布局 - 5.4 迁移
SavingsBudgetContent.vue- 处理 header-actions - 5.5 迁移
budgetV2/Index.vue- 处理复杂布局和多个弹窗实例 - 5.6 验证第四批迁移：检查操作按钮的位置和交互是否符合预期
6. 全局组件迁移 - 第五批
- 6.1 迁移
GlobalAddBill.vue- 处理全局弹窗的特殊逻辑 - 6.2 验证全局组件：测试从不同页面触发弹窗的功能
7. 高度和样式调整
- 7.1 检查所有迁移文件，为未显式设置 height 的组件添加
:height="'80%'" - 7.2 调整内容区域的 padding（V2 无默认 padding，需要手动添加）
- 7.3 统一 footer 按钮的样式（创建全局
.footer-buttons样式或在每个文件中复用） - 7.4 验证暗色模式：切换到暗色模式，检查每个弹窗的颜色和对比度
8. 代码质量和测试
- 8.1 运行
pnpm lint修复所有 ESLint 错误和警告 - 8.2 运行
pnpm build确保构建成功 - 8.3 手动测试所有 18 个迁移的页面，验证弹窗的打开/关闭、内容展示、按钮交互
- 8.4 测试边界情况：长文本、空内容、多次打开/关闭弹窗
- 8.5 检查控制台是否有警告或错误信息
9. 清理和文档更新
- 9.1 确认所有迁移完成且测试通过
- 9.2 删除
Web/src/components/PopupContainer.vue文件 - 9.3 全局搜索
PopupContainer（排除PopupContainerV2），确认无残留引用 - 9.4 更新项目文档（如有组件使用说明，更新为 V2 的使用方式）
- 9.5 提交代码，编写清晰的 commit message
10. 后续优化（可选）
- 10.1 提取 footer 按钮样式为全局 CSS 类或 V2 组件的默认样式
- 10.2 考虑为 V2 添加常用的预设（如
preset="confirm-dialog"）简化未来的使用 - 10.3 在团队中分享迁移经验，更新最佳实践文档