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.
1.5 KiB
1.5 KiB
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- 可能需要添加新的主题变量
用户体验影响:
- 视觉效果更加符合设计规范
- 亮色/暗色主题下均有更好的对比度和可读性
- 激活态更加明显,提升交互反馈