# 账单列表统一迁移记录

**日期**: 2026-02-19  
**变更**: unify-bill-list-ui  
**提交**: f8e6029, cdd2035

## 变更摘要

将 `calendarV2/modules/TransactionList.vue` 迁移至使用统一的 `BillListComponent` 组件,保留自定义 header 和 Smart 按钮功能。

## 迁移范围调整

### 原设计 vs 实际情况

原设计文档列出需要迁移 6 个页面,但经过详细代码审查后发现:

| 页面 | 原设计预期 | 实际情况 | 处理结果 |
|------|-----------|---------|---------|
| TransactionsRecord.vue | 需迁移 | ✅ 已使用 BillListComponent | 无需操作 |
| EmailRecord.vue | 需迁移 | ✅ 已使用 BillListComponent | 无需操作 |
| calendarV2/TransactionList.vue | 需迁移 | ⚠️ 自定义实现,需迁移 | ✅ 已完成迁移 |
| MessageView.vue | 需迁移 | ❌ 系统消息列表,非账单 | 排除 |
| PeriodicRecord.vue | 需迁移 | ❌ 周期性规则列表,非交易账单 | 排除 |
| ClassificationEdit.vue | 需迁移 | ❌ 分类管理列表,非账单 | 排除 |
| budgetV2/Index.vue | 需迁移 | ❌ 预算卡片列表,非账单 | 排除 |

### 关键发现

1. **MessageView.vue**: 显示的是系统通知消息,数据结构为 `{title, content, isRead, createTime}`,不是交易账单。
2. **PeriodicRecord.vue**: 显示的是周期性账单规则(如每月1号扣款),包含 `periodicType`, `weekdays`, `isEnabled` 等配置字段,不是实际交易记录。
3. **ClassificationEdit.vue**: 显示的是分类配置列表,用于管理交易分类的图标和名称。
4. **budgetV2/Index.vue**: 显示的是预算卡片,每个卡片展示"已支出/预算/余额"等统计信息,不是账单列表。

## 迁移实施

### calendarV2/TransactionList.vue

**迁移前**:
- 403 行代码
- 自定义数据转换逻辑 (`formatTime`, `formatAmount`, `getIconByClassify` 等)
- 自定义账单卡片渲染 (`txn-card`, `txn-icon`, `txn-content` 等)
- 自定义空状态展示

**迁移后**:
- 177 行代码 (减少 56%)
- 使用 `BillListComponent` 处理数据格式化和渲染
- 保留自定义 header (交易记录标题 + Items 计数 + Smart 按钮)
- 直接传递原始 API 数据,无需转换

**配置**:
```vue
<BillListComponent
  data-source="custom"
  :transactions="transactions"
  :loading="transactionsLoading"
  :finished="true"
  :show-delete="false"
  :enable-filter="false"
  @click="onTransactionClick"
/>
```

**代码改动**:
- ✅ 导入 `BillListComponent`
- ✅ 替换 template 中的自定义列表部分
- ✅ 移除数据格式转换函数
- ✅ 清理废弃的样式定义 (txn-card, txn-empty 等)
- ✅ 保留 txn-header 相关样式

## 测试验证

### 功能测试清单

- [ ] 日历选择日期,查看对应日期的账单列表
- [ ] 点击账单卡片,打开账单详情
- [ ] 点击 Smart 按钮,触发智能分类
- [ ] Items 计数显示正确
- [ ] 空状态显示正确(无交易记录的日期)
- [ ] 加载状态显示正确

### 视觉验证

- [ ] 账单卡片样式与 /balance 页面一致
- [ ] 自定义 header 保持原有样式
- [ ] Smart 按钮样式和位置正确
- [ ] 响应式设计正常(不同屏幕尺寸)

### 代码质量

- ✅ ESLint 检查通过 (无错误,无新增警告)
- ✅ 代码简化效果明显 (403行 → 177行)
- ✅ Git 提交记录清晰

## 后续建议

1. **手动测试**: 在实际环境中测试日历视图的所有功能
2. **性能监控**: 观察迁移后的页面加载和交互性能
3. **用户反馈**: 收集用户对新 UI 风格的反馈

## 相关文件

- **迁移代码**: `Web/src/views/calendarV2/modules/TransactionList.vue`
- **统一组件**: `Web/src/components/Bill/BillListComponent.vue`
- **提交记录**: 
  - f8e6029: refactor(calendar-v2): migrate TransactionList to BillListComponent
  - cdd2035: docs: update unify-bill-list-ui change scope
- **OpenSpec 变更**: `openspec/changes/unify-bill-list-ui/`