refactor(MCPSettings): update styled components and enhance server synchronization

- Changed RightContainer from Scrollbar to a standard div for layout adjustments. - Updated DetailContainer to use Scrollbar for improved scrolling behavior. - Modified server synchronization logic across multiple providers to include allServers in the results, enhancing server management capabilities. - Refactored provider configurations to ensure consistency and support for new server data structure.
2025-12-29 14:31:35 +08:00 · 2025-11-07 19:22:58 +08:00 · 2025-11-07 19:22:58 +08:00 · 10e78ac60e
commit 10e78ac60e
parent 44b2b859da
9 changed files with 86 additions and 35 deletions
--- a/src/renderer/src/pages/settings/MCPSettings/McpProviderSettings.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/McpProviderSettings.tsx
@ -1,5 +1,6 @@
 import { loggerService } from '@logger'
 import CollapsibleSearchBar from '@renderer/components/CollapsibleSearchBar'
+import Scrollbar from '@renderer/components/Scrollbar'
 import db from '@renderer/databases'
 import { useMCPServers } from '@renderer/hooks/useMCPServers'
 import type { MCPServer } from '@renderer/types'
@ -97,7 +98,7 @@ const McpProviderSettings: React.FC<Props> = ({ provider, existingServers }) =>
      const result = await provider.syncServers(token, existingServers)

      if (result.success) {
-        const servers = result.addedServers || []
+        const servers = result.allServers || []
        setAvailableServers(servers)

        // Save to database
@ -208,10 +209,11 @@ const McpProviderSettings: React.FC<Props> = ({ provider, existingServers }) =>
  )
 }

-const DetailContainer = styled.div`
+const DetailContainer = styled(Scrollbar)`
  padding: 20px;
  display: flex;
  flex-direction: column;
+  height: calc(100vh - var(--navbar-height));
 `

 const ProviderHeader = styled.div`
--- a/src/renderer/src/pages/settings/MCPSettings/index.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/index.tsx
@ -199,7 +199,7 @@ const MenuList = styled(Scrollbar)`
  height: calc(100vh - var(--navbar-height));
 `

-const RightContainer = styled(Scrollbar)`
+const RightContainer = styled.div`
  flex: 1;
  position: relative;
 `
--- a/src/renderer/src/pages/settings/MCPSettings/providers/302ai.ts
+++ b/src/renderer/src/pages/settings/MCPSettings/providers/302ai.ts
@ -30,6 +30,7 @@ interface Ai302SyncResult {
  message: string
  addedServers: MCPServer[]
  updatedServers: MCPServer[]
+  allServers: MCPServer[]
  errorDetails?: string
 }

@ -53,7 +54,8 @@ export const syncAi302Servers = async (token: string, existingServers: MCPServer
        success: false,
        message: t('settings.mcp.sync.unauthorized', 'Sync Unauthorized'),
        addedServers: [],
-        updatedServers: []
+        updatedServers: [],
+        allServers: []
      }
    }

@ -64,6 +66,7 @@ export const syncAi302Servers = async (token: string, existingServers: MCPServer
        message: t('settings.mcp.sync.error'),
        addedServers: [],
        updatedServers: [],
+        allServers: [],
        errorDetails: `Status: ${response.status}`
      }
    }
@ -78,13 +81,15 @@ export const syncAi302Servers = async (token: string, existingServers: MCPServer
        success: true,
        message: t('settings.mcp.sync.noServersAvailable', 'No MCP servers available'),
        addedServers: [],
-        updatedServers: []
+        updatedServers: [],
+        allServers: []
      }
    }

    // Transform 302ai servers to MCP servers format
    const addedServers: MCPServer[] = []
    const updatedServers: MCPServer[] = []
+    const allServers: MCPServer[] = []

    for (const server of servers) {
      try {
@ -121,7 +126,8 @@ export const syncAi302Servers = async (token: string, existingServers: MCPServer
      success: true,
      message: t('settings.mcp.sync.success', { count: totalServers }),
      addedServers,
-      updatedServers
+      updatedServers,
+      allServers
    }
  } catch (error) {
    logger.error('302ai sync error:', error as Error)
@ -130,6 +136,7 @@ export const syncAi302Servers = async (token: string, existingServers: MCPServer
      message: t('settings.mcp.sync.error'),
      addedServers: [],
      updatedServers: [],
+      allServers: [],
      errorDetails: String(error)
    }
  }
--- a/src/renderer/src/pages/settings/MCPSettings/providers/bailian.ts
+++ b/src/renderer/src/pages/settings/MCPSettings/providers/bailian.ts
@ -55,6 +55,7 @@ export interface BailianSyncResult {
  message: string
  addedServers: MCPServer[]
  updatedServers: MCPServer[]
+  allServers: MCPServer[]
  errorDetails?: string
 }

@ -117,6 +118,7 @@ export const syncBailianServers = async (token: string, existingServers: MCPServ

    const addedServers: MCPServer[] = []
    const updatedServers: MCPServer[] = []
+    const allServers: MCPServer[] = []

    for (const server of servers) {
      try {
@ -151,6 +153,7 @@ export const syncBailianServers = async (token: string, existingServers: MCPServ
        } else {
          addedServers.push(mcpServer)
        }
+        allServers.push(mcpServer)
      } catch (err) {
        logger.error(`Error processing Bailian server ${server.id}:`, err as Error)
      }
@ -162,7 +165,8 @@ export const syncBailianServers = async (token: string, existingServers: MCPServ
      success: true,
      message: t('settings.mcp.sync.success', { count: totalServers }),
      addedServers,
-      updatedServers
+      updatedServers,
+      allServers
    }
  } catch (error) {
    let message = ''
@ -176,7 +180,8 @@ export const syncBailianServers = async (token: string, existingServers: MCPServ
        success: false,
        message,
        addedServers: [],
-        updatedServers: []
+        updatedServers: [],
+        allServers: []
      }
    }

@ -189,6 +194,7 @@ export const syncBailianServers = async (token: string, existingServers: MCPServ
        message,
        addedServers: [],
        updatedServers: [],
+        allServers: [],
        errorDetails
      }
    }
@ -202,6 +208,7 @@ export const syncBailianServers = async (token: string, existingServers: MCPServ
      message,
      addedServers: [],
      updatedServers: [],
+      allServers: [],
      errorDetails
    }
  }
--- a/src/renderer/src/pages/settings/MCPSettings/providers/config.ts
+++ b/src/renderer/src/pages/settings/MCPSettings/providers/config.ts
@ -1,3 +1,4 @@
+import { getProviderLabel } from '@renderer/i18n/label'
 import type { MCPServer } from '@renderer/types'

 import { getAI302Token, saveAI302Token, syncAi302Servers } from './302ai'
@ -20,6 +21,17 @@ export interface ProviderConfig {
 }

 export const providers: ProviderConfig[] = [
+  {
+    key: 'bailian',
+    name: getProviderLabel('dashscope'),
+    description: '百炼平台服务',
+    discoverUrl: `https://bailian.console.aliyun.com/?tab=mcp#/mcp-market`,
+    apiKeyUrl: `https://bailian.console.aliyun.com/?tab=app#/api-key`,
+    tokenFieldName: 'bailianToken',
+    getToken: getBailianToken,
+    saveToken: saveBailianToken,
+    syncServers: syncBailianServers
+  },
  {
    key: 'modelscope',
    name: 'ModelScope',
@ -44,7 +56,7 @@ export const providers: ProviderConfig[] = [
  },
  {
    key: 'lanyun',
-    name: '蓝耘科技',
+    name: getProviderLabel('lanyun'),
    description: '蓝耘科技云平台 MCP 服务',
    discoverUrl: 'https://mcp.lanyun.net',
    apiKeyUrl: LANYUN_KEY_HOST,
@ -64,17 +76,6 @@ export const providers: ProviderConfig[] = [
    saveToken: saveAI302Token,
    syncServers: syncAi302Servers
  },
-  {
-    key: 'bailian',
-    name: '阿里云百炼',
-    description: '百炼平台服务',
-    discoverUrl: `https://bailian.console.aliyun.com/?tab=mcp#/mcp-market`,
-    apiKeyUrl: `https://bailian.console.aliyun.com/?tab=app#/api-key`,
-    tokenFieldName: 'bailianToken',
-    getToken: getBailianToken,
-    saveToken: saveBailianToken,
-    syncServers: syncBailianServers
-  },
  {
    key: 'mcprouter',
    name: 'MCP Router',
--- a/src/renderer/src/pages/settings/MCPSettings/providers/lanyun.ts
+++ b/src/renderer/src/pages/settings/MCPSettings/providers/lanyun.ts
@ -56,6 +56,7 @@ interface TokenLanYunSyncResult {
  message: string
  addedServers: MCPServer[]
  updatedServers: MCPServer[]
+  allServers: MCPServer[]
  errorDetails?: string
 }

@ -82,7 +83,8 @@ export const syncTokenLanYunServers = async (
        success: false,
        message: t('settings.mcp.sync.unauthorized', 'Sync Unauthorized'),
        addedServers: [],
-        updatedServers: []
+        updatedServers: [],
+        allServers: []
      }
    }

@ -93,6 +95,7 @@ export const syncTokenLanYunServers = async (
        message: t('settings.mcp.sync.error'),
        addedServers: [],
        updatedServers: [],
+        allServers: [],
        errorDetails: `Status: ${response.status}`
      }
    }
@ -105,6 +108,7 @@ export const syncTokenLanYunServers = async (
        message: t('settings.mcp.sync.unauthorized', 'Sync Unauthorized'),
        addedServers: [],
        updatedServers: [],
+        allServers: [],
        errorDetails: `Status: ${response.status}`
      }
    }
@ -114,6 +118,7 @@ export const syncTokenLanYunServers = async (
        message: t('settings.mcp.sync.error'),
        addedServers: [],
        updatedServers: [],
+        allServers: [],
        errorDetails: `Status: ${response.status}`
      }
    }
@ -125,14 +130,17 @@ export const syncTokenLanYunServers = async (
        success: true,
        message: t('settings.mcp.sync.noServersAvailable', 'No MCP servers available'),
        addedServers: [],
-        updatedServers: []
+        updatedServers: [],
+        allServers: []
      }
    }

    // Transform Token servers to MCP servers format
    const addedServers: MCPServer[] = []
    const updatedServers: MCPServer[] = []
+    const allServers: MCPServer[] = []
    logger.debug('TokenLanYun servers:', servers)
+
    for (const server of servers) {
      try {
        if (!server.operationalUrls?.[0]?.url) continue
@ -164,6 +172,7 @@ export const syncTokenLanYunServers = async (
          // Add new server
          addedServers.push(mcpServer)
        }
+        allServers.push(mcpServer)
      } catch (err) {
        logger.error('Error processing LanYun server:', err as Error)
      }
@ -174,7 +183,8 @@ export const syncTokenLanYunServers = async (
      success: true,
      message: t('settings.mcp.sync.success', { count: totalServers }),
      addedServers,
-      updatedServers
+      updatedServers,
+      allServers
    }
  } catch (error) {
    logger.error('TokenLanyun sync error:', error as Error)
@ -183,6 +193,7 @@ export const syncTokenLanYunServers = async (
      message: t('settings.mcp.sync.error'),
      addedServers: [],
      updatedServers: [],
+      allServers: [],
      errorDetails: String(error)
    }
  }
--- a/src/renderer/src/pages/settings/MCPSettings/providers/mcprouter.ts
+++ b/src/renderer/src/pages/settings/MCPSettings/providers/mcprouter.ts
@ -43,6 +43,7 @@ interface MCPRouterSyncResult {
  message: string
  addedServers: MCPServer[]
  updatedServers: MCPServer[]
+  allServers: MCPServer[]
  errorDetails?: string
 }

@ -72,7 +73,8 @@ export const syncMCPRouterServers = async (
        success: false,
        message: t('settings.mcp.sync.unauthorized', 'Sync Unauthorized'),
        addedServers: [],
-        updatedServers: []
+        updatedServers: [],
+        allServers: []
      }
    }

@ -83,6 +85,7 @@ export const syncMCPRouterServers = async (
        message: t('settings.mcp.sync.error'),
        addedServers: [],
        updatedServers: [],
+        allServers: [],
        errorDetails: `Status: ${response.status}`
      }
    }
@ -96,14 +99,15 @@ export const syncMCPRouterServers = async (
        success: true,
        message: t('settings.mcp.sync.noServersAvailable', 'No MCP servers available'),
        addedServers: [],
-        updatedServers: []
+        updatedServers: [],
+        allServers: []
      }
    }

    // Transform MCPRouter servers to MCP servers format
    const addedServers: MCPServer[] = []
    const updatedServers: MCPServer[] = []
-
+    const allServers: MCPServer[] = []
    for (const server of servers) {
      try {
        // Check if server already exists using server_key
@ -132,6 +136,7 @@ export const syncMCPRouterServers = async (
          // Add new server
          addedServers.push(mcpServer)
        }
+        allServers.push(mcpServer)
      } catch (err) {
        logger.error('Error processing MCPRouter server:', err as Error)
      }
@ -142,7 +147,8 @@ export const syncMCPRouterServers = async (
      success: true,
      message: t('settings.mcp.sync.success', { count: totalServers }),
      addedServers,
-      updatedServers
+      updatedServers,
+      allServers
    }
  } catch (error) {
    logger.error('MCPRouter sync error:', error as Error)
@ -151,6 +157,7 @@ export const syncMCPRouterServers = async (
      message: t('settings.mcp.sync.error'),
      addedServers: [],
      updatedServers: [],
+      allServers: [],
      errorDetails: String(error)
    }
  }
--- a/src/renderer/src/pages/settings/MCPSettings/providers/modelscope.ts
+++ b/src/renderer/src/pages/settings/MCPSettings/providers/modelscope.ts
@ -40,6 +40,7 @@ interface ModelScopeSyncResult {
  message: string
  addedServers: MCPServer[]
  updatedServers: MCPServer[]
+  allServers: MCPServer[]
  errorDetails?: string
 }

@ -66,7 +67,8 @@ export const syncModelScopeServers = async (
        success: false,
        message: t('settings.mcp.sync.unauthorized', 'Sync Unauthorized'),
        addedServers: [],
-        updatedServers: []
+        updatedServers: [],
+        allServers: []
      }
    }

@ -77,6 +79,7 @@ export const syncModelScopeServers = async (
        message: t('settings.mcp.sync.error'),
        addedServers: [],
        updatedServers: [],
+        allServers: [],
        errorDetails: `Status: ${response.status}`
      }
    }
@ -90,14 +93,16 @@ export const syncModelScopeServers = async (
        success: true,
        message: t('settings.mcp.sync.noServersAvailable', 'No MCP servers available'),
        addedServers: [],
-        updatedServers: []
+        updatedServers: [],
+        allServers: []
      }
    }

    // Transform ModelScope servers to MCP servers format
    const addedServers: MCPServer[] = []
    const updatedServers: MCPServer[] = []
-
+    const allServers: MCPServer[] = []
+    logger.debug('ModelScope servers:', servers)
    for (const server of servers) {
      try {
        if (!server.operational_urls?.[0]?.url) continue
@ -128,6 +133,7 @@ export const syncModelScopeServers = async (
          // Add new server
          addedServers.push(mcpServer)
        }
+        allServers.push(mcpServer)
      } catch (err) {
        logger.error('Error processing ModelScope server:', err as Error)
      }
@ -138,7 +144,8 @@ export const syncModelScopeServers = async (
      success: true,
      message: t('settings.mcp.sync.success', { count: totalServers }),
      addedServers,
-      updatedServers
+      updatedServers,
+      allServers
    }
  } catch (error) {
    logger.error('ModelScope sync error:', error as Error)
@ -147,6 +154,7 @@ export const syncModelScopeServers = async (
      message: t('settings.mcp.sync.error'),
      addedServers: [],
      updatedServers: [],
+      allServers: [],
      errorDetails: String(error)
    }
  }
--- a/src/renderer/src/pages/settings/MCPSettings/providers/tokenflux.ts
+++ b/src/renderer/src/pages/settings/MCPSettings/providers/tokenflux.ts
@ -46,6 +46,7 @@ interface TokenFluxSyncResult {
  message: string
  addedServers: MCPServer[]
  updatedServers: MCPServer[]
+  allServers: MCPServer[]
  errorDetails?: string
 }

@ -72,7 +73,8 @@ export const syncTokenFluxServers = async (
        success: false,
        message: t('settings.mcp.sync.unauthorized', 'Sync Unauthorized'),
        addedServers: [],
-        updatedServers: []
+        updatedServers: [],
+        allServers: []
      }
    }

@ -83,6 +85,7 @@ export const syncTokenFluxServers = async (
        message: t('settings.mcp.sync.error'),
        addedServers: [],
        updatedServers: [],
+        allServers: [],
        errorDetails: `Status: ${response.status}`
      }
    }
@ -96,14 +99,16 @@ export const syncTokenFluxServers = async (
        success: true,
        message: t('settings.mcp.sync.noServersAvailable', 'No MCP servers available'),
        addedServers: [],
-        updatedServers: []
+        updatedServers: [],
+        allServers: []
      }
    }

    // Transform TokenFlux servers to MCP servers format
    const addedServers: MCPServer[] = []
    const updatedServers: MCPServer[] = []
-
+    const allServers: MCPServer[] = []
+    logger.debug('TokenFlux servers:', servers)
    for (const server of servers) {
      try {
        // Check if server already exists
@ -138,6 +143,7 @@ export const syncTokenFluxServers = async (
          // Add new server
          addedServers.push(mcpServer)
        }
+        allServers.push(mcpServer)
      } catch (err) {
        logger.error('Error processing TokenFlux server:', err as Error)
      }
@ -148,7 +154,8 @@ export const syncTokenFluxServers = async (
      success: true,
      message: t('settings.mcp.sync.success', { count: totalServers }),
      addedServers,
-      updatedServers
+      updatedServers,
+      allServers
    }
  } catch (error) {
    logger.error('TokenFlux sync error:', error as Error)
@ -157,6 +164,7 @@ export const syncTokenFluxServers = async (
      message: t('settings.mcp.sync.error'),
      addedServers: [],
      updatedServers: [],
+      allServers: [],
      errorDetails: String(error)
    }
  }