From a6176ea236fed709bfb97b8ac2c737a5ac8e1f09 Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Thu, 4 Jun 2026 20:25:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E6=A8=A1=E5=9E=8B?=
 =?UTF-8?q?=E4=BE=9B=E5=BA=94=E5=95=86=E5=8D=A1=E7=89=87=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 卡片右下角始终显示启用开关，支持直接切换供应商状态
- 移除未启用卡片的透明度，移动端不再有视觉弱化
- 「管理模型」按钮追加灰色「已启用 N 个」计数，移除卡片内模型数量信息行
- 放大供应商图标至 30px
---
 .../ModelProviderManagePanel.vue              | 50 ++++++++++++++-----
 1 file changed, 37 insertions(+), 13 deletions(-)

diff --git a/web/src/components/model-management/ModelProviderManagePanel.vue b/web/src/components/model-management/ModelProviderManagePanel.vue
index 015ef4c3..1fd3ee23 100644
--- a/web/src/components/model-management/ModelProviderManagePanel.vue
+++ b/web/src/components/model-management/ModelProviderManagePanel.vue
@@ -9,7 +9,6 @@ import {
   Settings2,
   Trash2,
   CheckCircle2,
-  Edit3,
   LayersPlus
 } from 'lucide-vue-next'
 
@@ -22,6 +21,7 @@ import ExtensionCardGrid from '@/components/extensions/ExtensionCardGrid.vue'
 const loading = ref(false)
 const remoteLoading = ref(false)
 const saving = ref(false)
+const togglingProviderId = ref(null)
 const providers = ref([])
 const searchQuery = ref('')
 const modelTestLoadingBySpec = ref({})
@@ -265,8 +265,7 @@ const loadProviders = async () => {
 function getProviderInfo(provider) {
   return [
     { label: 'Base URL', value: provider.base_url || '-' },
-    { label: '能力', value: provider.capabilities?.join(', ') || 'chat' },
-    { label: '已启用', value: `${provider.enabled_models?.length || 0} 个模型` }
+    { label: '能力', value: provider.capabilities?.join(', ') || 'chat' }
   ]
 }
 
@@ -404,6 +403,20 @@ const deleteProviderFromEdit = async () => {
   }
 }
 
+const toggleProviderEnabled = async (provider, checked) => {
+  togglingProviderId.value = provider.provider_id
+  try {
+    await modelProviderApi.updateProvider(provider.provider_id, { is_enabled: checked })
+    message.success(checked ? '已启用' : '已停用')
+    await loadProviders()
+  } catch (error) {
+    message.error(error.message || '操作失败')
+    await loadProviders()
+  } finally {
+    togglingProviderId.value = null
+  }
+}
+
 // ============ Models Modal Operations ============
 const openModelsModal = (provider) => {
   currentProviderForModels.value = provider
@@ -637,7 +650,6 @@ defineExpose({
         :key="provider.provider_id"
         :title="provider.display_name"
         :subtitle="provider.provider_id"
-        :disabled="!provider.is_enabled"
         :default-icon="Globe"
         :info="getProviderInfo(provider)"
         :status="getProviderStatus(provider)"
@@ -654,16 +666,17 @@ defineExpose({
           <button class="view-models-btn" type="button" @click.stop="openModelsModal(provider)">
             <Settings2 :size="14" />
             管理模型
-          </button>
-          <a-tooltip title="编辑供应商">
-            <a-button
-              size="small"
-              class="lucide-icon-btn"
-              @click.stop="openEditProviderModal(provider)"
+            <span v-if="provider.enabled_models?.length" class="enabled-count"
+              >（已启用 {{ provider.enabled_models.length }} 个）</span
             >
-              <Edit3 :size="14" />
-            </a-button>
-          </a-tooltip>
+          </button>
+          <a-switch
+            size="small"
+            :checked="provider.is_enabled"
+            :loading="togglingProviderId === provider.provider_id"
+            @click.stop
+            @change="(checked) => toggleProviderEnabled(provider, checked)"
+          />
         </template>
       </InfoCard>
     </ExtensionCardGrid>
@@ -1077,6 +1090,11 @@ defineExpose({
 .model-provider-manage-panel {
   height: 100%;
   min-height: 0;
+
+  :deep(.info-card-icon img) {
+    width: 30px;
+    height: 30px;
+  }
 }
 
 .view-models-btn {
@@ -1098,6 +1116,12 @@ defineExpose({
   }
 }
 
+.enabled-count {
+  color: var(--gray-500);
+  font-size: 12px;
+  font-weight: 400;
+}
+
 .spinning {
   animation: spin 1s linear infinite;
 }