43 lines
1.8 KiB
Markdown
43 lines
1.8 KiB
Markdown
|
## Why
|
||
|
|
|
||
|
|
系统中存在多处账单列表实现,各自使用不同的样式和交互方式。经过代码审查,发现只有 `calendarV2/modules/TransactionList.vue` 需要迁移,其他页面要么已使用 `BillListComponent`,要么不是账单列表。统一账单列表 UI 可以提供一致的用户体验和更好的可维护性。
|
||
|
|
|
||
|
|
## What Changes
|
||
|
|
|
||
|
|
- 将 `calendarV2/modules/TransactionList.vue` 的自定义账单列表替换为 `BillListComponent` 组件
|
||
|
|
- 保留日历视图的特殊功能:自定义 header (Items 计数) 和 Smart 按钮
|
||
|
|
- 移除自定义的数据格式转换逻辑和账单卡片渲染代码
|
||
|
|
- 简化代码从 403 行减少到 177 行
|
||
|
|
|
||
|
|
**备注**: 原设计文档中列出的其他 5 个页面经审查后:
|
||
|
|
- `TransactionsRecord.vue` (balance页面): ✅ 已使用 `BillListComponent`
|
||
|
|
- `EmailRecord.vue`: ✅ 已使用 `BillListComponent`
|
||
|
|
- `MessageView.vue`: ❌ 系统消息列表,不是账单
|
||
|
|
- `PeriodicRecord.vue`: ❌ 周期性账单规则列表,不是交易账单
|
||
|
|
- `ClassificationEdit.vue`: ❌ 分类管理列表,不是账单
|
||
|
|
- `budgetV2/Index.vue`: ❌ 预算卡片列表,不是账单
|
||
|
|
|
||
|
|
## Capabilities
|
||
|
|
|
||
|
|
### New Capabilities
|
||
|
|
- `bill-list-unified-ui`: 统一的账单列表 UI 规范,定义所有账单列表页面必须遵循的视觉设计和交互模式
|
||
|
|
|
||
|
|
### Modified Capabilities
|
||
|
|
<!-- 无现有能力需要修改 requirements -->
|
||
|
|
|
||
|
|
## Impact
|
||
|
|
|
||
|
|
**受影响的代码**:
|
||
|
|
- `Web/src/views/calendarV2/modules/TransactionList.vue` (已完成迁移)
|
||
|
|
|
||
|
|
**依赖组件**:
|
||
|
|
- `Web/src/components/Bill/BillListComponent.vue` (已存在,无需修改)
|
||
|
|
|
||
|
|
**API**:
|
||
|
|
- 无 API 变更,仅前端 UI 统一
|
||
|
|
|
||
|
|
**用户体验影响**:
|
||
|
|
- 正向影响:日历视图的账单列表与 /balance 页面保持一致
|
||
|
|
- UI 风格变化:从自定义卡片样式改为统一的 BillListComponent 样式
|
||
|
|
- 功能保留:自定义 header、Items 计数、Smart 按钮均已保留
|