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.
4.4 KiB
4.4 KiB
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