2.3 KiB
2.3 KiB
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 选择模式）