fix: 修复菜单没有加载情况

src/layouts/BasicLayout1.js

@@ -19,6 +19,7 @@ import {
   Menu,
   Tooltip,
   ConfigProvider,
+  Skeleton
 } from 'antd';
 // import { RouteWithSubRoutes, renderRoutes } from '../utils/routes';
 // import { renderRoutes } from 'react-router-config';
@@ -258,7 +259,7 @@ const BasicLayout = props => {
   const [childrenRoutes, setChildrenRoutes] = useState([]);
   const [selectedKeys, setSelectedKeys] = useState([]);
   const [tabActiveKey, setTabActiveKey] = useState("1");
-  // const [currentRoutes, setCurrentRoutes] = useState([]);
+  const [currentRoutes, setCurrentRoutes] = useState({});
   const [siteAction, setSiteAction] = useState(
     () => new Site(props, setSiteLoading),
   );
@@ -267,9 +268,21 @@ const BasicLayout = props => {
   const history = useHistory();
   // 处理隐藏菜单
 
-  let currentRoutes = props.route.routes.filter(item => !item.hideInMenu)[props.currentMenuIndex];
+  useEffect(() => {
+    
+    const newRoutes = props.route.routes.filter(item => !item.hideInMenu)[props.currentMenuIndex] || {};
+    if(!_.isEqual(currentRoutes, newRoutes)) {
+      setCurrentRoutes({})
+      setSelectIndex(-1);
+      setCurrentRoutes( newRoutes)
+    }
+  }, [props.route]);
+
+  // let currentRoutes = props.route.routes.filter(item => !item.hideInMenu)[props.currentMenuIndex];
+
   //props.currentMenuIndex
   useEffect(() => {
+  
     const initSelectRoute = findPathByLeafId(
       `${props.location && props.location.pathname || ''}`,
       [currentRoutes],
@@ -304,6 +317,7 @@ const BasicLayout = props => {
       if(!props.global.get('home')) {
         url = `civweb4/${url.replace(/^\//, '').replace(/^civweb4\//, '')}`
       }
+      setSelectIndex(-1)
       setChildrenRoutes([
         {
           icon: <HomeIcon/>,
@@ -383,7 +397,7 @@ const BasicLayout = props => {
    * web4全屏退出，切换三级菜单高亮
    */
   useEffect(() => {
-    if (selectIndex !== -1) {
+    if (selectIndex !== -1 && currentRoutes && currentRoutes.hasOwnProperty('routes')) {
       const routes = currentRoutes.routes[selectIndex];
       if (routes) {
         if (routes && routes.routes) {
@@ -471,7 +485,7 @@ const BasicLayout = props => {
   }
 
   const handlerSelectMenu = ({ item, key, keyPath, domEvent }) => {
-    debugger
+    
     setSelectedKeys([key]);
     window.history.pushState(null, '', `/civbase${key}`);
   }
@@ -549,44 +563,57 @@ const BasicLayout = props => {
               })}>
                 <div className={layoutStyles['layout-slider-childern']}>
                   <div className={layoutStyles.sliderMenu} style={{ flex: '1 1 0%', overflow: 'hidden auto' }}>
-                    <ul className={classNames(layoutStyles.menu)} style={{ minHeight: '0px', marginBottom: '0px' }}>
-                      <li className={classNames(layoutStyles['menu-item'])} onClick={handleToggleSystem}>
-                        <Tooltip placement="right" title={collapse ? currentRoutes.name : ''}>
-                          <a>
-                            {
-                              (currentRoutes && currentRoutes.extData && currentRoutes.extData.icon) && <img src={currentRoutes.extData.icon} />
-                            }
-                            {
-                              collapse ? null : <span className={classNames(layoutStyles.text, layoutStyles.currentText)}>{currentRoutes && currentRoutes.name}</span>
-                            }
-                          </a>
-                        </Tooltip>
-                      </li>
-                    </ul>
-                    <div className={layoutStyles.splitLine}></div>
-                    <ul className={classNames(layoutStyles.menu, 'menu-vertical')}>
-                      {
-                        currentRoutes && (currentRoutes.routes || []).filter(item => !item.hideInMenu).map((item, index) => {
-                          return (
-                            <React.Fragment key={index}>
-                              <li key={index} className={classNames(layoutStyles['menu-item'], { [layoutStyles['active']]: index === selectIndex })} onClick={() => handlerSecond(item, index)}>
-                                <Tooltip placement="right" title={collapse ? item.name : ''}>
-                                  <a>
-                                    {
-                                      item.icon ? item.icon : item.extData && /.svg/.test(item.extData.icon) ? <ReactSVG src={item.extData.icon} style={{ width: '20px', height: '20px' }} className={layoutStyles.icon} /> : item.extData && <img src={item.extData.icon} />
-                                    }
-                                    {
-                                      collapse ? item.extData && <span className={classNames(layoutStyles.text)}>{(item.extData.shortName || item.name).substr(0, 2)}</span> : <span className={classNames(layoutStyles.text)}>{item.name}</span>
-                                    }
-                                  </a>
-                                </Tooltip>
-                              </li>
-                              <Divider style={{ border: '1px solid rgb(49, 53, 62, 0.3)', margin: '0 auto', minWidth: '80%', width: '80%' }} />
-                            </React.Fragment>
-                          )
-                        })
-                      }
-                    </ul>
+                    {
+                      <div style={{padding: currentRoutes && !currentRoutes.routes ? '20px 6px 6px 6px': '0px'}}><Skeleton loading={currentRoutes && !currentRoutes.routes} active title={false} paragraph={{
+                        rows: 10
+                      }}/>
+                        {
+                          currentRoutes && currentRoutes.routes && currentRoutes.routes.length > 0 && <React.Fragment>
+                             <ul className={classNames(layoutStyles.menu)} style={{ minHeight: '0px', marginBottom: '0px' }}>
+                          <li className={classNames(layoutStyles['menu-item'])} onClick={handleToggleSystem}>
+                            <Tooltip placement="right" title={collapse ? currentRoutes.name : ''}>
+                              <a>
+                                {
+                                  (currentRoutes && currentRoutes.extData && currentRoutes.extData.icon) && <img src={currentRoutes.extData.icon} />
+                                }
+                                {
+                                  collapse ? null : <span className={classNames(layoutStyles.text, layoutStyles.currentText)}>{currentRoutes && currentRoutes.name}</span>
+                                }
+                              </a>
+                            </Tooltip>
+                          </li>
+                        </ul>
+                        <div className={layoutStyles.splitLine}></div>
+                        <ul className={classNames(layoutStyles.menu, 'menu-vertical')}>
+                          {
+                            currentRoutes && (currentRoutes.routes || []).filter(item => !item.hideInMenu).map((item, index) => {
+                              return (
+                                <React.Fragment key={index}>
+                                  <li key={index} className={classNames(layoutStyles['menu-item'], { [layoutStyles['active']]: index === selectIndex })} onClick={() => handlerSecond(item, index)}>
+                                    <Tooltip placement="right" title={collapse ? item.name : ''}>
+                                      <a>
+                                        {
+                                          item.icon ? item.icon : item.extData && /.svg/.test(item.extData.icon) ? <ReactSVG src={item.extData.icon} style={{ width: '20px', height: '20px' }} className={layoutStyles.icon} /> : item.extData && <img src={item.extData.icon} />
+                                        }
+                                        {
+                                          collapse ? item.extData && <span className={classNames(layoutStyles.text)}>{(item.extData.shortName || item.name).substr(0, 2)}</span> : <span className={classNames(layoutStyles.text)}>{item.name}</span>
+                                        }
+                                      </a>
+                                    </Tooltip>
+                                  </li>
+                                  <Divider style={{ border: '1px solid rgb(49, 53, 62, 0.3)', margin: '0 auto', minWidth: '80%', width: '80%' }} />
+                                </React.Fragment>
+                              )
+                            })
+                          }
+                        </ul>
+                          </React.Fragment>
+                        }
+                      
+                      
+                      </div>
+                    }
+                   
                   </div>
                   <div className="ant-pro-sider-links" >
                     <ul className="ant-menu ant-menu-root ant-menu-inline ant-menu-dark ant-pro-sider-link-menu" role="menu" tabIndex="0" >

src/micro.js

@@ -139,7 +139,7 @@ export const initMicroApps = () => {
             loose: true,
         },
         singular: false,
-        scopedCSS: false,
+        scopedCSS: true,
         prefetch: 'all',
         // eslint-disable-next-line no-underscore-dangle
         // getPublicPath: window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__,