账单列表统一迁移记录

日期: 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	需迁移	❌ 预算卡片列表,非账单	排除

关键发现

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

迁移实施

calendarV2/TransactionList.vue

迁移前:

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

迁移后:

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

配置:

<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 提交记录清晰

后续建议

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

3.8 KiB Raw Blame History