Merge "fix: Fix menu click range"

src/layouts/Base/Menu.jsx

@@ -34,6 +34,7 @@ export class LayoutMenu extends Component {
       hover: false,
       openKeys: [],
     };
+    this.maxTitleLength = 17;
   }
 
   get menu() {
@@ -57,6 +58,10 @@ export class LayoutMenu extends Component {
     return this.props.rootStore;
   }
 
+  get routing() {
+    return this.props.rootStore.routing;
+  }
+
   onCollapse = (collapsed) => {
     this.setState({ collapsed });
   };
@@ -97,6 +102,14 @@ export class LayoutMenu extends Component {
     }
   };
 
+  onClickMenuItem = ({ key }) => {
+    const path = getPath({ key });
+    const { pathname } = this.props;
+    if (pathname !== path) {
+      this.routing.push(path);
+    }
+  };
+
   renderMenuItem = (item) => {
     const { collapsed, hover } = this.state;
     if (collapsed && !hover) {
@@ -112,18 +125,21 @@ export class LayoutMenu extends Component {
     }
     if (!item.children || item.children.length === 0 || item.level) {
       return (
-        <Menu.Item key={item.key} className={styles['menu-item']}>
+        <Menu.Item
+          key={item.key}
+          className={styles['menu-item']}
+          onClick={this.onClickMenuItem}
+        >
+          {/* <Menu.Item key={item.key} className={styles['menu-item-no-child']}> */}
           {item.icon}
-          <span>
-            <Link key={item.key} to={item.path}>
-              {item.name.length >= 14 ? (
-                <Tooltip title={item.name} placement="right">
-                  {item.name}
-                </Tooltip>
-              ) : (
-                item.name
-              )}
-            </Link>
+          <span className={styles['menu-item-title']}>
+            {item.name.length >= this.maxTitleLength ? (
+              <Tooltip title={item.name} placement="right">
+                {item.name}
+              </Tooltip>
+            ) : (
+              item.name
+            )}
           </span>
         </Menu.Item>
       );
@@ -132,7 +148,7 @@ export class LayoutMenu extends Component {
       <span>
         {item.icon}
         <span>
-          {item.name.length >= 14 ? (
+          {item.name.length >= this.maxTitleLength ? (
             <Tooltip title={item.name} placement="right">
               {item.name}
             </Tooltip>

src/layouts/Base/index.less

@@ -99,6 +99,8 @@
     .anticon {
       font-size: @size-normal;
       margin-right: 20px;
+      float: left;
+      line-height: 44px;
     }
 
     & .ant-menu-item-selected {
@@ -135,17 +137,7 @@
       padding-right: 5px;
     }
 
-    .ant-menu-item > span > a {
-      padding-left: 13px;
-      display: inline-block;
-      width: 100%;
-      color: transparent;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-    }
-
-    .ant-menu-item > span > a::before {
+    .ant-menu-item > span::before {
       position: absolute;
       top: 18px;
       bottom: 0;
@@ -157,11 +149,11 @@
       border-radius: 50%;
     }
 
-    .ant-menu-item-selected > span > a::before {
+    .ant-menu-item-selected > span::before {
       background-color: #fff !important;
     }
 
-    .ant-menu-item-active > span > a::before {
+    .ant-menu-item-active > span::before {
       background-color: @primary-color;
     }
 
@@ -321,3 +313,13 @@
   box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
     0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
 }
+.menu-item-title {
+  span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    max-width: 140px;
+    display: inline-block;
+  }
+}