## 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 事件 |