EmailBill/openspec/changes/archive/2026-02-20-remove-popup-container-v1/proposal.md

Why

项目中存在两个版本的弹窗组件（PopupContainer.vue 和 PopupContainerV2.vue），造成代码冗余和维护成本增加。V2 版本采用更现代化的视觉风格（Inter 字体、16px 圆角、纯色背景），且 API 更简洁。为了统一 UI 风格、减少技术债务，需要将所有使用旧版本的组件迁移到 V2，并删除 V1 版本。

What Changes

• 删除 Web/src/components/PopupContainer.vue（旧版本）
• 将 18 个使用 PopupContainer 的文件迁移到 PopupContainerV2
• 适配 API 差异（V1 支持 subtitle、confirm/cancel 按钮，V2 更简洁只提供 footer 插槽）
• 确保迁移后的视觉效果和交互逻辑保持一致

Capabilities

New Capabilities

• popup-v2-migration: 定义从 PopupContainer V1 到 V2 的迁移规范，包括 API 映射、样式对齐、兼容性处理

Modified Capabilities

Impact

受影响的文件（18 个 Vue 组件）:

• BudgetChartAnalysis.vue
• IconSelector.vue
• ClassificationEdit.vue
• SavingsBudgetContent.vue
• budgetV2/Index.vue
• PeriodicRecord.vue
• EmailRecord.vue
• ClassificationNLP.vue
• BillAnalysisView.vue
• TransactionDetail.vue
• ReasonGroupList.vue
• CategoryBillPopup.vue
• BudgetEditPopup.vue
• BudgetCard.vue
• AddClassifyDialog.vue
• MessageView.vue
• SavingsConfigPopup.vue
• GlobalAddBill.vue

迁移风险:

• V1 的 subtitle、showConfirmButton、showCancelButton 等 props 在 V2 中不存在，需要重构为插槽方式
• V1 默认高度为 80%，V2 为 auto（最大 85%），需要调整布局
• V1 使用 Vant 主题变量，V2 使用硬编码颜色，暗色模式处理不同