perf: 优化

src/pages/commonMenu/index.js

@@ -2,9 +2,11 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Link } from 'react-router-dom';
 import { Input, Button, Tree, notification, Spin, message } from 'antd';
+import { connect } from 'react-redux';
 import classnames from 'classnames';
 
 import { appService } from '@/api';
+import { useHistory } from '@wisdom-utils/runtime';
 import { savePagePartInfo } from '@/api/service/base';
 import styles from './index.less';
 import thumbnail from '../../assets/images/commonMenu/常用菜单.png';
@@ -15,13 +17,15 @@ const isNeedFilterIcon = (icon = '') => {
   return !icon.includes('一级') && !icon.includes('ios/');
 };
 
-const CommonMenu = () => {
+const CommonMenu = props => {
+  const history = useHistory();
   const [menus, setMenus] = useState([]); // 常用菜单信息
   const [widgets, setWidgets] = useState([]); // 菜单列表信息
   const [showMenuInfo, setShowMenuInfo] = useState(false); // 菜单列表显示隐藏
   const [loading, setLoading] = useState(true); // loading显示隐藏
   const [searchInfo, setSearchInfo] = useState('');
   const page = useRef(null);
+  const searchBox = useRef(null);
 
   const defaultSubmitMenu = () => {
     let submitData = [];
@@ -253,35 +257,45 @@ const CommonMenu = () => {
     });
   };
 
-  return (
-    <div
-      className={styles.commonMenu}
-      ref={page}
-      onClick={e => {
+  const linkToMenu = menu => {
+    const { menuUrl } = menu;
+    console.log(props);
+    history.push(`civweb4/${menuUrl}`);
+  };
+
+  const focusOutSearchInfo = e => {
     e.stopPropagation();
-        if (e.target === page.current) setShowMenuInfo(false);
-      }}
-    >
+    let element = e.target;
+    // 事件对象逐层网上找，只要不是菜单搜索信息内的就隐藏起来
+    while (element && element !== page.current) {
+      if (element === searchBox.current) return;
+      element = element.parentNode;
+    }
+    setShowMenuInfo(false);
+  };
+
+  return (
+    <div className={styles.commonMenu} ref={page} onClick={focusOutSearchInfo}>
       <Spin spinning={loading}>
         <div className={styles.searchWrapper}>
-          <div className={styles.searchBox}>
+          <div className={styles.searchBox} ref={searchBox}>
             <div className={styles.searchTitle}>
               <i className="iconfont">&#xe611;</i>
               <span>我的常用菜单</span>
               <span>（{menus.length}）</span>
             </div>
-            <div>
             <div className={styles.searchInput}>
-                <Input.Search
+              <Input
+                maxLength={50}
+                width={400}
                 placeholder="搜索功能菜单"
-                  // onFocus={() => setShowMenuInfo(true)}
-                  onSearch={info => {
+                onChange={e => {
                   setShowMenuInfo(true);
-                    setSearchInfo(info);
+                  setSearchInfo(e.target.value);
                 }}
+                onFocus={() => setShowMenuInfo(true)}
               />
             </div>
-            </div>
             <div
               className={classnames(
                 styles.searchInfoBox,
@@ -304,7 +318,7 @@ const CommonMenu = () => {
         </div>
         <div className={styles.menuCardWrapper}>
           {menus.map(item => (
-            <MenuCard menu={item} />
+            <MenuCard menu={item} linkToMenu={linkToMenu} />
           ))}
         </div>
         <div className={styles.pageLogo}>
@@ -315,16 +329,12 @@ const CommonMenu = () => {
   );
 };
 
-const MenuCard = ({ menu }) => {
+const MenuCard = ({ menu, linkToMenu }) => {
   const { menuIcon, menuName, menuGroup, menuID, menuUrl, menuPic } = menu;
   return (
-    <div className={styles.menuCard}>
-      <Link to={menuUrl} title={menuName}>
-        <img
-          className={styles.cardThumbnail}
-          src={menuPic || thumbnail}
-          alt=""
-        />
+    <div className={styles.menuCard} onClick={() => linkToMenu(menu)}>
+      {/* <Link to={menuUrl} title={menuName}> */}
+      <img className={styles.cardThumbnail} src={menuPic || thumbnail} alt="" />
       <div className={styles.cardLabel}>
         <div
           className={classnames(
@@ -339,9 +349,15 @@ const MenuCard = ({ menu }) => {
         </div>
         <div className={styles.cardGroup}>{menuGroup}</div>
       </div>
-      </Link>
+      {/* </Link> */}
     </div>
   );
 };
 
-export default CommonMenu;
+const mapStateToProps = state => ({
+  menu: state.getIn(['global', 'menu']),
+});
+export default connect(
+  mapStateToProps,
+  null,
+)(CommonMenu);

src/pages/commonMenu/index.less

@@ -55,6 +55,11 @@
           color: #3B7FDF;
         }
       }
+      .searchInput {
+        flex: 1;
+        overflow: hidden;
+        margin-left: 50px;
+      }
       .searchInfoBox {
         width: 100%;
         height: 400px;