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({});