46 lines
1.7 KiB
Markdown
46 lines
1.7 KiB
Markdown
|
## ADDED Requirements
|
||
|
|
|
||
|
|
### Requirement: 分段控制器布局
|
||
|
|
余额页面的标签切换 SHALL 使用分段控制器(segmented control)样式,包含三个选项:账单、邮件、消息。
|
||
|
|
|
||
|
|
#### Scenario: 分段控制器显示
|
||
|
|
- **WHEN** 用户打开余额页面
|
||
|
|
- **THEN** 系统显示分段控制器,包含"账单"、"邮件"、"消息"三个选项
|
||
|
|
|
||
|
|
#### Scenario: 默认选中账单
|
||
|
|
- **WHEN** 用户首次打开余额页面且 URL 无 tab 参数
|
||
|
|
- **THEN** 系统默认选中"账单"标签
|
||
|
|
|
||
|
|
### Requirement: 标签页切换交互
|
||
|
|
用户 SHALL 能够点击分段控制器中的任意选项切换标签页。
|
||
|
|
|
||
|
|
#### Scenario: 点击切换标签
|
||
|
|
- **WHEN** 用户点击"邮件"选项
|
||
|
|
- **THEN** 系统切换到邮件视图,并更新分段控制器的选中状态
|
||
|
|
|
||
|
|
#### Scenario: 路由参数切换
|
||
|
|
- **WHEN** 用户通过底部导航栏跳转到余额页面且携带 `?tab=message` 参数
|
||
|
|
- **THEN** 系统自动选中"消息"标签
|
||
|
|
|
||
|
|
### Requirement: 视觉样式一致性
|
||
|
|
分段控制器 SHALL 使用与统计页面相同的样式规范和 CSS 变量。
|
||
|
|
|
||
|
|
#### Scenario: 亮色主题样式
|
||
|
|
- **WHEN** 应用处于亮色主题
|
||
|
|
- **THEN** 分段控制器使用 `var(--segmented-bg)` 作为背景色,选中项使用 `var(--segmented-active-bg)`
|
||
|
|
|
||
|
|
#### Scenario: 暗色主题样式
|
||
|
|
- **WHEN** 应用处于暗色主题
|
||
|
|
- **THEN** 分段控制器自动应用暗色主题对应的 CSS 变量值
|
||
|
|
|
||
|
|
### Requirement: 移动端触控体验
|
||
|
|
分段控制器 SHALL 针对移动端优化触控体验。
|
||
|
|
|
||
|
|
#### Scenario: 触控区域
|
||
|
|
- **WHEN** 用户在移动设备上点击选项
|
||
|
|
- **THEN** 系统确保每个选项的可点击区域高度不小于 40px
|
||
|
|
|
||
|
|
#### Scenario: 触控反馈
|
||
|
|
- **WHEN** 用户点击未选中的选项
|
||
|
|
- **THEN** 系统显示背景色过渡动画(0.3s cubic-bezier)
|