803f09cc97
All checks were successful
Docker Build & Deploy / Build Docker Image (push) Successful in 27s
Docker Build & Deploy / Deploy to Production (push) Successful in 6s
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 2s
Docker Build & Deploy / WeChat Notification (push) Successful in 2s
- Introduced a new visual style for holiday highlights in the calendar component, replacing complex gradients with solid colors for better clarity. - Removed the holiday badge to reduce visual noise and enhance user experience. - Ensured that holiday information remains accessible through long-press interactions. - Updated specifications to reflect the new design decisions and requirements for both light and dark themes. - Added tasks for implementation, including style adjustments and accessibility enhancements.
109 lines
4.4 KiB
Markdown
109 lines
4.4 KiB
Markdown
# Time Period Tabs UI Specification
|
|
|
|
时间段选择器组件的 UI 规格，用于统计页面的"周/月/年"时间段切换。
|
|
|
|
## 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
|