fix: 调整导航交互样式

src/global/styles/reset.less

-@import './mixins/layout.less';
-
-#root {
-  // 去除input type为number时的箭头
-  .ant-input-number-handler-wrap {
-    display: none;
-  }
-
-  .ant-pro-global-footer {
-    margin: 8px auto 32px auto;
-  }
-
-  .ant-page-header {
-    padding: 8px 24px;
-  }
-
-  .common_checkbox {
-
-    &:hover,
-    &:active,
-    &:focus {
-      .ant-checkbox-inner {
-        border-color: var(--mall_main_color);
-      }
-    }
-
-    .ant-checkbox-group-item {
-      display: block;
-      margin-bottom: 12px;
-    }
-
-    .ant-checkbox {
-
-      &:hover,
-      &:active,
-      &:focus {
-        .ant-checkbox-inner {
-          border-color: var(--mall_main_color);
-        }
-
-      }
-    }
-
-    .ant-checkbox .ant-checkbox-indeterminate {
-      &:hover {
-        border-color: var(--mall_main_color);
-      }
-    }
-
-    .ant-checkbox-indeterminate.ant-checkbox-checked .ant-checkbox-inner {
-      background-color: transparent;
-    }
-
-    .ant-checkbox-indeterminate .ant-checkbox-inner {
-
-      &:hover,
-      &:active,
-      &:focus {
-        border-color: var(--mall_main_color);
-
-      }
-
-      &::after {
-        background-color: var(--mall_main_color);
-        border-color: var(--mall_main_color);
-      }
-    }
-
-    .ant-checkbox-checked .ant-checkbox-inner {
-      background-color: var(--mall_main_color);
-      border-color: var(--mall_main_color);
-
-
-    }
-  }
-
-  // 去除数字输入框的箭头
-  input[type=number] {
-    -moz-appearance: textfield;
-  }
-
-  input[type=number]::-webkit-inner-spin-button,
-  input[type=number]::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-  .ant-pro-global-footer {
-    margin: 8px auto 32px auto;
-  }
-  
-  .identityRadio{
-    display: flex;
-    flex-direction: column;
-    margin: 0 auto;
-    .make-center(text);
-    & label{
-      width: 320px;
-      height: 48px;
-      .make-center-space(margin, 12);
-      vertical-align: middle;
-      line-height: 48px;
-    }
-  }
-  .businessRadio{
-    display: flex;
-    flex-wrap: wrap;
-    width: 320px;
-    .make-center(margin);
-    .make-center(text);
-    & label{
-      width: 148px;
-      height: 32px;
-      line-height: 32px;
-      margin: 8px 0;
-    }
-    & label:nth-child(odd) {
-      margin-right: 24px;
-    }
-  }
-
-  // 处理PageHeaderWrapper外边距冲突
-  .ant-pro-basicLayout-content .ant-pro-page-header-wrap {
-    margin: 0;
-  }
-  // 处理因为antd版本不同导致anchor的背景色不同
-  .ant-anchor-wrapper{
-    background-color: #fff;
-  }
-}
-
-.ant-descriptions-item-label {
-  color: #909399 !important;
-}
-
-.mega-layout-container-content {
-  overflow: hidden;
-}
-
-.ant-form-item-label > label {
-  font-size: 12px !important;
-  color: #909399 !important;
-}
-
-// 隐藏表格头 td 的 竖线
-.ant-table-thead > tr > th::before {
-  display: none;
-}
\ No newline at end of file
+@import './mixins/layout.less';
+
+#root {
+  // 去除input type为number时的箭头
+  .ant-input-number-handler-wrap {
+    display: none;
+  }
+
+  .ant-pro-global-footer {
+    margin: 8px auto 32px auto;
+  }
+
+  .ant-page-header {
+    padding: 8px 24px;
+  }
+
+  .common_checkbox {
+
+    &:hover,
+    &:active,
+    &:focus {
+      .ant-checkbox-inner {
+        border-color: var(--mall_main_color);
+      }
+    }
+
+    .ant-checkbox-group-item {
+      display: block;
+      margin-bottom: 12px;
+    }
+
+    .ant-checkbox {
+
+      &:hover,
+      &:active,
+      &:focus {
+        .ant-checkbox-inner {
+          border-color: var(--mall_main_color);
+        }
+
+      }
+    }
+
+    .ant-checkbox .ant-checkbox-indeterminate {
+      &:hover {
+        border-color: var(--mall_main_color);
+      }
+    }
+
+    .ant-checkbox-indeterminate.ant-checkbox-checked .ant-checkbox-inner {
+      background-color: transparent;
+    }
+
+    .ant-checkbox-indeterminate .ant-checkbox-inner {
+
+      &:hover,
+      &:active,
+      &:focus {
+        border-color: var(--mall_main_color);
+
+      }
+
+      &::after {
+        background-color: var(--mall_main_color);
+        border-color: var(--mall_main_color);
+      }
+    }
+
+    .ant-checkbox-checked .ant-checkbox-inner {
+      background-color: var(--mall_main_color);
+      border-color: var(--mall_main_color);
+
+
+    }
+  }
+
+  // 去除数字输入框的箭头
+  input[type=number] {
+    -moz-appearance: textfield;
+  }
+
+  input[type=number]::-webkit-inner-spin-button,
+  input[type=number]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  .ant-pro-global-footer {
+    margin: 8px auto 32px auto;
+  }
+
+  .identityRadio{
+    display: flex;
+    flex-direction: column;
+    margin: 0 auto;
+    .make-center(text);
+    & label{
+      width: 320px;
+      height: 48px;
+      .make-center-space(margin, 12);
+      vertical-align: middle;
+      line-height: 48px;
+    }
+  }
+  .businessRadio{
+    display: flex;
+    flex-wrap: wrap;
+    width: 320px;
+    .make-center(margin);
+    .make-center(text);
+    & label{
+      width: 148px;
+      height: 32px;
+      line-height: 32px;
+      margin: 8px 0;
+    }
+    & label:nth-child(odd) {
+      margin-right: 24px;
+    }
+  }
+
+  // 处理PageHeaderWrapper外边距冲突
+  .ant-pro-basicLayout-content .ant-pro-page-header-wrap {
+    margin: 0;
+  }
+  // 处理因为antd版本不同导致anchor的背景色不同
+  .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 {
+  color: #909399 !important;
+}
+
+.mega-layout-container-content {
+  overflow: hidden;
+}
+
+.ant-form-item-label > label {
+  font-size: 12px !important;
+  color: #909399 !important;
+}
+
+// 隐藏表格头 td 的 竖线
+.ant-table-thead > tr > th::before {
+  display: none;
+}

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;