1

openspec/specs/balance-segmented-tabs/spec.md

@@ -0,0 +1,45 @@
+## 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)