42 lines
1.6 KiB
Markdown
42 lines
1.6 KiB
Markdown
|
## 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` 接口
|