5f9672744b
All checks were successful
Docker Build & Deploy / Build Docker Image (push) Successful in 21s
Docker Build & Deploy / Deploy to Production (push) Successful in 6s
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 1s
Docker Build & Deploy / WeChat Notification (push) Successful in 1s
2.1 KiB
2.1 KiB
Context
项目中存在多处账单列表展示，但实现方式不一致：
TransactionsRecord.vue（标准）使用BillListComponent，功能完整CategoryBillPopup.vue自定义实现，样式和交互与标准不一致calendarV2/modules/TransactionList.vue使用BillListComponent但配置可能不一致BudgetCard.vue使用BillListComponentCustom 模式EmailRecord.vue使用BillListComponentCustom 模式
核心组件 BillListComponent.vue 已具备统一能力，但各使用方配置参数不统一。
Goals / Non-Goals
Goals:
- 统一所有账单列表的 UI 样式（图标、金额、标签布局）
- 统一基础交互（左滑删除、点击详情、空状态）
- 确保
BillListComponent正确配置
Non-Goals:
- 不添加搜索功能（弹窗场景不需要）
- 不修改 API 接口
- 不重构
BillListComponent核心代码
Decisions
决策 1: 统一使用 BillListComponent
选择: 所有账单列表统一使用 BillListComponent.vue
理由:
- 该组件已具备所有必要功能（筛选、分页、删除、多选）
- 支持 API 模式和 Custom 模式
- 已有完善的暗黑模式支持
备选方案: 为每个场景创建独立组件 → 放弃（维护成本高、样式难以统一）
决策 2: 标准配置模板
选择: 定义统一的 props 配置模板
// 弹窗场景标准配置
const popupConfig = {
dataSource: 'custom',
transactions: [...],
enableFilter: false, // 弹窗不需要筛选
showCheckbox: false,
showDelete: true, // 支持删除
compact: true, // 紧凑布局
}
决策 3: 交互事件统一
选择: 统一使用组件 emit 事件 + 全局事件总线
@click→ 触发详情查看transaction-deleted→ 全局广播删除事件
Risks / Trade-offs
| 风险 | 缓解措施 |
|---|---|
| CategoryBillPopup 自定义实现，改动较大 | 先对比差异，逐步对齐 |
| 各场景数据源不同 | 统一使用 Custom 模式，父组件管理数据 |
| 事件处理不一致 | 统一使用组件 emit 事件 |