[elsa] 编排时节点支持精简模式 (#57)

Author: RonnyChan96

framework/elsa/fit-elsa-react/src/App.jsx

@@ -241,6 +241,32 @@ function App({i18n}) {
         <Button onClick={() => window.agent.createNodeByPosition('textExtractionNodeState', {x:100, y:100}, {uniqueName : ''})}>创建文本提取节点</Button>
         <Button onClick={() => window.agent.createNodeByPosition('queryOptimizationNodeState', {x:100, y:100}, {uniqueName : ''})}>创建问题优化节点</Button>
         <Button onClick={() => window.agent.createNodeByPosition('codeNodeState', {x:100, y:100}, {uniqueName : ''})}>创建code节点</Button>
+        <Button onClick={() => {
+          const nodeTypes = ['endNodeEnd',
+            'retrievalNodeState',
+            'llmNodeState',
+            'manualCheckNodeState',
+            'conditionNodeCondition',
+            'codeNodeState',
+            'knowledgeRetrievalNodeState',
+            'queryOptimizationNodeState',
+            'textExtractionNodeState',
+            'questionClassificationNodeCondition',
+            'variableAggregationNodeState',
+            'httpNodeState',
+            'fileExtractionNodeState',
+            'textToImageNodeState',
+            'noteNode',
+            'loopNodeState',
+            'intelligentFormNodeState'];
+          nodeTypes.forEach((type, index) => {
+            window.agent.createNodeByPosition(
+              type,
+              {x: 100 + index * 200, y: 100},
+              {uniqueName: ''},
+            );
+          });
+        }}>创建每一种节点</Button>
       </div>
       <div id='stage' style={{position: 'relative', width: 1600, height: 800}}></div>
       <CodeDrawer container={document.getElementById('stage')}

framework/elsa/fit-elsa-react/src/components/DefaultRoot.jsx

@@ -18,6 +18,7 @@ const DataContext = createContext(null);
 const ShapeContext = createContext(null);
 const DispatchContext = createContext(null);
 const FormContext = createContext(null);
+const ConfigContext = createContext(null);
 
 /**
  * 默认根节点，作为其他所有组件的容器.
@@ -133,12 +134,14 @@ export const DefaultRoot = forwardRef(function (
             <FormContext.Provider value={form}>
               <ShapeContext.Provider value={shape}>
                 <DataContext.Provider value={data}>
-                  <div
-                    className="react-node-content"
-                    style={{borderRadius: `${shape.borderRadius}px`}}
-                  >
-                    {component.getReactComponents(shapeStatus, data, false)}
-                  </div>
+                  <ConfigContext.Provider value={false}>
+                    <div
+                      className="react-node-content"
+                      style={{borderRadius: `${shape.borderRadius}px`}}
+                    >
+                      {component.getReactComponents(shapeStatus, data)}
+                    </div>
+                  </ConfigContext.Provider>
                 </DataContext.Provider>
               </ShapeContext.Provider>
             </FormContext.Provider>
@@ -168,9 +171,11 @@ export const DefaultRoot = forwardRef(function (
                 <FormContext.Provider value={form}>
                   <ShapeContext.Provider value={shape}>
                     <DataContext.Provider value={data}>
-                      <div className="react-node-content">
-                        {component.getReactComponents(shapeStatus, data, true)}
-                      </div>
+                      <ConfigContext.Provider value={true}>
+                        <div className="react-node-content">
+                          {component.getReactComponents(shapeStatus, data)}
+                        </div>
+                      </ConfigContext.Provider>
                     </DataContext.Provider>
                   </ShapeContext.Provider>
                 </FormContext.Provider>
@@ -205,3 +210,7 @@ export function useDispatch() {
 export function useFormContext() {
   return useContext(FormContext);
 }
+
+export function useConfigContext() {
+  return useContext(ConfigContext);
+}

framework/elsa/fit-elsa-react/src/components/code/CodePanel.jsx

@@ -100,7 +100,7 @@ function _CodePanel({disabled, input, dispatch}) {
     };
 
     return (<>
-        <Collapse bordered={false} className="jade-custom-collapse" defaultActiveKey={["codeOutputPanel"]}>
+        <JadeCollapse defaultActiveKey={["codeOutputPanel"]}>
             {<Panel key={"codeOutputPanel"}
                     header={<Header handleEditClick={handleEditClick} disabled={disabled}/>}
                     className="jade-panel"
@@ -129,7 +129,7 @@ function _CodePanel({disabled, input, dispatch}) {
                             onConfirm={(v) => editCode(v)}
                             executeFunc={executeFunc}/>
             </Panel>}
-        </Collapse>
+        </JadeCollapse>
     </>);
 }
 

framework/elsa/fit-elsa-react/src/components/common/AiPromptPanel.jsx

@@ -17,6 +17,7 @@ import {PromptDrawer} from '../common/prompt/PromptDrawer.jsx';
 import AiPromptIcon from '../asserts/icon-ai-prompt.svg?react';
 import FullScreenIcon from '../asserts/icon-full-screen.svg?react';
 import {DEFAULT_AP_PROMPT_MODEL_CONFIG} from '@/common/Consts.js';
+import {JadeCollapse} from '@/components/common/JadeCollapse.jsx';
 
 const {Panel} = Collapse;
 
@@ -76,8 +77,7 @@ const _AiPromptPanel = ({disabled, prompt, name, popoverContent = null, header,
   };
 
   return (<>
-    <Collapse bordered={false} className='jade-custom-collapse'
-              defaultActiveKey={[`AiPromptPanel-${shapeId}`]}>
+    <JadeCollapse defaultActiveKey={[`AiPromptPanel-${shapeId}`]}>
       {<Panel
         key={`AiPromptPanel-${shapeId}`}
         header={<AiPromptPanelHeader
@@ -116,7 +116,7 @@ const _AiPromptPanel = ({disabled, prompt, name, popoverContent = null, header,
             onAIGenerate={triggerAIGenerateEvent}/>
         </div>
       </Panel>}
-    </Collapse>
+    </JadeCollapse>
   </>);
 };
 

framework/elsa/fit-elsa-react/src/components/common/InvokeOutput.jsx

@@ -12,6 +12,7 @@ import PropTypes from 'prop-types';
 import ArrayUtil from '@/components/util/ArrayUtil.js';
 import {useTranslation} from 'react-i18next';
 import {JadeTree} from '@/components/common/JadeTree.jsx';
+import {JadeCollapse} from '@/components/common/JadeCollapse.jsx';
 
 const {Panel} = Collapse;
 
@@ -60,8 +61,7 @@ function _InvokeOutput({outputData, getDescription = getContent, isObservableTre
   const content = getDescription(outputData, t);
 
   return (<>
-    <Collapse bordered={false} className='jade-custom-collapse'
-              defaultActiveKey={['InvokeOutput']}>
+    <JadeCollapse defaultActiveKey={['InvokeOutput']}>
       <Panel
         className='jade-panel'
         header={<div style={{display: 'flex', alignItems: 'center'}}>
@@ -81,7 +81,7 @@ function _InvokeOutput({outputData, getDescription = getContent, isObservableTre
           {isObservableTree ? <JadeObservableTree data={outputData}/> : <JadeTree data={outputData}/>}
         </div>
       </Panel>
-    </Collapse>
+    </JadeCollapse>
   </>);
 }
 

framework/elsa/fit-elsa-react/src/components/common/JadeCollapse.jsx

@@ -0,0 +1,40 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) 2025 Huawei Technologies Co., Ltd. All rights reserved.
+ *  This file is a part of the ModelEngine Project.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import {Collapse} from 'antd';
+import React from 'react';
+import {useConfigContext} from '@/components/DefaultRoot.jsx';
+import PropTypes from 'prop-types';
+
+/**
+ * JadeCollapse组件，该组件会根据Config的值来判断是否需要默认展开。
+ *
+ * @param defaultActiveKey 默认展开的Collapse名称。
+ * @param bordered 是否显示边框。
+ * @param className 类名。
+ * @param props 参数。
+ * @return {JSX.Element} Jade折叠组件。
+ * @constructor
+ */
+export const JadeCollapse = ({ defaultActiveKey = [], bordered = false, className = '', ...props }) => {
+  const isConfig  = useConfigContext();
+  const activeKey = isConfig ? defaultActiveKey : [];
+
+  return (
+    <Collapse
+      bordered={bordered}
+      className={`jade-custom-collapse ${className}`}
+      defaultActiveKey={activeKey}
+      {...props}
+    />
+  );
+};
+
+JadeCollapse.propTypes = {
+  defaultActiveKey: PropTypes.array,
+  bordered: PropTypes.bool,
+  className: PropTypes.string,
+};