EmailBill/.doc/popup-migration-checklist.md

# 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、复杂布局等特性