# 修复主题色适配和下拉列表z-index问题

## 1. 主题色适配功能修复

### 问题分析
- 当前CustomSelect组件使用硬编码颜色值，未使用项目定义的主题色
- 项目通过Tailwind CSS定义了`art`主题颜色，包括`accent: '#d4b383'`（主色调）
- 项目支持深色模式，组件需要自动适应主题变化

### 解决方案
1. **修改CustomSelect组件样式**：
   - 将硬编码颜色替换为Tailwind CSS变量
   - 使用项目定义的`art`主题颜色
   - 确保组件能响应深色模式变化

2. **具体修改点**：
   - 背景色：使用`bg-art-surface`或`bg-opacity`配合主题色
   - 边框色：使用`border-art-border`或`border-opacity`
   - 文本色：使用`text-art-text`
   - 主色调：使用`art-accent`代替硬编码的`#d4b383`
   - 悬停和选中状态：使用主题色的透明度变体

## 2. 下拉列表z-index问题修复

### 问题分析
- 当前下拉列表z-index: 100，可能被其他元素遮挡
- 需要确保下拉列表显示在最上层

### 解决方案
1. **调整z-index值**：
   - 检查项目中其他组件的z-index设置
   - 将下拉列表z-index调整为更合理的值（如1000）
   - 确保值足够高覆盖其他元素，但不影响其他组件

2. **具体修改点**：
   - 将`.dropdown-options`的z-index从100改为1000
   - 确保容器元素有合适的定位（position: relative）

## 3. 实现步骤

1. **修改CustomSelect.vue组件**：
   - 更新样式，使用Tailwind主题颜色
   - 调整z-index值

2. **测试验证**：
   - 检查组件在不同主题下的显示效果
   - 验证下拉列表不被其他元素遮挡
   - 确保其他组件的z-index不受影响

## 4. 预期效果

- 组件颜色自动适应系统或用户选择的主题
- 下拉列表始终显示在最上层，不被其他元素遮挡
- 保持与整体应用主题的一致性
- 不影响其他组件的正常显示层级