华农主题提交本地一版本2

src/layouts/AppLayout/components/SlideMenu/index copy.js

@@ -5,8 +5,8 @@ import classNames from 'classnames';
 import { ReactSVG } from 'react-svg';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import { useHistory } from '@wisdom-utils/runtime';
-const LoadingSkeleton = (props) => {
-  const route = props.route;
+const LoadingSkeleton = props => {
+  const { route } = props;
   return (
     <div style={{ padding: route && !route.routes ? '20px 6px 6px 6px' : '0px' }}>
       <Skeleton loading={route && !route.routes} active title={false} paragraph={{ rows: 10 }}>
@@ -16,23 +16,16 @@ const LoadingSkeleton = (props) => {
   );
 };
 
-const Menu = (props) => {
-  const {
-    prefixCls,
-    collapsed,
-    onCollapse,
-    onMenuClick,
-    menuHeaderRender,
-    onMenuHeaderClick,
-  } = props;
-  const route = props.route;
+const Menu = props => {
+  const { prefixCls, collapsed, onCollapse, onMenuClick, menuHeaderRender, onMenuHeaderClick } = props;
+  const { route } = props;
   const history = useHistory();
 
   const [selectIndex, setSelectIndex] = useMergedState(() => -1, {
     value: props.active,
     onChange: props.onActiveChange,
   });
-  const toLink = (path) => {
+  const toLink = path => {
     if (!window.__POWERED_BY_QIANKUN__) {
       history.push(path);
     } else {
@@ -70,23 +63,13 @@ const Menu = (props) => {
             menuHeaderRender(props)
           ) : (
             <>
-              <ul
-                className={classNames(`${prefixCls}-menu`)}
-                style={{ minHeight: '0px', marginBottom: '0px' }}
-              >
+              <ul className={classNames(`${prefixCls}-menu`)} style={{ minHeight: '0px', marginBottom: '0px' }}>
                 <li className={`${prefixCls}-menu-item`} onClick={onMenuHeaderClick}>
                   <Tooltip placement="right" title={collapsed ? route.name : ''}>
                     <a>
-                      {route && route.extData && route.extData.icon && (
-                        <img src={route.extData.icon} />
-                      )}
+                      {route && route.extData && route.extData.icon && <img src={route.extData.icon} />}
                       {collapsed ? null : (
-                        <span
-                          className={classNames(
-                            `${prefixCls}-menu-item-text`,
-                            `${prefixCls}-menu-item-current`,
-                          )}
-                        >
+                        <span className={classNames(`${prefixCls}-menu-item-text`, `${prefixCls}-menu-item-current`)}>
                           {route && route.name}
                         </span>
                       )}
@@ -100,9 +83,8 @@ const Menu = (props) => {
           <ul className={classNames(`${prefixCls}-menu ${prefixCls}-menu-vertical`)}>
             {route &&
               (route.routes || [])
-                .filter((item) => !item.hideInMenu)
-                .map((item, index) => {
-                  return (
+                .filter(item => !item.hideInMenu)
+                .map((item, index) => (
                   <React.Fragment key={index}>
                     <li
                       key={index}
@@ -145,15 +127,14 @@ const Menu = (props) => {
                       }}
                     />
                   </React.Fragment>
-                  );
-                })}
+                ))}
           </ul>
         </React.Fragment>
       )}
     </LoadingSkeleton>
   );
 };
-export default (props) => {
+export default props => {
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
   const prefixCls = getPrefixCls('layout-slider');
   const { menuItemRender, menuHeaderRender, siderWidth } = props;
@@ -178,14 +159,9 @@ export default (props) => {
         })}
       >
         <div className={`${prefixCls}-children`}>
-          <div
-            className={`${prefixCls}-wrapper`}
-            style={{ flex: '1 1 0%', overflow: 'hidden auto' }}
-          >
-            {/*{LoadingSkeleton(props)}*/}
-            {menuItemRender
-              ? menuItemRender(props)
-              : Menu(Object.assign({}, props, { prefixCls: prefixCls }))}
+          <div className={`${prefixCls}-wrapper`} style={{ flex: '1 1 0%', overflow: 'hidden auto' }}>
+            {/* {LoadingSkeleton(props)} */}
+            {menuItemRender ? menuItemRender(props) : Menu(Object.assign({}, props, { prefixCls }))}
           </div>
           {route && route.routes && route.routes.length > 0 && (
             <div className={`${prefixCls}-pro-sider-links`}>
@@ -216,7 +192,7 @@ export default (props) => {
                         fill="currentColor"
                         aria-hidden="true"
                       >
-                        <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 000 13.8z"></path>
+                        <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 000 13.8z" />
                       </svg>
                     </span>
                   </span>

src/layouts/AppLayout/components/SlideMenu/index.js

 /*
  * @Author: ZengJing
  * @Date: 2022-04-15 09:34:03
- * @LastEditTime: 2022-04-15 18:06:00
+ * @LastEditTime: 2022-04-15 18:16:26
  * @LastEditors: ZengJing
  * @Description:
  * @FilePath: \CivWeb\src\layouts\AppLayout\components\SlideMenu\index.js
@@ -15,7 +15,7 @@ import ProLayout, { getPageTitle } from '@ant-design/pro-layout';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import { useHistory } from '@wisdom-utils/runtime';
 const LoadingSkeleton = props => {
-  const route = props.route;
+  const { route } = props;
   return (
     <div style={{ padding: route && !route.routes ? '20px 6px 6px 6px' : '0px' }}>
       <Skeleton loading={route && !route.routes} active title={false} paragraph={{ rows: 10 }}>
@@ -27,7 +27,7 @@ const LoadingSkeleton = props => {
 
 const Menu = props => {
   const { prefixCls, collapsed, onCollapse, onMenuClick, menuHeaderRender, onMenuHeaderClick, title } = props;
-  const route = props.route;
+  const { route } = props;
   const history = useHistory();
 
   const [selectIndex, setSelectIndex] = useMergedState(() => -1, {
@@ -42,10 +42,10 @@ const Menu = props => {
     }
   };
 
-  const onSelectItem = (item,dom) => {
+  const onSelectItem = (item, dom) => {
     let current = void 0;
     let childrenRoutes = [];
-    console.log('item', item,dom);
+    console.log('item', item, dom);
 
     if (item && item.child) {
       current = item.child[0];
@@ -69,21 +69,21 @@ const Menu = props => {
   };
   useEffect(() => {
     route.routes = treeRoutes(route.routes);
-    console.log('newRoutes************', route.routes);
-  }, [route]);
-  const treeRoutes = iroute =>
+  }, [route, treeRoutes]);
+  const treeRoutes =(iroute =>
     iroute
       .filter(item => item.level !== 3)
       .map(item => {
         console.log('item..>', item);
         if (item.routes && Array.isArray(item.routes) && item.routes.length >= 1) {
-          if(item.level===2){
+          if (item.level === 2) {
             item.child = item.routes;
           }
           item.routes = treeRoutes(item.routes);
         }
         return item;
-      });
+      })
+  );
   return (
     <LoadingSkeleton {...props}>
       {route && route.routes && route.routes.length > 0 && (
@@ -97,11 +97,11 @@ const Menu = props => {
           // onHeaderLogo={handlerIndustry}
           // onPageChange={handlerPageChange}
           // onMenuPanelItemClick={handleUpdateCurrentIndex}
-          menuItemRender={(item, dom) => {
-            return item.level < 3 ? (
+          menuItemRender={(item, dom) =>
+            item.level < 3 ? (
               <div
                 onClick={() => {
-                  onSelectItem(item,dom);
+                  onSelectItem(item, dom);
                 }}
                 className="test-icon"
               >
@@ -116,8 +116,8 @@ const Menu = props => {
                 )}
                 <span style={{ marginLeft: '5px' }}> {dom} </span>
               </div>
-            ) : null;
-          }}
+            ) : null
+          }
           subMenuItemRender={(item, dom) => (
             <div className="test-icon">
               {/.svg/.test(item.extData.icon) ? (

src/layouts/AppLayout/components/SliderPanel/Categories.js

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import styles from './index.less';
 
-const Categories = (props) => {
+const Categories = props => {
   const [currentIndex, setCurrentIndex] = useState(props.currentMenuIndex);
   const selectCategories = (event, index) => {
     event.preventDefault();
@@ -27,11 +27,7 @@ const Categories = (props) => {
           currentIndex === index ? styles.active : '',
         );
         return (
-          <div
-            className={categorieCls}
-            key={item.name}
-            onClick={(event) => selectCategories(event, index)}
-          >
+          <div className={categorieCls} key={item.name} onClick={event => selectCategories(event, index)}>
             {/* eslint-disable-next-line jsx-a11y/alt-text */}
             <img src={item.extData.icon} />
             <span>{item.extData.label}</span>

src/layouts/AppLayout/components/SliderPanel/Menu.js

@@ -2,9 +2,9 @@ import React from 'react';
 
 import styles from './index.less';
 
-const Menu = (props) => {
-  const renderTitle = (title) => <h4 className={styles.title}>{title}</h4>;
-  const renderMenuItem = (data) => {
+const Menu = props => {
+  const renderTitle = title => <h4 className={styles.title}>{title}</h4>;
+  const renderMenuItem = data => {
     let menuItem = [];
     if (!data) {
       return;
@@ -14,12 +14,10 @@ const Menu = (props) => {
       menuItem = (
         <div
           className={styles['main-menus-recentAll-menu-group-items-menu-item']}
-          onClick={(event) => props.handleClick(event, data)}
+          onClick={event => props.handleClick(event, data)}
         >
           <img src={data.extData.icon} alt="" />
-          <a
-            className={`${styles['main-menus-recentAll-menu-group-items-menu-item-name']} ${styles.pad}`}
-          >
+          <a className={`${styles['main-menus-recentAll-menu-group-items-menu-item-name']} ${styles.pad}`}>
             {data.name}
           </a>
         </div>
@@ -30,12 +28,10 @@ const Menu = (props) => {
           <div
             className={styles['main-menus-recentAll-menu-group-items-menu-item']}
             key={item.name}
-            onClick={(event) => props.handleClick(event, item)}
+            onClick={event => props.handleClick(event, item)}
           >
             <img src={item.extData.icon} alt="" />
-            <a
-              className={`${styles['main-menus-recentAll-menu-group-items-menu-item-name']} ${styles.pad}`}
-            >
+            <a className={`${styles['main-menus-recentAll-menu-group-items-menu-item-name']} ${styles.pad}`}>
               {item.name}
             </a>
           </div>

src/layouts/AppLayout/components/SliderPanel/MinCategories.js

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import styles from './min.less';
 
-const Categories = (props) => {
+const Categories = props => {
   const [currentIndex, setCurrentIndex] = useState(props.currentMenuIndex);
   const selectCategories = (event, index) => {
     event.preventDefault();
@@ -21,7 +21,7 @@ const Categories = (props) => {
       })}
     >
       {(props.data || [])
-        .filter((item) => !item.hideInMenu)
+        .filter(item => !item.hideInMenu)
         .map((item, index) => {
           const categorieCls = classNames(
             styles['categorie-name'],
@@ -29,11 +29,7 @@ const Categories = (props) => {
             currentIndex === index ? styles.active : '',
           );
           return (
-            <div
-              className={categorieCls}
-              key={item.name}
-              onClick={(event) => selectCategories(event, index)}
-            >
+            <div className={categorieCls} key={item.name} onClick={event => selectCategories(event, index)}>
               {/* eslint-disable-next-line jsx-a11y/alt-text */}
               <img src={item.extData.icon} />
               <span>{item.extData.label}</span>

src/layouts/AppLayout/components/SliderPanel/MinPanel.js

@@ -10,7 +10,7 @@ import { ConfigProvider } from 'antd';
 // eslint-disable-next-line import/extensions
 import { events } from '@wisdom-utils/utils/lib/helpers';
 
-const ThLarge = (props) => (
+const ThLarge = props => (
   <svg viewBox="0 0 1024 1024" version="1.1" width="14" height="14">
     <path
       d="M592 64h384c26.51 0 48 21.49 48 48v320c0 26.51-21.49 48-48 48H592c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48z m-160 0H48C21.49 64 0 85.49 0 112v320c0 26.51 21.49 48 48 48h384c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zM0 592v320c0 26.51 21.49 48 48 48h384c26.51 0 48-21.49 48-48V592c0-26.51-21.49-48-48-48H48c-26.51 0-48 21.49-48 48z m592 368h384c26.51 0 48-21.49 48-48V592c0-26.51-21.49-48-48-48H592c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48z"
@@ -19,15 +19,15 @@ const ThLarge = (props) => (
   </svg>
 );
 
-const ThLargeIcon = (props) => <Icon component={ThLarge} {...props} />;
+const ThLargeIcon = props => <Icon component={ThLarge} {...props} />;
 
-const MinPanel = (props) => {
+const MinPanel = props => {
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
   const prefixCls = getPrefixCls('panel-min');
   const getCategories = () => {
     let { data } = props;
     // eslint-disable-next-line no-prototype-builtins
-    data = data.filter((item) => item.hasOwnProperty('extData'));
+    data = data.filter(item => item.hasOwnProperty('extData'));
     return data;
   };
 
@@ -49,7 +49,7 @@ const MinPanel = (props) => {
 
   // eslint-disable-next-line no-underscore-dangle
   let _clickEvents = null;
-  const handleKeyDown = (event) => {
+  const handleKeyDown = event => {
     if (event.keyCode === KeyCode.ESC) {
       const { onClose } = props;
       event.stopPropagation();
@@ -63,7 +63,7 @@ const MinPanel = (props) => {
       domRef.current.focus();
     }
   };
-  const handleDocumentClick = (e) => {
+  const handleDocumentClick = e => {
     if (props.visible) {
       const node = domRef && domRef.current;
       if (
@@ -93,7 +93,7 @@ const MinPanel = (props) => {
     props.onSelect && props.onSelect(item);
   };
 
-  const handleCategories = (index) => {
+  const handleCategories = index => {
     setCurrentMenu(props.data[index]);
     // eslint-disable-next-line no-unused-expressions
     props.onChange && props.onChange(index);
@@ -105,12 +105,12 @@ const MinPanel = (props) => {
     addDocumentEvents();
 
     return () => removeDocumentEvents();
-  }, [props.visible]);
+  }, [addDocumentEvents, props.visible, removeDocumentEvents]);
   return (
     <div
       className={panelCls}
       tabIndex="-1"
-      onKeyDown={(event) => (props.visible && props.keyboard ? handleKeyDown(event) : undefined)}
+      onKeyDown={event => (props.visible && props.keyboard ? handleKeyDown(event) : undefined)}
       ref={domRef}
     >
       <div className={`${prefixCls}-mainPane-main`}>

src/layouts/AppLayout/components/SliderPanel/Panel.js

@@ -12,7 +12,7 @@ import styles from './index.less';
 import Menu from './Menu';
 // eslint-disable-next-line import/extensions
 
-const ThLarge = (props) => (
+const ThLarge = props => (
   <svg viewBox="0 0 1024 1024" version="1.1" width="14" height="14">
     <path
       d="M592 64h384c26.51 0 48 21.49 48 48v320c0 26.51-21.49 48-48 48H592c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48z m-160 0H48C21.49 64 0 85.49 0 112v320c0 26.51 21.49 48 48 48h384c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zM0 592v320c0 26.51 21.49 48 48 48h384c26.51 0 48-21.49 48-48V592c0-26.51-21.49-48-48-48H48c-26.51 0-48 21.49-48 48z m592 368h384c26.51 0 48-21.49 48-48V592c0-26.51-21.49-48-48-48H592c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48z"
@@ -21,9 +21,9 @@ const ThLarge = (props) => (
   </svg>
 );
 
-const ThLargeIcon = (props) => <Icon component={ThLarge} {...props} />;
+const ThLargeIcon = props => <Icon component={ThLarge} {...props} />;
 
-const Panel = (props) => {
+const Panel = props => {
   const panelCls = classNames(styles.mainPane, props.visible ? styles.visible : styles.hidden);
   const domRef = useRef();
   // eslint-disable-next-line no-debugger;
@@ -35,7 +35,7 @@ const Panel = (props) => {
 
   // eslint-disable-next-line no-underscore-dangle
   let _clickEvents = null;
-  const handleKeyDown = (event) => {
+  const handleKeyDown = event => {
     if (event.keyCode === KeyCode.ESC) {
       const { onClose } = props;
       event.stopPropagation();
@@ -49,7 +49,7 @@ const Panel = (props) => {
       domRef.current.focus();
     }
   };
-  const handleDocumentClick = (e) => {
+  const handleDocumentClick = e => {
     if (props.visible) {
       const node = domRef && domRef.current;
       if (
@@ -77,11 +77,11 @@ const Panel = (props) => {
   const getCategories = () => {
     let { data } = props;
     // eslint-disable-next-line no-prototype-builtins
-    data = data.filter((item) => item.hasOwnProperty('extData'));
+    data = data.filter(item => item.hasOwnProperty('extData'));
     return data;
   };
 
-  const handleCategories = (index) => {
+  const handleCategories = index => {
     setCurrentMenu(props.data[index]);
     // eslint-disable-next-line no-unused-expressions
     props.onChange && props.onChange(index);
@@ -98,12 +98,12 @@ const Panel = (props) => {
     addDocumentEvents();
 
     return () => removeDocumentEvents();
-  }, [props.visible]);
+  }, [addDocumentEvents, props.visible, removeDocumentEvents]);
   return (
     <div
       className={panelCls}
       tabIndex="-1"
-      onKeyDown={(event) => (props.visible && props.keyboard ? handleKeyDown(event) : undefined)}
+      onKeyDown={event => (props.visible && props.keyboard ? handleKeyDown(event) : undefined)}
       ref={domRef}
     >
       <div className={styles.header}>
@@ -122,11 +122,7 @@ const Panel = (props) => {
       </div>
       <div className={styles.main}>
         <div className={styles['main-left']}>
-          <Categories
-            data={getCategories()}
-            onChange={handleCategories}
-            currentMenuIndex={props.currentMenuIndex}
-          />
+          <Categories data={getCategories()} onChange={handleCategories} currentMenuIndex={props.currentMenuIndex} />
         </div>
         <div className={styles['main-menus']}>
           <Spin spinning={!currentMenu}>

src/layouts/AppLayout/layouts/BasicLayout.js

@@ -3,7 +3,6 @@ import { ConfigProvider } from 'antd';
 import propTypes from 'prop-types';
 import Icon from '@ant-design/icons';
 import warning from 'warning';
-import SlideMenu from '../components/SlideMenu';
 import WrapContent from '@wisdom-utils/components/lib/AppLayout/layouts/WrapContent';
 import Header from '@wisdom-utils/components/lib/AppLayout/layouts/Header';
 import Footer from '@wisdom-utils/components/lib/AppLayout/layouts/Footer';
@@ -13,7 +12,6 @@ import { helpers } from '@wisdom-utils/utils';
 import { getBreadcrumbProps } from '@wisdom-utils/components/lib/AppLayout/layouts/utils/getBreadcrumbProps';
 import getMenuData from '@wisdom-utils/components/lib/AppLayout/layouts/utils/getMenuData';
 import { findPathByLeafId } from '@wisdom-utils/components/lib/AppLayout/helpers';
-const { renderRoutes } = helpers;
 import { MinPanel } from '@wisdom-utils/components/lib/AppLayout/components/SliderPanel';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import RouteContext from '@wisdom-utils/components/lib/AppLayout/layouts/RouteContext';
@@ -23,6 +21,8 @@ import classNames from 'classnames';
 import useDocumentTitle from '@wisdom-utils/components/lib/AppLayout/layouts/hooks/useDocumentTitle';
 import defaultSettings from '@wisdom-utils/components/lib/AppLayout/layouts/defaultSettings';
 import isBrowser from '@wisdom-utils/components/lib/AppLayout/layouts/utils/isBrowser';
+import SlideMenu from '../components/SlideMenu';
+const { renderRoutes } = helpers;
 const homeSvg = () => (
   <svg
     t="1631169883330"
@@ -40,7 +40,7 @@ const homeSvg = () => (
     />
   </svg>
 );
-const HomeIcon = (props) => <Icon component={homeSvg} {...props} style={{ marginRight: '0px' }} />;
+const HomeIcon = props => <Icon component={homeSvg} {...props} style={{ marginRight: '0px' }} />;
 
 const defaultPageTitleRender = (pageProps, props) => {
   const { pageTitleRender } = props;
@@ -65,13 +65,13 @@ const defaultPageTitleRender = (pageProps, props) => {
   }
   return pageTitleInfo;
 };
-const headerRender = (props) => {
+const headerRender = props => {
   if (props.headerRender === false) {
     return null;
   }
   return <Header {...props} />;
 };
-const footerRender = (props) => {
+const footerRender = props => {
   if (props.footerRender === false) {
     return null;
   }
@@ -82,7 +82,7 @@ const footerRender = (props) => {
   return null;
 };
 
-const renderSiderMenu = (props) => {
+const renderSiderMenu = props => {
   const { menuRender } = props;
   if (menuRender === false) {
     return null;
@@ -102,7 +102,7 @@ const getPaddingLeft = (hasLeftPadding, collapsed, siderWidth) => {
   return 0;
 };
 
-const BasicLayout = (props) => {
+const BasicLayout = props => {
   const {
     children,
     route,
@@ -141,10 +141,12 @@ const BasicLayout = (props) => {
     value: props.collapsed,
     onChange: props.onCollapse,
   });
-  const menuInfoData = React.useMemo(
-    () => getMenuData(route?.routes || [], menu, formatMessage, menuDataRender),
-    [formatMessage, menu, menuDataRender, route?.routes],
-  );
+  const menuInfoData = React.useMemo(() => getMenuData(route?.routes || [], menu, formatMessage, menuDataRender), [
+    formatMessage,
+    menu,
+    menuDataRender,
+    route.routes,
+  ]);
 
   const { breadcrumb = {}, breadcrumbMap, menuData = [] } = menuInfoData || {};
 
@@ -225,8 +227,7 @@ const BasicLayout = (props) => {
 
   const { isChildrenLayout: contextIsChildrenLayout } = useContext(RouteContext);
 
-  const isChildrenLayout =
-    propsIsChildrenLayout !== undefined ? propsIsChildrenLayout : contextIsChildrenLayout;
+  const isChildrenLayout = propsIsChildrenLayout !== undefined ? propsIsChildrenLayout : contextIsChildrenLayout;
 
   const leftSiderWidth = getPaddingLeft(!!hasLeftPadding, collapsed, siderWidth);
 
@@ -250,14 +251,14 @@ const BasicLayout = (props) => {
       (route &&
         route.routes &&
         Array.isArray(route.routes) &&
-        route.routes.filter((item) => !item.hideInMenu)[currentMenuIndex]) ||
+        route.routes.filter(item => !item.hideInMenu)[currentMenuIndex]) ||
       {};
     if (!_.isEqual(currentRoute, newRoutes)) {
       // setCurrentRoute({});
       setSelectIndex(-1);
       setCurrentRoute(newRoutes);
     }
-  }, [route, currentMenuIndex]);
+  }, [route, currentMenuIndex, currentRoute]);
 
   useEffect(() => {
     const initSelectRoute = findPathByLeafId(
@@ -268,23 +269,20 @@ const BasicLayout = (props) => {
       true,
     );
 
-    const parentMenuName =
-      initSelectRoute && initSelectRoute.parent && initSelectRoute.parent.label;
+    const parentMenuName = initSelectRoute && initSelectRoute.parent && initSelectRoute.parent.label;
     if (parentMenuName) {
-      let currentChildrenRoute = currentRoute.routes.find((item) => item.name === parentMenuName);
+      let currentChildrenRoute = currentRoute.routes.find(item => item.name === parentMenuName);
       if (!currentChildrenRoute) {
         currentChildrenRoute = initSelectRoute;
       }
-      let childrenName = currentChildrenRoute ? currentChildrenRoute.name : parentMenuName;
+      const childrenName = currentChildrenRoute ? currentChildrenRoute.name : parentMenuName;
       if (currentChildrenRoute.routes) {
-        const active = currentChildrenRoute.routes.find(
-          (item) => item.name === initSelectRoute.name,
-        );
+        const active = currentChildrenRoute.routes.find(item => item.name === initSelectRoute.name);
         setTabActiveKey(active.path);
       } else {
         setTabActiveKey(currentChildrenRoute.path);
       }
-      const initSelectIndex = currentRoute.routes.findIndex((item) => item.name === childrenName);
+      const initSelectIndex = currentRoute.routes.findIndex(item => item.name === childrenName);
       setSelectIndex(initSelectIndex);
       currentChildrenRoute && currentChildrenRoute.routes
         ? setSubRoutes(currentChildrenRoute.routes)
@@ -308,15 +306,12 @@ const BasicLayout = (props) => {
         },
       ]);
     }
-   
-  }, []);
+  }, [currentRoute, props.config, props.location]);
 
   useEffect(() => {
     window.share &&
       window.share.event &&
-      window.share.event.on(
-        'event:updateCurrentChildrenRoutes',
-        ({ currentPath, currentRoute, selectedIndex }) => {
+      window.share.event.on('event:updateCurrentChildrenRoutes', ({ currentPath, currentRoute, selectedIndex }) => {
         currentRoute && currentRoute.parent && currentRoute.parent.routes
           ? setSubRoutes(currentRoute.parent.routes)
           : !currentRoute.parent
@@ -324,8 +319,7 @@ const BasicLayout = (props) => {
             : setSubRoutes([currentRoute]);
         setSelectIndex(selectedIndex);
         setTabActiveKey(currentPath);
-        },
-      );
+      });
 
     window.share &&
       window.share.event &&
@@ -333,15 +327,15 @@ const BasicLayout = (props) => {
         setSubRoutes([
           {
             icon: <HomeIcon />,
-            path: path,
-            name: name,
+            path,
+            name,
           },
         ]);
       });
 
     window.share &&
       window.share.event &&
-      window.share.event.on('goHome', (url) => {
+      window.share.event.on('goHome', url => {
         setSubRoutes([
           {
             icon: <HomeIcon />,
@@ -353,9 +347,7 @@ const BasicLayout = (props) => {
         window.history.pushState(null, '', `/civbase${url}`);
       });
     return () => {
-      window.share &&
-        window.share.event &&
-        window.share.event.removeAllListeners('event:updateCurrentChildrenRoutes');
+      window.share && window.share.event && window.share.event.removeAllListeners('event:updateCurrentChildrenRoutes');
       window.share && window.share.event && window.share.event.removeAllListeners('event:favitor');
       window.share && window.share.event && window.share.event.removeAllListeners('goHome');
     };
@@ -369,9 +361,7 @@ const BasicLayout = (props) => {
           const route =
             routes &&
             routes.routes &&
-            routes.routes.find(
-              (item) => item.path === decodeURI(window.location.pathname.replace('/civbase', '')),
-            );
+            routes.routes.find(item => item.path === decodeURI(window.location.pathname.replace('/civbase', '')));
           if (route && route.path) {
             setTabActiveKey(route.path);
           }
@@ -379,7 +369,7 @@ const BasicLayout = (props) => {
       }
     }
     onPageChange && onPageChange(props.location);
-  }, [props.location, location.pathname.search]);
+  }, [props.location, location.pathname.search, selectIndex, currentRoute, onPageChange]);
 
   useDocumentTitle(pageTitleInfo, props.title || false);
 
@@ -409,14 +399,10 @@ const BasicLayout = (props) => {
               data={route.routes || []}
               onClose={() => setVisible(false)}
               currentMenuIndex={activeMenu}
-              onChange={(index) => setActiveMenu(index)}
+              onChange={index => setActiveMenu(index)}
             />
 
-            <WrapContent
-              isChildrenLayout={isChildrenLayout}
-              className={contentClassName}
-              style={contentStyle}
-            >
+            <WrapContent isChildrenLayout={isChildrenLayout} className={contentClassName} style={contentStyle}>
               <div className={`${prefixCls}-page-container-wrap`}>{headerDom}</div>
 
               <TopNavHeader
@@ -431,9 +417,9 @@ const BasicLayout = (props) => {
               <PageContainer style={{ paddingTop: '0px', height: '100%' }}>
                 {renderRoutes(prefixCls, route.routes, props)}
                 {handerMapContentRender && handerMapContentRender(props)}
-                {/*<div id="micro-container" className="subapp-container">*/}
-                {/*  {children}*/}
-                {/*</div>*/}
+                {/* <div id="micro-container" className="subapp-container"> */}
+                {/*  {children} */}
+                {/* </div> */}
                 {children}
               </PageContainer>
             </WrapContent>

src/layouts/HNLayout.js

@@ -9,10 +9,10 @@ import { connect } from 'react-redux';
 import { useHistory } from '@wisdom-utils/runtime';
 import KeepAlive from 'react-activation';
 import AMapLoader from '@amap/amap-jsapi-loader';
-import BasicLayout from './AppLayout/layouts/BasicLayout';
 import RightContent from '@/components/GlobalHeader/ExtendRightContent';
 import defaultSetting from '@wisdom-utils/components/lib/AppLayout/layouts/defaultSettings';
 import { actionCreators } from '@/containers/App/store';
+import BasicLayout from './AppLayout/layouts/BasicLayout';
 import { WEB_GIS_TYPE } from '../constants';
 import SecurityLayout from './SecurityLayout';
 import Site from './Site';
@@ -47,7 +47,6 @@ const optionsWith = [{ label: '按站点', value: 'site' }, { label: '按城市'
 const HOT = ['HOT', '县', '市', 'New'];
 const StationsItem = (item, action, onChangeVisible) => {
   const changeGroup = (event, data) => {
-    debugger;
     action.changeGroup && action.changeGroup(event, data, onChangeVisible);
   };
   return (
@@ -215,19 +214,17 @@ const Layout = props => {
         setCityData(res);
       });
     }
-  }, [props.global]);
+  }, [cityData, history, props, props.global, siteAction]);
 
   const handlerPageChange = () => {
     const params = getParamsV1(props.location.pathname);
     if (params.hasOwnProperty('mapType') && params.mapType === WEB_GIS_TYPE.AMAP) {
       AMapLoader.reset();
       setMapMode(WEB_GIS_TYPE.AMAP);
-    } else {
-      if (!/civweb4/.test(location.pathname)) {
+    } else if (!/civweb4/.test(location.pathname)) {
       AMapLoader.reset();
       setMapMode(WEB_GIS_TYPE.ARCGIS);
     }
-    }
   };
 
   useEffect(() => {
@@ -305,7 +302,7 @@ const Layout = props => {
 
         <BasicLayout
           route={props.route}
-          title={''}
+          title=""
           logo={require('@/assets/basic/HN-logo.png')}
           config={props.global}
           currentMenuIndex={props.currentMenuIndex}