- 优化进入子应用过渡效果

src/app.js

@@ -15,5 +15,5 @@ import 'antd/dist/antd.less';
 // const namespace = `__PANDA_STORE__${location.hostname}`;
 // window.createStoreage = new Storeage(namespace);
 ;(() => {
-  render();
+  render({loading: true });
 })();

src/components/Loading/index.js

+import { Spin } from 'antd';
+
+export default (props) => {
+  const { loading } = props;
+
+  const style = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+  }
+
+  return (
+    <Spin spinning={loading} size="large" style={style} tip="子应用正在加载..." />
+  );
+}
+

src/containers/App/index.js

@@ -3,24 +3,29 @@ import React from 'react';
 import { Helmet } from 'react-helmet';
 import { connect } from 'react-redux';
 import { Router, Switch } from '@wisdom-utils/runtime';
-import { helpers } from '@wisdom-utils/utils';
+import { helpers, event } from '@wisdom-utils/utils';
 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');
+
 function App(props) {
+  event.emit('loading' ,  props.loading);
+
   const metaSecurity = /https/.test(window.location.protocol) ? (
-    <meta httpEquiv="Content-Security-Policy" content="upgrade-insecure-requests" />
+    <meta httpEquiv='Content-Security-Policy' content='upgrade-insecure-requests' />
   ) : null;
   return (
     <>
       <Helmet title={`${(props.global && props.global.title) || defaultSetting.title}`}>
         <title>{`${(props.global && props.global.title) || defaultSetting.title}`}</title>
-        <link rel="shortcut icon" href={`${window.location.origin}/web4/${props.global && props.global.shortcutIcon}`} />
+        <link rel='shortcut icon'
+              href={`${window.location.origin}/web4/${props.global && props.global.shortcutIcon}`} />
         {metaSecurity}
-        <meta name="description" content={`${(props.global && props.global.title) || defaultSetting.title}`} />
+        <meta name='description' content={`${(props.global && props.global.title) || defaultSetting.title}`} />
       </Helmet>
       <Router basename={config.base || pkg.name.toLocaleLowerCase() || ''}>
         <Switch>
@@ -41,7 +46,7 @@ function App(props) {
 
 const mapStateToProps = state => ({
   global: state.getIn(['global', 'globalConfig']),
-  menu: state.getIn(['global', 'menu'])
+  menu: state.getIn(['global', 'menu']),
 });
 export default connect(
   mapStateToProps,

src/micro.js

@@ -62,10 +62,10 @@ export const initMicroApps = () => {
             micorConfig.dev :
             products;
 
-    registerMicroApps(
-        entrys.map(item => {
-            item.loader = loader;
-            item.props = {
+    const apps = entrys.map(item => {
+      return  {
+        ...item,
+        props: {
           emitter: window.share.event,
           baseRoot: item.name,
           event: event,
@@ -78,9 +78,16 @@ export const initMicroApps = () => {
           //createStoreage.get('globalConfig'),
           XMLHttpRequest: window.XMLHttpRequest,
           // offGlobalStateChange: actions.offGlobalStateChange
-            };
-            return item;
-        }), {
+        }
+      }
+    })
+
+   const microApps = apps.map((app => ({
+    ...app,
+    loader,
+   })))
+
+    registerMicroApps(microApps, {
         beforeLoad: [
             app => {
                 store.dispatch(actionCreators.updateMicroMounted(true));
@@ -208,7 +215,6 @@ export const initMicroApps = () => {
 };
 
 export const defaultApp = () => {
-    
   const globalStore = store.getState().toJS();
     // eslint-disable-next-line no-undef
     const config = window.globalConfig;
@@ -219,6 +225,10 @@ export const defaultApp = () => {
         let url = !config.home ?
         ((config.homepage === '' || _.isNull(config.homepage)) ? `/civbase/civweb4`: (`/civbase/${config.homepage.replace(/^\//, '')}`)) :  `/civbase/${config.homepage.replace(/^\//, '')}`;
         setDefaultMountApp(url);
+
+        window.history.pushState(null, '', url);
+
+        event.emit('visible', false);
     }
 };
 

src/pages/bootpage/panda/index.js

 // 云平台引导页
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { Space, Spin } from 'antd';
+import { Space, Spin, Progress } from 'antd';
 import classNames from 'classnames';
 import { connect } from 'react-redux';
 import { useIntl } from '@wisdom-utils/components';
@@ -16,44 +16,25 @@ import usingIcon from '@/assets/bootPage/using-icon.png';
 import { appService } from '@/api';
 
 const industries = [
-  { name: '供水', type: '供水', subTitle: 'WATER SUPPLY' },
-  { name: '农饮水', type: '农饮水', subTitle: 'RURAL POTABLE WATER' },
-  { name: '排水', type: '排水', subTitle: 'DRAINAGE' },
-  { name: '水利', type: '水利', subTitle: 'WATER CONSERVANCY' },
-  { name: '能源', type: '能源', subTitle: 'ENERGY SOURCES' },
-  { name: '高品质水', type: '高品质水', subTitle: 'HIGH QUALITY WATER' },
+  { name: '供水', type: '供水', subTitle: 'WATER SUPPLY' , color: 'rgb(16,104,239)'},
+  { name: '农饮水', type: '农饮水', subTitle: 'RURAL POTABLE WATER' , color: 'rgb(4,142,101)'},
+  { name: '排水', type: '排水', subTitle: 'DRAINAGE' , color: 'rgb(234,117,28)'},
+  { name: '水利', type: '水利', subTitle: 'WATER CONSERVANCY' , color: 'rgb(0,144,158)'},
+  { name: '能源', type: '能源', subTitle: 'ENERGY SOURCES', color: 'rgb(16,104,239)' },
+  { name: '高品质水', type: '高品质水', subTitle: 'HIGH QUALITY WATER' , color: 'rgb(16,104,239)'},
   // { name: '水资源', type: '水资源', subTitle: 'WATER RESOURCES' },
-  { name: '熊猫智能实验室', type: '实验室', subTitle: 'PANDA AI. LAB' },
-  { name: '水务大数据', type: '大数据', subTitle: 'WATER BIG DATA' },
-  { name: '熊猫新产品', type: '熊猫新产品', subTitle: "PANDA'S NEW PRODUCT" },
-  { name: '项目案例', type: '项目案例', subTitle: 'PROJECT CASE' },
+  { name: '熊猫智能实验室', type: '实验室', subTitle: 'PANDA AI. LAB', color: 'rgb(16,104,239)' },
+  { name: '水务大数据', type: '大数据', subTitle: 'WATER BIG DATA' , color: 'rgb(85,77,210)'},
+  { name: '熊猫新产品', type: '熊猫新产品', subTitle: "PANDA'S NEW PRODUCT" , color: 'rgb(12,103,205)'},
+  { name: '项目案例', type: '项目案例', subTitle: 'PROJECT CASE' , color: 'rgb(107,36,155)'},
 ];
-const renderIndustries = (config, callback) =>
-  industries.map(item => {
-    if (
-      config &&
-      config.userInfo &&
-      config.userInfo.Industries &&
-      config.userInfo.Industries instanceof Array &&
-      config.userInfo.Industries.indexOf(item.type) > -1
-    ) {
-      return (
-        <li className={styles.bootPageLi} key={item.type} onClick={event => callback(event, item.type)}>
-          <div className={styles.bootPageList}>
-            <div className={styles.listMain}>
-              <img src={require(`@/assets/bootPage/${item.type}.png`)} alt="" />
-              <span className={styles.bootPageName}>{item.name}</span>
-              <span className={styles.bootPageNameEng}>{item.subTitle}</span>
-            </div>
-          </div>
-        </li>
-      );
-    }
-  });
 
 // let loginAction = null;
 const BootPage = props => {
-  const [loadding, setLoadding] = useState(false);
+  const {visible} = props;
+  const [percentNum, setPercentNum] = useState(10);
+  const [currentType, setCurrentType] = useState('');
+  // const [loadding, setLoadding] = useState(false);
   const [hasRole, setHasRole] = useState(false);
   const [scale, setScale] = useState(1);
   const [loginAction, setAction] = useState(() => new LoginAction(props));
@@ -62,8 +43,11 @@ const BootPage = props => {
     { title: defaultSetting.title, id: '', pageName: '行业切换' },
     props.global.title || defaultSetting.title,
   );
+
   const handlePage = useCallback(
     (event, type) => {
+      setPercentNum(Math.ceil(Math.random()*50));
+
       event.persist();
       event.preventDefault();
 
@@ -73,7 +57,7 @@ const BootPage = props => {
         return;
       }
 
-      setLoadding(true);
+      // setLoadding(true);
       const config = props.global;
       // const loginAction = new LoginAction(props);
       config.uiwidgets = [];
@@ -82,9 +66,56 @@ const BootPage = props => {
       props.instance && props.instance.updateConfig(config);
       // props.instance && props.instance.getUserInfoAndConfig('', true, type);
       loginAction && loginAction.getUserInfoAndConfig('', true, type);
+
+       setCurrentType(type);
       },
     [loginAction, props.global.token, props.instance],
   );
+
+
+  const renderIndustries = (config, callback) =>
+    industries.map(item => {
+      if (
+        config &&
+        config.userInfo &&
+        config.userInfo.Industries &&
+        config.userInfo.Industries instanceof Array &&
+        config.userInfo.Industries.indexOf(item.type) > -1
+      ) {
+
+
+        return (
+          <li className={styles.bootPageLi} key={item.type} onClick={event => callback(event, item.type)}>
+            <div className={styles.bootPageList}>
+              <div className={styles.listMain}>
+                <img src={require(`@/assets/bootPage/${item.type}.png`)} alt="" />
+                <span className={styles.bootPageName}>{item.name}</span>
+                <span className={styles.bootPageNameEng}>{item.subTitle}</span>
+              </div>
+            </div>
+            {
+              currentType === item.type &&   <Progress
+                style={{width: '98%'}}
+                strokeColor={item.color}
+                percent={percentNum}
+                status="active"
+                format={percent => <span style={{color: '#fff'}}>{percent}%</span>}
+                className={styles.bootProgress}
+              />
+            }
+
+          </li>
+        );
+      }
+    });
+
+  useEffect(() => {
+    if(visible){
+      setCurrentType('');
+      setPercentNum(10);
+    }
+  } , [visible])
+
   useEffect(() => {
     // eslint-disable-next-line no-use-before-define
     handleResize();
@@ -100,11 +131,16 @@ const BootPage = props => {
     window.addEventListener('resize', handleResize);
 
     const handleToggleIndustry = event => {
-      setLoadding(false);
-      props.history.push(`/?client=${props.global.client}`);
+
+      // props.history.push(`/?client=${props.global.client}`);
       defaultApp();
+
       // window.share.event.emit('triggerMicro', props.global);
       props.updateCurrentIndex(0);
+
+      setPercentNum(100);
+
+      // setLoadding(false);
     };
     loginAction.events.on('toggleIndustry', handleToggleIndustry);
     return () => {
@@ -114,7 +150,7 @@ const BootPage = props => {
   }, [loginAction.events, props]);
 
   const [IndustryNum, setIndustryNum] = useState(0);
-  const renderIndustr = useMemo(() => renderIndustries(props.global, handlePage), [handlePage, props.global.token]);
+  const renderIndustr = useMemo(() => renderIndustries(props.global, handlePage), [handlePage, props.global.token, currentType, percentNum]);
   useEffect(() => {
     const NewIndustryNum =
       props.global && props.global.userInfo && props.global.userInfo.Industries
@@ -172,9 +208,9 @@ const BootPage = props => {
             {renderIndustr}
           </ul>
         </section>
-        <Space className={styles.abs}>
-          <Spin spinning={loadding} size="large" />
-        </Space>
+        {/*<Space className={styles.abs}>*/}
+        {/*  <Spin spinning={loadding} size="large" />*/}
+        {/*</Space>*/}
       </div>
       {hasRole ? (
         <div className={styles.cloudMonitorBtns}>

src/pages/bootpage/panda/index.less

@@ -61,6 +61,7 @@
         transition: all .5s ease-out;
         padding-top: 10px;
         .bootPageLi {
+          position: relative;
           width: 298px;
           height: 268.8px;
           margin: 10px;
@@ -168,6 +169,11 @@
       height: 100%;
     }
   }
+
+  .bootProgress {
+    position: absolute;
+    bottom: -5px;
+  }
 }
 
 @media screen and (max-width: 1440px) {

src/render.js

@@ -265,7 +265,8 @@ export const AppInitState = () => {
   initAppTheme();
 }
 
-const RootContainer = () => {
+const RootContainer = (props) => {
+  const { loading } = props;
 
   useEffect(() => {
     AppInitState();
@@ -275,43 +276,46 @@ const RootContainer = () => {
     ...{
       prefixCls: customPrefixCls,
       theme: {
-        "root-entry-name": "default",
+        'root-entry-name': 'default',
         ...getThemeVariables({}),
         primaryColor: defaultSetting.primaryColor,
       },
-    }
-  }
+    },
+  };
 
-  if(finalConfig.prefixCls) {
+  if (finalConfig.prefixCls) {
     Modal.config({
-      rootPrefixCls: customPrefixCls
+      rootPrefixCls: customPrefixCls,
     });
     message.config({
-      rootPrefixCls: `${finalConfig.prefixCls}-message`
+      rootPrefixCls: `${finalConfig.prefixCls}-message`,
     });
     notification.config({
-      rootPrefixCls: `${finalConfig.prefixCls}-notification`
+      rootPrefixCls: `${finalConfig.prefixCls}-notification`,
     });
   }
 
   return React.createElement(Provider, {
-    store: store
+    store: store,
   }, React.createElement(ConnectedRouter, {
-    history: history
+    history: history,
   }, React.createElement(LocaleContainer, {
-    prefixCls: customPrefixCls
+    prefixCls: customPrefixCls,
   }, React.createElement(ConfigProvider, {
-    prefixCls: customPrefixCls
-  }, React.createElement(Container, null, React.createElement(App))))))
-}
+    prefixCls: customPrefixCls,
+  }, React.createElement(Container, null, React.createElement(App , {
+    loading,
+  }))))));
+};
+
 
+export const render = ({ loading }) => {
 
-export const render = () => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  ReactDOM.render(<RootContainer/>, MOUNT_NODE);
+  ReactDOM.render(<RootContainer loading={loading}  />, MOUNT_NODE);
 };
 
 // updateTheme('#ff9600');
-const loader = (appContent, loading) => render({ appContent, loading });
+const loader = (loading) => render({ loading });
 
 export default loader;

src/routes/config.js

@@ -41,10 +41,10 @@ export const dyRoutes = (routes, layout, theme) => {
           },
         ],
       },
-      {
-        path: '/industry',
-        component: BootPage,
-      },
+      // {
+      //   path: '/industry',
+      //   component: BootPage,
+      // },
       {
         path: '/cloud/analysis/using',
         component: UsingAnalysis,