43 lines
2.3 KiB
Markdown
43 lines
2.3 KiB
Markdown
## Why
|
||
|
||
当前项目中存在多个账单列表实现（`TransactionList.vue` 在 `components/` 和 `calendarV2/modules/` 中），导致代码重复、样式不统一、维护成本高。v2 版本的账单列表（calendarV2/modules/TransactionList.vue）采用了更现代的卡片式设计和更好的视觉层次，应当作为标准组件在全项目范围内复用。
|
||
|
||
## What Changes
|
||
|
||
- **新增**：创建高内聚、可复用的 `BillListComponent.vue` 组件（基于 v2 风格）
|
||
- **调整**：修改 v2 的一行一卡片布局，支持更紧凑的列表展示
|
||
- **新增**：内置筛选（按类型、分类、日期）、排序（金额、时间）、分页功能
|
||
- **新增**：左滑删除交互（Vant SwipeCell）
|
||
- **新增**：点击查看详情功能（emit 事件）
|
||
- **删除**：移除旧版本的 `TransactionList.vue`（Web/src/components/）
|
||
- **迁移**：现有使用旧组件的页面（TransactionsRecord.vue、BillAnalysisView.vue 等）改为引用新组件
|
||
|
||
## Capabilities
|
||
|
||
### New Capabilities
|
||
- `bill-list-component`: 可复用的账单列表组件，支持筛选、排序、分页、左滑删除、点击详情等功能，样式基于 calendarV2 的现代化设计
|
||
|
||
### Modified Capabilities
|
||
- `transaction-list-display`: 现有的交易列表展示能力需要统一到新组件，旧版本 TransactionList.vue 的功能将被新组件替代
|
||
|
||
## Impact
|
||
|
||
**受影响的代码：**
|
||
- `Web/src/components/TransactionList.vue` - 将被删除
|
||
- `Web/src/views/calendarV2/modules/TransactionList.vue` - 作为参考基础，可能需要重构
|
||
- `Web/src/views/TransactionsRecord.vue` - 需要切换到新组件
|
||
- `Web/src/views/BillAnalysisView.vue` - 需要切换到新组件
|
||
- 其他可能引用旧版 TransactionList 的视图
|
||
|
||
**API 依赖：**
|
||
- `@/api/transactionRecord` - deleteTransaction, getTransactionsByDate 等接口
|
||
- 保持现有 API 调用方式不变
|
||
|
||
**UI 依赖：**
|
||
- Vant UI: van-swipe-cell, van-list, van-loading, van-empty, van-icon, van-tag
|
||
- 需要新增筛选/排序 UI 组件（van-dropdown-menu, van-popup）
|
||
|
||
**用户体验影响：**
|
||
- 正面：统一的视觉风格、更流畅的交互、更好的性能（高内聚设计）
|
||
- 迁移风险：需要确保功能对等，避免遗漏旧版本的特殊功能（如 checkbox 选择模式）
|