pref(ideContainer)： 优化tab组件和menuData数据对于key的处理逻辑

src/pages/flowEditor/utils/convertFlowData.ts

@@ -1,81 +0,0 @@
-/**
- * 将提供的数据结构转换为适用于 flow editor 的 nodes 和 edges
- * @param flowData - 原始数据结构
- * @returns 包含 nodes 和 edges 的对象
- */
-export const convertFlowData = (flowData: any) => {
-  const nodes: any[] = [];
-  const edges: any[] = [];
-
-  // 处理节点配置
-  const nodeConfigs = flowData.main?.nodeConfigs || [];
-  for (const nodeConfig of nodeConfigs) {
-    // 确定节点类型
-    let nodeType = 'draggable';
-    if (nodeConfig.nodeId === 'start') {
-      nodeType = 'start';
-    } else if (nodeConfig.nodeId === 'end') {
-      nodeType = 'end';
-    }
-
-    // 解析位置信息
-    let position = { x: 0, y: 0 };
-    try {
-      const x6Data = JSON.parse(nodeConfig.x6);
-      position = x6Data.position || { x: 0, y: 0 };
-    } catch (e) {
-      console.warn('Failed to parse position for node:', nodeConfig.nodeId);
-    }
-
-    // 构造节点数据
-    const node: any = {
-      id: nodeConfig.nodeId,
-      type: nodeType,
-      position,
-      data: {
-        title: nodeConfig.nodeName || nodeConfig.nodeId,
-        type: nodeType, // 添加节点类型到data中，供NodeContent使用
-        parameters: {
-          inputs: nodeConfig.dataIns?.map((input: any) => ({
-            name: input.id,
-            desc: input.desc,
-            dataType: input.dataType,
-            defaultValue: input.defaultValue
-          })) || [],
-          outputs: nodeConfig.dataOuts?.map((output: any) => ({
-            name: output.id,
-            desc: output.desc,
-            dataType: output.dataType,
-            defaultValue: output.defaultValue
-          })) || []
-        }
-      }
-    };
-
-    // 如果是机械臂节点，添加组件标识信息
-    if (nodeConfig.component) {
-      node.data.component = {
-        compIdentifier: nodeConfig.component.compIdentifier,
-        compInstanceIdentifier: nodeConfig.component.compInstanceIdentifier
-      };
-    }
-
-    nodes.push(node);
-  }
-
-  // 处理连线配置
-  const lineConfigs = flowData.main?.lineConfigs || [];
-  for (const lineConfig of lineConfigs) {
-    const edge: any = {
-      id: lineConfig.id,
-      source: lineConfig.prev.nodeId,
-      target: lineConfig.next.nodeId,
-      sourceHandle: lineConfig.prev.endpointId,
-      targetHandle: lineConfig.next.endpointId
-    };
-
-    edges.push(edge);
-  }
-
-  return { nodes, edges };
-};

src/pages/ideContainer/index.tsx

@@ -38,7 +38,6 @@ const ALL_PATHS = [
 ];
 
 function IDEContainer() {
-
   const [selected, setSelected] = useState<Selected>({});
   const [urlParams, setUrlParams] = useState<UrlParamsOptions>({});
   const [subMenuWidth, setSubMenuWidth] = useState(200); // 子菜单宽度状态
@@ -69,25 +68,25 @@ function IDEContainer() {
 
   // 当selected.path变化时，添加到已打开的tab集合中
   useEffect(() => {
-    if (selected.path) {
-      setOpenedTabs(prev => new Set(prev).add(selected.path!));
+    if (selected.key) {
+      setOpenedTabs(prev => new Set(prev).add(selected.key!));
     }
-  }, [selected.path]);
+  }, [selected.key]);
 
   // 根据选中的菜单项渲染对应组件
   const renderContent = () => {
     return (
       <div style={{ height: '100%', position: 'relative' }}>
-        {ALL_PATHS.map(path => {
+        {ALL_PATHS.map((path, i) => {
           // 检查该路径的组件是否已打开
-          const isOpened = openedTabs.has(path);
+          const isOpened = openedTabs.has(selected.key);
           // 检查是否是当前选中的路径
           const isSelected = selected.path === path;
 
           // 只有已打开的组件才渲染，通过CSS控制显示/隐藏
           return isOpened ? (
             <div
-              key={path}
+              key={`${selected.key}-${i}`}
               style={{
                 display: isSelected ? 'block' : 'none',
                 height: '100%'
@@ -166,7 +165,7 @@ function IDEContainer() {
       if (menuItem) {
         setSelected({
           ...menuItem,
-          key: menuItem.parentKey || menuItem.key
+          key: menuItem.key || menuItem.parentKey
         });
       }
     }

src/pages/ideContainer/sideBar.tsx

@@ -48,7 +48,7 @@ const SideBar: React.FC<SideBarProps> = ({ selectedKey, identity, subMenuData, o
           v.title = v.name;
           v.key = `compFlow-${v.id}`;
           v.path = 'compFlow';
-          v.parentKey = selectedKey;
+          v.parentKey = menu[activeKey]?.key;
           v.children = null;
         });
         menuData[menuIndex]['children'] = subMenuValue;

src/utils/convertFlowData.ts

@@ -93,7 +93,5 @@ export const convertFlowData = (flowData: any) => {
     edges.push(edge);
   }
 
-  console.log('nodes, edges:', nodes, edges);
-
   return { nodes, edges };
 };