73 lines
3.8 KiB
Markdown
73 lines
3.8 KiB
Markdown
|
## 1. 准备和分析阶段
|
|||
|
|
|
|||
|
|
- [x] 1.1 审查 18 个待迁移文件，确认每个文件使用的 V1 功能（subtitle、buttons、header-actions）
|
|||
|
|
- [x] 1.2 为每个文件创建迁移清单，标记需要特殊处理的部分（如 v-html、复杂布局）
|
|||
|
|
- [x] 1.3 备份当前代码（确保 Git 工作区干净，可以随时回滚）
|
|||
|
|
|
|||
|
|
## 2. 核心组件迁移 - 第一批（基础用法）
|
|||
|
|
|
|||
|
|
- [x] 2.1 迁移 `MessageView.vue` - 基础弹窗用法，无 subtitle 和按钮
|
|||
|
|
- [x] 2.2 迁移 `EmailRecord.vue` - 基础弹窗用法
|
|||
|
|
- [x] 2.3 迁移 `PeriodicRecord.vue` - 基础弹窗用法
|
|||
|
|
- [x] 2.4 迁移 `ClassificationNLP.vue` - 基础弹窗用法
|
|||
|
|
- [x] 2.5 迁移 `BillAnalysisView.vue` - 基础弹窗用法
|
|||
|
|
- [x] 2.6 验证第一批迁移：运行 `pnpm lint`，手动测试每个页面的弹窗功能
|
|||
|
|
|
|||
|
|
## 3. 带 subtitle 的组件迁移 - 第二批
|
|||
|
|
|
|||
|
|
- [x] 3.1 迁移 `CategoryBillPopup.vue` - 处理 subtitle（统计信息）
|
|||
|
|
- [x] 3.2 迁移 `BudgetChartAnalysis.vue` - 处理 subtitle
|
|||
|
|
- [x] 3.3 迁移 `TransactionDetail.vue` - 处理 subtitle 和自定义内容
|
|||
|
|
- [x] 3.4 迁移 `ReasonGroupList.vue` - 处理 subtitle
|
|||
|
|
- [x] 3.5 验证第二批迁移：检查 subtitle 在默认插槽中的样式和位置
|
|||
|
|
|
|||
|
|
## 4. 带确认/取消按钮的组件迁移 - 第三批
|
|||
|
|
|
|||
|
|
- [x] 4.1 迁移 `AddClassifyDialog.vue` - 转换 show-confirm-button 和 show-cancel-button 为 footer 插槽
|
|||
|
|
- [x] 4.2 迁移 `IconSelector.vue` - 处理确认/取消按钮和事件绑定
|
|||
|
|
- [x] 4.3 迁移 `ClassificationEdit.vue` - 处理确认/取消按钮
|
|||
|
|
- [x] 4.4 验证第三批迁移：测试按钮点击事件是否正确触发
|
|||
|
|
|
|||
|
|
## 5. 复杂布局组件迁移 - 第四批（header-actions 和自定义布局）
|
|||
|
|
|
|||
|
|
- [x] 5.1 迁移 `BudgetCard.vue` - 处理 header-actions 插槽，移至内容区域顶部
|
|||
|
|
- [x] 5.2 迁移 `BudgetEditPopup.vue` - 处理 header-actions 和 footer
|
|||
|
|
- [x] 5.3 迁移 `SavingsConfigPopup.vue` - 处理自定义布局
|
|||
|
|
- [x] 5.4 迁移 `SavingsBudgetContent.vue` - 处理 header-actions
|
|||
|
|
- [x] 5.5 迁移 `budgetV2/Index.vue` - 处理复杂布局和多个弹窗实例
|
|||
|
|
- [x] 5.6 验证第四批迁移：检查操作按钮的位置和交互是否符合预期
|
|||
|
|
|
|||
|
|
## 6. 全局组件迁移 - 第五批
|
|||
|
|
|
|||
|
|
- [x] 6.1 迁移 `GlobalAddBill.vue` - 处理全局弹窗的特殊逻辑
|
|||
|
|
- [x] 6.2 验证全局组件：测试从不同页面触发弹窗的功能
|
|||
|
|
|
|||
|
|
## 7. 高度和样式调整
|
|||
|
|
|
|||
|
|
- [x] 7.1 检查所有迁移文件，为未显式设置 height 的组件添加 `:height="'80%'"`
|
|||
|
|
- [x] 7.2 调整内容区域的 padding（V2 无默认 padding，需要手动添加）
|
|||
|
|
- [x] 7.3 统一 footer 按钮的样式（创建全局 `.footer-buttons` 样式或在每个文件中复用）
|
|||
|
|
- [ ] 7.4 验证暗色模式：切换到暗色模式，检查每个弹窗的颜色和对比度
|
|||
|
|
|
|||
|
|
## 8. 代码质量和测试
|
|||
|
|
|
|||
|
|
- [x] 8.1 运行 `pnpm lint` 修复所有 ESLint 错误和警告
|
|||
|
|
- [ ] 8.2 运行 `pnpm build` 确保构建成功
|
|||
|
|
- [ ] 8.3 手动测试所有 18 个迁移的页面，验证弹窗的打开/关闭、内容展示、按钮交互
|
|||
|
|
- [ ] 8.4 测试边界情况：长文本、空内容、多次打开/关闭弹窗
|
|||
|
|
- [ ] 8.5 检查控制台是否有警告或错误信息
|
|||
|
|
|
|||
|
|
## 9. 清理和文档更新
|
|||
|
|
|
|||
|
|
- [x] 9.1 确认所有迁移完成且测试通过
|
|||
|
|
- [x] 9.2 删除 `Web/src/components/PopupContainer.vue` 文件
|
|||
|
|
- [x] 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 在团队中分享迁移经验，更新最佳实践文档
|