style(ideContainer): 修改侧边栏样式和布局

src/pages/flowEditor/index.tsx

@@ -671,7 +671,7 @@ const FlowEditor: React.FC = () => {
         panOnScrollSpeed={0.5}
       >
         <Background />
-        <Controls />
+        {/*<Controls />*/}
         <Panel position="top-left">
           <div>从左侧拖拽节点到画布中</div>
           <Button onClick={saveFlowDataToServer} type="primary">保存</Button>

src/pages/ideContainer/sideBar.tsx

@@ -106,7 +106,7 @@ const SideBar: React.FC<SideBarProps> = ({ onMenuSelect, selectedKey, identity }
 
   return (
     <div
-      className={styles.sider}
+      className={styles['sider']}
     >
       <div className={styles['menu-container']}>
         {menu.map((item, index) => (
@@ -135,13 +135,9 @@ const SideBar: React.FC<SideBarProps> = ({ onMenuSelect, selectedKey, identity }
         }}
         onMoving={handleSubMenuResize}
       >
-        <div style={{
+        <div
-          width: '100%',
+          className={styles['sub-menu']}
-          height: '100%',
+        >
-          backgroundColor: '#f5f5f5',
-          borderRight: '1px solid #ddd',
-          position: 'relative'
-        }}>
           <Tree
             defaultExpandedKeys={['0-0']}
             onSelect={(_selectedKeys, info) => {

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

@@ -6,50 +6,61 @@
   background-color: var(--color-bg-2);
 }
 
-.menu-item {
+.menu-container {
-  padding: 12px 4px;
+  .menu-item {
-  text-align: center;
+    padding: 12px 4px;
-  cursor: pointer;
+    text-align: center;
-  transition: all 0.3s ease-in-out;
+    cursor: pointer;
-  position: relative;
+    transition: all 0.3s ease-in-out;
-  display: flex;
+    position: relative;
-  flex-direction: column;
+    display: flex;
-  align-items: center;
+    flex-direction: column;
+    align-items: center;
 
-  &:hover {
+    &:hover {
-    background-color: var(--color-fill-2);
+      background-color: var(--color-fill-2);
-  }
+    }
 
-  &-active {
+    &-active {
-    background-color: var(--color-fill-2);
+      background-color: var(--color-fill-2);
-    color: rgb(var(--primary-6));
+      color: rgb(var(--primary-6));
-  }
+    }
-}
 
-.menu-item-content {
+    .menu-item-content {
-  display: flex;
+      display: flex;
-  flex-direction: column;
+      flex-direction: column;
-  align-items: center;
+      align-items: center;
-  width: 100%;
+      width: 100%;
-}
 
-.menu-item-icon {
+      .menu-item-icon {
-  display: flex;
+        display: flex;
-  align-items: center;
+        align-items: center;
-  justify-content: center;
+        justify-content: center;
-  font-size: 20px;
+        font-size: 20px;
-  min-width: 16px;
+        min-width: 16px;
-  margin-bottom: 10px;
+        margin-bottom: 10px;
+      }
+
+      .menu-item-text {
+        font-size: 14px;
+        text-align: center;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
+        line-height: 1.2;
+        width: 100%;
+        padding: 0 5px;
+      }
+    }
+  }
 }
 
-.menu-item-text {
+.sub-menu {
-  font-size: 14px;
-  text-align: center;
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: 4;
-  -webkit-box-orient: vertical;
-  line-height: 1.2;
   width: 100%;
-  padding: 0 5px;
+  height: 100%;
+  background-color: #fcfcfc;
+  border-right: 1px solid #ddd;
+  position: relative;
+  border-left: 1px solid #ddd;
 }