feat(codeEditor): 代码编辑器组件增加extra数据存储与渲染

src/components/FlowEditor/nodeEditors/components/CodeEditor.tsx

@@ -11,6 +11,7 @@ const CodeEditor: React.FC<NodeEditorProps> = ({ nodeData, updateNodeData }) =>
 
   // 当组件加载时，主动触发 CodeMirror 的 onUpdateData 方法
   useEffect(() => {
+    console.log('nodeData:', nodeData);
     // 如果是新创建的节点，没有默认的 component 数据，则设置默认值
     if (!nodeData.component || Object.keys(nodeData.component).length === 0) {
       const defaultData = {
@@ -28,6 +29,22 @@ const CodeEditor: React.FC<NodeEditorProps> = ({ nodeData, updateNodeData }) =>
             '  }\n' +
             '}'
         },
+        extra: {
+          java: '/**\n' +
+            'ExecClass类main 方法是固定的启动函数，参数个数、类型、返回类型不可更改\n' +
+            '当前版本gson-2.10.1.jar的文档地址：\n' +
+            'https://www.javadoc.io/doc/com.google.code.gson/gson/2.10.1/index.html\n' +
+            '*/\n' +
+            'import com.google.gson.JsonObject;\n' +
+            'class ExecClass{  \n' +
+            '  public JsonObject main(JsonObject args){\n' +
+            '    return args;\n' +
+            '  }\n' +
+            '}',
+          python: '# main函数是启动函数，参数类型、个数、返回类型不可更改\n' +
+            'def main(a:dict)->dict:\n' +
+            '  return {\'b\': a.get(\'a\')+[4,5]}'
+        },
         type: 'CODE'
       };
 

src/components/FlowEditor/nodeEditors/components/CodeMirror.tsx

@@ -1,25 +1,22 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useState, useEffect } from 'react';
 import { Select } from '@arco-design/web-react';
 import CodeMirror from '@uiw/react-codemirror';
 import { java } from '@codemirror/lang-java';
 import { python } from '@codemirror/lang-python';
 import { githubLight } from '@uiw/codemirror-theme-github';
+import { isJSON } from '@/utils/common';
 
 const Option = Select.Option;
 
-interface TableDataItem {
+interface initData {
-  key: number | string;
+  customDef?: string | Record<string, string>;
-  id: string;
+  type: string;
-  dataType: string;
-  arrayType: string;
-  desc: string;
-  defaultValue: string;
 
   [key: string]: any; // 允许其他自定义字段
 }
 
 interface CodeMirrorProps {
-  initialData: TableDataItem[],
+  initialData: initData,
   onUpdateData: (data) => void,
 }
 
@@ -45,40 +42,82 @@ const nameToCode = {
   'java': '63',
   'python': '70'
 };
+const codeToName = {
+  '63': 'java',
+  '70': 'python'
+};
 
 
 const CodeMirrorComp: React.FC<CodeMirrorProps> = ({
                                                      initialData,
                                                      onUpdateData
                                                    }) => {
-  const [value, setValue] = useState('console.log(\'hello world!\');');
   const [language, setLanguage] = useState('java');
+  const [codeMap, setCodeMap] = useState<Record<string, string>>({
+    java: defaultCode.java,
+    python: defaultCode.python
+  });
+
+  const onChange = useCallback((val) => {
+    // 更新当前语言的代码
+    const newCodeMap = {
+      ...codeMap,
+      [language]: val
+    };
+    setCodeMap(newCodeMap);
 
-  const onChange = useCallback((val, viewUpdate) => {
-    setValue(val);
     const data = {
       customDef: {
         languageId: nameToCode[language],
         sourceCode: val
-      }
+      },
+      extra: newCodeMap, // 前端存储所有语言的代码
+      type: 'CODE'
     };
-    console.log('data:', data);
     onUpdateData(data);
-  }, []);
+  }, [language, codeMap, onUpdateData]);
+
+  const handleLanguageChange = useCallback((newLanguage: string) => {
+    setLanguage(newLanguage);
+
+    // 切换语言时也要更新数据
+    const data = {
+      customDef: {
+        languageId: nameToCode[newLanguage],
+        sourceCode: codeMap[newLanguage]
+      },
+      extra: codeMap, // 前端存储所有语言的代码
+      type: 'CODE'
+    };
+    onUpdateData(data);
+  }, [codeMap, onUpdateData]);
 
   useEffect(() => {
-    setValue(defaultCode[language]);
+    const parseData = isJSON(initialData.customDef) ? JSON.parse(initialData.customDef as string) : initialData.customDef;
+    const currentLanguage = codeToName[parseData?.languageId] || 'java';
+
+    // 如果有 extra，优先使用它来恢复所有语言的代码
+    if (initialData.extra && typeof initialData.extra === 'object') {
+      setCodeMap(initialData.extra as Record<string, string>);
+    }
+    else if (parseData?.sourceCode) {
+      // 否则只恢复当前语言的代码
+      setCodeMap(prev => ({
+        ...prev,
+        [currentLanguage]: parseData.sourceCode
+      }));
+    }
+
+    setLanguage(currentLanguage);
   }, []);
+
   return (
     <>
       <Select
-        defaultValue={'java'}
+        value={language}
         placeholder="请选择语言"
         style={{ width: 154 }}
-        onChange={(value) => {
+        onChange={handleLanguageChange}
-          setLanguage(value);
-          setValue(defaultCode[value]);
-        }}
       >
         {options.map((option, index) => (
           <Option key={option} disabled={index === 3} value={option}>
@@ -87,7 +126,7 @@ const CodeMirrorComp: React.FC<CodeMirrorProps> = ({
         ))}
       </Select>
       <CodeMirror
-        value={value}
+        value={codeMap[language]}
         height="300px"
         extensions={extensions}
         onChange={onChange} />