From cafead0cef4a689e42b8597ddfb516de98510998 Mon Sep 17 00:00:00 2001
From: ZLY <zhongliangyuan@gdngsk.com>
Date: Wed, 20 Aug 2025 10:57:25 +0800
Subject: [PATCH] =?UTF-8?q?feat(ideContainer):=20=E5=AE=9E=E7=8E=B0=20IDE?=
 =?UTF-8?q?=20=E5=AE=B9=E5=99=A8=E7=9A=84=E4=BE=A7=E8=BE=B9=E6=A0=8F?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E5=92=8C=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ideContainer/index.tsx | 50 ++++++++++++++++++++++++++++++--
 1 file changed, 48 insertions(+), 2 deletions(-)

diff --git a/src/pages/ideContainer/index.tsx b/src/pages/ideContainer/index.tsx
index de586d5..fa1ed6d 100644
--- a/src/pages/ideContainer/index.tsx
+++ b/src/pages/ideContainer/index.tsx
@@ -1,9 +1,55 @@
-import React from 'react';
+import React, { useState } from 'react';
+import styles from './style/index.module.less';
+import SideBar from './sideBar';
+import { Layout } from '@arco-design/web-react';
+
+const Content = Layout.Content;
+
+interface Selected {
+  currentPath?: string;
+  currentKey?: string;
+}
+
+// 假设您有这些组件
+const AppFlowComponent = () => <div>应用编排</div>;
+const CompListComponent = () => <div>组件列表</div>;
+const AppInstanceComponent = () => <div>应用实例</div>;
+const EventComponent = () => <div>事件</div>;
+const GlobalVarComponent = () => <div>全局变量</div>;
 
 function IDEContainer() {
+
+  const [selected, setSelected] = useState<Selected>({});
+
+  // 根据选中的菜单项渲染对应组件
+  const renderContent = () => {
+    switch (selected.currentPath) {
+      case 'appFlow':
+        return <AppFlowComponent />;
+      case 'compList':
+        return <CompListComponent />;
+      case 'appInstance':
+        return <AppInstanceComponent />;
+      case 'event':
+        return <EventComponent />;
+      case 'globalVar':
+        return <GlobalVarComponent />;
+      default:
+        return <AppFlowComponent />;
+    }
+  };
   return (
     <>
-      <div>IDE Container</div>
+      <Layout className={styles.IDEContainer}>
+        <SideBar
+          onMenuSelect={(select) => setSelected(select)}
+          selectedKey={selected.currentKey}
+        />
+        <Content style={{ paddingLeft: '220px' }}>
+          {renderContent()}
+        </Content>
+
+      </Layout>
     </>
   );
 }