feat: 合并

src/layouts/AppLayout/components/SlideMenu/index.less

@@ -16,6 +16,44 @@
 @slider-light: #fff;
 @color-black: #fff;
 .@{panda-prefix-cls} {
+  overflow: hidden;
+  flex: 0 0 140px;
+  max-width: 140px;
+  min-width: 140px;
+  width: 140px;
+  background-color: @layout-header-background;
+  transition: background 0.3s, width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
+  &-fixed {
+    position: fixed !important;
+    top: 46px;
+    left: 0;
+    z-index: 600;
+    height: calc(100% - 46px);
+    // overflow: auto;
+    overflow-x: hidden;
+    box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
+    transition: all 0.2s;
+  }
+  &-collapsed {
+    flex: 0 0 48px;
+    max-width: 48px;
+    min-width: 48px;
+    width: 48px;
+    transition: background 0.3s, width 0.5s cubic-bezier(0.2, 0, 0, 1) 0s;
+    .sliderMenu {
+      .splitLine {
+        width: 48px;
+      }
+    }
+  }
+  &-children {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+  &-wrapper {
+    flex: 1 1 0%;
+  }
   &-menu {
     position: relative;
     min-height: 100%;
@@ -56,20 +94,18 @@
             stroke-miterlimit: 10;
           }
         }
-         svg {
-              path:not(.st0) {
-                  fill: #fff!important;
-
-              }
-              path.st0 {
-                  fill:url(#SVGID_1_)!important;
-              }
-              path.st1 {
-                  fill:url(#SVGID_2_)!important;
-              }
-          }
       }
-      
+      &-text {
+        display: block;
+        color: hsla(0, 0%, 100%, 0.65);
+        padding-top: 4px;
+        max-width: 70px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        opacity: 1;
+        transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), margin 0.3s, color 0.3s;
+      }
       &-current {
         color: @color-black;
       }

src/layouts/HN.less

@@ -2,7 +2,7 @@
 :global {
   .panda-console-base-userWrapper-userInfo-header {
     //右上角弹框
-    // background-color: @hn-greenColor;git 
+    // background-color: @hn-greenColor;
   }
 }
 .hnlayout {
@@ -20,6 +20,11 @@
       }
     }
     .panda-console-base-layout-slider {
+      flex: 0 0 140px;
+      width: 140px;
+      min-width: 140px;
+      max-width: 140px;
+      overflow: hidden;
       background-color: #fff;
     }
     .panda-console-base-layout-slider-menu-item-active {
@@ -111,8 +116,7 @@
     .panda-console-base-menu-item-children :global(.panda-console-base-tabs-tab-active) {
       color: @hn-greenColor !important;
     }
-    .panda-console-base-menu-item-children
-      :global(.panda-console-base-tabs-tab-active .panda-pro-layouts-basic-layout-menu-item-name) {
+    .panda-console-base-menu-item-children :global(.panda-console-base-tabs-tab-active .menu-item-name) {
       color: @hn-greenColor !important;
     }
     .panda-console-base-menu-item-children :global .panda-console-base-tabs-tab-active svg path,
@@ -155,14 +159,41 @@
     .panda-console-base-pro-sider-logo {
       display: none;
     }
-    .test-icon {
+    .panda-console-base-layout-slider-menu-item {
+      height: 36px;
+    }
+    .panda-console-base-layout-slider-menu-item a {
+      flex-direction: row;
+      width: 100%;
+      margin: 0 auto;
+      margin-top: 4px;
+      margin-right: 16px;
+      padding-left: 16px;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
-      padding: 0 16px;
+      & > img {
+        width: 18px;
+        height: 18px;
+        margin-top: 4px;
+        opacity: 1;
+      }
+      & > span {
+        margin-left: 4px;
+      }
+    }
+    .panda-console-base-menu {
+      ul {
+        .panda-console-base-menu-item-only-child {
+          padding-left: 26px !important;
+        }
+      }
+    }
+    .test-icon {
       width: 100%;
-      margin: 0 auto;
-      padding: 0 16px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
       .my-svg {
         display: inline-block;
         width: 18px;
@@ -198,6 +229,7 @@
         color: #7c7c7a;
       }
     }
+
     .panda-console-base-pro-menu-item-title {
       display: inline-block;
       overflow: hidden;
@@ -205,33 +237,20 @@
       text-overflow: ellipsis;
       vertical-align: bottom;
     }
-
-    .panda-console-base-menu-submenu-title{
-      padding-right: 0 !important;
-      padding-left: 0 !important;
-    }
-    .panda-console-base-menu-sub .panda-console-base-menu-item.panda-console-base-menu-item-only-child {
-      padding-right: 0 !important;
-      padding-left: 0 !important;
-    }
-    .panda-console-base-pro-sider .panda-console-base-layout-sider-children {
-      margin-top: 44px;
-    }
     .hight-active {
-     
-      // color: @hn-greenColor;
-      background: @hn-greenColor;
-      background: #00b278;
+      color: @hn-greenColor;
+      // background: @hn-greenColor;
+      // background: #00b278;
       border-radius: 5px;
       .my-desc {
-        color: #fff;
+        color: #00b278;
+      }
+      svg path,
+      svg rect,
+      svg circle {
+        fill: @hn-greenColor !important;
+        stroke: @hn-greenColor !important;
       }
-      // svg path,
-      //   svg rect,
-      //   svg circle {
-      //     fill: @hn-greenColor !important;
-      //     stroke: @hn-greenColor !important;
-      //   }
     }
     .panda-console-base-pro-sider {
       background: #fff;

src/layouts/HNLayout.js

@@ -18,6 +18,7 @@ import SecurityLayout from './SecurityLayout';
 import Site from './Site';
 import layoutStyles from './BasicLayout.less';
 import styls from './HN.less';
+
 const ArcgisMap = React.lazy(() => import('../pages/map/arcgis'));
 const AMap = React.lazy(() => import('../pages/map/amap'));
 const CesiumMap = React.lazy(() => import('../pages/map/cesiumMap'));
@@ -254,19 +255,20 @@ const Layout = props => {
         _.isFunction(props.global.transformDevAssetsBaseURL) &&
         props.global.transformDevAssetsBaseURL(props.global.get('bannerLogo'))
       : defaultSetting.logo;
-
   return (
     <SecurityLayout loading {...props}>
       <div className={styls.hnlayout}>
         <BasicLayout
           route={props.route}
-          title=""
-          logo={require('@/assets/basic/HN-logo.png')}
+          title={props.global.subtitle}
+          siderWidth={140}
+          logo={logo}
           config={props.global}
           currentMenuIndex={props.currentMenuIndex}
           onHeaderLogo={handlerIndustry}
           onPageChange={handlerPageChange}
           onMenuPanelItemClick={handleUpdateCurrentIndex}
+          // subMenuItemRender={()=> <RightContent />}
           headerContentRender={() => <RightContent />}
           headerSiteRender={() =>
             renderSite({