feat(ideContainer): 新增侧边栏组件和菜单数据

src/pages/ideContainer/config/menuData.ts

@@ -0,0 +1,37 @@
+export const menuData = [
+  {
+    title: '应用编排',
+    children: null,
+    path: 'appFlow'
+  },
+  {
+    title: '应用列表',
+    children: [
+      {
+        title: '应用A',
+        children: [
+          {
+            title: '组件列表',
+            children: null,
+            path: 'compList'
+          },
+          {
+            title: '应用实例',
+            children: null,
+            path: 'appInstance'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    title: '事件',
+    children: null,
+    path: 'event'
+  },
+  {
+    title: '全局变量',
+    children: null,
+    path: 'globalVar'
+  }
+];

src/pages/ideContainer/sideBar.tsx

@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+import styles from './style/sideBar.module.less';
+import { Layout, Menu } from '@arco-design/web-react';
+import { IconApps, IconMenuFold, IconMenuUnfold } from '@arco-design/web-react/icon';
+import { GlobalState } from '@/store';
+import { useSelector } from 'react-redux';
+import getUrlParams from '@/utils/getUrlParams';
+import { menuData } from './config/menuData';
+
+const Sider = Layout.Sider;
+
+const MenuItem = Menu.Item;
+const SubMenu = Menu.SubMenu;
+
+interface MenuItemType {
+  title: string;
+  children?: MenuItemType[];
+  path?: string;
+}
+
+interface SideBarProps {
+  onMenuSelect?: ({ currentPath, currentKey }) => void;
+  selectedKey?: string;
+}
+
+const SideBar: React.FC<SideBarProps> = ({ onMenuSelect, selectedKey }) => {
+  const urlParams = getUrlParams();
+  const [collapsed, setCollapsed] = useState<boolean>(false);
+  const { userInfo, settings, userLoading } = useSelector(
+    (state: GlobalState) => state
+  );
+
+  const navbarHeight = 60;
+  const menuWidth = collapsed ? 48 : settings?.menuWidth;
+
+  const showNavbar = settings?.navbar && urlParams.navbar !== false;
+  const paddingTop = showNavbar ? { paddingTop: navbarHeight } : {};
+
+  function toggleCollapse() {
+    setCollapsed((collapsed) => !collapsed);
+  }
+
+  // 递归渲染菜单项
+  const renderMenuItems = (items: MenuItemType[], parentKey = '') => {
+    return items.map((item, index) => {
+      const currentKey = (parentKey ? `${parentKey}_${index}` : `${index}`);
+
+      if (!item.children) {
+        return (
+          <MenuItem
+            key={currentKey}
+            onClick={() => {
+              onMenuSelect?.({ currentPath: item.path, currentKey });
+            }}
+          >
+            {item.title}
+          </MenuItem>
+        );
+      }
+
+      return (
+        <SubMenu key={currentKey} title={item.title}>
+          {renderMenuItems(item.children, currentKey)}
+        </SubMenu>
+      );
+    });
+  };
+
+  return (
+    <>
+      <Layout>
+        <Sider
+          className={styles.sider}
+          width={menuWidth}
+          collapsed={collapsed}
+          onCollapse={setCollapsed}
+          trigger={null}
+          collapsible
+          breakpoint="xl"
+          style={paddingTop}>
+          <Menu
+            selectedKeys={selectedKey ? [selectedKey] : ['0']}
+          >
+            {renderMenuItems(menuData)}
+          </Menu>
+          {/*<div className={styles['collapse-btn']} onClick={toggleCollapse}>*/}
+          {/*  {collapsed ? <IconMenuUnfold /> : <IconMenuFold />}*/}
+          {/*</div>*/}
+        </Sider>
+      </Layout>
+    </>
+  );
+};
+
+export default SideBar;

src/pages/ideContainer/style/index.module.less

@@ -0,0 +1,4 @@
+.IDEContainer {
+  width: 100%;
+  height: 100%;
+}

src/pages/ideContainer/style/sideBar.module.less

@@ -0,0 +1,28 @@
+.sider {
+  position: fixed;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 99;
+  box-sizing: border-box;
+
+  .collapse-btn {
+    height: 24px;
+    width: 24px;
+    background-color: var(--color-fill-1);
+    color: var(--color-text-3);
+    border-radius: 2px;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    // 位置
+    position: absolute;
+    bottom: 12px;
+    right: 12px;
+
+    &:hover {
+      background-color: var(--color-fill-3);
+    }
+  }
+}