style(ideContainer): 优化页面布局和样式

- 调整 IDEContainer 高度为 calc(100vh - 60px)
- 移除侧边栏固定定位和额外样式- 统一组件列表等元素的高度为 100%
- 调整子菜单最小高度为 calc(100vh - 60px)

src/pages/ideContainer/index.tsx

@@ -17,16 +17,16 @@ type UrlParamsOptions = {
   [key: string]: string
 };
 
-const CompListComponent = () => <div style={{ height: '70vh', width: '100%' }}>组件列表</div>;
+const CompListComponent = () => <div style={{ height: '100%', width: '100%' }}>组件列表</div>;
-const AppInstanceComponent = () => <div style={{ height: '70vh', width: '100%' }}>应用实例</div>;
+const AppInstanceComponent = () => <div style={{ height: '100%', width: '100%' }}>应用实例</div>;
-const EventComponent = () => <div style={{ height: '70vh', width: '100%' }}>事件</div>;
+const EventComponent = () => <div style={{ height: '100%', width: '100%' }}>事件</div>;
-const GlobalVarComponent = () => <div style={{ height: '70vh', width: '100%' }}>全局变量</div>;
+const GlobalVarComponent = () => <div style={{ height: '100%', width: '100%' }}>全局变量</div>;
-const MyComponents = () => <div style={{ height: '70vh', width: '100%' }}>我的组件</div>;
+const MyComponents = () => <div style={{ height: '100%', width: '100%' }}>我的组件</div>;
-const MatchingComponents = () => <div style={{ height: '70vh', width: '100%' }}>协同组件</div>;
+const MatchingComponents = () => <div style={{ height: '100%', width: '100%' }}>协同组件</div>;
-const ComponentReview = () => <div style={{ height: '70vh', width: '100%' }}>组件审核</div>;
+const ComponentReview = () => <div style={{ height: '100%', width: '100%' }}>组件审核</div>;
-const ComponentCoding = () => <div style={{ height: '70vh', width: '100%' }}>组件编码</div>;
+const ComponentCoding = () => <div style={{ height: '100%', width: '100%' }}>组件编码</div>;
-const ComponentDeployment = () => <div style={{ height: '70vh', width: '100%' }}>组件部署</div>;
+const ComponentDeployment = () => <div style={{ height: '100%', width: '100%' }}>组件部署</div>;
-const ComponentTest = () => <div style={{ height: '70vh', width: '100%' }}>组件测试</div>;
+const ComponentTest = () => <div style={{ height: '100%', width: '100%' }}>组件测试</div>;
 
 function IDEContainer() {
 
@@ -87,7 +87,7 @@ function IDEContainer() {
             style={{
               width: subMenuWidth,
               height: '100%',
-              minHeight: 'calc(100vh - 40px)'
+              minHeight: 'calc(100vh - 60px)'
             }}
             onMoving={handleSubMenuResize}
           >

src/pages/ideContainer/sideBar.tsx

@@ -1,9 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import styles from './style/sideBar.module.less';
 import { IconApps } from '@arco-design/web-react/icon';
-import { GlobalState } from '@/store';
-import { useSelector } from 'react-redux';
-import getUrlParams from '@/utils/getUrlParams';
 import { menuData, menuData2 } from './config/menuData';
 
 interface MenuItemType {
@@ -20,16 +17,7 @@ interface SideBarProps {
 }
 
 const SideBar: React.FC<SideBarProps> = ({ onMenuSelect, selectedKey, identity }) => {
-  const urlParams = getUrlParams();
   const [menu, setMenu] = useState<MenuItemType[]>([]);
-  const { settings } = useSelector(
-    (state: GlobalState) => state
-  );
-
-  const navbarHeight = 60;
-  const showNavbar = settings?.navbar && urlParams.navbar !== false;
-  const paddingTop = showNavbar ? { paddingTop: navbarHeight } : {};
-  const sideBarStyle = { ...paddingTop, height: '100%' };
 
   function getMenuData(): MenuItemType[] {
     switch (identity) {
@@ -49,7 +37,6 @@ const SideBar: React.FC<SideBarProps> = ({ onMenuSelect, selectedKey, identity }
   return (
     <div
       className={styles.sider}
-      style={sideBarStyle}
     >
       <div className={styles['menu-container']}>
         {menu.map((item, index) => (

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

@@ -2,7 +2,7 @@
 
 .IDEContainer {
   width: 100%;
-  height: 100%;
+  height: calc(100vh - 60px);
   padding: 0;
   display: flex;
   flex-direction: row;
@@ -24,7 +24,7 @@
       padding: 16px;
 
       > div {
-        flex: 1;
+        height: 100%;
       }
     }
   }

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

@@ -1,21 +1,9 @@
 .sider {
-  width: 60px;
-  height: 100%;
-  overflow-y: auto;
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08);
-  z-index: 99;
   transition: all 0.3s ease-in-out;
-  position: fixed;
-  top: 0;
-  left: 0;
   background-color: var(--color-bg-2);
 }
 
-.menu-container {
-  height: calc(100% - 40px); // 为底部留出空间
-  overflow-y: auto;
-}
-
 .menu-item {
   padding: 12px 4px;
   text-align: center;