EmailBill/openspec/changes/unify-bill-list-ui/tasks.md

1. 准备和验证

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

2. 迁移 calendarV2/modules/TransactionList.vue

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

3. 代码验证和文档更新

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