120 lines
4.7 KiB
Markdown
120 lines
4.7 KiB
Markdown
|
## ADDED Requirements
|
|||
|
|
|
|||
|
|
### Requirement: PopupContainerV2 提供固定布局能力
|
|||
|
|
|
|||
|
|
PopupContainerV2 组件 SHALL 提供固定头部、可滚动内容、固定底部的布局模式，并采用 TransactionDetailSheet 的样式风格（16px 圆角、Inter 字体、纯白背景）。
|
|||
|
|
|
|||
|
|
#### Scenario: PopupContainerV2 基础结构
|
|||
|
|
|
|||
|
|
- **WHEN** 使用 PopupContainerV2 组件
|
|||
|
|
- **THEN** 组件基于 van-popup 实现底部弹窗
|
|||
|
|
- **THEN** 弹窗顶部圆角为 16px（borderTopLeftRadius 和 borderTopRightRadius）
|
|||
|
|
- **THEN** 背景色为 #ffffff（亮色模式）或 #18181b（暗色模式）
|
|||
|
|
|
|||
|
|
#### Scenario: PopupContainerV2 固定头部
|
|||
|
|
|
|||
|
|
- **WHEN** 传入 title prop
|
|||
|
|
- **THEN** 头部显示标题文本，字体为 Inter，18px，font-weight 600
|
|||
|
|
- **THEN** 头部右侧显示关闭按钮（van-icon cross）
|
|||
|
|
- **THEN** 头部固定在顶部，不随内容滚动
|
|||
|
|
|
|||
|
|
#### Scenario: PopupContainerV2 可滚动内容区域
|
|||
|
|
|
|||
|
|
- **WHEN** 在 default 插槽中放置内容
|
|||
|
|
- **THEN** 内容区域可独立滚动
|
|||
|
|
- **THEN** 滚动时头部和底部保持固定
|
|||
|
|
- **THEN** 内容区域不提供默认 padding，由使用方控制
|
|||
|
|
|
|||
|
|
#### Scenario: PopupContainerV2 固定底部
|
|||
|
|
|
|||
|
|
- **WHEN** 在 footer 插槽中放置操作按钮
|
|||
|
|
- **THEN** 底部区域固定在底部，不随内容滚动
|
|||
|
|
- **THEN** 底部区域保持与内容区域的视觉分隔
|
|||
|
|
|
|||
|
|
#### Scenario: PopupContainerV2 暗色模式支持
|
|||
|
|
|
|||
|
|
- **WHEN** 系统启用暗色模式（prefers-color-scheme: dark）
|
|||
|
|
- **THEN** 背景色切换为 #18181b
|
|||
|
|
- **THEN** 标题文本颜色切换为 #fafafa
|
|||
|
|
- **THEN** 关闭按钮颜色切换为 #a1a1aa
|
|||
|
|
|
|||
|
|
## MODIFIED Requirements
|
|||
|
|
|
|||
|
|
### Requirement: TransactionDetailSheet 使用 PopupContainerV2 实现固定布局
|
|||
|
|
|
|||
|
|
TransactionDetailSheet 组件 SHALL 使用 PopupContainerV2 组件实现底部弹窗，并确保头部标题和底部操作按钮固定不随内容滚动。
|
|||
|
|
|
|||
|
|
#### Scenario: 打开交易详情弹窗
|
|||
|
|
|
|||
|
|
- **WHEN** 用户点击交易记录打开详情弹窗
|
|||
|
|
- **THEN** 弹窗从底部弹出，使用 PopupContainerV2 组件
|
|||
|
|
- **THEN** 弹窗顶部圆角为 16px
|
|||
|
|
- **THEN** 头部显示固定标题"交易详情"，字体为 Inter 18px
|
|||
|
|
- **THEN** 底部固定显示"删除"和"保存"按钮
|
|||
|
|
- **THEN** 中间内容区域（金额、时间、备注、类型、分类）可独立滚动
|
|||
|
|
|
|||
|
|
#### Scenario: 滚动交易详情内容
|
|||
|
|
|
|||
|
|
- **WHEN** 用户在交易详情弹窗中滚动内容
|
|||
|
|
- **THEN** 头部标题始终固定在顶部可见
|
|||
|
|
- **THEN** 底部操作按钮（删除、保存）始终固定在底部可见
|
|||
|
|
- **THEN** 只有中间内容区域发生滚动
|
|||
|
|
|
|||
|
|
#### Scenario: 展开分类选择器后滚动
|
|||
|
|
|
|||
|
|
- **WHEN** 用户点击"分类"字段展开分类选择器
|
|||
|
|
- **THEN** 分类选择器在内容区域内展开
|
|||
|
|
- **THEN** 如果内容超出可视区域，用户可以滚动查看所有分类选项
|
|||
|
|
- **THEN** 头部标题和底部按钮仍然保持固定
|
|||
|
|
|
|||
|
|
### Requirement: 保持现有功能和交互不变
|
|||
|
|
|
|||
|
|
TransactionDetailSheet 组件在重构后 SHALL 保持所有现有的功能和交互逻辑不变，包括但不限于金额编辑、日期选择、分类选择、保存、删除等操作。
|
|||
|
|
|
|||
|
|
#### Scenario: 金额编辑功能保持不变
|
|||
|
|
|
|||
|
|
- **WHEN** 用户点击金额数值进入编辑模式
|
|||
|
|
- **THEN** 金额输入框自动聚焦并选中当前值
|
|||
|
|
- **THEN** 用户输入新金额后失焦时自动格式化为两位小数
|
|||
|
|
|
|||
|
|
#### Scenario: 日期时间选择功能保持不变
|
|||
|
|
|
|||
|
|
- **WHEN** 用户点击"时间"字段
|
|||
|
|
- **THEN** 弹出 van-datetime-picker 日期时间选择器
|
|||
|
|
- **THEN** 选择器显示在最顶层（不受 PopupContainerV2 层级影响）
|
|||
|
|
- **THEN** 确认后时间更新为选择的值
|
|||
|
|
|
|||
|
|
#### Scenario: 分类选择功能保持不变
|
|||
|
|
|
|||
|
|
- **WHEN** 用户点击"分类"字段
|
|||
|
|
- **THEN** 展开 ClassifySelector 组件
|
|||
|
|
- **THEN** 用户可以选择分类
|
|||
|
|
- **THEN** 选择后自动触发保存
|
|||
|
|
|
|||
|
|
#### Scenario: 保存和删除功能保持不变
|
|||
|
|
|
|||
|
|
- **WHEN** 用户点击"保存"按钮
|
|||
|
|
- **THEN** 验证必填字段（金额、分类、时间）
|
|||
|
|
- **THEN** 调用 updateTransaction API 更新数据
|
|||
|
|
- **THEN** 成功后显示提示并关闭弹窗
|
|||
|
|
- **WHEN** 用户点击"删除"按钮
|
|||
|
|
- **THEN** 显示确认对话框
|
|||
|
|
- **THEN** 确认后调用 deleteTransaction API 删除数据
|
|||
|
|
- **THEN** 成功后显示提示并关闭弹窗
|
|||
|
|
|
|||
|
|
### Requirement: 组件对外 API 兼容
|
|||
|
|
|
|||
|
|
TransactionDetailSheet 组件的 props 和 events SHALL 保持与重构前完全一致，确保零破坏性变更。
|
|||
|
|
|
|||
|
|
#### Scenario: Props 保持不变
|
|||
|
|
|
|||
|
|
- **WHEN** 父组件传递 `show` 和 `transaction` props
|
|||
|
|
- **THEN** TransactionDetailSheet 正常接收并响应这些 props
|
|||
|
|
- **THEN** 不需要修改任何调用方代码
|
|||
|
|
|
|||
|
|
#### Scenario: Events 保持不变
|
|||
|
|
|
|||
|
|
- **WHEN** 用户保存或删除交易
|
|||
|
|
- **THEN** TransactionDetailSheet 触发 `update:show`, `save`, `delete` 事件
|
|||
|
|
- **THEN** 事件参数格式与重构前完全一致
|