diff --git a/src/pages/ideContainer/index.tsx b/src/pages/ideContainer/index.tsx index c22e0a0..526354f 100644 --- a/src/pages/ideContainer/index.tsx +++ b/src/pages/ideContainer/index.tsx @@ -30,19 +30,66 @@ const ComponentCoding = () =>
组 const ComponentDeployment = () =>
组件部署
; const ComponentTest = () =>
组件测试
; +// 所有可显示的组件路径列表 +const ALL_PATHS = [ + 'appFlow', 'compList', 'appInstance', 'event', 'globalVar', + 'myComponents', 'matchingComponents', 'componentReview', + 'componentCoding', 'componentDeployment', 'componentTest' +]; + function IDEContainer() { const [selected, setSelected] = useState({}); const [urlParams, setUrlParams] = useState({}); const [subMenuWidth, setSubMenuWidth] = useState(200); // 子菜单宽度状态 + // 用于跟踪已打开的tab,保持组件状态 + const [openedTabs, setOpenedTabs] = useState>(new Set()); useEffect(() => { setUrlParams(getUrlParams(window.location.href) as UrlParamsOptions); }, []); + // 当selected.currentPath变化时,添加到已打开的tab集合中 + useEffect(() => { + if (selected.currentPath) { + setOpenedTabs(prev => new Set(prev).add(selected.currentPath!)); + } + }, [selected.currentPath]); + // 根据选中的菜单项渲染对应组件 const renderContent = () => { - const path = selected.currentPath; + return ( +
+ {ALL_PATHS.map(path => { + // 检查该路径的组件是否已打开 + const isOpened = openedTabs.has(path); + // 检查是否是当前选中的路径 + const isSelected = selected.currentPath === path; + + // 只有已打开的组件才渲染,通过CSS控制显示/隐藏 + return isOpened ? ( +
+ {getContentByPath(path)} +
+ ) : null; + })} + + {/* 默认内容,当没有选中任何tab时显示 */} + {!selected.currentPath && ( +
点击左侧菜单选择需要查看的功能
+ )} +
+ ); + }; + + // 根据路径获取对应的组件 + const getContentByPath = (path: string) => { switch (path) { case 'appFlow': return ; @@ -67,7 +114,7 @@ function IDEContainer() { case 'componentTest': return ; default: - return
点击左侧菜单选择需要查看的功能
; + return
未知页面
; } }; @@ -123,6 +170,11 @@ function IDEContainer() { // 处理tab关闭 const handleTabClose = (path: string) => { + // 从已打开的tab集合中移除 + const newOpenedTabs = new Set(openedTabs); + newOpenedTabs.delete(path); + setOpenedTabs(newOpenedTabs); + // 如果关闭的是当前激活的tab,则重置selected状态 if (path === selected.currentPath) { setSelected({});