## 1. 准备和验证

- [x] 1.1 审查 `BillListComponent` 组件,确认支持 Custom 数据模式和所有必需的 props
- [x] 1.2 审查目标页面 - calendarV2/TransactionList.vue (其他页面不是账单列表)
- [x] 1.3 确认 calendarV2/TransactionList.vue 使用的账单数据 API 和数据格式
- [x] 1.4 设计迁移方案(保留自定义header和Smart按钮,接受UI风格变化)

## 2. 迁移 calendarV2/modules/TransactionList.vue

- [x] 2.1 导入 `BillListComponent`
- [x] 2.2 替换自定义列表为 `<BillListComponent>`
- [x] 2.3 配置 `data-source="custom"` 和 `:transactions` prop
- [x] 2.4 配置功能开关 props (`:enable-filter="false"`, `:show-delete="false"`)
- [x] 2.5 实现 `@click` 事件处理器,保持原有点击逻辑
- [x] 2.6 移除数据格式转换逻辑(formatTime, formatAmount, getIconByClassify等)
- [x] 2.7 移除废弃的自定义列表代码和样式
- [x] 2.8 运行 lint 检查
- [x] 2.9 提交代码: "refactor(calendar-v2): migrate TransactionList to BillListComponent"

## 3. 代码验证和文档更新

- [ ] 3.1 手动测试日历视图功能流程
- [ ] 3.2 验证视觉效果:对比迁移前后的账单列表样式
- [ ] 3.3 验证交互:确认点击账单、Smart按钮功能正常
- [x] 3.4 更新 `openspec/changes/unify-bill-list-ui/` 文档,记录实际迁移范围
- [x] 3.5 在 `.doc/` 目录下创建迁移记录文档
- [x] 3.6 文档提交: "docs: update unify-bill-list-ui change scope"

## 2. 迁移 MessageView.vue

- [ ] 2.1 在 `MessageView.vue` 中导入 `BillListComponent`
- [ ] 2.2 替换自定义 `van-swipe-cell` 列表为 `<BillListComponent>`
- [ ] 2.3 配置 `data-source="custom"` 和 `:transactions` prop
- [ ] 2.4 配置功能开关 props (`:enable-filter="false"`, `:show-delete` 等)
- [ ] 2.5 实现 `@click` 事件处理器,保持原有点击逻辑
- [ ] 2.6 实现 `@delete` 事件处理器,更新本地数据列表
- [ ] 2.7 移除废弃的自定义列表代码和样式
- [ ] 2.8 测试所有功能:点击、删除、数据刷新
- [ ] 2.9 提交代码: "refactor(message): migrate to BillListComponent"

## 3. 迁移 EmailRecord.vue

- [ ] 3.1 在 `EmailRecord.vue` 中导入 `BillListComponent`
- [ ] 3.2 替换关联账单列表的自定义 `van-swipe-cell` 为 `<BillListComponent>`
- [ ] 3.3 配置 `data-source="custom"` 和 `:transactions` prop
- [ ] 3.4 配置功能开关 props
- [ ] 3.5 实现 `@click` 事件处理器(关联账单详情弹窗逻辑)
- [ ] 3.6 实现 `@delete` 事件处理器
- [ ] 3.7 保留全局事件监听器 (`transaction-deleted`)
- [ ] 3.8 移除废弃的自定义列表代码和样式
- [ ] 3.9 测试:查看关联账单列表、点击账单、删除账单
- [ ] 3.10 提交代码: "refactor(email): migrate bill list to BillListComponent"

## 4. 迁移 PeriodicRecord.vue

- [ ] 4.1 在 `PeriodicRecord.vue` 中导入 `BillListComponent`
- [ ] 4.2 替换周期性账单列表的自定义 `van-swipe-cell` 为 `<BillListComponent>`
- [ ] 4.3 配置 `data-source="custom"` 和 `:transactions` prop
- [ ] 4.4 适配周期性账单的数据格式(如需要转换为标准 transaction 格式)
- [ ] 4.5 配置功能开关 props
- [ ] 4.6 实现 `@click` 事件处理器(编辑周期性账单逻辑)
- [ ] 4.7 实现 `@delete` 事件处理器(删除周期性账单的特定逻辑)
- [ ] 4.8 移除废弃的自定义列表代码和样式
- [ ] 4.9 测试:查看周期性账单、编辑、删除、暂停/恢复
- [ ] 4.10 提交代码: "refactor(periodic): migrate to BillListComponent"

## 5. 迁移 ClassificationEdit.vue

- [ ] 5.1 在 `ClassificationEdit.vue` 中导入 `BillListComponent`
- [ ] 5.2 替换分类编辑页面的自定义 `van-swipe-cell` 列表为 `<BillListComponent>`
- [ ] 5.3 配置 `data-source="custom"` 和 `:transactions` prop
- [ ] 5.4 配置功能开关 props (可能需要禁用筛选栏)
- [ ] 5.5 实现 `@click` 事件处理器(选择账单进行分类编辑)
- [ ] 5.6 实现 `@delete` 事件处理器
- [ ] 5.7 保留分类筛选逻辑(如果有)
- [ ] 5.8 移除废弃的自定义列表代码和样式
- [ ] 5.9 测试:选择账单、修改分类、删除账单
- [ ] 5.10 提交代码: "refactor(classification-edit): migrate to BillListComponent"

## 6. 迁移 calendarV2/modules/TransactionList.vue

- [ ] 6.1 在 `calendarV2/modules/TransactionList.vue` 中导入 `BillListComponent`
- [ ] 6.2 完全替换现有的 TransactionList 组件实现为 `<BillListComponent>`
- [ ] 6.3 配置 `data-source="custom"` 和 `:transactions` prop
- [ ] 6.4 配置功能开关 props (根据日历视图需求)
- [ ] 6.5 实现 `@click` 事件处理器(日历视图的账单详情逻辑)
- [ ] 6.6 实现 `@delete` 事件处理器
- [ ] 6.7 确保与日历组件的数据传递正常
- [ ] 6.8 移除废弃的自定义列表代码和样式
- [ ] 6.9 测试:日历选择日期、查看账单列表、点击账单、删除账单
- [ ] 6.10 提交代码: "refactor(calendar-v2): migrate TransactionList to BillListComponent"

## 7. 迁移 budgetV2/Index.vue

- [ ] 7.1 在 `budgetV2/Index.vue` 中导入 `BillListComponent`
- [ ] 7.2 识别页面中的两个账单列表:"已使用预算列表" 和 "未分类账单列表"
- [ ] 7.3 替换 "已使用预算列表" 的自定义 `van-swipe-cell` 为第一个 `<BillListComponent>` 实例
- [ ] 7.4 配置第一个组件: `data-source="custom"`, `:transactions`, `:enable-filter="false"`
- [ ] 7.5 替换 "未分类账单列表" 的自定义 `van-swipe-cell` 为第二个 `<BillListComponent>` 实例
- [ ] 7.6 配置第二个组件: `data-source="custom"`, `:transactions`, `:enable-filter="false"`
- [ ] 7.7 实现两个列表的 `@click` 事件处理器
- [ ] 7.8 实现两个列表的 `@delete` 事件处理器,更新对应的本地数据
- [ ] 7.9 保留预算统计逻辑和全局事件监听器
- [ ] 7.10 移除废弃的自定义列表代码和样式
- [ ] 7.11 测试:预算统计、已使用列表、未分类列表、点击、删除
- [ ] 7.12 提交代码: "refactor(budget-v2): migrate to BillListComponent"

## 8. 代码清理和验证

- [ ] 8.1 审查所有迁移页面,确认没有遗留的自定义列表代码
- [ ] 8.2 审查所有迁移页面,确认没有未使用的列表样式定义
- [ ] 8.3 运行前端 lint: `cd Web && pnpm lint`
- [ ] 8.4 运行前端构建: `cd Web && pnpm build`
- [ ] 8.5 修复任何 lint 错误或构建警告

## 9. 集成测试和文档

- [ ] 9.1 手动测试所有 6 个迁移页面的完整功能流程
- [ ] 9.2 验证视觉一致性:对比每个页面与 `/balance` 页面的账单列表样式
- [ ] 9.3 验证交互一致性:确认点击、左滑删除、分页行为一致
- [ ] 9.4 更新 `Web/src/views/AGENTS.md` (如需要),记录统一使用 BillListComponent
- [ ] 9.5 在 `.doc/` 目录下创建迁移记录文档 (可选)
- [ ] 9.6 最终提交: "refactor: unify all bill lists to BillListComponent"