feat: add babel plugin and nest iframe

internals/webpack/webpack.base.babel.js

@@ -24,10 +24,10 @@ module.exports = options => ({
           // options: options.babelQuery,
           options: {
             presets: ['@babel/preset-typescript'],
+            plugins: ['@babel/plugin-proposal-optional-chaining'],
           },
         },
       },
-
       {
         // Preprocess our own .css files
         // This is the place to add your own loaders (e.g. sass/less etc.)

package.json

@@ -82,6 +82,7 @@
     "babel-core": "7.0.0-bridge.0"
   },
   "dependencies": {
+    "@babel/plugin-proposal-optional-chaining": "^7.12.1",
     "@babel/polyfill": "7.4.3",
     "@babel/preset-typescript": "^7.12.1",
     "@babel/runtime": "^7.10.5",

src/components/BaseFramContainer/index.js

+import { isDev } from '@/utils/tools';
+import { PageContainer } from '@ant-design/pro-layout';
+import React from 'react';
+import styles from './index.less';
+
+/**
+ * 嵌套iframe的组件
+ * @param {*} props 可在路由配置里面配置url参数
+ */
+const FrameContainer = props => {
+  const { route } = props;
+  const url = route.url || props.url;
+  return (
+    <PageContainer
+      className={styles.container}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        height: 'calc(100% + 24px)',
+      }}
+    >
+      <iframe
+        title="iframe"
+        src={`${
+          isDev ? process.env.PROXY : window.location.origin
+        }${url}`.replace('//', '/')}
+      />
+    </PageContainer>
+  );
+};
+
+export default FrameContainer;

src/components/BaseFramContainer/index.less

+.container{
+    // background: salmon;
+    .ant-pro-grid-content{
+        flex: 1;
+        .ant-pro-grid-content-children{
+            height: 100%;
+            &>div{
+                height: 100%;
+                .ant-pro-page-container-children-content{
+                    height: 100%;
+                    iframe{
+                        width: 100%;
+                        height: 100%;
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file

src/containers/App/store/actions.js

@@ -3,6 +3,7 @@ import {
   LOAD_REPOS_ERROR,
   LOAD_REPOS_SUCCESS,
   SET_AUTHORITY,
+  SET_USER_MODE,
 } from './constants';
 
 export function loadRepos() {
@@ -32,3 +33,10 @@ export function setAuth(auth) {
     auth,
   };
 }
+
+export function setUserMode(userMode) {
+  return {
+    type: SET_USER_MODE,
+    userMode,
+  };
+}

src/containers/App/store/constants.js

@@ -2,3 +2,4 @@ export const LOAD_REPOS = 'App/LOAD_REPOS';
 export const LOAD_REPOS_SUCCESS = 'App/LOAD_REPOS_SUCCESS';
 export const LOAD_REPOS_ERROR = 'App/LOAD_REPOS_ERROR';
 export const SET_AUTHORITY = 'App/SET_AUTHORITY';
+export const SET_USER_MODE = 'App/SET_USER_MODE';

src/containers/App/store/index.js

@@ -9,11 +9,13 @@ const mapState = store => {
   return {
     global: storeObj.global,
     auth: storeObj.global.auth,
+    userMode: storeObj.global.userMode,
   };
 };
 const mapDispatch = dispatch => ({
   setAuth: auth => dispatch(actionCreators.setAuth(auth)),
   logout: () => dispatch(actionCreators.setAuth([])),
+  setUserMode: userMode => dispatch(actionCreators.setUserMode(userMode)),
 });
 
 const appConnector = connect(

src/containers/App/store/reducer.js

@@ -5,6 +5,7 @@ import {
   LOAD_REPOS_ERROR,
   LOAD_REPOS_SUCCESS,
   SET_AUTHORITY,
+  SET_USER_MODE,
 } from './constants';
 
 export const initialState = fromJS({
@@ -15,6 +16,7 @@ export const initialState = fromJS({
   userData: {
     repositories: false,
   },
+  userMode: '',
 });
 
 /* eslint-disable default-case, no-param-reassign */
@@ -46,6 +48,10 @@ const appReducer = (state = initialState, action) => {
       return state.merge({
         auth: action.auth,
       });
+    case SET_USER_MODE:
+      return state.merge({
+        userMode: action.userMode,
+      });
     default:
       return state;
   }

src/pages/user/login/index.js

@@ -21,7 +21,7 @@ const LoginMessage = ({ content }) => (
 );
 
 const Login = props => {
-  const { userLogin = {}, submitting, setAuth } = props;
+  const { userLogin = {}, submitting, setAuth, setUserMode } = props;
   const { status, type: loginType } = userLogin;
   const history = useHistory();
   // const [autoLogin, setAutoLogin] = useState(true);
@@ -36,7 +36,8 @@ const Login = props => {
         console.log(result);
         if (result.success === true && result.pass === true) {
           const { userMode } = result;
-          localStorage.setItem('userMode', userMode);
+          // localStorage.setItem('userMode', userMode);
+          setUserMode(userMode);
           if (userMode === USER_MODE.ADMIN || userMode === USER_MODE.SUPER) {
             const authority = [AUTHORITY.LOGIN, AUTHORITY[userMode]];
             setAuthority(authority);

src/pages/webConfig/index.js

 import React, { useEffect, useState } from 'react';
 import { PageContainer } from '@ant-design/pro-layout';
 import { Tabs } from 'antd';
+import { getWebModuleTree } from '@/services/webConfig/api';
 import menuTreeMock from '@/services/mocks/web4site';
 import styles from './index.less';
 import SiteConfig from './components/siteConfigDrawer';
+import { appConnector } from '@/containers/App/store';
 const { TabPane } = Tabs;
 
-const getMenuTree = () =>
-  new Promise((r, j) => {
-    setTimeout(() => {
-      r(menuTreeMock);
-    }, 1000);
-  });
+const getMenuTree = userMode =>
+  getWebModuleTree(userMode).then(res => console.log(res));
 
 const WebConfigPage = props => {
   const [configVisible, setConfigVisible] = useState(false);
   const [loading, setLoading] = useState(false);
-  const [menuTree, setMeneTree] = useState({ children: [] });
+  const [menuTree, setMenuTree] = useState({ children: [] });
   const [configObj, setConfigObj] = useState({});
   const renderPage = () => {};
 
   useEffect(() => {
-    getMenuTree().then(res => {
-      setMeneTree(res);
+    getMenuTree(props.userMode).then(res => {
+      setMenuTree(res);
       setLoading(false);
     });
   }, []);
@@ -51,7 +49,7 @@ const WebConfigPage = props => {
     <PageContainer loading={loading}>
       <div className={styles.webConfigContainer}>
         <Tabs type="editable-card" onEdit={onEdit}>
-          {menuTree.children.map(renderTabPane)}
+          {menuTree?.children?.map(renderTabPane)}
         </Tabs>
         <SiteConfig
           visible={configVisible}
@@ -63,4 +61,4 @@ const WebConfigPage = props => {
   );
 };
 
-export default WebConfigPage;
+export default appConnector(WebConfigPage);

src/routes/config.js

@@ -27,6 +27,7 @@ import WebConfigPage from '@/pages/webConfig';
 import AppConfigPage from '@/pages/appConfig';
 import MobileConfigPage from '@/pages/mobileConfig';
 import { USER_MODE } from '@/utils/constants';
+import BaseFramContainer from '@/components/BaseFramContainer';
 const iconStyle = { verticalAlign: '0.125em' };
 
 const superAuthority = [USER_MODE.SUPER];
@@ -145,12 +146,16 @@ export default {
             {
               path: '/platformCenter/vedio',
               name: '视频管理',
-              component: Welcome,
+              url:
+                ' http://192.168.10.151:8055/web4/?widget=product/oms/VideoConfig/VideoConfig|hideMap=true&videoType=萤石云',
+              component: BaseFramContainer,
             },
             {
               path: '/platformCenter/emq',
               name: '宿主管理',
-              component: Welcome,
+              url:
+                '/web4/?widget=product/oms/MqttConfig/MqttConfig.js|hideMap=true',
+              component: BaseFramContainer,
             },
             {
               path: '/platformCenter/dictionary',

src/services/webConfig/api.js

+import qs from 'qs';
+import { get, PUBLISH_SERVICE } from '../index';
+
+export const getWebModuleTree = userMode =>
+  get(
+    `${PUBLISH_SERVICE}/PlatformCenter/WebModuleTree?${qs.stringify({
+      userMode,
+    })}`,
+  );

src/utils/request/index.js

@@ -25,6 +25,15 @@ const getMatchedConfig = requestConfig => {
   }
 };
 
+axios.interceptors.request.use( function (request){
+  request.headers.token = 'token123'
+  return request
+}, function (error) {
+  // Any status codes that falls outside the range of 2xx cause this function to trigger
+  // Do something with response error
+  return Promise.reject(error);
+})
+
 export const request = (config, ctx) => {
   const {
     url,