## ADDED Requirements

### Requirement: 分段控制器容器样式

时间段选择器组件 SHALL 具有一个浅灰色背景容器,包含固定的内边距、圆角和高度,以匹配 pencli 设计规范 (节点 4iQfn)。

#### Scenario: 亮色主题容器样式
- **WHEN** 用户在亮色主题下查看统计 v2 页面
- **THEN** 分段控制器容器背景色为 `#F4F4F5`
- **AND** 容器内边距为 `4px`
- **AND** 容器圆角为 `8px`
- **AND** 容器高度为 `40px`
- **AND** 容器内标签间隔为 `4px`

#### Scenario: 暗色主题容器样式
- **WHEN** 用户在暗色主题下查看统计 v2 页面
- **THEN** 分段控制器容器背景色为 `#27272a`
- **AND** 容器内边距为 `4px`
- **AND** 容器圆角为 `8px`
- **AND** 容器高度为 `40px`
- **AND** 容器内标签间隔为 `4px`

### Requirement: 激活态标签样式

当某个时间段标签被选中时,该标签 SHALL 显示白色(亮色主题)或深灰色(暗色主题)背景,文字颜色为深色(亮色)或浅色(暗色),字重为粗体,以突出显示当前选择。

#### Scenario: 亮色主题激活态
- **WHEN** 用户在亮色主题下选择"月"标签
- **THEN** "月"标签背景色为 `#FFFFFF`
- **AND** "月"标签文字颜色为 `#1A1A1A`
- **AND** "月"标签文字字重为 `600`
- **AND** "月"标签圆角为 `6px`
- **AND** "月"标签具有微妙的阴影效果

#### Scenario: 暗色主题激活态
- **WHEN** 用户在暗色主题下选择"月"标签
- **THEN** "月"标签背景色为 `#3f3f46`
- **AND** "月"标签文字颜色为 `#f4f4f5`
- **AND** "月"标签文字字重为 `600`
- **AND** "月"标签圆角为 `6px`
- **AND** "月"标签具有微妙的阴影效果

### Requirement: 非激活态标签样式

未被选中的时间段标签 SHALL 显示透明背景,灰色文字,中等字重,与激活态形成明显对比。

#### Scenario: 亮色主题非激活态
- **WHEN** 用户在亮色主题下查看"周"和"年"标签(未选中)
- **THEN** "周"和"年"标签背景色为透明
- **AND** "周"和"年"标签文字颜色为 `#6B7280`
- **AND** "周"和"年"标签文字字重为 `500`
- **AND** "周"和"年"标签圆角为 `6px`

#### Scenario: 暗色主题非激活态
- **WHEN** 用户在暗色主题下查看"周"和"年"标签(未选中)
- **THEN** "周"和"年"标签背景色为透明
- **AND** "周"和"年"标签文字颜色为 `#a1a1aa`
- **AND** "周"和"年"标签文字字重为 `500`
- **AND** "周"和"年"标签圆角为 `6px`

### Requirement: 交互反馈

标签 SHALL 在用户悬停时提供视觉反馈,并在状态切换时具有平滑的过渡动画。

#### Scenario: 悬停效果
- **WHEN** 用户将鼠标悬停在非激活态标签上
- **THEN** 标签背景透明度略微增加
- **AND** 过渡动画时长为 `0.3s`
- **AND** 使用 `cubic-bezier(0.4, 0, 0.2, 1)` 缓动函数

#### Scenario: 点击切换动画
- **WHEN** 用户点击非激活态标签
- **THEN** 新激活的标签背景和文字颜色平滑过渡到激活态样式
- **AND** 原激活的标签平滑过渡到非激活态样式
- **AND** 过渡动画时长为 `0.3s`

### Requirement: 主题自适应

分段控制器组件 SHALL 根据应用的当前主题设置自动切换样式,无需手动干预。

#### Scenario: 主题切换响应
- **WHEN** 用户从亮色主题切换到暗色主题
- **THEN** 分段控制器容器背景从 `#F4F4F5` 变为 `#27272a`
- **AND** 激活态标签背景从 `#FFFFFF` 变为 `#3f3f46`
- **AND** 激活态标签文字从 `#1A1A1A` 变为 `#f4f4f5`
- **AND** 非激活态标签文字从 `#6B7280` 变为 `#a1a1aa`

#### Scenario: 主题变量依赖
- **WHEN** 系统读取分段控制器样式
- **THEN** 容器背景使用 CSS 变量 `--segmented-bg`
- **AND** 激活态背景使用 CSS 变量 `--segmented-active-bg`
- **AND** 文字颜色使用 CSS 变量 `--text-primary` 和 `--text-secondary`

### Requirement: 可访问性对比度

激活态和非激活态的文字与背景对比度 SHALL 满足 WCAG AA 级别标准 (至少 4.5:1)。

#### Scenario: 亮色主题对比度验证
- **WHEN** 在亮色主题下测量激活态文字 (`#1A1A1A`) 与背景 (`#FFFFFF`) 的对比度
- **THEN** 对比度比值 >= 4.5:1

#### Scenario: 暗色主题对比度验证
- **WHEN** 在暗色主题下测量激活态文字 (`#f4f4f5`) 与背景 (`#3f3f46`) 的对比度
- **THEN** 对比度比值 >= 4.5:1