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