108 lines
3.8 KiB
Markdown
108 lines
3.8 KiB
Markdown
|
# 账单列表统一迁移记录
|
||
|
|
|
||
|
|
**日期**: 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/`
|