## ADDED Requirements ### Requirement: 统一组件实现 系统必须使用统一的 BillListComponent 替代现有的多个账单列表实现,确保代码复用和样式一致性。 #### Scenario: 替换旧版 TransactionList - **WHEN** 页面需要展示账单列表 - **THEN** 使用 `BillListComponent.vue` 而非 `components/TransactionList.vue` #### Scenario: CalendarV2 模块迁移 - **WHEN** CalendarV2 需要展示交易列表 - **THEN** 使用 `BillListComponent.vue` 或保留其特有实现(如有特殊需求) ### Requirement: 功能对等性 新组件必须保持旧版所有功能,确保迁移不丢失特性。 #### Scenario: 批量选择功能 - **WHEN** TransactionsRecord 需要批量操作 - **THEN** 新组件通过 `showCheckbox` 和 `selectedIds` 提供相同功能 #### Scenario: 删除后刷新 - **WHEN** 账单删除成功 - **THEN** 新组件派发 `transaction-deleted` 全局事件,保持与旧版相同的事件机制 #### Scenario: 自定义数据源 - **WHEN** 页面需要展示离线或缓存数据 - **THEN** 新组件通过 `dataSource="custom"` 和 `transactions` prop 支持自定义数据 ### Requirement: 视觉升级 新组件必须基于 v2 的现代化设计,提供更好的视觉体验。 #### Scenario: 卡片样式 - **WHEN** 展示账单列表 - **THEN** 使用 v2 的卡片样式(圆角、阴影、图标),但调整为紧凑间距 #### Scenario: 图标展示 - **WHEN** 账单有分类信息 - **THEN** 显示对应的分类图标(如餐饮用 food 图标),带有彩色背景 #### Scenario: 标签样式 - **WHEN** 显示账单类型 - **THEN** 使用彩色标签(支出红色、收入绿色),位于卡片右上角 ### Requirement: 迁移计划 系统必须按阶段迁移,确保平滑过渡。 #### Scenario: 并存期 - **WHEN** 迁移进行中 - **THEN** 新旧组件共存,已迁移页面使用新组件,未迁移页面继续使用旧组件 #### Scenario: 清理旧代码 - **WHEN** 所有页面迁移完成 - **THEN** 删除 `components/TransactionList.vue`,移除相关 import ## REMOVED Requirements ### Requirement: 一行一卡片布局 **Reason**: 间距过大,不适合列表视图,需要滚动过多才能查看更多账单 **Migration**: 使用新的紧凑布局(`compact={true}`),卡片间距减少至 6px