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）

<!-- 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 迁移

<!-- 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 迁移

<!-- 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 插槽迁移

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