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.
2.8 KiB
2.8 KiB
1. 主题变量准备
- 1.1 在
Web/src/assets/theme.css的:root块中添加浅色主题分段控制器变量--segmented-bg: #F4F4F5和--segmented-active-bg: #FFFFFF - 1.2 在
Web/src/assets/theme.css的[data-theme="dark"]块中添加暗色主题分段控制器变量--segmented-bg: #27272a和--segmented-active-bg: #3f3f46 - 1.3 为新变量添加注释,标注其来源于
.pans/v2.pen节点 NDWwE
2. 组件样式重构
- 2.1 修改
.tabs-wrapper的 padding 为var(--spacing-sm) var(--spacing-xl)(对应设计稿的[8, 24]) - 2.2 修改
.segmented-control的 background 从transparent改为var(--segmented-bg) - 2.3 修改
.segmented-control的 border-radius 从var(--radius-md)改为8px - 2.4 修改
.segmented-control的 padding 从0改为4px - 2.5 修改
.segmented-control的 gap 从var(--spacing-sm)改为4px - 2.6 确认
.segmented-control的 height 保持为40px
3. 标签项样式调整
- 3.1 修改
.tab-item的默认 background 从rgba(128, 128, 128, 0.15)改为transparent - 3.2 修改
.tab-item的 border-radius 从var(--radius-md)改为6px - 3.3 修改
.tab-item.active的 background 从rgba(128, 128, 128, 0.3)改为var(--segmented-active-bg) - 3.4 为
.tab-item.active添加阴影效果box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) - 3.5 确认
.tab-item.active .tab-text的 color 使用var(--text-primary)且 font-weight 为var(--font-bold)(600) - 3.6 确认
.tab-item:not(.active) .tab-text的 color 使用var(--text-secondary)且 font-weight 为var(--font-medium)(500)
4. 交互效果优化
- 4.1 确认
.tab-item的 transition 保持为all 0.3s cubic-bezier(0.4, 0, 0.2, 1) - 4.2 移除或调整
.tab-item:not(.active):hover的背景色,使其微妙增加透明度 (如background: rgba(128, 128, 128, 0.1))
5. 验证与测试
- 5.1 在 Chrome 浏览器的亮色主题下检查分段控制器视觉效果,对比 pencli 设计稿截图
- 5.2 在 Chrome 浏览器的暗色主题下检查分段控制器视觉效果,确保对比度充足
- 5.3 使用 Chrome DevTools 的对比度检查工具验证激活态和非激活态文字的对比度 >= 4.5:1
- 5.4 在 Safari 和 Firefox 浏览器中验证样式兼容性
- 5.5 在移动设备或移动模拟器中测试触摸交互和视觉效果
- 5.6 切换"周"、"月"、"年"三个标签,确认激活态切换动画流畅
- 5.7 在统计 v2 页面中实际使用,确认无布局错位或样式冲突
6. 文档与清理
- 6.1 如有必要,更新
Web/src/components/TimePeriodTabs.vue文件顶部的注释,说明样式已按 pencli 设计规范更新 - 6.2 检查是否有未使用的 CSS 类或变量,进行清理