89 lines
4.0 KiB
Markdown
89 lines
4.0 KiB
Markdown
## ADDED Requirements
|
||
|
||
### Requirement: 统一弹窗组件提供底部弹出式容器
|
||
系统 SHALL 提供统一的弹窗组件 `PopupContainer`，支持底部弹出式布局，用于展示表单、列表、详情等内容。
|
||
|
||
#### Scenario: 基础弹窗展示
|
||
- **WHEN** 用户触发弹窗打开
|
||
- **THEN** 系统显示底部弹出的弹窗容器，带有圆角和关闭按钮
|
||
- **THEN** 弹窗高度可配置（默认 80%）
|
||
|
||
#### Scenario: 弹窗头部固定内容可滚动
|
||
- **WHEN** 弹窗内容超出可视区域
|
||
- **THEN** 弹窗头部保持固定，内容区域可滚动
|
||
- **THEN** 底部页脚（如有）保持固定不可滚动
|
||
|
||
### Requirement: 统一弹窗组件支持标题和副标题
|
||
系统 SHALL 允许配置弹窗的标题和副标题，副标题用于显示统计信息或辅助说明。
|
||
|
||
#### Scenario: 显示标题和副标题
|
||
- **WHEN** 弹窗配置了标题和副标题
|
||
- **THEN** 标题显示在弹窗头部，字体大小 16px，加粗
|
||
- **THEN** 副标题显示在标题下方，字体大小 14px，居中显示
|
||
|
||
#### Scenario: 无副标题时的头部布局
|
||
- **WHEN** 弹窗只配置了标题，未配置副标题
|
||
- **THEN** 标题居中显示
|
||
- **THEN** 如果有操作按钮，操作按钮显示在标题右侧
|
||
|
||
### Requirement: 统一弹窗组件支持头部操作按钮插槽
|
||
系统 SHALL 提供 `header-actions` 插槽，允许在弹窗头部插入自定义操作按钮。
|
||
|
||
#### Scenario: 插入头部操作按钮
|
||
- **WHEN** 父组件使用 `header-actions` 插槽
|
||
- **THEN** 操作按钮显示在弹窗头部的合适位置（有副标题时在右侧，无副标题时与标题同行右侧）
|
||
|
||
### Requirement: 统一弹窗组件支持底部固定页脚
|
||
系统 SHALL 提供固定底部的页脚区域，用于放置确认、取消等操作按钮。
|
||
|
||
#### Scenario: 显示底部页脚
|
||
- **WHEN** 父组件使用 `footer` 插槽
|
||
- **THEN** 页脚固定显示在弹窗底部，内容区域可滚动
|
||
- **THEN** 页脚区域有上边框分隔，背景色与头部一致
|
||
|
||
### Requirement: 统一弹窗组件支持双向绑定
|
||
系统 SHALL 使用 `v-model:show` 或 `v-model` 控制弹窗的显示/隐藏状态。
|
||
|
||
#### Scenario: 通过 v-model 控制弹窗显示
|
||
- **WHEN** 父组件修改 v-model 绑定的值为 true
|
||
- **THEN** 弹窗打开并显示内容
|
||
- **WHEN** 用户点击关闭按钮或弹窗外部区域
|
||
- **THEN** 弹窗关闭，v-model 绑定的值更新为 false
|
||
|
||
### Requirement: 统一弹窗组件支持关闭按钮配置
|
||
系统 SHALL 允许通过 `closeable` prop 配置是否显示关闭按钮。
|
||
|
||
#### Scenario: 禁用关闭按钮
|
||
- **WHEN** closeable 设置为 false
|
||
- **THEN** 弹窗不显示关闭按钮
|
||
- **THEN** 用户只能通过 v-model 关闭弹窗或点击弹窗外部区域
|
||
|
||
### Requirement: 统一弹窗组件支持点击外部关闭
|
||
系统 SHALL 支持点击弹窗外部区域关闭弹窗（继承自 Vant UI 的 van-popup）。
|
||
|
||
#### Scenario: 点击外部区域关闭
|
||
- **WHEN** 用户点击弹窗外部区域
|
||
- **THEN** 弹窗关闭，v-model 绑定的值更新为 false
|
||
|
||
### Requirement: 统一弹窗组件支持表单验证场景
|
||
系统 SHALL 支持在弹窗内容区域放置表单，并提供表单验证功能。
|
||
|
||
#### Scenario: 表单弹窗提交
|
||
- **WHEN** 用户填写表单并点击页脚的提交按钮
|
||
- **THEN** 父组件可以访问表单数据进行验证和提交
|
||
- **THEN** 验证失败时，弹窗保持打开状态
|
||
|
||
### Requirement: 统一弹窗组件使用 Vant UI 主题变量
|
||
系统 SHALL 使用 Vant UI 的 CSS 变量（如 `--van-text-color`、`--van-border-color`、`--van-background` 等）保持与现有设计系统一致。
|
||
|
||
#### Scenario: 主题适配
|
||
- **WHEN** 应用切换主题（深色/浅色）
|
||
- **THEN** 弹窗组件自动适配主题颜色
|
||
|
||
### Requirement: 统一弹窗组件支持 teleport 到 body
|
||
系统 SHALL 将弹窗挂载到 `body` 元素，避免被父组件的样式或层级影响。
|
||
|
||
#### Scenario: 弹窗层级正确
|
||
- **WHEN** 弹窗在嵌套组件中打开
|
||
- **THEN** 弹窗正确显示在最顶层，不被父组件的 z-index 影响
|