Merge branch 'v2-220418-menu' into 'v2-220418'

src/global/styles/reset.less

 @import './mixins/layout.less';
 
 #root {
+
   // 去除input type为number时的箭头
   .ant-input-number-handler-wrap {
     display: none;
@@ -121,7 +122,7 @@
   }
 
   // 去除sogou浏览器自动加的密码软盘图标
-  input::-webkit-input-safebox-button{
+  input::-webkit-input-safebox-button {
     display: none;
   }
 
@@ -219,17 +220,23 @@
   .ant-page-header {
     padding: 4px 16px;
   }
+
   .ant-page-header-heading-title {
     font-size: 16px;
   }
 
   // 覆写左边菜单
   .ant-menu-item {
-    padding-left: 16px !important;
+    padding-left: 8px !important;
+    padding-right: 8px !important;
   }
+
   .ant-menu-submenu-title {
-    padding-left: 16px !important;
+    padding-left: 8px !important;
+    padding-right: 8px !important;
+
   }
+
   .anticon-border {
     margin-right: 8px;
   }
@@ -246,11 +253,11 @@
   .god-table-content {
     .ant-table-wrapper {
       .ant-spin-nested-loading {
-       .ant-spin-container {
-         .ant-pagination {
-           margin: 16px 0 0 0;
-         }
-       }
+        .ant-spin-container {
+          .ant-pagination {
+            margin: 16px 0 0 0;
+          }
+        }
       }
     }
   }
@@ -263,21 +270,25 @@
         padding: 6px;
       }
     }
+
     .ant-input-group-addon {
       .ant-input-search-button {
         background-color: #F7F8FA;
       }
     }
-    .ant-input-affix-wrapper{
+
+    .ant-input-affix-wrapper {
       padding: 0;
-      .ant-input-suffix{
+
+      .ant-input-suffix {
         margin-right: 11px;
       }
     }
   }
+
   // }
   // 处理因为antd版本不同导致anchor的背景色不同
-  .ant-anchor-wrapper{
+  .ant-anchor-wrapper {
     background-color: #fff;
   }
 }
@@ -291,14 +302,13 @@
   overflow: hidden;
 }
 
-.ant-form-item-label > label {
+.ant-form-item-label>label {
   font-size: 12px !important;
   color: #909399 !important;
 }
 
 // 设置formitem的*号到字段label前
-.ant-form-item-label
-> label.ant-form-item-required::before {
+.ant-form-item-label>label.ant-form-item-required::before {
   order: 10;
   // margin-left: -6px;
 }
@@ -320,7 +330,7 @@
 }
 
 // 隐藏表格头 td 的 竖线
-.ant-table-thead > tr > th::before {
+.ant-table-thead>tr>th::before {
   display: none;
 }
 
@@ -328,6 +338,7 @@
 .ant-input-number-handler-wrap {
   display: none;
 }
+
 .ant-input-number {
   &:hover {
     .ant-input-number-handler-wrap {
@@ -336,57 +347,57 @@
     }
   }
 }
+
 .ant-btn-link {
   white-space: normal !important;
 }
 
 
 /* 处理某些电脑显示与缩放比推荐>100%的影响 */
-@media all
-and (-moz-min-device-pixel-ratio: 1.09) and (-moz-max-device-pixel-ratio: 1.18),
-    (-webkit-min-device-pixel-ratio: 1.09) and (-webkit-max-device-pixel-ratio: 1.18),
-    (min-resolution: 1.09dppx) and (max-resolution: 1.18dppx) {
-    :root {
-        font-size: 14px;
-    }
+@media all and (-moz-min-device-pixel-ratio: 1.09) and (-moz-max-device-pixel-ratio: 1.18),
+(-webkit-min-device-pixel-ratio: 1.09) and (-webkit-max-device-pixel-ratio: 1.18),
+(min-resolution: 1.09dppx) and (max-resolution: 1.18dppx) {
+  :root {
+    font-size: 14px;
+  }
 }
-@media all
-and (-moz-min-device-pixel-ratio: 1.19) and (-moz-max-device-pixel-ratio: 1.28),
-    (-webkit-min-device-pixel-ratio: 1.19) and (-webkit-max-device-pixel-ratio: 1.28),
-    (min-resolution: 1.19dppx) and (max-resolution: 1.28dppx) {
-    :root {
-        font-size: 13px;
-    }
+
+@media all and (-moz-min-device-pixel-ratio: 1.19) and (-moz-max-device-pixel-ratio: 1.28),
+(-webkit-min-device-pixel-ratio: 1.19) and (-webkit-max-device-pixel-ratio: 1.28),
+(min-resolution: 1.19dppx) and (max-resolution: 1.28dppx) {
+  :root {
+    font-size: 13px;
+  }
 }
-@media all
-and (-moz-min-device-pixel-ratio: 1.29) and (-moz-max-device-pixel-ratio: 1.4),
-    (-webkit-min-device-pixel-ratio: 1.29) and (-webkit-max-device-pixel-ratio: 1.4),
-    (min-resolution: 1.29dppx) and (max-resolution: 1.4dppx) {
-    :root {
-        font-size: 12px;
-    }
+
+@media all and (-moz-min-device-pixel-ratio: 1.29) and (-moz-max-device-pixel-ratio: 1.4),
+(-webkit-min-device-pixel-ratio: 1.29) and (-webkit-max-device-pixel-ratio: 1.4),
+(min-resolution: 1.29dppx) and (max-resolution: 1.4dppx) {
+  :root {
+    font-size: 12px;
+  }
 }
-@media all
-and (-moz-min-device-pixel-ratio: 1.41) and (-moz-max-device-pixel-ratio: 1.6),
-    (-webkit-min-device-pixel-ratio: 1.41) and (-webkit-max-device-pixel-ratio: 1.6),
-    (min-resolution: 1.41dppx) and (max-resolution: 1.6dppx) {
-    :root {
-        font-size: 10px;
-    }
+
+@media all and (-moz-min-device-pixel-ratio: 1.41) and (-moz-max-device-pixel-ratio: 1.6),
+(-webkit-min-device-pixel-ratio: 1.41) and (-webkit-max-device-pixel-ratio: 1.6),
+(min-resolution: 1.41dppx) and (max-resolution: 1.6dppx) {
+  :root {
+    font-size: 10px;
+  }
 }
-@media all
-and (-moz-min-device-pixel-ratio: 1.61) and (-moz-max-device-pixel-ratio: 1.8),
-    (-webkit-min-device-pixel-ratio: 1.61) and (-webkit-max-device-pixel-ratio: 1.8),
-    (min-resolution: 1.61dppx) and (max-resolution: 1.8dppx) {
-    :root {
-        font-size: 9px;
-    }
+
+@media all and (-moz-min-device-pixel-ratio: 1.61) and (-moz-max-device-pixel-ratio: 1.8),
+(-webkit-min-device-pixel-ratio: 1.61) and (-webkit-max-device-pixel-ratio: 1.8),
+(min-resolution: 1.61dppx) and (max-resolution: 1.8dppx) {
+  :root {
+    font-size: 9px;
+  }
 }
-@media all
-and (-moz-min-device-pixel-ratio: 1.81) and (-moz-max-device-pixel-ratio: 2.1),
-    (-webkit-min-device-pixel-ratio: 1.81) and (-webkit-max-device-pixel-ratio: 2.1),
-    (min-resolution: 1.81dppx) and (max-resolution: 2.1dppx) {
-    :root {
-        font-size: 8px;
-    }
+
+@media all and (-moz-min-device-pixel-ratio: 1.81) and (-moz-max-device-pixel-ratio: 2.1),
+(-webkit-min-device-pixel-ratio: 1.81) and (-webkit-max-device-pixel-ratio: 2.1),
+(min-resolution: 1.81dppx) and (max-resolution: 2.1dppx) {
+  :root {
+    font-size: 8px;
+  }
 }

src/layouts/components/MenuSlider.tsx

@@ -101,7 +101,7 @@ const MenuSlider: React.FC<MenuSliderProps> = (props) => {
 
   return <>
     <OuterSider {...props} />
-    <Sider theme="light" className={styles.menu_sider} collapsed={props.collapseState}>
+    <Sider theme="light" className={styles.menu_sider} width={props.collapseState ? 0 : 200} collapsedWidth={props.collapseState ? 0 : 80} collapsed={props.collapseState}>
       <Link to={`/`} className={styles.logo}>
         <img src={GlobalConfig.global.siteInfo.logo} />
       </Link>

src/layouts/components/OuterSide.tsx

@@ -69,7 +69,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

@@ -15,8 +15,8 @@
   }
 }
 
-:global {
-  .menu_sider.ant-layout-sider-collapsed {
+:global{
+  .menu_sider.ant-layout-sider-collapsed{
     flex: 0 !important;
     max-width: 0 !important;
     min-width: 0 !important;
@@ -26,8 +26,8 @@
 
 .menu_sider {
   position: relative;
-
   :global {
+
     .ant-menu-root{
       padding: 0 8px;
     }
@@ -35,6 +35,15 @@
       background: #fff;
     }
 
+    .ant-menu-submenu{
+      .ant-menu-submenu-title{
+        .anticon-right{
+          color: #91959B;
+        }
+      }
+    }
+
+
     .ant-menu-submenu-open{
       .ant-menu-submenu-title{
         color: #252D37;
@@ -61,10 +70,20 @@
       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;
       }
@@ -74,6 +93,9 @@
       background: #d1e8e1;
       color: #00A98F;
       border-radius: 4px;
+      .anticon-border{
+        color: #00A98F;
+      }
       a {
         color: #00A98F;
       }
@@ -126,12 +148,15 @@
       position: relative;
 
       a {
-        display: block;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
         width: 48px;
         height: 48px;
         border-radius: 8px;
         background: rgba(255,255,255,0);
         margin: 0 auto;
+        cursor: pointer;
         &:hover{
           background: rgba(255,255,255,0.08);
           span {
@@ -151,6 +176,7 @@
         font-size: 12px;
         font-weight: 400;
         color: rgba(151, 160, 175, 1);
+        cursor: pointer;
       }
 
       span {
@@ -167,16 +193,6 @@
 }
 
 .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{