feat(ideContainer): 实现 IDE 容器的侧边栏布局和功能

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>
     </>
   );
 }