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 存在时才渲染操作按钮