fix: 新增缓存

package.json

@@ -114,9 +114,9 @@
         "@wisdom-map/arcgismap": "1.4.0-151",
         "@wisdom-map/basemap": "1.1.0-24",
         "@wisdom-map/util": "^1.0.28-0",
-        "@wisdom-utils/components": "0.1.292",
-        "@wisdom-utils/runtime": "0.0.41",
-        "@wisdom-utils/utils": "0.1.332",
+        "@wisdom-utils/components": "0.1.297",
+        "@wisdom-utils/runtime": "0.0.46",
+        "@wisdom-utils/utils": "0.1.337",
         "animate.css": "^4.1.1",
         "antd": "4.21.2",
         "compression": "1.7.4",
@@ -140,7 +140,7 @@
         "pinyin-match": "^1.1.1",
         "promise.prototype.finally": "^3.1.2",
         "prop-types": "15.7.2",
-        "qiankun": "^2.4.6",
+        "qiankun": "2.7.8",
         "qrcode.react": "^1.0.0",
         "rc-cascader": "^2.3.2",
         "rc-queue-anim": "^2.0.0",

src/containers/App/index.js

+/* eslint-disable global-require */
 import React, { useEffect } from 'react';
 
 import { Helmet } from 'react-helmet';
 import { connect } from 'react-redux';
-
 import { Router, Switch } from '@wisdom-utils/runtime';
 import { helpers, event } from '@wisdom-utils/utils';
-
+import { AliveScope } from 'react-activation';
 import defaultSetting from '@wisdom-utils/components/lib/AppLayout/layouts/defaultSettings';
 // eslint-disable-next-line import/extensions
 import { dyRoutes } from '../../routes/config';
-
 const pkg = require('../../../package.json');
 const { renderRoutes } = helpers;
 const config = require('../../../config/config');
@@ -36,6 +35,20 @@ const App = props => {
         {props?.global?.title && <meta name="description" content={`${props.global.title}`} />}
       </Helmet>
       <Router basename={config.base || pkg.name.toLocaleLowerCase() || ''}>
+        {window?.qiankunIsCache ? (
+          <AliveScope>
+            <Switch>
+              {renderRoutes(
+                'panda-console-base',
+                dyRoutes(
+                  props.menu || [],
+                  props.global && props.global.layout,
+                  (props.global && props.global.theme) || 'dark',
+                ).routes,
+              )}
+            </Switch>
+          </AliveScope>
+        ) : (
           <Switch>
             {renderRoutes(
               'panda-console-base',
@@ -46,6 +59,7 @@ const App = props => {
               ).routes,
             )}
           </Switch>
+        )}
       </Router>
     </>
   );
@@ -54,6 +68,7 @@ const App = props => {
 const mapStateToProps = state => ({
   global: state.getIn(['global', 'globalConfig']),
   menu: state.getIn(['global', 'menu']),
+  products: state.getIn(['global', 'products']),
   flatMenu: state.getIn(['global', 'flatMenu']),
 });
 export default connect(

src/containers/App/store/actions.js

@@ -241,7 +241,7 @@ export function logout(data) {
         window[products[item]].unmount({ store });
     });
   }
-
+  store.set('event:dropCache');
   return {
     type: LOGINOUT,
     data: {

src/global.less

@@ -9,6 +9,11 @@ body,
 }
 #app {
   background: transparent!important;
+  .ka-wrapper, 
+  .ka-content{
+    width: 100%;
+    height: 100%;
+  }
 }
 * {
   margin: 0;

src/layouts/BasicLayout.js

 // @eslint-disable
 import React, { Suspense, useEffect, useRef, useState } from 'react';
 
-import { Anchor, Popover, Radio, Spin } from 'antd';
+import { Anchor, Modal, Popover, Radio, Spin } from 'antd';
 import classNames from 'classnames';
 import Cookies from 'js-cookie';
 import _ from 'lodash';
@@ -242,6 +242,13 @@ const transformFloatMenu = (routes, homepage) => {
   return routes.concat(route);
 };
 
+const finishInitWeb = homepage => {
+  event.emit('initweb', false);
+  typeof homepage === 'string' &&
+    homepage !== '' &&
+    window.history.replaceState({ delete: true }, null, `/civbase/${homepage}`);
+};
+
 const Layout = props => {
   const currentProduct = `__global__recent_productIndex__micro_${window.location.hostname}_${params.getParams(
     'client',
@@ -254,6 +261,7 @@ const Layout = props => {
   const [siteAction, setSiteAction] = useState(() => new Site(props, setSiteLoading));
   const [menuLoading, setMenuLoading] = useState(true);
   const [subLoading, setSubLoading] = useState(true);
+  const [initWebContent, setInitWebContent] = useState(false);
   // const [settings, setSetting] = useState({});
   // const [routeConfig, setRouteConfig] = useState(null);
   // const [matchPath, setMatchPath] = useState('');
@@ -271,6 +279,9 @@ const Layout = props => {
     event.on('loading', ret => {
       setSubLoading(ret);
     });
+    event.on('initweb', ret => {
+      setInitWebContent(ret);
+    });
   }, []);
 
   useEffect(() => {
@@ -478,6 +489,24 @@ const Layout = props => {
         <div id="micro-container" className="subapp-container">
           {props.children}
         </div>
+
+        <Modal
+          title={<div style={{ textAlign: 'center' }}>温馨提示</div>}
+          centered
+          width="333px"
+          visible={initWebContent}
+          cancelText="取消"
+          okText="确定"
+          onOk={() => {
+            finishInitWeb(props.global?.homepage ?? '');
+          }}
+          onCancel={() => {
+            finishInitWeb(props.global?.homepage ?? '');
+          }}
+          zIndex={2000}
+        >
+          缓存仅支持最新功能，若要体验完整版请进行相关功能升级，或点击确认完成初次兼容加载后再次进入功能即可
+        </Modal>
       </BasicLayout>
     </SecurityLayout>
   );

src/layouts/SecurityLayout.js

@@ -6,7 +6,9 @@ import PageLoading from '@wisdom-utils/components/lib/AppLayout/components/PageL
 import _ from 'lodash';
 import { stringify } from 'querystring';
 import { store, helpers } from '@wisdom-utils/utils';
-import { ValidDefaultPWDContainer } from '@/components/Container'
+import { ValidDefaultPWDContainer } from '@/components/Container';
+import { initSaveMicroApps } from '../micro';
+
 class SecurityLayout extends React.Component {
   state = {
     isReady: false,
@@ -22,66 +24,76 @@ class SecurityLayout extends React.Component {
   componentWillReceiveProps(nextProps) {
     const products = (this.props.global.products || []).map(item => {
       if (item.PackageName === 'civweb4') {
-        return 'web4_console'
+        return 'web4_console';
       }
       return `${item.PackageName}-main`;
     });
-    const location = this.props.location;
-    const pathname = location.pathname;
+    const { location } = this.props;
+    const { pathname } = location;
     const argv = pathname.split('/');
 
     const nextPathname = nextProps.location.pathname;
     const nextArgv = nextPathname.split('/');
     if (argv[2] !== nextArgv[2]) {
       Object.keys(products).forEach(item => {
-        window[products[item]] && window[products[item]] && window[products[item]].unmount && window[products[item]].unmount({ store: store });
+        window[products[item]] &&
+          window[products[item]] &&
+          window[products[item]].unmount &&
+          window[products[item]].unmount({ store });
       });
     }
     if (this.props.location.pathname !== nextProps.location.pathname) {
+      if (window?.qiankunIsCache) {
+        const marks = document.querySelectorAll('#micro-container');
+        if (marks && marks.length) {
+          const activeAppPath = nextProps.location.pathname.match(/(\w+)/)
+            ? nextProps.location.pathname.match(/(\w+)/)[0]
+            : null;
+          if (activeAppPath) {
+            initSaveMicroApps(nextProps.location.pathname, nextProps.global);
+          }
+        }
+      } else {
         store.set('event:globalConfig', { globalConfig: nextProps.global });
       }
-
+    }
   }
 
   render() {
-
     const { isReady } = this.state;
     const { children, global, loading } = this.props;
     const tk = Cookies.get('token') || global.token;
-    const isLogin = tk !== null && tk !== 'undefined' && tk !== (void 0);
-    
-    if (!isLogin && window.location.pathname !== '/civbase/user/login' || (global.hasOwnProperty('size') && global.size === 0)) {
-      const { query = {}, search, pathname } = history.location;
-      const { redirect } = query;
-      // const queryString = stringify({
-      //   redirect: pathname + search,
-      // });
+    const isLogin = tk !== null && tk !== 'undefined' && tk !== void 0;
+    const { pathname } = history.location;
+    if (
+      (!isLogin && window.location.pathname !== '/civbase/user/login') ||
+      // eslint-disable-next-line no-prototype-builtins
+      (global.hasOwnProperty('size') && global.size === 0)
+    ) {
       this.props.updateCurrentIndex && this.props.updateCurrentIndex(0);
       let client = global.client || sessionStorage.getItem('client');
       client = client !== 'undefined' && !_.isNull(client) && !_.isUndefined(client) ? client : 'city';
       let { generateType } = global;
-      generateType = !_.isNull(generateType) && !_.isUndefined(generateType) && generateType !== 'undefined' ? `&generateType=${generateType}` : '';
+      generateType =
+        !_.isNull(generateType) && !_.isUndefined(generateType) && generateType !== 'undefined'
+          ? `&generateType=${generateType}`
+          : '';
+      // eslint-disable-next-line prettier/prettier
+      window.qiankunStarted = false;
       return (
-        <Redirect
-          to={{pathname: `/user/login?client=${client}${generateType}`, state:{reload: true}}}
-        />
+        <Redirect to={{ pathname: `/user/login?client=${client}${generateType}`, state: { reload: true } }} exact />
       );
-    };
-
+    }
     if ((!isLogin && loading) || !isReady) {
       return <PageLoading />;
     }
-    return (
-      <ValidDefaultPWDContainer>
-        {children}
-      </ValidDefaultPWDContainer>
-    );
+    return <ValidDefaultPWDContainer>{children}</ValidDefaultPWDContainer>;
   }
 }
 
 const mapStateToProps = state => ({
   global: state.getIn(['global', 'globalConfig']),
-  location: state.getIn(['router', 'location']).toJS()
+  location: state.getIn(['router', 'location']).toJS(),
 });
 export default connect(
   mapStateToProps,

src/pages/user/login/index.js

@@ -58,7 +58,7 @@ const LoginTemplate = {
 export default (props) => {
   const {location} = props.history;
   useEffect(() => {
-    if(location.state && location.state.reload) {
+    if(location.state && location.state.reload && !window.qiankunIsCache) {
       AppInitState();
     }
   }, []);

src/pages/user/login/login.js

@@ -368,20 +368,16 @@ class Login {
           const homeType = config.productType || 'civweb4';
           // 产品类型和首页路径同时有才行
           // eslint-disable-next-line prettier/prettier
-          const homepage = params.getParams('homepage')
-            ? params.getParams('homepage')
-            : homeType && config.homepage
-            ? `${homeType}/${params.getParams('homepage') || config.homepage}`
-            : '';
-
+          const homepage = params.getParams('homepage') ? params.getParams('homepage') : homeType && config.homepage ? `${homeType}/${params.getParams('homepage') || config.homepage}` : '';
+          window.qiankunIsCache = config.isCache || false;
           self.globalConfig = Object.assign(self.globalConfig, config, {
             theme: self.globalConfig.theme,
             menu: self.globalConfig.menu,
             style: self.globalConfig.style,
             homepage: homepage || '',
+            products: self.globalConfig.products,
             // mapsettings: config.mapsettings
           });
-
           self.updateConfig && self.updateConfig(self.globalConfig);
           self.getProjectItems().then(res => {
             window.subSysCfg = {};

src/public-path.js

 const pkg = require('../package.json');
-window.arcgisAssetsPath = `${ window.location.origin}/${pkg.name.toLocaleLowerCase()}`;
\ No newline at end of file
+window.arcgisAssetsPath = `${window.location.origin}/${pkg.name.toLocaleLowerCase()}`;

src/render.js

@@ -167,7 +167,6 @@ export const AppInitState = () => {
                 window[products[item]].unmount &&
                 window[products[item]].unmount({ store });
             });
-            initMicroApps();
           }
           // eslint-disable-next-line no-new
           // 增加免登判定
@@ -189,11 +188,11 @@ export const AppInitState = () => {
                 logout: () => store.dispatch(actionCreators.logout()),
               },
               () => {
-                (async () => {
-                  (await (getToken() && window.globalConfig && window.globalConfig.token)) &&
-                    // eslint-disable-next-line no-use-before-define
-                    initMicroApps(loader, store);
-                })();
+                // (async () => {
+                //   (await (getToken() && window.globalConfig && window.globalConfig.token)) &&
+                //     // eslint-disable-next-line no-use-before-define
+                //     initMicroApps(loader, store);
+                // })();
               },
               true,
             );