feat(ideContainer):优化侧边栏菜单数据处理与表单初始化逻辑

src/pages/ideContainer/sideBar.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState, useMemo } from 'react';
+import React, { useEffect, useRef, useState, useMemo, useCallback } from 'react';
 import styles from './style/sideBar.module.less';
 import {
   ResizeBox,
@@ -57,16 +57,18 @@ const AppHandleModal = ({ appInfo, visible, type, onChangeVisible, onClose, onRe
   const { info } = useSelector(state => state.ideContainer);
   const [form] = Form.useForm();
 
-  if (type === 'EDIT' && appInfo) {
+  useEffect(() => {
-    form.setFieldsValue({
+    if (type === 'EDIT' && appInfo && visible) {
-      id: appInfo?.id,
+      form.setFieldsValue({
-      name: appInfo?.name,
+        id: appInfo?.id,
-      description: appInfo?.description,
+        name: appInfo?.name,
-      published: appInfo?.published === 1,
+        description: appInfo?.description,
-      logo: 'scene04.png', // 先写死
+        published: appInfo?.published === 1,
-      sceneId: info.id
+        logo: 'scene04.png', // 先写死
-    });
+        sceneId: info.id
-  }
+      });
+    }
+  }, [type, appInfo, visible, form, info.id]);
 
   const onOk = async () => {
     await form.validate();
@@ -180,63 +182,63 @@ const SideBar: React.FC<SideBarProps> = ({
   const dispatch = useDispatch();
 
   function getMenuData(): MenuItemType[] {
-    switch (identity) {
+      switch (identity) {
-      case 'scene':
+        case 'scene':
         const menuData = _.cloneDeep(menuData1);
-        const newSubMenuData = _.cloneDeep(subMenuData);
+          const newSubMenuData = _.cloneDeep(subMenuData);
-
+
-        // 遍历所有 subMenuKey 来构建子菜单数据结构
+          // 遍历所有 subMenuKey 来构建子菜单数据结构
-        Object.keys(newSubMenuData).forEach(subMenuKey => {
+          Object.keys(newSubMenuData).forEach(subMenuKey => {
-          const subMenuValue: any = _.cloneDeep(newSubMenuData[subMenuKey]);
+            const subMenuValue: any = _.cloneDeep(newSubMenuData[subMenuKey]);
-          const menuIndex = menuData.findIndex(v => v.key === subMenuKey);
+            const menuIndex = menuData.findIndex(v => v.key === subMenuKey);
-
+
-          if (menuIndex !== -1) {
+            if (menuIndex !== -1) {
-            // 构建数据结构，这是目录默认需要的数据结构
+              // 构建数据结构，这是目录默认需要的数据结构
-            subMenuValue.forEach(v => {
+              subMenuValue.forEach(v => {
-              v.title = v.name;
+                v.title = v.name;
-              v.key = `compFlow-${v.id}`;
+                v.key = `compFlow-${v.id}`;
-              v.path = 'compFlow';
+                v.path = 'compFlow';
-              v.parentKey = subMenuKey;
+                v.parentKey = subMenuKey;
-              v.icon = '/ideContainer/icon/app.png';
+                v.icon = '/ideContainer/icon/app.png';
-              if (subMenuKey !== 'appFlow') {
+                if (subMenuKey !== 'appFlow') {
-                v.children = [
+                  v.children = [
-                  {
+                    {
-                    title: '事件',
+                      title: '事件',
-                    children: null,
+                      children: null,
-                    icon: '/ideContainer/icon/list.png'
+                      icon: '/ideContainer/icon/list.png'
-                  },
+                    },
-                  {
+                    {
-                    title: '组件列表',
+                      title: '组件列表',
-                    children: null,
+                      children: null,
-                    icon: '/ideContainer/icon/list.png'
+                      icon: '/ideContainer/icon/list.png'
-                  }
+                    }
-                ];
+                  ];
-              }
+                }
-            });
+              });
-            menuData[menuIndex]['children'] = subMenuValue;
+              menuData[menuIndex]['children'] = subMenuValue;
-          }
+            }
-        });
+          });
 
-        dispatch(updateMenuData({ 'scene': menuData }));
+          dispatch(updateMenuData({ 'scene': menuData }));
-        return menuData;
+          return menuData;
-      case 'componentDevelopment' :
+        case 'componentDevelopment' :
         dispatch(updateMenuData({ 'componentDevelopment': menuData2 }));
         return menuData2;
-      default:
+        default:
         return menuData1;
-    }
+      }
   }
 
   // 处理子菜单区域的拖拽调整大小
   const handleSubMenuResize = (e: MouseEvent, { width }: { width: number }) => {
-    resizeBoxRef.current.style.width = `${width}px`;
+      resizeBoxRef.current.style.width = `${width}px`;
   };
 
   // 切换子菜单区域的收起/展开状态
   const toggleSubMenu = () => {
     setIsSubMenuCollapsed(!isSubMenuCollapsed);
     const width = isSubMenuCollapsed ? 300 : 0;
-    resizeBoxRef.current.style.width = `${width}px`;
+      resizeBoxRef.current.style.width = `${width}px`;
   };
 
   // 处理菜单项点击事件
@@ -252,7 +254,7 @@ const SideBar: React.FC<SideBarProps> = ({
         // 如果点击的是其他菜单项，则展开子菜单（如果已收起）
         if (isSubMenuCollapsed) {
           setIsSubMenuCollapsed(false);
-          resizeBoxRef.current.style.width = `300px`;
+            resizeBoxRef.current.style.width = `300px`;
         }
       }
     }
@@ -269,29 +271,29 @@ const SideBar: React.FC<SideBarProps> = ({
 
     // 深拷贝菜单数据以避免修改原始数据
     const menuCopy = _.cloneDeep(menu);
-    
+
     // 只对当前激活的菜单项进行过滤
     if (menuCopy[activeKey]?.children) {
       menuCopy[activeKey].children = menuCopy[activeKey].children.filter((item: MenuItemType) => {
         // 检查当前项是否匹配搜索条件
         const title = item.title || '';
         const isMatch = title.toLowerCase().includes(searchValue.toLowerCase());
-        
+
         // 如果当前项不匹配，检查其子项是否匹配
         if (!isMatch && item.children && item.children.length > 0) {
           item.children = item.children.filter(child => {
             const childTitle = child.title || '';
             return childTitle.toLowerCase().includes(searchValue.toLowerCase());
           });
-          
+
           // 如果有匹配的子项，或者当前项匹配，则保留该项
           return item.children.length > 0;
         }
-        
+
         return isMatch;
       });
     }
-    
+
     return menuCopy;
   }, [menu, searchValue, activeKey]);