From 10e78ac60e85f8875993a55059334b4e5696b483 Mon Sep 17 00:00:00 2001 From: kangfenmao Date: Fri, 7 Nov 2025 19:22:58 +0800 Subject: [PATCH] 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. --- .../MCPSettings/McpProviderSettings.tsx | 6 +++-- .../src/pages/settings/MCPSettings/index.tsx | 2 +- .../settings/MCPSettings/providers/302ai.ts | 13 +++++++--- .../settings/MCPSettings/providers/bailian.ts | 11 ++++++-- .../settings/MCPSettings/providers/config.ts | 25 ++++++++++--------- .../settings/MCPSettings/providers/lanyun.ts | 17 ++++++++++--- .../MCPSettings/providers/mcprouter.ts | 15 ++++++++--- .../MCPSettings/providers/modelscope.ts | 16 +++++++++--- .../MCPSettings/providers/tokenflux.ts | 16 +++++++++--- 9 files changed, 86 insertions(+), 35 deletions(-) diff --git a/src/renderer/src/pages/settings/MCPSettings/McpProviderSettings.tsx b/src/renderer/src/pages/settings/MCPSettings/McpProviderSettings.tsx index d97fc86fea..ab0c1979cf 100644 --- 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 = ({ 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 = ({ 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` diff --git a/src/renderer/src/pages/settings/MCPSettings/index.tsx b/src/renderer/src/pages/settings/MCPSettings/index.tsx index 6adb64ca23..987b6cd0d6 100644 --- 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; ` diff --git a/src/renderer/src/pages/settings/MCPSettings/providers/302ai.ts b/src/renderer/src/pages/settings/MCPSettings/providers/302ai.ts index 646b929d47..2c7f7dfecb 100644 --- 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) } } diff --git a/src/renderer/src/pages/settings/MCPSettings/providers/bailian.ts b/src/renderer/src/pages/settings/MCPSettings/providers/bailian.ts index 8eecb2bac2..1e2fb3910c 100644 --- 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 } } diff --git a/src/renderer/src/pages/settings/MCPSettings/providers/config.ts b/src/renderer/src/pages/settings/MCPSettings/providers/config.ts index 6b094536e1..7c3f2974b9 100644 --- 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', diff --git a/src/renderer/src/pages/settings/MCPSettings/providers/lanyun.ts b/src/renderer/src/pages/settings/MCPSettings/providers/lanyun.ts index f227eb5670..2cc1d1ee74 100644 --- 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) } } diff --git a/src/renderer/src/pages/settings/MCPSettings/providers/mcprouter.ts b/src/renderer/src/pages/settings/MCPSettings/providers/mcprouter.ts index a993ce7383..152f68e718 100644 --- 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) } } diff --git a/src/renderer/src/pages/settings/MCPSettings/providers/modelscope.ts b/src/renderer/src/pages/settings/MCPSettings/providers/modelscope.ts index 36fd4b0c04..d86c54e54e 100644 --- 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) } } diff --git a/src/renderer/src/pages/settings/MCPSettings/providers/tokenflux.ts b/src/renderer/src/pages/settings/MCPSettings/providers/tokenflux.ts index e3a10f8ddd..cf101cba36 100644 --- 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) } }