EmailBill/openspec/specs/transaction-list-display/spec.md

ADDED Requirements

Requirement: 统一组件实现

系统必须使用统一的 BillListComponent 替代现有的多个账单列表实现，确保代码复用和样式一致性。

Scenario: 替换旧版 TransactionList

• WHEN 页面需要展示账单列表
• THEN 使用 BillListComponent.vue 而非 components/TransactionList.vue

Scenario: CalendarV2 模块迁移

• WHEN CalendarV2 需要展示交易列表
• THEN 使用 BillListComponent.vue 或保留其特有实现（如有特殊需求）

Requirement: CategoryBillPopup 统一样式

统计页面分类账单弹窗必须使用 BillListComponent，样式与 Balance 页面一致。

Scenario: 使用 BillListComponent

• WHEN 用户在统计页面点击分类卡片
• THEN 弹窗使用 BillListComponent 展示账单列表，配置为 dataSource="api" 模式

Scenario: 列表项样式对齐

• WHEN 账单列表渲染
• THEN 使用与 TransactionsRecord.vue 相同的卡片样式（图标、金额、标签布局）

Scenario: 左滑删除

• WHEN 用户在账单项上左滑
• THEN 显示红色删除按钮，点击后确认删除

Scenario: 点击查看详情

• WHEN 用户点击账单项
• THEN 打开 TransactionDetailSheet 查看详情

Requirement: CalendarV2 TransactionList 对齐

日历页面的交易列表样式必须与 Balance 页面一致。

Scenario: 紧凑布局

• WHEN 日历页面展示当天账单列表
• THEN 使用 compact={true} 紧凑布局

Scenario: 删除交互

• WHEN 用户左滑删除账单
• THEN 与 Balance 页面删除交互一致

Requirement: BudgetCard 关联账单对齐

预算页面的关联账单弹窗样式必须与 Balance 页面一致。

Scenario: 统一卡片样式

• WHEN 预算卡片展示关联账单
• THEN 账单项样式与 Balance 页面一致

Requirement: EmailRecord 关联账单对齐

邮件记录页面的关联账单弹窗样式必须与 Balance 页面一致。

Scenario: 统一卡片样式

• WHEN 邮件记录展示关联账单
• THEN 账单项样式与 Balance 页面一致

Scenario: 删除功能

• WHEN 用户删除账单
• THEN 删除交互与 Balance 页面一致

Requirement: 功能对等性

新组件必须保持旧版所有功能，确保迁移不丢失特性。

Scenario: 批量选择功能

• WHEN TransactionsRecord 需要批量操作
• THEN 新组件通过 showCheckbox 和 selectedIds 提供相同功能

Scenario: 删除后刷新

• WHEN 账单删除成功
• THEN 新组件派发 transaction-deleted 全局事件，保持与旧版相同的事件机制

Scenario: 自定义数据源

• WHEN 页面需要展示离线或缓存数据
• THEN 新组件通过 dataSource="custom" 和 transactions prop 支持自定义数据

Scenario: 弹窗场景数据源

• WHEN 弹窗组件（CategoryBillPopup、BudgetCard、EmailRecord）展示账单
• THEN 使用 dataSource="api" 或 dataSource="custom"，并配置 enableFilter={false} 禁用筛选

Requirement: 视觉升级

新组件必须基于 v2 的现代化设计，提供更好的视觉体验。

Scenario: 卡片样式

• WHEN 展示账单列表
• THEN 使用 v2 的卡片样式（圆角、阴影、图标），调整为紧凑间距

Scenario: 图标展示

• WHEN 账单有分类信息
• THEN 显示对应的分类图标（如餐饮用 food 图标），带有彩色背景

Scenario: 标签样式

• WHEN 显示账单类型
• THEN 使用彩色标签（支出红色、收入绿色），位于卡片右上角

Scenario: 空状态展示

• WHEN 账单列表为空
• THEN 显示统一的空状态图标和提示文案

Requirement: 迁移计划

系统必须按阶段迁移，确保平滑过渡。

Scenario: 并存期

• WHEN 迁移进行中
• THEN 新旧组件共存，已迁移页面使用新组件，未迁移页面继续使用旧组件

Scenario: 清理旧代码

• WHEN 所有页面迁移完成
• THEN 删除 components/TransactionList.vue，移除相关 import

REMOVED Requirements

Requirement: 一行一卡片布局

Reason: 间距过大，不适合列表视图，需要滚动过多才能查看更多账单
Migration: 使用新的紧凑布局（compact={true}），卡片间距减少至 6px