EmailBill/openspec/changes/unify-bill-list-ui/proposal.md at cdd20352a3e28417bdb17d53fca795071649935d

Files

SunCheng cdd20352a3 docs: update unify-bill-list-ui change scope

更新变更范围以反映实际情况:
- 实际只需迁移 1 个页面: calendarV2/TransactionList.vue
- 其他页面要么已使用 BillListComponent,要么不是账单列表
- 更新 proposal、design 和 tasks 文档

2026-02-19 21:53:34 +08:00

1.8 KiB

Raw Blame History

Why

系统中存在多处账单列表实现,各自使用不同的样式和交互方式。经过代码审查,发现只有 calendarV2/modules/TransactionList.vue 需要迁移,其他页面要么已使用 BillListComponent,要么不是账单列表。统一账单列表 UI 可以提供一致的用户体验和更好的可维护性。

What Changes

将 calendarV2/modules/TransactionList.vue 的自定义账单列表替换为 BillListComponent 组件
保留日历视图的特殊功能:自定义 header (Items 计数) 和 Smart 按钮
移除自定义的数据格式转换逻辑和账单卡片渲染代码
简化代码从 403 行减少到 177 行

备注: 原设计文档中列出的其他 5 个页面经审查后:

TransactionsRecord.vue (balance页面): ✅ 已使用 BillListComponent
EmailRecord.vue: ✅ 已使用 BillListComponent
MessageView.vue: ❌ 系统消息列表,不是账单
PeriodicRecord.vue: ❌ 周期性账单规则列表,不是交易账单
ClassificationEdit.vue: ❌ 分类管理列表,不是账单
budgetV2/Index.vue: ❌ 预算卡片列表,不是账单

Capabilities

New Capabilities

bill-list-unified-ui: 统一的账单列表 UI 规范,定义所有账单列表页面必须遵循的视觉设计和交互模式

Modified Capabilities

Impact

受影响的代码:

Web/src/views/calendarV2/modules/TransactionList.vue (已完成迁移)

依赖组件:

Web/src/components/Bill/BillListComponent.vue (已存在,无需修改)

API:

无 API 变更,仅前端 UI 统一

用户体验影响:

正向影响:日历视图的账单列表与 /balance 页面保持一致
UI 风格变化:从自定义卡片样式改为统一的 BillListComponent 样式
功能保留:自定义 header、Items 计数、Smart 按钮均已保留

1.8 KiB Raw Blame History

Why