feat(ideContainer): 实现 IDE 容器组件的多窗口管理功能

- 新增 ALL_PATHS 常量，用于定义所有可显示的组件路径
- 添加 openedTabs 状态，用于跟踪已打开的 tab
- 实现 renderContent 方法，根据打开的 tab渲染对应组件
- 优化 tab 关闭逻辑，更新 openedTabs 状态
- 调整默认内容显示逻辑，当没有选中任何 tab 时显示提示信息

src/pages/ideContainer/index.tsx

@@ -30,19 +30,66 @@ const ComponentCoding = () => <div style={{ height: '100%', width: '100%' }}>组
 const ComponentDeployment = () => <div style={{ height: '100%', width: '100%' }}>组件部署</div>;
 const ComponentTest = () => <div style={{ height: '100%', width: '100%' }}>组件测试</div>;
 
+// 所有可显示的组件路径列表
+const ALL_PATHS = [
+  'appFlow', 'compList', 'appInstance', 'event', 'globalVar',
+  'myComponents', 'matchingComponents', 'componentReview',
+  'componentCoding', 'componentDeployment', 'componentTest'
+];
+
 function IDEContainer() {
 
   const [selected, setSelected] = useState<Selected>({});
   const [urlParams, setUrlParams] = useState<UrlParamsOptions>({});
   const [subMenuWidth, setSubMenuWidth] = useState(200); // 子菜单宽度状态
+  // 用于跟踪已打开的tab，保持组件状态
+  const [openedTabs, setOpenedTabs] = useState<Set<string>>(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 (
+      <div style={{ height: '100%', position: 'relative' }}>
+        {ALL_PATHS.map(path => {
+          // 检查该路径的组件是否已打开
+          const isOpened = openedTabs.has(path);
+          // 检查是否是当前选中的路径
+          const isSelected = selected.currentPath === path;
+
+          // 只有已打开的组件才渲染，通过CSS控制显示/隐藏
+          return isOpened ? (
+            <div
+              key={path}
+              style={{
+                display: isSelected ? 'block' : 'none',
+                height: '100%'
+              }}
+            >
+              {getContentByPath(path)}
+            </div>
+          ) : null;
+        })}
+
+        {/* 默认内容，当没有选中任何tab时显示 */}
+        {!selected.currentPath && (
+          <div>点击左侧菜单选择需要查看的功能</div>
+        )}
+      </div>
+    );
+  };
+
+  // 根据路径获取对应的组件
+  const getContentByPath = (path: string) => {
     switch (path) {
       case 'appFlow':
         return <ProjectContainer />;
@@ -67,7 +114,7 @@ function IDEContainer() {
       case 'componentTest':
         return <ComponentTest />;
       default:
-        return <div>点击左侧菜单选择需要查看的功能</div>;
+        return <div>未知页面</div>;
     }
   };
 
@@ -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({});