From 20015dbd2ad06a17aad2986bb44ff2b162bc33da Mon Sep 17 00:00:00 2001
From: "DESKTOP-72TV0V4\\caoxiaozhu" <leocaoxiaozhu@163.com>
Date: Fri, 6 Mar 2026 16:49:18 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=9A=97=E8=89=B2?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98=E4=B8=8B=E4=B8=8B=E6=8B=89=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E7=99=BD=E8=89=B2=E8=83=8C=E6=99=AF=E9=97=AA=E7=83=81=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加 dark-select-dropdown 自定义类
- 修复鼠标移出后下拉菜单出现白色背景的问题
- 强制覆盖所有可能的白色背景样式

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web/src/style.css          | 45 ++++++++++++++++++++++++++++++++++++++
 web/src/views/Database.vue |  4 ++--
 2 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/web/src/style.css b/web/src/style.css
index 1e3591e..8442173 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -19,6 +19,27 @@ body {
   @apply bg-dark-900 text-gray-100 font-sans;
 }
 
+/* 自定义下拉菜单类 */
+.dark-select-dropdown {
+  background-color: #1a1c25 !important;
+  border: 1px solid #2a2c36 !important;
+}
+
+.dark-select-dropdown .el-select-dropdown__item {
+  color: #ffffff !important;
+  background-color: transparent !important;
+}
+
+.dark-select-dropdown .el-select-dropdown__item:hover,
+.dark-select-dropdown .el-select-dropdown__item.hover {
+  background-color: #1a1c25 !important;
+}
+
+.dark-select-dropdown .el-select-dropdown__item.is-selected {
+  color: #ff9500 !important;
+  background-color: transparent !important;
+}
+
 /* Element Plus 暗色主题 */
 html.dark {
   --el-bg-color: #171922;
@@ -129,6 +150,30 @@ html.dark .el-select-dropdown {
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
 }
 
+/* 修复鼠标移出后出现白色背景的问题 */
+html.dark .el-select-dropdown__list {
+  background-color: #1a1c25 !important;
+}
+
+html.dark .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
+  background-color: transparent;
+}
+
+html.dark .el-popper.is-light .el-popper__arrow::before,
+html.dark .el-select-dropdown__arrow {
+  background-color: #1a1c25 !important;
+}
+
+/* 强制覆盖所有可能的白色背景 */
+html.dark .el-select-dropdown__item.hover,
+html.dark .el-select-dropdown__item:hover {
+  background-color: #1a1c25 !important;
+}
+
+html.dark .el-select-dropdown.el-popper[x-placement^="bottom"] .el-select-dropdown__item {
+  background-color: #1a1c25 !important;
+}
+
 html.dark .el-select-dropdown__item {
   color: #ffffff !important;
   padding: 8px 12px;
diff --git a/web/src/views/Database.vue b/web/src/views/Database.vue
index b4e4875..c9b2a24 100644
--- a/web/src/views/Database.vue
+++ b/web/src/views/Database.vue
@@ -807,7 +807,7 @@ const filteredDatabases = () => {
 
             <div>
               <label class="block text-sm font-medium text-gray-300 mb-2">Type</label>
-              <el-select v-model="editForm.db_type" placeholder="Select" class="w-full" size="large">
+              <el-select v-model="editForm.db_type" placeholder="Select" class="w-full" size="large" popper-class="dark-select-dropdown">
                 <el-option v-for="type in dbTypes" :key="type" :label="type" :value="type" />
               </el-select>
             </div>
@@ -924,7 +924,7 @@ const filteredDatabases = () => {
 
             <div>
               <label class="block text-sm font-medium text-gray-300 mb-2">Type</label>
-              <el-select v-model="newDbForm.db_type" placeholder="Select" class="w-full" size="large">
+              <el-select v-model="newDbForm.db_type" placeholder="Select" class="w-full" size="large" popper-class="dark-select-dropdown">
                 <el-option v-for="type in dbTypes" :key="type" :label="type" :value="type" />
               </el-select>
             </div>