## Why

统计 v2 页面中的时间段选择器组件(`TimePeriodTabs`)的视觉样式与 pencli 设计文件(`.pans/v2.pen`)中的节点 NDWwE 不一致。当前实现使用透明背景和半透明灰色,而设计稿要求使用浅灰色背景(`#F4F4F5`)和白色激活态,且需要适配暗色主题。

## What Changes

- 修改 `Web/src/components/TimePeriodTabs.vue` 组件样式,使其完全符合设计稿规格
- 添加外层容器背景色 `#F4F4F5` (浅色主题) 和对应的暗色主题背景色
- 调整激活态样式:使用白色背景 (`#FFFFFF`) 替代当前的半透明灰色
- 调整非激活态样式:使用透明背景替代当前的半透明灰色
- 增加容器内边距 `4px` 和圆角 `8px`
- 调整文字颜色:激活态使用 `#1A1A1A` (深色),非激活态使用 `#6B7280` (灰色)
- 添加暗色主题变体,确保在深色模式下也符合设计规范

## Capabilities

### New Capabilities
无

### Modified Capabilities
- `time-period-tabs-ui`: 时间段选择器组件的 UI 样式需求变更,需要完全匹配 pencli 设计稿并支持双主题

## Impact

**受影响的文件:**
- `Web/src/components/TimePeriodTabs.vue` - 组件样式重写

**受影响的页面:**
- `Web/src/views/statisticsV2/Index.vue` - 使用该组件的统计 v2 页面

**依赖:**
- `Web/src/assets/theme.css` - 可能需要添加新的主题变量

**用户体验影响:**
- 视觉效果更加符合设计规范
- 亮色/暗色主题下均有更好的对比度和可读性
- 激活态更加明显,提升交互反馈