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