specs: sync bill-list-unified-ui from unify-bill-list-ui change
同步新的统一账单列表 UI 规范到主 specs - 定义所有账单列表必须遵循的视觉设计和交互模式 - 包含 7 个核心需求和多个可测试场景
This commit is contained in:
114
openspec/specs/bill-list-unified-ui/spec.md
Normal file
114
openspec/specs/bill-list-unified-ui/spec.md
Normal file
@@ -0,0 +1,114 @@
|
|||||||
|
## 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
Block a user