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