[frontend] 增加工具市场MCP批量添加功能

17CielYang · 17CielYang · commit 4fe3b99850e9 · 2025-11-11T20:16:08.000+08:00
diff --git a/frontend/src/pages/addFlow/components/elsa-stage.tsx b/frontend/src/pages/addFlow/components/elsa-stage.tsx
@@ -393,6 +393,32 @@ const Stage = (props) => {
     }
   }
 
+  // 批量添加技能回调
+  const confirmCallBack = (workFlowList, fitList) => {
+    if (!Array.isArray(workFlowList) || !Array.isArray(fitList)) {
+      return;
+    }
+    
+    const toolList = fitList.concat(workFlowList);
+    
+    const uniqueNameList = toolList.map((item) => {
+      return item.uniqueName;
+    }).filter(name => name);
+    
+    setSkillList(uniqueNameList);
+    
+    // 为每个工具调用 pluginCallback.current，将工具添加到画布
+    if (pluginCallback.current && typeof pluginCallback.current === 'function') {
+      toolList.forEach((tool) => {
+        try {
+          pluginCallback.current(tool);
+        } catch (error) {
+          // 静默处理错误
+        }
+      });
+    }
+  }
+
   // 自定义表单选中
   const formConfirm = (item) => {
     formCallback.current(item);
@@ -556,6 +582,7 @@ const Stage = (props) => {
       checkData={skillList}
       modalType={modalTypes}
       type='addSkill'
+      confirmCallBack={confirmCallBack}
     />
     {/* 创建测试集 */}
     <CreateTestSet
diff --git a/frontend/src/pages/addFlow/components/tool-modal.tsx b/frontend/src/pages/addFlow/components/tool-modal.tsx
@@ -169,19 +169,57 @@ const ToolDrawer = (props) => {
   const workflowAdd = () => {
     const workFlowList: any = [];
     const fitList: any = [];
-    checkedList.current.forEach((item) => {
-      if (item.tags.includes('WATERFLOW')) {
+    
+    if (!checkedList.current || checkedList.current.length === 0) {
+      return;
+    }
+    
+    // 过滤掉字符串类型的项，只处理对象类型的工具
+    // 在 addSkill 模式下，checkedList.current 可能包含字符串（uniqueName）和对象（工具对象）
+    // 我们只处理对象类型的工具，字符串类型的项应该已经被处理过了
+    const validTools = checkedList.current.filter((item) => {
+      const isString = typeof item === 'string';
+      const isObject = typeof item === 'object' && item !== null && !Array.isArray(item);
+      
+      if (isString) {
+        return false;
+      }
+      
+      if (!isObject) {
+        return false;
+      }
+      
+      // 确保对象有 uniqueName 属性
+      if (!item.uniqueName) {
+        return false;
+      }
+      
+      return true;
+    });
+    
+    validTools.forEach((item) => {
+      // 安全地检查 tags，处理 tags 可能为 undefined、null 或不是数组的情况
+      const tags = item?.tags || [];
+      const isArray = Array.isArray(tags);
+      
+      if (isArray && tags.includes('WATERFLOW')) {
         workFlowList.push({ ...item, type: 'waterflow' });
       } else {
         fitList.push({ ...item, type: 'tool' });
       }
     });
+    
     const workFlowId = workFlowList.map((item) => item.uniqueName);
     const fitId = fitList.map((item) => item.uniqueName);
+    
     if (type === 'addSkill') {
-      confirmCallBack(workFlowList, fitList);
+      if (typeof confirmCallBack === 'function') {
+        confirmCallBack(workFlowList, fitList);
+      }
     } else {
-      confirmCallBack(workFlowId, fitId);
+      if (typeof confirmCallBack === 'function') {
+        confirmCallBack(workFlowId, fitId);
+      }
     }
   };
 
diff --git a/frontend/src/pages/addFlow/components/tool-table.tsx b/frontend/src/pages/addFlow/components/tool-table.tsx
@@ -4,7 +4,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import { Collapse, Button, Divider, Tag } from 'antd';
 import { getPluginDetail, getChatbotPluginDetail } from '@/shared/http/plugin';
 import { useTranslation } from 'react-i18next';
@@ -43,8 +43,11 @@ const ToolTable = (props: any) => {
     searchName,
   } = props;
   const [getPluginData, setGetPluginData] = useState<any>([]);
+  const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
   const modalTypes = ['pluginButtonTool', 'loop'];
   let checkedToolList: any = [];
+  // 用于标记是否正在进行批量添加操作
+  const isBatchAddingRef = useRef(false);
 
   const confirm = (item: any) => {
     const pluginInfo = pluginData?.mapType ? [pluginData] : getPluginData;
@@ -83,8 +86,94 @@ const ToolTable = (props: any) => {
     }
   };
 
+  // 批量添加处理函数
+  const handleBatchAdd = () => {
+    // 标记正在进行批量添加操作
+    isBatchAddingRef.current = true;
+    
+    const unselectedTools = getPluginData.filter((item: any) => !item.isChecked);
+    
+    if (unselectedTools.length === 0) {
+      isBatchAddingRef.current = false;
+      return;
+    }
+    
+    // 获取当前插件的 pluginId，用于过滤工具
+    const currentPluginId = pluginData?.pluginId;
+    
+    // 在 addSkill 模式下，我们需要确保只处理当前插件的工具
+    // 先过滤掉字符串类型的项，然后只添加当前插件的工具
+    if (type === 'addSkill') {
+      // 过滤掉字符串类型的项（这些是之前添加的其他插件的工具）
+      const objectTools = checkedList.current.filter((item: any) => {
+        return typeof item === 'object' && item !== null && !Array.isArray(item);
+      });
+      
+      // 进一步过滤，只保留当前插件的工具
+      // 工具对象的 pluginId 可能直接存在，也可能需要从父插件对象中获取
+      const currentPluginTools = objectTools.filter((item: any) => {
+        const itemPluginId = item?.pluginId || item?.pluginData?.pluginId;
+        return itemPluginId === currentPluginId;
+      });
+      
+      // 重置 checkedList.current，只保留当前插件的工具
+      checkedList.current = [...currentPluginTools];
+    }
+    
+    // 添加当前未选中的工具
+    unselectedTools.forEach((item: any) => {
+      // 确保工具属于当前插件
+      // 如果工具对象没有 pluginId，则从父插件对象中获取
+      const itemPluginId = item?.pluginId || pluginData?.pluginId;
+      
+      if (itemPluginId === currentPluginId) {
+        // 确保工具对象有 pluginId 属性
+        if (!item.pluginId) {
+          item.pluginId = currentPluginId;
+        }
+        item.isChecked = true;
+        checkedList.current.push(item);
+      }
+    });
+    
+    // 保存当前的 panelKey，确保面板保持展开
+    const currentPanelKey = pluginData.appCategory ? pluginData.uniqueName : pluginData.pluginId;
+    
+    // 更新 UI 状态
+    let newData = deepClone(getPluginData);
+    newData.forEach((ite: any) => {
+      if (!ite.isChecked) {
+        ite.isChecked = true;
+      }
+    });
+    setGetPluginData(newData);
+    
+    // 确保面板保持展开状态
+    // 如果当前 panelKey 不在 expandedKeys 中，则添加它
+    if (!expandedKeys.includes(currentPanelKey)) {
+      setExpandedKeys([...expandedKeys, currentPanelKey]);
+    }
+    
+    // 调用添加方法
+    if (type === 'addSkill') {
+      workflowAdd();
+    }
+    
+    // 延迟重置批量添加标志，确保父组件重新渲染完成后再重置
+    // 这样可以避免父组件重新渲染时触发的 onChange 关闭面板
+    setTimeout(() => {
+      isBatchAddingRef.current = false;
+    }, 500);
+  };
+
   // 通用HTML
   const fncHTML = (item: any, toolType: string) => {
+    const panelKey = pluginData.appCategory ? pluginData.uniqueName : pluginData.pluginId;
+    const isMcpPlugin = pluginData.extension?.type === 'mcp';
+    const isExpanded = expandedKeys.includes(panelKey);
+    const hasUnselectedTools = getPluginData.some((tool: any) => !tool.isChecked);
+    const showBatchAdd = isMcpPlugin && isExpanded && toolType === 'panel' && type === 'addSkill' && getPluginData.length > 0 && hasUnselectedTools;
+    
     return (
       <div className='tool-table'>
         <div className='tool-table-header'>
@@ -127,8 +216,17 @@ const ToolTable = (props: any) => {
                 {toolType === 'panel' ? item.extension.description : item.description}
               </div>
             </div>
-            {(toolType === ToolType.TOOL || toolType === ToolType.WATERFLOW) && (
-              <div>
+            <div className='tool-table-actions'>
+              {showBatchAdd && (
+                <Button
+                  type='primary'
+                  onClick={handleBatchAdd}
+                  className='batch-add-button'
+                >
+                  {t('批量添加') || 'batchAdd'}
+                </Button>
+              )}
+              {(toolType === ToolType.TOOL || toolType === ToolType.WATERFLOW) && (
                 <Button
                   disabled={type === 'addSkill' ? item.isChecked : false}
                   onClick={() => confirm(item.uniqueName)}
@@ -148,16 +246,34 @@ const ToolTable = (props: any) => {
                     t('additions')
                   )}
                 </Button>
-              </div>
-            )}
+              )}
+            </div>
           </div>
         </div>
       </div>
     );
   };
 
   const onChange = async (e: any) => {
-    let param = e.toString();
+    const panelKey = pluginData.appCategory ? pluginData.uniqueName : pluginData.pluginId;
+    
+    // 更新展开状态 - Collapse 的 onChange 接收的是展开 key 的数组
+    const expandedArray = Array.isArray(e) ? e : (e ? [e] : []);
+    const isCurrentlyExpanded = expandedArray.includes(panelKey);
+    const isTryingToClose = !isCurrentlyExpanded && expandedKeys.includes(panelKey);
+    
+    // 如果正在进行批量添加操作，且尝试关闭当前面板，则阻止关闭
+    if (isBatchAddingRef.current && isTryingToClose) {
+      // 保持面板展开状态
+      setExpandedKeys([...expandedKeys.filter(key => key !== panelKey), panelKey]);
+      return;
+    }
+    
+    // 更新展开状态
+    setExpandedKeys(expandedArray);
+    
+    let param = expandedArray.length > 0 ? panelKey : '';
+    
     if (type === 'addSkill') {
       checkData.forEach((item: any) => {
         checkedToolList.push(item.name);
@@ -181,15 +297,23 @@ const ToolTable = (props: any) => {
           setGetPluginData(newRes);
         }
       }
-    } catch {}
+    } catch (error) {
+      // 静默处理错误
+    }
   };
 
+  const panelKey = pluginData.appCategory ? pluginData.uniqueName : pluginData.pluginId;
+  
   return (
     <>
-      <Collapse expandIconPosition='end' onChange={onChange}>
+      <Collapse 
+        expandIconPosition='end' 
+        onChange={onChange}
+        activeKey={expandedKeys}
+      >
         <Collapse.Panel
           header={fncHTML(pluginData, 'panel')}
-          key={pluginData.appCategory ? pluginData.uniqueName : pluginData.pluginId}
+          key={panelKey}
         >
           {getPluginData.map((item: any, index: any) => {
             return (
diff --git a/frontend/src/pages/addFlow/styles/tool-modal.scss b/frontend/src/pages/addFlow/styles/tool-modal.scss
@@ -186,7 +186,7 @@
 .tool-modal{
   .ant-btn {
     margin: 0 !important;
-    margin-bottom: 20px !important;
+    margin-bottom: 0 !important;
   }
   .ant-tabs-nav-wrap {
     justify-content: start !important;
diff --git a/frontend/src/pages/addFlow/styles/tool-table.scss b/frontend/src/pages/addFlow/styles/tool-table.scss
@@ -74,5 +74,16 @@
         color: white;
       }
     }
+
+    .tool-table-actions {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      margin-left: 16px;
+
+      .batch-add-button {
+        white-space: nowrap;
+      }
+    }
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -186,7 +186,7 @@`
`186`	`186`	`.tool-modal{`
`187`	`187`	`.ant-btn {`
`188`	`188`	`margin: 0 !important;`
`189`		`- margin-bottom: 20px !important;`
	`189`	`+ margin-bottom: 0 !important;`
`190`	`190`	`}`
`191`	`191`	`.ant-tabs-nav-wrap {`
`192`	`192`	`justify-content: start !important;`
Original file line number	Diff line number	Diff line change
`@@ -74,5 +74,16 @@`
`74`	`74`	`color: white;`
`75`	`75`	`}`
`76`	`76`	`}`
	`77`	`+`
	`78`	`+ .tool-table-actions {`
	`79`	`+ display: flex;`
	`80`	`+ align-items: center;`
	`81`	`+ flex-shrink: 0;`
	`82`	`+ margin-left: 16px;`
	`83`	`+`
	`84`	`+ .batch-add-button {`
	`85`	`+ white-space: nowrap;`
	`86`	`+ }`
	`87`	`+ }`
`77`	`88`	`}`
`78`	`89`	`}`