From 4a310d573f59020085cbd06ca4c0e680be54afca Mon Sep 17 00:00:00 2001 From: ZLY Date: Sun, 28 Sep 2025 15:36:13 +0800 Subject: [PATCH] =?UTF-8?q?feat(ideContainer):=20=E5=BC=95=E5=85=A5?= =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E5=AE=B9=E5=99=A8=E5=B9=B6=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F=E6=98=BE=E7=A4=BA=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 导入 EventContainer 组件替换原有的事件占位组件 - 新增 showSubMenu 属性控制子菜单显示状态 - 根据选中项动态控制右侧边栏及日志栏的显示 - 添加 selected 状态变化时的日志输出便于调试 - 优化 NavBar 中 tab 删除逻辑，确保关联应用被正确清理 - 调整部分 UI 渲染条件以提升用户体验一致性 --- src/pages/ideContainer/index.tsx | 22 +++++++++++++--------- src/pages/ideContainer/sideBar.tsx | 15 ++++++++++++++- 2 files changed, 27 insertions(+), 10 deletions(-) diff --git a/src/pages/ideContainer/index.tsx b/src/pages/ideContainer/index.tsx index 635a56d..2e0493b 100644 --- a/src/pages/ideContainer/index.tsx +++ b/src/pages/ideContainer/index.tsx @@ -5,13 +5,15 @@ import SideBar from './sideBar'; import LogBar from './logBar'; import RightSideBar from './rightSideBar'; import NavBar, { NavBarRef } from './navBar'; -import ProjectContainer from '@/pages/orchestration/project'; -import ApplicationContainer from '@/pages/orchestration/application'; import { Selected } from '@/pages/ideContainer/types'; import { updateInfo } from '@/store/ideContainer'; import { useDispatch, useSelector } from 'react-redux'; import { getAppListBySceneId } from '@/api/apps'; +import ProjectContainer from '@/pages/orchestration/project'; +import ApplicationContainer from '@/pages/orchestration/application'; +import EventContainer from '@/pages/orchestration/event'; + type UrlParamsOptions = { identity?: string; [key: string]: string @@ -19,7 +21,6 @@ type UrlParamsOptions = { const CompListComponent = () =>
组件列表
; const AppInstanceComponent = () =>
应用实例
; -const EventComponent = () =>
事件
; const GlobalVarComponent = () =>
全局变量
; const AppCompComponent = () =>
组件
; const MyComponents = () =>
我的组件
; @@ -46,7 +47,7 @@ function IDEContainer() { const { menuData } = useSelector((state) => state.ideContainer); const dispatch = useDispatch(); const navBarRef = useRef(null); - + const getAppList = async () => { const res: any = await getAppListBySceneId({ pageSize: 999, @@ -68,6 +69,7 @@ function IDEContainer() { // 当selected.path变化时，添加到已打开的tab集合中 useEffect(() => { + console.log('selected:', selected); if (selected.key) { setOpenedTabs(prev => new Set(prev).add(selected.key!)); } @@ -135,7 +137,7 @@ function IDEContainer() { case 'appInstance': return ; case 'event': - return ; + return ; case 'globalVar': return ; case 'appCompList': @@ -215,6 +217,7 @@ function IDEContainer() { selected={selected} identity={urlParams.identity} subMenuData={subMenuData} + showSubMenu={!['event', 'globalVar', 'appCompList'].includes(selected.key)} onMenuSelect={(select) => setSelected(select)} onRefresh={() => getAppList()} onDeleteApp={(appId) => { @@ -224,12 +227,12 @@ function IDEContainer() { const tabsToDelete = Array.from(newOpenedTabs).filter(key => key?.includes(appId)); tabsToDelete.forEach(tabKey => newOpenedTabs.delete(tabKey)); setOpenedTabs(newOpenedTabs); - + // 如果当前选中的tab与被删除的应用相关，则重置selected状态 if (selected.key && selected.key.includes(appId)) { setSelected({}); } - + // 通知NavBar删除对应的tab navBarRef.current?.deleteTabByKey(`compFlow-${appId}`); }} @@ -247,11 +250,12 @@ function IDEContainer() { {/*页面渲染*/} {renderContent()} {/*底部日志栏*/} - {urlParams.identity !== 'componentDevelopment' && } + {urlParams.identity !== 'componentDevelopment' && !['event', 'globalVar', 'appCompList'].includes(selected.key) && + } - + {!['event', 'globalVar', 'appCompList'].includes(selected.key) && } ); diff --git a/src/pages/ideContainer/sideBar.tsx b/src/pages/ideContainer/sideBar.tsx index f745ffb..50e4375 100644 --- a/src/pages/ideContainer/sideBar.tsx +++ b/src/pages/ideContainer/sideBar.tsx @@ -40,6 +40,7 @@ interface SideBarProps { subMenuData: any; selected?: any; identity?: string; + showSubMenu: boolean; onMenuSelect?: (selected: Selected) => void; onRefresh: () => void; onDeleteApp?: (appId: string) => void; // 添加删除应用的回调函数 @@ -156,7 +157,15 @@ const AppHandleModal = ({ appInfo, visible, type, onChangeVisible, onClose, onRe ); }; -const SideBar: React.FC = ({ selected, identity, subMenuData, onMenuSelect, onRefresh, onDeleteApp }) => { +const SideBar: React.FC = ({ + selected, + identity, + subMenuData, + showSubMenu, + onMenuSelect, + onRefresh, + onDeleteApp + }) => { const [menu, setMenu] = useState([]); const [subMenuWidth, setSubMenuWidth] = useState(300); // 子菜单宽度状态 const [isSubMenuCollapsed, setIsSubMenuCollapsed] = useState(false); // 子菜单收起状态 @@ -318,6 +327,10 @@ const SideBar: React.FC = ({ selected, identity, subMenuData, onMe Object.keys(subMenuData).length > 0 && setMenu(getMenuData()); }, [subMenuData, identity]); + useEffect(() => { + setSubMenuWidth(showSubMenu ? 300 : 0); + }, [showSubMenu]); + // 渲染节点的额外操作按钮 const renderNodeExtra = (node) => { // 只有当 node.dataRef.id 存在时才渲染操作按钮