feat(flowEditor): 数据流程编辑和保存功能

src/pages/flowEditor/index.tsx

@@ -18,10 +18,9 @@ import {
   ConnectionLineType
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
-import { Button, Modal } from '@arco-design/web-react';
 import { nodeTypeMap, nodeTypes, registerNodeType } from '@/components/FlowEditor/node';
 import SideBar from './sideBar/sideBar';
-import { convertFlowData } from '@/utils/convertFlowData';
+import { convertFlowData, revertFlowData } from '@/utils/convertFlowData';
 import { exampleFlowData } from '@/pages/flowEditor/test/exampleFlowData';
 import LocalNode from '@/components/FlowEditor/node/localNode/LocalNode';
 import CustomEdge from './components/customEdge';
@@ -35,23 +34,24 @@ import ActionBar from './components/actionBar';
 import { defaultNodeTypes } from '@/components/FlowEditor/node/types/defaultType';
 import { localNodeData } from '@/pages/flowEditor/sideBar/config/localNodeData';
 import { useAlignmentGuidelines } from '@/hooks/useAlignmentGuidelines';
+import { setMainFlow } from '@/api/appRes';
 
 const edgeTypes: EdgeTypes = {
   custom: CustomEdge
 };
 
-const FlowEditorWithProvider: React.FC = () => {
+const FlowEditorWithProvider: React.FC<{ initialData?: any }> = ({ initialData }) => {
   return (
     <div style={{ width: '100%', height: '91vh', display: 'flex' }} onContextMenu={(e) => e.preventDefault()}>
       <ReactFlowProvider>
         {/*<SideBar />*/}
-        <FlowEditor />
+        <FlowEditor initialData={initialData} />
       </ReactFlowProvider>
     </div>
   );
 };
 
-const FlowEditor: React.FC = () => {
+const FlowEditor: React.FC<{ initialData?: any }> = ({ initialData }) => {
   const [nodes, setNodes] = useState<Node[]>([]);
   const [edges, setEdges] = useState<Edge[]>([]);
   const reactFlowInstance = useReactFlow();
@@ -309,8 +309,8 @@ const FlowEditor: React.FC = () => {
   }, [clearGuidelines]);
 
   useEffect(() => {
-    const { nodes: convertedNodes, edges: convertedEdges } = convertFlowData(exampleFlowData);
-    // 为所有边添加类型
+    const { nodes: convertedNodes, edges: convertedEdges } = convertFlowData(initialData);
+    // 为所有边添加类型-
     const initialEdges: Edge[] = convertedEdges.map(edge => ({
       ...edge,
       type: 'custom'
@@ -318,7 +318,7 @@ const FlowEditor: React.FC = () => {
 
     setNodes(convertedNodes);
     setEdges(initialEdges);
-  }, []);
+  }, [initialData]);
 
   // 监听边的变化，处理添加节点的触发
   useEffect(() => {
@@ -601,26 +601,10 @@ const FlowEditor: React.FC = () => {
         nodes: nodes,
         edges: edges
       };
-      // TODO 接口对接后修改后续的更新操作
-      console.log('flowData:', flowData);
-      return;
-      // 发送到服务器的示例代码（需要根据您的实际API进行调整）
-      const response = await fetch('/api/flow/save', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(flowData)
-      });
+      // 转换会原始数据类型
+      const revertedData = revertFlowData(nodes, edges);
 
-      if (response.ok) {
-        console.log('Flow data saved successfully');
-        // 可以添加成功提示
-      }
-      else {
-        console.error('Failed to save flow data');
-        // 可以添加失败提示
-      }
+      const res = await setMainFlow(revertedData, initialData.id);
     } catch (error) {
       console.error('Error saving flow data:', error);
       // 可以添加错误提示

src/pages/ideContainer/index.tsx

@@ -108,7 +108,7 @@ function IDEContainer() {
   const getContentByPath = (path: string) => {
     switch (path) {
       case 'compFlow':
-        return <ProjectContainer />;
+        return <ProjectContainer selected={selected} />;
       case 'appFlow':
         return <ApplicationContainer />;
       case 'compList':

src/pages/ideContainer/sideBar.tsx

@@ -5,7 +5,7 @@ import { menuData1, menuData2 } from './config/menuData';
 import { ResizeBox, Tree } from '@arco-design/web-react';
 import { Selected } from '@/pages/ideContainer/types';
 import { useDispatch, useSelector } from 'react-redux';
-import { updateMenuData } from '@/store/ideContainer';
+import { updateMenuData, updateFlowData } from '@/store/ideContainer';
 import { getProjectEnv } from '@/api/apps';
 import _ from 'lodash';
 
@@ -138,6 +138,8 @@ const SideBar: React.FC<SideBarProps> = ({ selectedKey, identity, subMenuData, o
 
       // 更新 menuData 中的数据
       dispatch(updateMenuData({ ...menuData, [identity]: currentMenu }));
+      // 更新 flowData 中的数据
+      dispatch(updateFlowData({ [data.id]: res.data.app }));
 
       // 同时更新本地 menu 状态以触发重新渲染
       setMenu(prevMenu => {
@@ -217,10 +219,10 @@ const SideBar: React.FC<SideBarProps> = ({ selectedKey, identity, subMenuData, o
         >
           <Tree
             defaultExpandedKeys={['0-0']}
-            onSelect={(_selectedKeys, info) => {
+            onSelect={async (_selectedKeys, info) => {
               const selectedNode = info.node;
               const originalData = selectedNode.props.dataRef;
-              getProjectEnvData(originalData);
+              await getProjectEnvData(originalData);
               // 保持主菜单的选中状态
               const mainMenuKey = `${menu[activeKey]?.key}`;
               setMainMenuSelectedKey(mainMenuKey);

src/pages/orchestration/project/index.tsx

@@ -1,9 +1,17 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import FlowEditor from '@/pages/flowEditor/index';
+import { useSelector } from 'react-redux';
+
+const ProjectContainer = ({ selected }) => {
+  const { flowData } = useSelector(state => state.ideContainer);
+  const [selectedFlowData, setSelectedFlowData] = useState<any>({});
+
+  useEffect(() => {
+    setSelectedFlowData(flowData[selected.id]);
+  }, [selected]);
 
-const ProjectContainer = () => {
   return (
-    <FlowEditor />
+    <FlowEditor initialData={selectedFlowData} />
   );
 };