feat:课程管理缺省图替换，导航栏收起高亮

src/modules/root/Menu.less

 @import '../../core/variables.less';
 
 @top-height: 0px;
-@menu-bakg: #FFF;
-@active-color: #2966FF;
+@menu-bakg: #fff;
+@active-color: #2966ff;
 .left-container {
   position: absolute;
   z-index: 2;
@@ -24,12 +24,12 @@
         margin: 15px 0 15px 8px;
       }
     }
-    .menu-type-icon{
+    .menu-type-icon {
       margin: 8px 14px 0px 4px;
       cursor: pointer;
-      .icon{
-        font-size:14px;
-        color:#5E606A;
+      .icon {
+        font-size: 14px;
+        color: #5e606a;
       }
     }
   }
@@ -37,7 +37,7 @@
   .ant-menu {
     padding-left: 0 !important;
     color: #333;
-    background: #FFF !important;
+    background: #fff !important;
   }
   .left {
     -webkit-user-select: none;
@@ -59,78 +59,81 @@
         display: none;
       }
       .icon {
-        margin-right: 20px
+        margin-right: 20px;
+      }
+      .icon-img-box {
+        // display: flex;
+        .icon-img {
+          margin-left: 12px;
+        }
       }
-      .icon-img{
-        width:18px;
-        height:18px;
-        margin-right:6px;
+      .icon-img {
+        width: 18px;
+        height: 18px;
       }
       .listType {
         width: 5px;
         height: 5px;
-        background: #9A9DA7;
+        background: #9a9da7;
         border-radius: 50%;
         top: 18px;
         left: 38px;
         position: absolute;
       }
-      .ant-menu-item{
-        padding-left: 13px !important;
+      .ant-menu-item {
+        padding-left: 12px !important;
         padding-right: 0px;
         margin: 6px 8px;
         width: calc(100% - 15px);
-        &:hover{
-          background: #F3F6FA;
+        &:hover {
+          background: #f3f6fa;
           border-radius: 2px;
-          color:#333;
+          color: #333;
         }
       }
-      .ant-menu-item-selected{
-        background-color:@active-color;
-        color:#FFF;
-        border-radius:2px;
-        &:hover{
-          color:#FFF;
+      .ant-menu-item-selected {
+        background-color: @active-color;
+        color: #fff;
+        border-radius: 2px;
+        &:hover {
+          color: #fff;
         }
       }
-      .ant-menu-submenu{
-        .ant-menu-submenu-title{
-          margin:6px 8px;
-          padding-left:13px !important;
+      .ant-menu-submenu {
+        .ant-menu-submenu-title {
+          margin: 6px 8px;
+          padding-left: 0 !important;
         }
-        .ant-menu-item{
-          padding-left:46px !important;
+        .ant-menu-item {
+          padding-left: 46px !important;
         }
       }
 
-      .ant-menu-submenu-selected{
-        color:@active-color;
+      .ant-menu-submenu-selected {
+        color: @active-color;
 
-        .ant-menu-item-selected{
-          color:#FFF;
+        .ant-menu-item-selected {
+          color: #fff;
           .listType {
             background: @active-color;
           }
         }
-      
       }
-      .ant-menu-submenu-arrow{
-        right:22px;
-        color:#5E606A;
+      .ant-menu-submenu-arrow {
+        right: 22px;
+        color: #5e606a;
       }
     }
-  
   }
 
   &.left-container-vertical {
     width: 56px;
-    .menu-type-icon{
-      margin:4px 0 0px 22px;
+    .menu-type-icon {
+      margin: 4px 0 0px 22px;
     }
     .left {
-      .ant-menu-submenu-arrow{
-        display:none !important;
+      .ant-menu-submenu-arrow {
+        display: none !important;
       }
     }
   }
@@ -144,15 +147,17 @@
   // }
 }
 .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
-  background:@active-color !important;
+  background: @active-color !important;
 }
-.ant-menu.ant-menu-dark, .ant-menu-dark .ant-menu-sub, .ant-menu.ant-menu-dark .ant-menu-sub{
+.ant-menu.ant-menu-dark,
+.ant-menu-dark .ant-menu-sub,
+.ant-menu.ant-menu-dark .ant-menu-sub {
   background: @menu-bakg !important;
 }
-.ant-menu-submenu-popup{
-  left:67px !important;
+.ant-menu-submenu-popup {
+  left: 67px !important;
 }
-.ant-menu-submenu-popup>.ant-menu {
+.ant-menu-submenu-popup > .ant-menu {
   background: @menu-bakg !important;
   color: #333;
   width: 132px;
@@ -160,18 +165,18 @@
   li {
     width: calc(100% - 16px);
     padding-left: 20px;
-    margin:12px  8px !important;
-    &:hover{
-      background: #F3F6FA;
+    margin: 12px 8px !important;
+    &:hover {
+      background: #f3f6fa;
       border-radius: 2px;
-      color:#333 !important;
+      color: #333 !important;
     }
   }
 
   .ant-menu-item-selected {
     background: @active-color;
     color: #fff;
-    &:hover{
+    &:hover {
       color: #fff !important;
     }
   }

src/modules/root/Menu.tsx

@@ -122,8 +122,18 @@ function Aside(props: any) {
                 return (
                   <SubMenu
                     key={item.groupCode}
-                    style={{ marginTop: 0, backgroundColor: !menuType && item.groupCode === selectKeyParent ? '#2966FF' : '#fff' }}
-                    icon={<img src={!menuType && item.groupCode === selectKeyParent ? item.selectImg : item.img} className='icon-img'></img>}
+                    style={{ marginTop: 0 }}
+                    icon={
+                      !menuType && item.groupCode === selectKeyParent ? (
+                        <div className='icon-img-box' style={{ backgroundColor: '#2966FF', width: '40px', height: '40px' }}>
+                          <img src={item.selectImg} className='icon-img' />
+                        </div>
+                      ) : (
+                        <div className='icon-img-box' style={{ backgroundColor: '#fff', width: '40px', height: '40px', display: 'inline-block' }}>
+                          <img src={item.img} className='icon-img' />
+                        </div>
+                      )
+                    }
                     title={menuType ? <span>{item.groupName}</span> : ''}
                     onTitleClick={() => onOpenChange(item.groupCode)}>
                     {item.children.map((_item: any, _index: any) => {