## Why 当前项目中存在多处账单列表展示,但样式和功能不一致,导致用户体验不统一。统计页面分类账单弹窗与 `/balance` 标准页面的账单列表在 UI 样式和交互行为上存在明显差异。为提升用户体验一致性和降低维护成本,需要统一所有账单列表组件的样式和基础功能。 ## What Changes - 统一 4 处账单列表弹窗/组件的样式和交互: - `CategoryBillPopup.vue`(统计页面分类账单弹窗) - `calendarV2/modules/TransactionList.vue`(日历视图账单列表) - `Budget/BudgetCard.vue`(预算关联账单弹窗) - `EmailRecord.vue`(邮件关联账单弹窗) - 对齐以下方面到 `TransactionsRecord.vue` 标准: - 列表项样式(图标、文字、金额布局) - 左滑删除交互 - 点击查看详情交互 - 空状态展示 - **不涉及**:搜索功能(弹窗场景不需要搜索) ## Capabilities ### New Capabilities 无新增能力。 ### Modified Capabilities - `bill-list-display`: 统一账单列表展示样式和基础交互功能 ## Impact **前端组件**: - `Web/src/components/CategoryBillPopup.vue` - 统计分类账单弹窗 - `Web/src/views/calendarV2/modules/TransactionList.vue` - 日历账单列表 - `Web/src/components/Budget/BudgetCard.vue` - 预算关联账单弹窗 - `Web/src/views/EmailRecord.vue` - 邮件关联账单弹窗 **参考标准**: - `Web/src/views/TransactionsRecord.vue` - 标准账单列表实现 - `Web/src/components/Bill/BillListComponent.vue` - 核心账单列表组件 **API 依赖**: 无新增 API,复用现有 `getTransactionList` 接口