fix: adapt provider icons to dark mode

dashboard/src/components/provider/AddNewProvider.vue

@@ -45,7 +45,11 @@
                                         </div>
                                         <div class="provider-card-logo">
                                             <img :src="getProviderIcon(template.provider)"
-                                                v-if="getProviderIcon(template.provider)" class="provider-logo-img">
+                                                v-if="getProviderIcon(template.provider)"
+                                                :class="[
+                                                    'provider-logo-img',
+                                                    { 'provider-icon--monochrome': isMonochromeProviderIcon(template.provider) }
+                                                ]">
                                             <div v-else class="provider-logo-fallback">
                                                 {{ name[0].toUpperCase() }}
                                             </div>
@@ -72,7 +76,7 @@
 
 <script>
 import { useModuleI18n } from '@/i18n/composables';
-import { getProviderIcon, getProviderDescription } from '@/utils/providerUtils';
+import { getProviderIcon, getProviderDescription, isMonochromeProviderIcon } from '@/utils/providerUtils';
 
 const AVAILABLE_PROVIDER_TABS = ['agent_runner', 'speech_to_text', 'text_to_speech', 'embedding', 'rerank'];
 
@@ -151,6 +155,7 @@ export default {
 
         // 从工具函数导入
         getProviderIcon,
+        isMonochromeProviderIcon,
 
         // 获取提供商简介
         getProviderDescription(template, name) {

dashboard/src/components/provider/ProviderChatCompletionPanel.vue

@@ -11,6 +11,7 @@
           :available-source-types="availableSourceTypes"
           :tm="tm"
           :resolve-source-icon="resolveSourceIcon"
+          :is-monochrome-source-icon="isMonochromeSourceIcon"
           :get-source-display-name="getSourceDisplayName"
           @add-provider-source="addProviderSource"
           @select-provider-source="selectProviderSource"
@@ -230,6 +231,7 @@ const {
   advancedSourceConfig,
   manualProviderId,
   resolveSourceIcon,
+  isMonochromeSourceIcon,
   getSourceDisplayName,
   supportsImageInput,
   supportsAudioInput,

dashboard/src/components/provider/ProviderSourcesPanel.vue

@@ -25,6 +25,7 @@
                   <v-img
                     v-if="item.raw.source?.provider"
                     :src="resolveSourceIcon(item.raw.source)"
+                    :class="{ 'provider-icon--monochrome': isMonochromeSourceIcon(item.raw.source) }"
                     alt="provider logo"
                     cover
                   ></v-img>
@@ -44,6 +45,7 @@
                     <v-img
                       v-if="item.raw.source?.provider"
                       :src="resolveSourceIcon(item.raw.source)"
+                      :class="{ 'provider-icon--monochrome': isMonochromeSourceIcon(item.raw.source) }"
                       alt="provider logo"
                       cover
                     ></v-img>
@@ -92,6 +94,7 @@
                 <v-img
                   v-if="sourceType.icon"
                   :src="sourceType.icon"
+                  :class="{ 'provider-icon--monochrome': sourceType.isMonochrome }"
                   alt="provider icon"
                   cover
                 ></v-img>
@@ -121,6 +124,7 @@
           <v-img
             v-if="source?.provider"
             :src="resolveSourceIcon(source)"
+            :class="{ 'provider-icon--monochrome': isMonochromeSourceIcon(source) }"
             alt="provider logo"
             cover
           ></v-img>
@@ -182,6 +186,10 @@ const props = defineProps({
     type: Function,
     required: true
   },
+  isMonochromeSourceIcon: {
+    type: Function,
+    required: true
+  },
   getSourceDisplayName: {
     type: Function,
     required: true

dashboard/src/components/shared/ItemCard.vue

@@ -63,6 +63,7 @@
     <div class="d-flex justify-end align-center" style="position: absolute; bottom: 16px; right: 16px; opacity: 0.2;" v-if="bglogo">
       <v-img
         :src="bglogo"
+        :class="{ 'provider-icon--monochrome': bglogoMonochrome }"
         contain
         width="120"
         height="120"
@@ -97,6 +98,10 @@ export default {
       type: String,
       default: null
     },
+    bglogoMonochrome: {
+      type: Boolean,
+      default: false
+    },
     loading: {
       type: Boolean,
       default: false
@@ -170,4 +175,5 @@ export default {
 .item-status-indicator.active {
   background-color: #4caf50;
 }
+
 </style>

dashboard/src/composables/useProviderSources.ts

@@ -1,6 +1,6 @@
 import { ref, computed, onMounted, nextTick, watch } from 'vue'
 import { providerApi } from '@/api/v1'
-import { getProviderIcon } from '@/utils/providerUtils'
+import { getProviderIcon, isMonochromeProviderIcon } from '@/utils/providerUtils'
 import { askForConfirmation as askForConfirmationDialog, useConfirmDialog } from '@/utils/confirmDialog'
 import { normalizeTextInput } from '@/utils/inputValue'
 
@@ -10,6 +10,17 @@ export interface UseProviderSourcesOptions {
   showMessage: (message: string, color?: string) => void
 }
 
+interface ProviderSourceType {
+  value: string
+  label: string
+  icon: string
+  isMonochrome: boolean
+}
+
+interface ProviderIconSource {
+  provider?: string
+}
+
 export function resolveDefaultTab(value?: string) {
   const normalized = (value || '').toLowerCase()
 
@@ -84,13 +95,14 @@ export function useProviderSources(options: UseProviderSourcesOptions) {
       return []
     }
 
-    const types: Array<{ value: string; label: string; icon: string }> = []
+    const types: ProviderSourceType[] = []
     for (const [templateName, template] of Object.entries(providerTemplates.value)) {
       if (template.provider_type === selectedProviderType.value) {
         types.push({
           value: templateName,
           label: templateName,
-          icon: getProviderIcon(template.provider)
+          icon: getProviderIcon(template.provider),
+          isMonochrome: isMonochromeProviderIcon(template.provider)
         })
       }
     }
@@ -291,9 +303,13 @@ export function useProviderSources(options: UseProviderSourcesOptions) {
     return type.includes(providerType)
   }
 
-  function resolveSourceIcon(source: any) {
+  function resolveSourceIcon(source: ProviderIconSource | null | undefined) {
     if (!source) return ''
-    return getProviderIcon(source.provider) || ''
+    return getProviderIcon(source.provider || '') || ''
+  }
+
+  function isMonochromeSourceIcon(source: ProviderIconSource | null | undefined) {
+    return Boolean(source && isMonochromeProviderIcon(source.provider || ''))
   }
 
   function getSourceDisplayName(source: any) {
@@ -767,6 +783,7 @@ export function useProviderSources(options: UseProviderSourcesOptions) {
 
     // helpers
     resolveSourceIcon,
+    isMonochromeSourceIcon,
     getSourceDisplayName,
     getModelMetadata,
     supportsImageInput,

dashboard/src/scss/_override.scss

@@ -130,3 +130,7 @@ pre, code, .markdown pre, .markdown code, .release-notes pre, .release-notes cod
     color: rgb(var(--v-theme-primary));
   }
 }
+
+.v-theme--PurpleThemeDark .provider-icon--monochrome {
+  filter: brightness(0) invert(1);
+}

dashboard/src/utils/providerUtils.js

@@ -53,6 +53,40 @@ export function getProviderIcon(type) {
   return icons[type] || '';
 }
 
+/**
+ * Determine whether a provider icon is a monochrome SVG.
+ *
+ * These icons need to be inverted in the dark theme because they are loaded as
+ * external images and cannot inherit the page text color.
+ *
+ * @param {string} type - Provider type
+ * @returns {boolean} Whether the icon should be theme-inverted
+ */
+export function isMonochromeProviderIcon(type) {
+  return [
+    'openai',
+    'azure',
+    'xai',
+    'anthropic',
+    'ollama',
+    'deepseek',
+    'modelscope',
+    'zhipu',
+    'siliconflow',
+    'moonshot',
+    'kimi',
+    'kimi-code',
+    'ppio',
+    'lm_studio',
+    'minimax',
+    'minimax-token-plan',
+    'mimo',
+    'xiaomi',
+    'xiaomi-token-plan',
+    'openrouter'
+  ].includes(type);
+}
+
 /**
  * 获取提供商简介
  * @param {Object} template - 模板对象

dashboard/src/views/ProviderPage.vue

@@ -45,6 +45,7 @@
               :available-source-types="availableSourceTypes"
               :tm="tm"
               :resolve-source-icon="resolveSourceIcon"
+              :is-monochrome-source-icon="isMonochromeSourceIcon"
               :get-source-display-name="getSourceDisplayName"
               @add-provider-source="addProviderSource"
               @select-provider-source="selectProviderSource"
@@ -159,6 +160,7 @@
                 enabled-field="enable"
                 :loading="isProviderTesting(provider.id)"
                 :bglogo="getProviderIcon(provider.provider)"
+                :bglogo-monochrome="isMonochromeProviderIcon(provider.provider)"
                 :show-copy-button="true"
                 @toggle-enabled="toggleProviderEnable(provider, !provider.enable)"
                 @delete="deleteProvider"
@@ -350,7 +352,7 @@ import ProviderModelsPanel from '@/components/provider/ProviderModelsPanel.vue'
 import ProviderSourcesPanel from '@/components/provider/ProviderSourcesPanel.vue'
 import { useProviderModelConfigDialog } from '@/composables/useProviderModelConfigDialog'
 import { useProviderSources } from '@/composables/useProviderSources'
-import { getProviderIcon } from '@/utils/providerUtils'
+import { getProviderIcon, isMonochromeProviderIcon } from '@/utils/providerUtils'
 
 const props = defineProps({
   defaultTab: {
@@ -394,6 +396,7 @@ const {
   advancedSourceConfig,
   manualProviderId,
   resolveSourceIcon,
+  isMonochromeSourceIcon,
   getSourceDisplayName,
   supportsImageInput,
   supportsAudioInput,