diff --git a/src/pages/ideContainer/sideBar.tsx b/src/pages/ideContainer/sideBar.tsx index 69e2878..5ba3399 100644 --- a/src/pages/ideContainer/sideBar.tsx +++ b/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) { - form.setFieldsValue({ - id: appInfo?.id, - name: appInfo?.name, - description: appInfo?.description, - published: appInfo?.published === 1, - logo: 'scene04.png', // 先写死 - sceneId: info.id - }); - } + useEffect(() => { + if (type === 'EDIT' && appInfo && visible) { + form.setFieldsValue({ + id: appInfo?.id, + name: appInfo?.name, + description: appInfo?.description, + published: appInfo?.published === 1, + 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 = ({ const dispatch = useDispatch(); function getMenuData(): MenuItemType[] { - switch (identity) { - case 'scene': + switch (identity) { + case 'scene': const menuData = _.cloneDeep(menuData1); - const newSubMenuData = _.cloneDeep(subMenuData); - - // 遍历所有 subMenuKey 来构建子菜单数据结构 - Object.keys(newSubMenuData).forEach(subMenuKey => { - const subMenuValue: any = _.cloneDeep(newSubMenuData[subMenuKey]); - const menuIndex = menuData.findIndex(v => v.key === subMenuKey); - - if (menuIndex !== -1) { - // 构建数据结构,这是目录默认需要的数据结构 - subMenuValue.forEach(v => { - v.title = v.name; - v.key = `compFlow-${v.id}`; - v.path = 'compFlow'; - v.parentKey = subMenuKey; - v.icon = '/ideContainer/icon/app.png'; - if (subMenuKey !== 'appFlow') { - v.children = [ - { - title: '事件', - children: null, - icon: '/ideContainer/icon/list.png' - }, - { - title: '组件列表', - children: null, - icon: '/ideContainer/icon/list.png' - } - ]; - } - }); - menuData[menuIndex]['children'] = subMenuValue; - } - }); + const newSubMenuData = _.cloneDeep(subMenuData); + + // 遍历所有 subMenuKey 来构建子菜单数据结构 + Object.keys(newSubMenuData).forEach(subMenuKey => { + const subMenuValue: any = _.cloneDeep(newSubMenuData[subMenuKey]); + const menuIndex = menuData.findIndex(v => v.key === subMenuKey); + + if (menuIndex !== -1) { + // 构建数据结构,这是目录默认需要的数据结构 + subMenuValue.forEach(v => { + v.title = v.name; + v.key = `compFlow-${v.id}`; + v.path = 'compFlow'; + v.parentKey = subMenuKey; + v.icon = '/ideContainer/icon/app.png'; + if (subMenuKey !== 'appFlow') { + v.children = [ + { + title: '事件', + children: null, + icon: '/ideContainer/icon/list.png' + }, + { + title: '组件列表', + children: null, + icon: '/ideContainer/icon/list.png' + } + ]; + } + }); + menuData[menuIndex]['children'] = subMenuValue; + } + }); - dispatch(updateMenuData({ 'scene': menuData })); - return menuData; - case 'componentDevelopment' : + dispatch(updateMenuData({ 'scene': menuData })); + return menuData; + 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 = ({ // 如果点击的是其他菜单项,则展开子菜单(如果已收起) if (isSubMenuCollapsed) { setIsSubMenuCollapsed(false); - resizeBoxRef.current.style.width = `300px`; + resizeBoxRef.current.style.width = `300px`; } } } @@ -269,29 +271,29 @@ const SideBar: React.FC = ({ // 深拷贝菜单数据以避免修改原始数据 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]);