fix: 调整导航交互样式

src/global/styles/reset.less

@@ -126,6 +126,19 @@
   .ant-anchor-wrapper{
     background-color: #fff;
   }
+
+  // 覆写左边菜单
+  .ant-menu-item {
+    padding-left: 8px !important;
+    padding-right: 8px !important;
+  }
+  .ant-menu-submenu-title {
+    padding-left: 8px !important;
+    padding-right: 8px !important;
+  }
+  .anticon-border {
+    margin-right: 8px;
+  }
 }
 
 .ant-descriptions-item-label {

src/layouts/components/MenuSlider.tsx

@@ -92,13 +92,13 @@ const MenuSlider: React.FC<MenuSliderProps> = (props) => {
     sessionStorage.setItem("currentState", JSON.stringify(result))
   }
 
-  // const customExpandIcon = (props) => {
-  //   if (props.isOpen) {
-  //     return <DownOutlined />
-  //   } else {
-  //     return <RightOutlined />
-  //   }
-  // }
+  const customExpandIcon = (props) => {
+    if (props.isOpen) {
+      return <DownOutlined />
+    } else {
+      return <RightOutlined />
+    }
+  }
 
   return <>
     <OuterSider {...props} />
@@ -116,7 +116,7 @@ const MenuSlider: React.FC<MenuSliderProps> = (props) => {
         openKeys={openKeys}
         mode="inline"
         onClick={clickMenuItem}
-        // expandIcon={customExpandIcon}
+        expandIcon={customExpandIcon}
       >
         {
           menuItemsCache

src/layouts/components/OuterSide.tsx

@@ -70,7 +70,7 @@ const OuterSider: React.FC<OuterSiderProps> = observer((props) => {
           siderMenu.map(item => (
             <li key={item.key} className={defaultSelectedKeys === item.relationParentCode ? styles.currentItem : ''}>
               <Link to={item.path}>
-                <CustomIcon type={item.icon} style={{ width: 20, height: 20 }} />
+                <CustomIcon type={item.icon} style={{ width: 16, height: 16 }} />
                 <label>{item.title}</label>
               </Link>
             </li>

src/layouts/styles/MenuSlider.less

@@ -36,6 +36,14 @@
       background: #fff;
     }
 
+    .ant-menu-submenu{
+      .ant-menu-submenu-title{
+        .anticon-right{
+          color: #91959B;
+        }
+      }
+    }
+
     .ant-menu-submenu-open{
       .ant-menu-submenu-title{
         color: #252D37;
@@ -62,10 +70,19 @@
       opacity: 0;
     }
 
+    .ant-menu-item {
+      .anticon-border{
+        color: #91959B;
+      }
+    }
+
     .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-active {
       background: #F5F6F7;
       color: #252D37;
       border-radius: 4px;
+      .anticon-border{
+        color: #252D37;
+      }
       a {
         color: #252D37;
       }
@@ -75,6 +92,9 @@
       background: @menu-select-bg-color;
       color: #00A98F;
       border-radius: 4px;
+      .anticon-border{
+        color: #00A98F;
+      }
       a {
         color: #00A98F;
       }
@@ -150,10 +170,11 @@
       label {
         display: block;
         line-height: 20px;
-        // margin-top: 4px;
+        margin-top: 4px;
         font-size: 12px;
         font-weight: 400;
         color: rgba(151, 160, 175, 1);
+        cursor: pointer;
       }
 
       span {
@@ -193,32 +214,32 @@
   }
 }
 
-.currentItem {
-  &:not(:first-child)::after {
-    position: absolute;
-    content: "";
-    right: 0;
-    top: 50%;
-    transform: translate(0, -50%);
-    border-right: 8px solid #fff;
-    border-top: 8px solid transparent;
-    border-bottom: 8px solid transparent;
-  }
-
-  li {
-    a{
-      background: @menu-select-bg-color;
-    }
-  }
-
-  span {
-    color: #00A98F !important;
-  }
-
-  label {
-    color: #00A98F !important;
-  }
-}
+// .currentItem {
+//   &:not(:first-child)::after {
+//     position: absolute;
+//     content: "";
+//     right: 0;
+//     top: 50%;
+//     transform: translate(0, -50%);
+//     border-right: 8px solid #fff;
+//     border-top: 8px solid transparent;
+//     border-bottom: 8px solid transparent;
+//   }
+
+//   li {
+//     a{
+//       background: @menu-select-bg-color;
+//     }
+//   }
+
+//   span {
+//     color: #00A98F !important;
+//   }
+
+//   label {
+//     color: #00A98F !important;
+//   }
+// }
 
 .menuItem {
   padding-left: 30px !important;