## 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)