Merge branch 'v2-featMenu' into 'v2'

src/global.css

@@ -230,9 +230,9 @@ ol {
   left: 0px;
   margin: auto 0;
 }
-#root .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
+/* #root .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
   background: none;
-}
+} */
 #root .ant-menu-sub .ant-menu-item-selected .lx-menu-item-link::before {
   border: 1px solid #00B37A;
 }

src/global.less

@@ -288,9 +288,9 @@ ol {
     }
   }
 
-  .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
-    background: none;
-  }
+  // .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
+  //   background: none;
+  // }
 
   .ant-menu-sub .ant-menu-item-selected .lx-menu-item-link::before {
     // background: @main-color;

src/global/styles/theme.less

@@ -22,6 +22,7 @@
 @menu-select-color   : rgba(0, 0, 0, 0.85);
 @menu-select-bg      : rgba(0, 0, 0, .02);
 @menu-circle-color   : #D8DEE4;
+@menu-select-bg-color : rgba(0,169,143,0.04);
 
 // status circle color
 @status-stop   : #C1C7D0; // 停用

src/layouts/components/MenuSlider.tsx

@@ -4,6 +4,8 @@ import { Layout, Menu } from 'antd'
 import { Link, history } from 'umi';
 import {
   BorderOutlined,
+  DownOutlined,
+  RightOutlined,
 } from '@ant-design/icons'
 import OuterSider from './OuterSide'
 import styles from '../styles/MenuSlider.less'
@@ -90,9 +92,17 @@ const MenuSlider: React.FC<MenuSliderProps> = (props) => {
     sessionStorage.setItem("currentState", JSON.stringify(result))
   }
 
+  // const customExpandIcon = (props) => {
+  //   if (props.isOpen) {
+  //     return <DownOutlined />
+  //   } else {
+  //     return <RightOutlined />
+  //   }
+  // }
+
   return <>
     <OuterSider {...props} />
-    <Sider theme="light" className="menu_sider" collapsed={props.collapseState}>
+    <Sider theme="light" className={styles.menu_sider} collapsed={props.collapseState}>
       <Link to={`/`} className={styles.logo}>
         <img src={menuIcon} />
       </Link>
@@ -106,6 +116,7 @@ const MenuSlider: React.FC<MenuSliderProps> = (props) => {
         openKeys={openKeys}
         mode="inline"
         onClick={clickMenuItem}
+        // expandIcon={customExpandIcon}
       >
         {
           menuItemsCache

src/layouts/styles/MenuSlider.less

+@import '../../global/styles//theme.less';
 .logo {
   background: rgba(255, 255, 255, 1);
   height: 48px;
@@ -27,7 +28,58 @@
 
 .menu_sider {
   position: relative;
+  :global {
+    .ant-menu-root{
+      padding: 0 8px;
+    }
+    .ant-menu-sub {
+      background: #fff;
+    }
+
+    .ant-menu-submenu-open{
+      .ant-menu-submenu-title{
+        color: #252D37;
+        background: #EDEEEF;
+        border-radius: 4px;
+      }
+      .ant-menu-submenu-arrow{
+        color: #252D37;
+      }
+    }
+
+    .ant-menu-submenu-active,.ant-menu-submenu-selected{
+      .ant-menu-submenu-title{
+        background: #F5F6F7;
+        color: #252D37;
+        border-radius: 4px;
+      }
+      .ant-menu-submenu-arrow{
+        color: #252D37;
+      }
+    }
 
+    .ant-menu-inline .ant-menu-item-selected::after {
+      opacity: 0;
+    }
+
+    .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-active {
+      background: #F5F6F7;
+      color: #252D37;
+      border-radius: 4px;
+      a {
+        color: #252D37;
+      }
+    }
+
+    .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
+      background: @menu-select-bg-color;
+      color: #00A98F;
+      border-radius: 4px;
+      a {
+        color: #00A98F;
+      }
+    }
+  }
 
 }
 
@@ -62,7 +114,7 @@
 }
 
 .wrapperSilder {
-  background-color: #FAFBFC !important;
+  background-color: #fff !important;
   min-height: 100vh;
 
   .menuBox {
@@ -75,13 +127,30 @@
       position: relative;
 
       a {
-        display: block;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        width: 48px;
+        height: 48px;
+        border-radius: 8px;
+        background: #FFFFFF;
+        margin: 0 auto;
+        &:hover{
+          background: #F5F6F7;
+          span {
+            color: #252D37 !important;
+          }
+
+          label {
+            color: #252D37 !important;
+          }
+        }
       }
 
       label {
         display: block;
         line-height: 20px;
-        margin-top: 4px;
+        // margin-top: 4px;
         font-size: 12px;
         font-weight: 400;
         color: rgba(151, 160, 175, 1);
@@ -97,6 +166,30 @@
 
       }
     }
+    .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;
+      }
+
+      a{
+        background: @menu-select-bg-color;
+      }
+
+      span {
+        color: #00A98F !important;
+      }
+
+      label {
+        color: #00A98F !important;
+      }
+    }
   }
 }
 
@@ -111,6 +204,13 @@
     border-top: 8px solid transparent;
     border-bottom: 8px solid transparent;
   }
+
+  li {
+    a{
+      background: @menu-select-bg-color;
+    }
+  }
+
   span {
     color: #00A98F !important;
   }