suncheng/EmailBill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
6922dff5a97f885224d8df3fce6e2f06c24df821
EmailBill/openspec/changes/archive/2026-02-19-unify-bill-list-ui/specs/bill-list-unified-ui/spec.md
SunCheng 6922dff5a9
All checks were successful
Docker Build & Deploy / Build Docker Image (push) Successful in 17s
Details
Docker Build & Deploy / Deploy to Production (push) Successful in 7s
Details
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 1s
Details
Docker Build & Deploy / WeChat Notification (push) Successful in 2s
Details
archive: unify-bill-list-ui (2026-02-19) 
变更已完成并归档:
- 迁移 calendarV2/TransactionList.vue 使用 BillListComponent
- 代码从 403 行简化到 177 行
- 添加左滑删除功能
- Delta spec 已同步到主 specs

提交记录:
- f8e6029: refactor(calendar-v2): migrate TransactionList to BillListComponent
- 4fd190f: fix(calendar-v2): remove left/right padding
- 1ba446f: feat(calendar-v2): add delete functionality
- d324769: specs: sync bill-list-unified-ui
2026-02-19 22:08:10 +08:00

4.8 KiB
Raw Blame History

ADDED Requirements

Requirement: Unified Bill List Component Usage

所有账单列表页面 SHALL 使用 BillListComponent 组件来展示账单列表,而不是自定义实现。

Scenario: Component Imported and Used

  • WHEN 开发者查看任意账单列表页面的代码
  • THEN 页面 SHALL import BillListComponent from @/components/Bill/BillListComponent.vue
  • AND 页面 SHALL 在 template 中使用 <BillListComponent> 标签

Scenario: No Custom List Rendering

  • WHEN 开发者查看账单列表页面的代码
  • THEN 页面 SHALL NOT 包含自定义的 van-swipe-cell 列表渲染逻辑
  • AND 页面 SHALL NOT 包含重复的账单卡片样式定义

Requirement: Custom Data Source Mode

账单列表页面 SHALL 使用 Custom 数据模式,父组件控制数据加载逻辑。

Scenario: Data Source Configuration

  • WHEN 页面使用 BillListComponent
  • THEN 组件 SHALL 配置 data-source="custom" prop
  • AND 父组件 SHALL 通过 :transactions prop 传递账单数据数组

Scenario: Parent Controlled Loading

  • WHEN 页面需要加载账单数据
  • THEN 父组件 SHALL 负责调用 API 获取数据
  • AND 父组件 SHALL 负责数据筛选和分页逻辑
  • AND BillListComponent SHALL 仅负责展示传入的数据

Requirement: Business Logic Preservation

迁移后的页面 SHALL 保持原有的业务逻辑完整,包括事件处理、数据刷新和特定筛选。

Scenario: Click Event Handling

  • WHEN 用户点击账单卡片
  • THEN BillListComponent SHALL emit @click 事件
  • AND 父组件 SHALL 处理该事件,执行原有的业务逻辑(如显示详情弹窗)

Scenario: Delete Event Handling

  • WHEN 用户左滑删除账单
  • THEN BillListComponent SHALL emit @delete 事件(内部已完成 API 调用)
  • AND 父组件 SHALL 更新本地数据列表,移除已删除的账单

Scenario: Global Event Listening

  • WHEN 页面监听全局事件(如 transaction-deleted)
  • THEN 迁移后页面 SHALL 保留所有全局事件监听器
  • AND 事件处理逻辑 SHALL 保持不变

Requirement: Feature Configuration

页面 SHALL 通过 props 配置 BillListComponent 的功能开关,仅启用所需功能。

Scenario: Filter Bar Control

  • WHEN 页面不需要筛选栏功能
  • THEN 页面 SHALL 设置 :enable-filter="false" prop
  • AND BillListComponent SHALL NOT 显示筛选栏 UI

Scenario: Checkbox Control

  • WHEN 页面不需要多选功能
  • THEN 页面 SHALL 设置 :show-checkbox="false" prop
  • AND BillListComponent SHALL NOT 显示复选框

Scenario: Delete Button Control

  • WHEN 页面需要左滑删除功能
  • THEN 页面 SHALL 设置 :show-delete="true" prop
  • AND BillListComponent SHALL 显示左滑删除按钮

Requirement: Visual Consistency

所有账单列表页面 SHALL 使用一致的视觉设计和交互模式。

Scenario: Card Layout Consistency

  • WHEN 用户查看任意账单列表页面
  • THEN 所有账单卡片 SHALL 使用相同的布局:左侧图标、中间内容、右侧金额
  • AND 卡片样式 SHALL 与 /balance 页面一致

Scenario: Icon Display Consistency

  • WHEN 账单有分类信息
  • THEN 系统 SHALL 显示对应的 Iconify 图标或降级为 Vant 图标
  • AND 图标颜色和背景 SHALL 根据账单类型(支出/收入/不计入)统一着色

Scenario: Amount Formatting Consistency

  • WHEN 系统显示账单金额
  • THEN 支出 SHALL 显示为红色 - ¥XX.XX
  • AND 收入 SHALL 显示为绿色 + ¥XX.XX
  • AND 不计入 SHALL 显示为灰色 ¥XX.XX

Requirement: Migration Coverage

系统 SHALL 完成所有指定页面的账单列表迁移。

Scenario: All Target Pages Migrated

  • WHEN 迁移完成
  • THEN 以下 6 个页面 SHALL 全部使用 BillListComponent:
    • MessageView.vue
    • EmailRecord.vue
    • PeriodicRecord.vue
    • ClassificationEdit.vue
    • calendarV2/modules/TransactionList.vue
    • budgetV2/Index.vue

Scenario: No Functional Regression

  • WHEN 迁移完成后用户使用任意账单列表页面
  • THEN 所有原有功能 SHALL 正常工作(点击、删除、筛选、分页)
  • AND 用户 SHALL NOT 遇到任何功能缺失或异常

Requirement: Code Quality

迁移后的代码 SHALL 保持高质量,移除废弃代码。

Scenario: No Dead Code

  • WHEN 开发者审查迁移后的页面代码
  • THEN 页面 SHALL NOT 包含废弃的自定义列表代码
  • AND 页面 SHALL NOT 包含未使用的列表样式定义

Scenario: Component Import Clarity

  • WHEN 开发者查看页面导入语句
  • THEN 页面 SHALL 明确 import BillListComponent
  • AND 页面 SHALL 移除原有的自定义列表组件导入(如果有)
Reference in New Issue View Git Blame Copy Permalink