1.9 KiB
1.9 KiB
修复主题色适配和下拉列表z-index问题
1. 主题色适配功能修复
问题分析
- 当前CustomSelect组件使用硬编码颜色值，未使用项目定义的主题色
- 项目通过Tailwind CSS定义了
art主题颜色，包括accent: '#d4b383'（主色调） - 项目支持深色模式，组件需要自动适应主题变化
解决方案
-
修改CustomSelect组件样式：
- 将硬编码颜色替换为Tailwind CSS变量
- 使用项目定义的
art主题颜色 - 确保组件能响应深色模式变化
-
具体修改点：
- 背景色：使用
bg-art-surface或bg-opacity配合主题色 - 边框色：使用
border-art-border或border-opacity - 文本色：使用
text-art-text - 主色调：使用
art-accent代替硬编码的#d4b383 - 悬停和选中状态：使用主题色的透明度变体
- 背景色：使用
2. 下拉列表z-index问题修复
问题分析
- 当前下拉列表z-index: 100，可能被其他元素遮挡
- 需要确保下拉列表显示在最上层
解决方案
-
调整z-index值：
- 检查项目中其他组件的z-index设置
- 将下拉列表z-index调整为更合理的值（如1000）
- 确保值足够高覆盖其他元素，但不影响其他组件
-
具体修改点：
- 将
.dropdown-options的z-index从100改为1000 - 确保容器元素有合适的定位（position: relative）
- 将
3. 实现步骤
-
修改CustomSelect.vue组件：
- 更新样式，使用Tailwind主题颜色
- 调整z-index值
-
测试验证：
- 检查组件在不同主题下的显示效果
- 验证下拉列表不被其他元素遮挡
- 确保其他组件的z-index不受影响
4. 预期效果
- 组件颜色自动适应系统或用户选择的主题
- 下拉列表始终显示在最上层，不被其他元素遮挡
- 保持与整体应用主题的一致性
- 不影响其他组件的正常显示层级