From 168cce1678395d926347174c1a217dacc2403729 Mon Sep 17 00:00:00 2001
From: yujiangping <yujiangping@taofen8.com>
Date: Wed, 11 Mar 2026 17:11:16 +0800
Subject: [PATCH] feat(web): improve MCP market UI responsiveness and add
 refresh after service addition

- Change getMarketTools parameter type from Query to optional Record for flexibility
- Rename marketConfig i18n key to marketConfigBtn for clarity and consistency
- Add handleRefreshAfterAdd function to refresh MCP list after successful service addition
- Update grid layout to use auto-fill responsive columns instead of fixed 3-column layout
- Disable Add button for services already in database to prevent duplicate additions
- Connect McpServiceModal refresh callback to handleRefreshAfterAdd for cache invalidation
- Improves user experience by automatically updating market list after adding services
---
 web/src/api/tools.ts                    |  2 +-
 web/src/i18n/en.ts                      |  2 +-
 web/src/i18n/zh.ts                      |  2 +-
 web/src/views/ToolManagement/Market.tsx | 28 +++++++++++++++++++++----
 4 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/web/src/api/tools.ts b/web/src/api/tools.ts
index 2aed3f80..7c7a0e3d 100644
--- a/web/src/api/tools.ts
+++ b/web/src/api/tools.ts
@@ -36,7 +36,7 @@ export const getToolMethods = (tool_id: string) => {
 }
 
 // MCP市场列表
-export const getMarketTools = (data: Query) => {
+export const getMarketTools = (data?: Record<string, any>) => {
   return request.get('/mcp_markets/mcp_markets', data)
 }
 // 市场配置创建
diff --git a/web/src/i18n/en.ts b/web/src/i18n/en.ts
index 11be15b4..80d51554 100644
--- a/web/src/i18n/en.ts
+++ b/web/src/i18n/en.ts
@@ -1818,7 +1818,7 @@ Memory Bear: After the rebellion, regional warlordism intensified for several re
       marketInDatabase: 'In Database',
       marketAdd: 'Add',
       marketRefresh: 'Refresh',
-      marketConfig: 'Configure',
+      marketConfigBtn: 'Configure',
       marketConfigConnection: 'Configure Connection',
       marketNoServices: 'No MCP Services Available',
       marketNotConnected: 'Not Connected to This Market',
diff --git a/web/src/i18n/zh.ts b/web/src/i18n/zh.ts
index 94c145eb..d2a39ad4 100644
--- a/web/src/i18n/zh.ts
+++ b/web/src/i18n/zh.ts
@@ -1814,7 +1814,7 @@ export const zh = {
       marketInDatabase: '已入库',
       marketAdd: '添加',
       marketRefresh: '刷新',
-      marketConfig: '配置',
+      marketConfigBtn: '配置',
       marketConfigConnection: '配置连接',
       marketNoServices: '暂无可用的 MCP 服务',
       marketNotConnected: '尚未连接此市场',
diff --git a/web/src/views/ToolManagement/Market.tsx b/web/src/views/ToolManagement/Market.tsx
index 5297903e..9bcf5f67 100644
--- a/web/src/views/ToolManagement/Market.tsx
+++ b/web/src/views/ToolManagement/Market.tsx
@@ -279,6 +279,20 @@ const Market: React.FC<{ getStatusTag?: (status: string) => ReactNode }> = () =>
     }
   };
 
+  const handleRefreshAfterAdd = async () => {
+    // 添加成功后，刷新当前选中的市场源的 MCP 列表
+    if (!selectedSource) return;
+    
+    // 清除缓存并重新加载，这样会重新获取工具列表并更新 inDatabase 标记
+    setMcpCache(prev => {
+      const next = { ...prev };
+      delete next[selectedSource];
+      return next;
+    });
+    setCurrentPage(1);
+    await fetchMcpList(selectedSource, 1);
+  };
+
   const renderSourceDetail = () => {
     if (!selectedSource) {
       return (
@@ -355,7 +369,7 @@ const Market: React.FC<{ getStatusTag?: (status: string) => ReactNode }> = () =>
               )}
             </div>
             <Button icon={<SettingOutlined />} onClick={() => handleOpenConfig(selectedSource)}>
-              {t('tool.marketConfig')}
+              {t('tool.marketConfigBtn')}
             </Button>
             <Button type="primary" icon={<GlobalOutlined />} onClick={() => window.open(source.url, '_blank')}>
               {t('tool.marketVisit')}
@@ -373,7 +387,13 @@ const Market: React.FC<{ getStatusTag?: (status: string) => ReactNode }> = () =>
                 loader={<Skeleton active paragraph={{ rows: 2 }} className="rb:mt-4" />}
                 scrollableTarget="mcpScrollableDiv"
               >
-                <div className="rb:grid rb:grid-cols-3 rb:gap-4">
+                <div 
+                  className="rb:gap-4" 
+                  style={{
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))'
+                  }}
+                >
                   {filteredList.map(mcp => (
                   <div 
                     key={mcp.id} 
@@ -425,7 +445,7 @@ const Market: React.FC<{ getStatusTag?: (status: string) => ReactNode }> = () =>
                         {mcp.activated && <Tag color="success">{t('tool.marketActivated')}</Tag>}
                         {mcp.inDatabase && <Tag color="blue">{t('tool.marketInDatabase')}</Tag>}
                       </div>
-                      <Button type="primary" size="small" onClick={() => handleOpenMcpServiceModal(mcp)}>
+                      <Button disabled={mcp.inDatabase} type="primary" size="small" onClick={() => handleOpenMcpServiceModal(mcp)}>
                         + {t('tool.marketAdd')}
                       </Button>
                     </div>
@@ -523,7 +543,7 @@ const Market: React.FC<{ getStatusTag?: (status: string) => ReactNode }> = () =>
       />
       <McpServiceModal
         ref={mcpServiceModalRef}
-        refresh={() => {}}
+        refresh={handleRefreshAfterAdd}
       />
     </div>
   );