2cf19a45e5
All checks were successful
Docker Build & Deploy / Build Docker Image (push) Successful in 23s
Docker Build & Deploy / Deploy to Production (push) Successful in 6s
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 1s
Docker Build & Deploy / WeChat Notification (push) Successful in 1s
1.7 KiB
1.7 KiB
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)