fix

.doc/popup-migration-checklist.md

@@ -0,0 +1,165 @@
+# PopupContainer V1 → V2 迁移清单
+
+## 文件分析汇总
+
+### 第一批：基础用法（无 subtitle、无按钮）
+
+| 文件 | Props 使用 | Slots 使用 | 迁移复杂度 | 备注 |
+|------|-----------|-----------|----------|------|
+| MessageView.vue | v-model, title, subtitle, height | footer | ⭐⭐ | 有 subtitle (createTime)，有条件 footer |
+| EmailRecord.vue | v-model, title, height | header-actions | ⭐⭐⭐ | 使用 header-actions 插槽（重新分析按钮） |
+| PeriodicRecord.vue | v-model, title, height | 默认插槽 | ⭐ | 基础用法，表单内容 |
+| ClassificationNLP.vue | v-model, title, height | 默认插槽 | ⭐ | 基础用法 |
+| BillAnalysisView.vue | v-model, title, height | 默认插槽 | ⭐ | 基础用法 |
+
+### 第二批：带 subtitle
+
+| 文件 | Subtitle 类型 | 迁移方案 |
+|------|--------------|---------|
+| MessageView.vue | 时间戳 (createTime) | 移至内容区域顶部，使用灰色小字 |
+| CategoryBillPopup.vue | 待检查 | 待定 |
+| BudgetChartAnalysis.vue | 待检查 | 待定 |
+| TransactionDetail.vue | 待检查 | 待定 |
+| ReasonGroupList.vue | 待检查 | 待定 |
+
+### 第三批：带确认/取消按钮
+
+| 文件 | 按钮配置 | 迁移方案 |
+|------|---------|---------|
+| AddClassifyDialog.vue | 待检查 | footer 插槽 + van-button |
+| IconSelector.vue | 待检查 | footer 插槽 + van-button |
+| ClassificationEdit.vue | 待检查 | footer 插槽 + van-button |
+
+### 第四批：复杂布局（header-actions）
+
+| 文件 | header-actions 内容 | 迁移方案 |
+|------|-------------------|---------|
+| EmailRecord.vue | "重新分析" 按钮 | 移至内容区域顶部作为操作栏 |
+| BudgetCard.vue | 待检查 | 待定 |
+| BudgetEditPopup.vue | 待检查 | 待定 |
+| SavingsConfigPopup.vue | 待检查 | 待定 |
+| SavingsBudgetContent.vue | 待检查 | 待定 |
+| budgetV2/Index.vue | 待检查 | 待定 |
+
+### 第五批：全局组件
+
+| 文件 | 特殊逻辑 | 迁移方案 |
+|------|---------|---------|
+| GlobalAddBill.vue | 待检查 | 待定 |
+
+## 迁移模式汇总
+
+### 模式 1: 基础迁移（无特殊 props）
+```vue
+<!-- V1 -->
+<PopupContainer
+  v-model="show"
+  title="标题"
+  height="75%"
+>
+  内容
+</PopupContainer>
+
+<!-- V2 -->
+<PopupContainerV2
+  v-model:show="show"
+  title="标题"
+  :height="'75%'"
+>
+  <div style="padding: 16px">
+    内容
+  </div>
+</PopupContainerV2>
+```
+
+### 模式 2: subtitle 迁移
+```vue
+<!-- V1 -->
+<PopupContainer
+  v-model="show"
+  title="标题"
+  :subtitle="createTime"
+>
+  内容
+</PopupContainer>
+
+<!-- V2 -->
+<PopupContainerV2
+  v-model:show="show"
+  title="标题"
+  :height="'75%'"
+>
+  <div style="padding: 16px">
+    <p style="color: #999; font-size: 14px; margin-bottom: 12px">{{ createTime }}</p>
+    内容
+  </div>
+</PopupContainerV2>
+```
+
+### 模式 3: header-actions 迁移
+```vue
+<!-- V1 -->
+<PopupContainer
+  v-model="show"
+  title="标题"
+>
+  <template #header-actions>
+    <van-button size="small" @click="handleAction">操作</van-button>
+  </template>
+  内容
+</PopupContainer>
+
+<!-- V2 -->
+<PopupContainerV2
+  v-model:show="show"
+  title="标题"
+  :height="'80%'"
+>
+  <div style="padding: 16px">
+    <div style="margin-bottom: 16px; text-align: right">
+      <van-button size="small" @click="handleAction">操作</van-button>
+    </div>
+    内容
+  </div>
+</PopupContainerV2>
+```
+
+### 模式 4: footer 插槽迁移
+```vue
+<!-- V1 -->
+<PopupContainer
+  v-model="show"
+  title="标题"
+>
+  内容
+  <template #footer>
+    <van-button type="primary">提交</van-button>
+  </template>
+</PopupContainer>
+
+<!-- V2 -->
+<PopupContainerV2
+  v-model:show="show"
+  title="标题"
+  :height="'80%'"
+>
+  <div style="padding: 16px">
+    内容
+  </div>
+  <template #footer>
+    <van-button type="primary" block>提交</van-button>
+  </template>
+</PopupContainerV2>
+```
+
+## 进度追踪
+
+- [ ] 完成所有文件的详细分析
+- [ ] 确认每个文件的迁移模式
+- [ ] 标记需要特殊处理的文件
+
+## 风险点
+
+1. **EmailRecord.vue**: 有 header-actions 插槽，需要重新设计操作按钮的位置
+2. **MessageView.vue**: subtitle 用于显示时间，需要保持视觉层级
+3. **待检查文件**: 需要逐个检查是否使用了 v-html、复杂布局等特性