From 3c33f15f82dfbdd706554854cf27389fef5f813c Mon Sep 17 00:00:00 2001
From: "DESKTOP-72TV0V4\\caoxiaozhu" <leocaoxiaozhu@163.com>
Date: Thu, 5 Mar 2026 11:31:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E6=9A=97=E8=89=B2?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98=E6=A0=B7=E5=BC=8F=EF=BC=8C=E5=B0=86=E5=8E=9F?=
 =?UTF-8?q?=E7=94=9Fselect=E6=9B=BF=E6=8D=A2=E4=B8=BAel-select?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 优化el-select组件的暗色主题样式，包括输入框、下拉菜单、选中状态等
- 在Agents、MCP、ModelAPIs页面中将原生select替换为Element Plus el-select组件
- 提升UI一致性和用户体验

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web/src/style.css           | 75 ++++++++++++++++++++++++++++++++++++-
 web/src/views/Agents.vue    | 61 +++++++++++++-----------------
 web/src/views/MCP.vue       | 32 +++++++---------
 web/src/views/ModelAPIs.vue | 51 +++++++++++--------------
 4 files changed, 134 insertions(+), 85 deletions(-)

diff --git a/web/src/style.css b/web/src/style.css
index 5a323b9..cef2903 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -31,13 +31,16 @@ html.dark {
   --el-color-primary: #ff9500;
 }
 
+/* el-select 统一样式 */
 html.dark .el-select {
   --el-select-input-focus-border-color: #ff9500;
 }
 
 html.dark .el-select .el-input__wrapper {
-  background-color: #171922;
+  background-color: #1a1c25;
   box-shadow: 0 0 0 1px #2a2c36 inset;
+  border-radius: 8px;
+  transition: all 0.2s ease;
 }
 
 html.dark .el-select .el-input__wrapper:hover {
@@ -52,13 +55,40 @@ html.dark .el-select .el-input__inner {
   color: #ffffff;
 }
 
+html.dark .el-select .el-input__inner::placeholder {
+  color: #71717a;
+}
+
+/* 下拉箭头 */
+html.dark .el-select .el-input__suffix .el-select__caret {
+  color: #71717a;
+  transition: transform 0.3s;
+}
+
+html.dark .el-select .el-input__suffix .el-select__caret.is-reverse {
+  transform: rotate(180deg);
+}
+
+html.dark .el-select .el-input__suffix .el-select__caret.is-show-close {
+  color: #71717a;
+}
+
+html.dark .el-select .el-input__suffix .el-select__caret:hover {
+  color: #ff9500;
+}
+
+/* 下拉菜单 */
 html.dark .el-select-dropdown {
   background-color: #171922;
   border: 1px solid #2a2c36;
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
 }
 
 html.dark .el-select-dropdown__item {
   color: #ffffff;
+  padding: 8px 12px;
+  transition: all 0.2s;
 }
 
 html.dark .el-select-dropdown__item:hover {
@@ -71,6 +101,23 @@ html.dark .el-select-dropdown__item.is-selected {
   background-color: transparent;
 }
 
+html.dark .el-select-dropdown__item.is-selected::before {
+  content: '';
+  display: inline-block;
+  width: 4px;
+  height: 4px;
+  background-color: #ff9500;
+  border-radius: 50%;
+  margin-right: 8px;
+}
+
+/* 空状态 */
+html.dark .el-select-dropdown__empty {
+  color: #71717a;
+  padding: 20px 0;
+}
+
+/* popper 箭头 */
 html.dark .el-popper.is-light {
   background: #171922;
   border: 1px solid #2a2c36;
@@ -81,6 +128,32 @@ html.dark .el-popper.is-light .el-popper__arrow::before {
   border-color: #2a2c36;
 }
 
+/* 输入框尺寸 */
+html.dark .el-select.el-select--large .el-input__wrapper {
+  padding: 4px 11px;
+}
+
+html.dark .el-select.el-select--default .el-input__wrapper {
+  padding: 3px 10px;
+}
+
+/* 多选标签 */
+html.dark .el-select .el-tag {
+  background-color: #2a2c36;
+  border-color: transparent;
+  color: #ffffff;
+  border-radius: 4px;
+}
+
+html.dark .el-select .el-tag .el-tag__close {
+  color: #71717a;
+}
+
+html.dark .el-select .el-tag .el-tag__close:hover {
+  background-color: #ff9500;
+  color: #ffffff;
+}
+
 /* 柱状图增长动画 */
 @keyframes bar-grow {
   from {
diff --git a/web/src/views/Agents.vue b/web/src/views/Agents.vue
index afefd12..91846c2 100644
--- a/web/src/views/Agents.vue
+++ b/web/src/views/Agents.vue
@@ -248,15 +248,12 @@ const statusClass = (status: string) => {
             class="w-full bg-dark-600 border border-dark-500 rounded-lg py-2 pl-10 pr-4 text-white placeholder-gray-500 focus:outline-none focus:border-primary-orange"
           >
         </div>
-        <select
-          v-model="filterStatus"
-          class="bg-dark-600 border border-dark-500 rounded-lg px-4 py-2 text-white focus:outline-none focus:border-primary-orange"
-        >
-          <option value="all">All Status</option>
-          <option value="running">Running</option>
-          <option value="stopped">Stopped</option>
-          <option value="error">Error</option>
-        </select>
+        <el-select v-model="filterStatus" placeholder="Select" class="w-40" size="large">
+          <el-option label="All Status" value="all" />
+          <el-option label="Running" value="running" />
+          <el-option label="Stopped" value="stopped" />
+          <el-option label="Error" value="error" />
+        </el-select>
       </div>
 
       <!-- Agents 列表 -->
@@ -354,28 +351,22 @@ const statusClass = (status: string) => {
 
             <div>
               <label class="block text-sm font-medium text-gray-300 mb-2">Framework</label>
-              <select
-                v-model="editForm.framework"
-                class="w-full bg-dark-600 border border-dark-500 rounded-lg px-4 py-2.5 text-white focus:outline-none focus:border-primary-orange"
-              >
-                <option value="Google ADK">Google ADK</option>
-                <option value="OpenAI">OpenAI</option>
-                <option value="PydanticAI">PydanticAI</option>
-                <option value="LangChain">LangChain</option>
-              </select>
+              <el-select v-model="editForm.framework" placeholder="Select" class="w-full" size="large">
+                <el-option label="Google ADK" value="Google ADK" />
+                <el-option label="OpenAI" value="OpenAI" />
+                <el-option label="PydanticAI" value="PydanticAI" />
+                <el-option label="LangChain" value="LangChain" />
+              </el-select>
             </div>
 
             <div>
               <label class="block text-sm font-medium text-gray-300 mb-2">Model</label>
-              <select
-                v-model="editForm.model"
-                class="w-full bg-dark-600 border border-dark-500 rounded-lg px-4 py-2.5 text-white focus:outline-none focus:border-primary-orange"
-              >
-                <option value="gemini-2.0-flash">gemini-2.0-flash</option>
-                <option value="gpt-4o">gpt-4o</option>
-                <option value="gpt-4o-mini">gpt-4o-mini</option>
-                <option value="claude-3-5-sonnet">claude-3-5-sonnet</option>
-              </select>
+              <el-select v-model="editForm.model" placeholder="Select" class="w-full" size="large">
+                <el-option label="gemini-2.0-flash" value="gemini-2.0-flash" />
+                <el-option label="gpt-4o" value="gpt-4o" />
+                <el-option label="gpt-4o-mini" value="gpt-4o-mini" />
+                <el-option label="claude-3-5-sonnet" value="claude-3-5-sonnet" />
+              </el-select>
             </div>
 
             <div>
@@ -464,14 +455,14 @@ const statusClass = (status: string) => {
                   <i class="fa-solid fa-brain text-primary-cyan"></i>
                   <h4 class="font-medium text-white">Model</h4>
                 </div>
-                <select
-                  v-model="newAgentForm.model"
-                  class="w-full bg-dark-600 border border-dark-500 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-primary-orange transition-colors cursor-pointer"
-                >
-                  <option v-for="model in models.find(m => m.name === newAgentForm.framework)?.models" :key="model" :value="model">
-                    {{ model }}
-                  </option>
-                </select>
+                <el-select v-model="newAgentForm.model" placeholder="Select" class="w-full" size="large">
+                  <el-option
+                    v-for="model in models.find(m => m.name === newAgentForm.framework)?.models"
+                    :key="model"
+                    :label="model"
+                    :value="model"
+                  />
+                </el-select>
               </div>
 
               <!-- Agent 名称 -->
diff --git a/web/src/views/MCP.vue b/web/src/views/MCP.vue
index a5f897d..7f774bf 100644
--- a/web/src/views/MCP.vue
+++ b/web/src/views/MCP.vue
@@ -890,15 +890,12 @@ const statusClass = (status: string) => {
           class="w-full bg-dark-600 border border-dark-500 rounded-lg py-2 pl-10 pr-4 text-white placeholder-gray-500 focus:outline-none focus:border-primary-orange"
         >
       </div>
-      <select
-        v-model="filterStatus"
-        class="bg-dark-600 border border-dark-500 rounded-lg px-4 py-2 text-white focus:outline-none focus:border-primary-orange"
-      >
-        <option value="all">All Status</option>
-        <option value="running">Running</option>
-        <option value="stopped">Stopped</option>
-        <option value="error">Error</option>
-      </select>
+      <el-select v-model="filterStatus" placeholder="Select" class="w-40" size="large">
+        <el-option label="All Status" value="all" />
+        <el-option label="Running" value="running" />
+        <el-option label="Stopped" value="stopped" />
+        <el-option label="Error" value="error" />
+      </el-select>
     </div>
 
     <div class="bg-dark-700 rounded-xl overflow-hidden">
@@ -987,16 +984,13 @@ const statusClass = (status: string) => {
 
             <div>
               <label class="block text-sm font-medium text-gray-300 mb-2">Type</label>
-              <select
-                v-model="editForm.type"
-                class="w-full bg-dark-600 border border-dark-500 rounded-lg px-4 py-2.5 text-white focus:outline-none focus:border-primary-orange"
-              >
-                <option value="Linear">Linear</option>
-                <option value="Google Maps">Google Maps</option>
-                <option value="File System">File System</option>
-                <option value="PostgreSQL">PostgreSQL</option>
-                <option value="GitHub">GitHub</option>
-              </select>
+              <el-select v-model="editForm.type" placeholder="Select" class="w-full" size="large">
+                <el-option label="Linear" value="Linear" />
+                <el-option label="Google Maps" value="Google Maps" />
+                <el-option label="File System" value="File System" />
+                <el-option label="PostgreSQL" value="PostgreSQL" />
+                <el-option label="GitHub" value="GitHub" />
+              </el-select>
             </div>
 
             <div>
diff --git a/web/src/views/ModelAPIs.vue b/web/src/views/ModelAPIs.vue
index 2c07ce2..bc6bfc9 100644
--- a/web/src/views/ModelAPIs.vue
+++ b/web/src/views/ModelAPIs.vue
@@ -129,15 +129,12 @@ const providerIcon = (provider: string) => {
           class="w-full bg-dark-600 border border-dark-500 rounded-lg py-2 pl-10 pr-4 text-white placeholder-gray-500 focus:outline-none focus:border-primary-orange"
         >
       </div>
-      <select
-        v-model="filterStatus"
-        class="bg-dark-600 border border-dark-500 rounded-lg px-4 py-2 text-white focus:outline-none focus:border-primary-orange"
-      >
-        <option value="all">All Status</option>
-        <option value="active">Active</option>
-        <option value="inactive">Inactive</option>
-        <option value="error">Error</option>
-      </select>
+      <el-select v-model="filterStatus" placeholder="Select" class="w-40" size="large">
+        <el-option label="All Status" value="all" />
+        <el-option label="Active" value="active" />
+        <el-option label="Inactive" value="inactive" />
+        <el-option label="Error" value="error" />
+      </el-select>
     </div>
 
     <div class="bg-dark-700 rounded-xl overflow-hidden">
@@ -235,31 +232,25 @@ const providerIcon = (provider: string) => {
 
             <div>
               <label class="block text-sm font-medium text-gray-300 mb-2">Provider</label>
-              <select
-                v-model="editForm.provider"
-                class="w-full bg-dark-600 border border-dark-500 rounded-lg px-4 py-2.5 text-white focus:outline-none focus:border-primary-orange"
-              >
-                <option value="OpenAI">OpenAI</option>
-                <option value="Google">Google</option>
-                <option value="Cerebras">Cerebras</option>
-                <option value="Anthropic">Anthropic</option>
-                <option value="Microsoft">Microsoft</option>
-              </select>
+              <el-select v-model="editForm.provider" placeholder="Select" class="w-full" size="large">
+                <el-option label="OpenAI" value="OpenAI" />
+                <el-option label="Google" value="Google" />
+                <el-option label="Cerebras" value="Cerebras" />
+                <el-option label="Anthropic" value="Anthropic" />
+                <el-option label="Microsoft" value="Microsoft" />
+              </el-select>
             </div>
 
             <div>
               <label class="block text-sm font-medium text-gray-300 mb-2">Model</label>
-              <select
-                v-model="editForm.model"
-                class="w-full bg-dark-600 border border-dark-500 rounded-lg px-4 py-2.5 text-white focus:outline-none focus:border-primary-orange"
-              >
-                <option value="gpt-4o">gpt-4o</option>
-                <option value="gpt-4o-mini">gpt-4o-mini</option>
-                <option value="gpt-4">gpt-4</option>
-                <option value="gemini-2.0-flash">gemini-2.0-flash</option>
-                <option value="cerebras-sandbox">cerebras-sandbox</option>
-                <option value="claude-3-5-sonnet">claude-3-5-sonnet</option>
-              </select>
+              <el-select v-model="editForm.model" placeholder="Select" class="w-full" size="large">
+                <el-option label="gpt-4o" value="gpt-4o" />
+                <el-option label="gpt-4o-mini" value="gpt-4o-mini" />
+                <el-option label="gpt-4" value="gpt-4" />
+                <el-option label="gemini-2.0-flash" value="gemini-2.0-flash" />
+                <el-option label="cerebras-sandbox" value="cerebras-sandbox" />
+                <el-option label="claude-3-5-sonnet" value="claude-3-5-sonnet" />
+              </el-select>
             </div>
 
             <div>