feat: 添加全局菜单搜索

src/components/GlobalHeader/ExtendRightContent.js

@@ -201,7 +201,9 @@ const GlobalHeaderRight = props => {
        <HeaderSearch
           className={`${styles.action} ${styles.search} ${styles.extendsearch}`}
           placeholder={intl.formatMessage({id:'component.search.menu.placeholder'})}
+          offset="46px"
           defaultValue=""
+          mode="tiled"
           options={options}
           {...props}
           onSelect={handleSelect}

src/components/HeaderSearch/index.js

@@ -10,7 +10,8 @@ import useMergeValue from 'use-merge-value';
 import { SearchOutlined } from '@ant-design/icons';
 
 import styles from './index.less';
-import SearchPanel from './panel';
+import SearchPanel from './Panel';
+import ExtendPanel from './ExtendPanel';
 
 const HeaderSearch = props => {
   const {
@@ -162,7 +163,8 @@ const HeaderSearch = props => {
           prefix={<SearchOutlined className="site-form-item-icon" />}
         />
       </div>
-      <SearchPanel
+      {
+        props.mode && props.mode === 'tiled' ? <ExtendPanel
         value={keyword}
         {...props}
         target={wrapperRef}
@@ -171,7 +173,28 @@ const HeaderSearch = props => {
         className={focus ? styles.active : styles.hidden}
         style={{
           left: `${targetOffset}px`,
-          top: isShowWidget ? '42px' : '52px',
+          top: isShowWidget ? '42px' : props.offset || '52px',
+        }}
+        onEsc={onEsc}
+        onNavUp={onNavUp}
+        onNavDown={onNavDown}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        onWillSearch={onWillSearch}
+        onFocusChange={onFocusChange}
+        willSearch={willSearch}
+        onClose={onClose}
+        console={willMenu}
+      />: <SearchPanel
+        value={keyword}
+        {...props}
+        target={wrapperRef}
+        inputRef={inputRef}
+        test={focus}
+        className={focus ? styles.active : styles.hidden}
+        style={{
+          left: `${targetOffset}px`,
+          top: isShowWidget ? '42px' : props.offset || '52px',
         }}
         onEsc={onEsc}
         onNavUp={onNavUp}
@@ -184,6 +207,8 @@ const HeaderSearch = props => {
         onClose={onClose}
         console={willMenu}
       />
+      }
+      
     </div>
   );
 };

src/layouts/BasicLayout1.js

@@ -254,13 +254,13 @@ const BasicLayout = props => {
   const [childrenRoutes, setChildrenRoutes] = useState([]);
   const [selectedKeys, setSelectedKeys] = useState([]);
   const [tabActiveKey, setTabActiveKey] = useState("1");
+  // const [currentRoutes, setCurrentRoutes] = useState([]);
   const [siteAction, setSiteAction] = useState(
     () => new Site(props, setSiteLoading),
   );
   const basename = getBaseName();
   const history = useHistory();
-  const currentRoutes = props.route.routes[props.currentMenuIndex];
-
+  let currentRoutes = props.route.routes[props.currentMenuIndex]
   useEffect(() => {
     const initSelectRoute = findPathByLeafId(
       `${props.location.pathname}`,
@@ -277,9 +277,15 @@ const BasicLayout = props => {
         currentChildrenRoute = initSelectRoute
       }
       let childrenName = currentChildrenRoute ? currentChildrenRoute.name: parentMenuName;
+      if(currentChildrenRoute.routes) {
+        setTabActiveKey(currentChildrenRoute.routes[0].path)
+      } else {
+        setTabActiveKey(currentChildrenRoute.path);
+      }
       const initSelectIndex = currentRoutes.routes.findIndex(item => item.name === childrenName);
       setSelectIndex(initSelectIndex);
-      currentChildrenRoute && currentChildrenRoute.routes ? setChildrenRoutes(currentChildrenRoute.routes): setChildrenRoutes([currentChildrenRoute])
+      currentChildrenRoute && currentChildrenRoute.routes ? setChildrenRoutes(currentChildrenRoute.routes): setChildrenRoutes([currentChildrenRoute]);
+     
     } else {
       setChildrenRoutes([
         {
@@ -291,6 +297,14 @@ const BasicLayout = props => {
     }
   }, []);
 
+
+
+  window.share && window.share.event && window.share.event.on('event:updateCurrentChildrenRoutes', ({currentPath, currentRoute, selectedIndex}) => {
+    currentRoute && currentRoute.parent && currentRoute.parent.routes ? setChildrenRoutes(currentRoute.parent.routes): setChildrenRoutes([currentRoute]);
+    setSelectIndex(selectedIndex);
+    setTabActiveKey(currentPath)
+  });
+
   useEffect(() => {
     siteAction.setGlobalConfig(props.global);
     if (!Cookies.get('token')) {
@@ -326,13 +340,10 @@ const BasicLayout = props => {
     window.share.event.on('updateSite', res => setCityData(res));
     return () => {
       window.share.event.removeAllListeners('updateSite');
-      // sessionStorage.removeItem('tabNav')
-      // sessionStorage.removeItem('tabActiveKey')
     };
   }, []);
 
   const handlerSecond = (item, index) => {
-    
     let current = void 0;
     if(item && item.routes) {
       setChildrenRoutes(item.routes);
@@ -341,9 +352,16 @@ const BasicLayout = props => {
       setChildrenRoutes([item]);
       current = item;
     }
-    setTabActiveKey("1");
-    window.history.pushState(null, '', `/civbase${current.path}`);
+    setTabActiveKey(current.path);
     setSelectIndex(index);
+    if(current.routes) {
+      setSelectedKeys([current.routes[0].href]);
+      window.history.pushState(null, '', `/civbase${current.routes[0].path}`);
+    } else {
+      window.history.pushState(null, '', `/civbase${current.path}`);
+    }
+  
+
   }
 
   const handleToggleSystem = () => {
@@ -545,7 +563,7 @@ const BasicLayout = props => {
                     </div>
                   </div>
                   <div className={layoutStyles['menu-item-children']} style={{width: collapse ? 'calc(100% - 46px)': 'calc(100% - 100px)'}}>
-                     <Tabs activeKey={tabActiveKey} tabBarGutter={30} tabPosition="top" onTabClick={(event) => handleSelectMenuItem(event)}>
+                     <Tabs activeKey={tabActiveKey} defaultActiveKey={tabActiveKey} tabBarGutter={30} tabPosition="top" onTabClick={(event) => handleSelectMenuItem(event)}>
                      {childrenRoutes.map((item, index) => (
                           <>
                             <TabPane