From 4086422ed2358f94775b16898b1e00ff4510cd3b Mon Sep 17 00:00:00 2001
From: "gao.zhiyuan" <gao.zhiyuan@free-sun.com.cn>
Date: Mon, 15 Aug 2022 09:43:46 +0800
Subject: [PATCH] microApp

---
 code/VideoAccess-VCMP/web/client/index.ejs    |  2 +-
 code/VideoAccess-VCMP/web/client/index.html   |  6 +-
 .../web/client/src/components/index.js        |  2 +-
 .../client/src/components/skeletonScreen.jsx  | 26 +++----
 .../VideoAccess-VCMP/web/client/src/index.jsx |  6 +-
 .../web/client/src/layout/index.jsx           | 38 +++++-----
 .../web/client/src/public-path.js             |  5 ++
 .../equipmentWarehouse/containers/camera.jsx  |  1 -
 .../src/sections/microApp/actions/index.js    |  5 ++
 .../src/sections/microApp/containers/index.js |  5 ++
 .../sections/microApp/containers/microApp.jsx | 24 +++++++
 .../web/client/src/sections/microApp/index.js | 15 ++++
 .../client/src/sections/microApp/nav-item.jsx | 13 ++++
 .../src/sections/microApp/reducers/index.js   |  5 ++
 .../client/src/sections/microApp/routes.js    | 12 ++++
 .../offline/containers/statuscode.jsx         |  2 -
 .../web/middlewares/webpack-dev.js            | 71 +++++++++++--------
 code/VideoAccess-VCMP/web/package.json        |  5 +-
 code/VideoAccess-VCMP/web/webpack.config.js   |  5 +-
 19 files changed, 178 insertions(+), 70 deletions(-)
 create mode 100644 code/VideoAccess-VCMP/web/client/src/public-path.js
 create mode 100644 code/VideoAccess-VCMP/web/client/src/sections/microApp/actions/index.js
 create mode 100644 code/VideoAccess-VCMP/web/client/src/sections/microApp/containers/index.js
 create mode 100644 code/VideoAccess-VCMP/web/client/src/sections/microApp/containers/microApp.jsx
 create mode 100644 code/VideoAccess-VCMP/web/client/src/sections/microApp/index.js
 create mode 100644 code/VideoAccess-VCMP/web/client/src/sections/microApp/nav-item.jsx
 create mode 100644 code/VideoAccess-VCMP/web/client/src/sections/microApp/reducers/index.js
 create mode 100644 code/VideoAccess-VCMP/web/client/src/sections/microApp/routes.js
diff --git a/code/VideoAccess-VCMP/web/client/index.ejs b/code/VideoAccess-VCMP/web/client/index.ejs
index d70db80..7f040c3 100644
--- a/code/VideoAccess-VCMP/web/client/index.ejs
+++ b/code/VideoAccess-VCMP/web/client/index.ejs
@@ -11,7 +11,7 @@
 </head>
 
 <body>
-   <div id='App'></div>
+   <div id='VcmpApp'></div>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/index.html b/code/VideoAccess-VCMP/web/client/index.html
index e67994b..dd7ed35 100644
--- a/code/VideoAccess-VCMP/web/client/index.html
+++ b/code/VideoAccess-VCMP/web/client/index.html
@@ -11,12 +11,12 @@
 </head>
 
 <body>
-    <div id='App'></div>
+    <div id='VcmpApp'></div>
 
     <!-- Webpack -->
     <script type="text/javascript" src="http://localhost:5001/client/build/app.js"></script>
     <!-- Vite -->
-    <script type="module">
+    <!-- <script type="module">
         import RefreshRuntime from "http://localhost:5002/@react-refresh"
         RefreshRuntime.injectIntoGlobalHook(window)
         window.$RefreshReg$ = () => { }
@@ -24,7 +24,7 @@
         window.__vite_plugin_react_preamble_installed__ = true
         const global = window
     </script>
-    <script type="module" src="http://localhost:5002/src/index.jsx"></script>
+    <script type="module" src="http://localhost:5002/src/index.jsx"></script> -->
     <!-- Vite End -->
     <script>
         //过滤掉一些无用的警告、没有价值的报错
diff --git a/code/VideoAccess-VCMP/web/client/src/components/index.js b/code/VideoAccess-VCMP/web/client/src/components/index.js
index e2c0d8f..cd0fffe 100644
--- a/code/VideoAccess-VCMP/web/client/src/components/index.js
+++ b/code/VideoAccess-VCMP/web/client/src/components/index.js
@@ -5,7 +5,7 @@ import ReminderBox from './reminderBox'
 import VideoPlay from './videoPlayer/videoPlay'
 import VideoPlayModal from './videoPlayer/videoPlayModal'
 import Setup from './setup'
-import {SkeletonScreen} from './skeletonScreen'
+import { SkeletonScreen } from './skeletonScreen'
 
 export {
    SimpleFileDownButton,
diff --git a/code/VideoAccess-VCMP/web/client/src/components/skeletonScreen.jsx b/code/VideoAccess-VCMP/web/client/src/components/skeletonScreen.jsx
index e096eec..dc6c2e9 100644
--- a/code/VideoAccess-VCMP/web/client/src/components/skeletonScreen.jsx
+++ b/code/VideoAccess-VCMP/web/client/src/components/skeletonScreen.jsx
@@ -2,17 +2,17 @@ import React, { useState, useEffect } from "react";
 import { Skeleton } from "@douyinfe/semi-ui";
 
 
-export function SkeletonScreen() {
-  return <>
-  <Skeleton.Title style={{width: "95%",height:24,margin:"8px 20px"}} />
-  <Skeleton.Title style={{width: "80%",height:28,margin:"16px 20px"}} />
-  <Skeleton.Title style={{width: "50%",height:28,margin:"16px 20px"}} />
-  <Skeleton.Title style={{width: "60%",height:28,margin:"16px 20px"}} />
-  <Skeleton.Title style={{width: "90%",height:28,margin:"16px 20px"}} />
-  <Skeleton.Title style={{width: "70%",height:28,margin:"16px 20px"}} />
-  <Skeleton.Title style={{width: "50%",height:28,margin:"16px 20px"}} />
-  <Skeleton.Title style={{width: "40%",height:28,margin:"16px 20px"}} />
-  <Skeleton.Title style={{width: "60%",height:28,margin:"16px 20px"}} />
-  <Skeleton.Title style={{width: "40%",height:28,margin:"16px 20px"}} />
-  </>
+export function SkeletonScreen () {
+   return <>
+      <Skeleton.Title style={{ width: "95%", height: 24, margin: "8px 20px" }} />
+      <Skeleton.Title style={{ width: "80%", height: 28, margin: "16px 20px" }} />
+      <Skeleton.Title style={{ width: "50%", height: 28, margin: "16px 20px" }} />
+      <Skeleton.Title style={{ width: "60%", height: 28, margin: "16px 20px" }} />
+      <Skeleton.Title style={{ width: "90%", height: 28, margin: "16px 20px" }} />
+      <Skeleton.Title style={{ width: "70%", height: 28, margin: "16px 20px" }} />
+      <Skeleton.Title style={{ width: "50%", height: 28, margin: "16px 20px" }} />
+      <Skeleton.Title style={{ width: "40%", height: 28, margin: "16px 20px" }} />
+      <Skeleton.Title style={{ width: "60%", height: 28, margin: "16px 20px" }} />
+      <Skeleton.Title style={{ width: "40%", height: 28, margin: "16px 20px" }} />
+   </>
 }
diff --git a/code/VideoAccess-VCMP/web/client/src/index.jsx b/code/VideoAccess-VCMP/web/client/src/index.jsx
index 9a2559a..b53a142 100644
--- a/code/VideoAccess-VCMP/web/client/src/index.jsx
+++ b/code/VideoAccess-VCMP/web/client/src/index.jsx
@@ -1,8 +1,12 @@
 'use strict';
 
+import './public-path'
 import React from 'react';
 import { render } from 'react-dom';
 import App from './app';
 import './index.less';
+import microApp from '@micro-zoe/micro-app'
 
-render((<App projectName="飞尚物联" />), document.getElementById('App'));
\ No newline at end of file
+microApp.start()
+
+render((<App projectName="飞尚物联" />), document.getElementById('VcmpApp'));
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/layout/index.jsx b/code/VideoAccess-VCMP/web/client/src/layout/index.jsx
index 7620186..874d7d5 100644
--- a/code/VideoAccess-VCMP/web/client/src/layout/index.jsx
+++ b/code/VideoAccess-VCMP/web/client/src/layout/index.jsx
@@ -6,7 +6,7 @@ import { Provider } from 'react-redux';
 import { createBrowserHistory } from 'history';
 import { ConnectedRouter } from 'connected-react-router'
 import { Layout, NoMatch } from './containers';
-import { Switch, Route } from "react-router-dom";
+import { BrowserRouter, Switch, Route } from "react-router-dom";
 import { ConfigProvider } from '@douyinfe/semi-ui';
 import layoutActions from './actions';
 import zhCN from '@douyinfe/semi-ui/lib/es/locale/source/zh_CN';
@@ -174,22 +174,26 @@ const Root = props => {
             store ?
                <ConfigProvider locale={zhCN}>
                   <Provider store={store}>
-                     <ConnectedRouter history={history}>
-                        <Switch>
-                           {outerRoutes}
-                           <Layout
-                              history={history}
-                              routes={innnerRoutes}
-                              authCrossLoading={authCrossLoading}
-                           >
-                              {combineRoutes}
-                           </Layout>
-                           <Route
-                              path={'*'}
-                              component={NoMatch}
-                           />
-                        </Switch>
-                     </ConnectedRouter>
+                     <BrowserRouter basename={window.__MICRO_APP_BASE_ROUTE__ || '/'}>
+                        <ConnectedRouter history={history}>
+
+                           <Switch>
+                              {outerRoutes}
+                              <Layout
+                                 history={history}
+                                 routes={innnerRoutes}
+                                 authCrossLoading={authCrossLoading}
+                              >
+                                 {combineRoutes}
+                              </Layout>
+                              <Route
+                                 path={'*'}
+                                 component={NoMatch}
+                              />
+                           </Switch>
+
+                        </ConnectedRouter>
+                     </BrowserRouter>
                   </Provider>
                </ConfigProvider>
                : ''
diff --git a/code/VideoAccess-VCMP/web/client/src/public-path.js b/code/VideoAccess-VCMP/web/client/src/public-path.js
new file mode 100644
index 0000000..fffe5ba
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/public-path.js
@@ -0,0 +1,5 @@
+// __MICRO_APP_ENVIRONMENT__和__MICRO_APP_PUBLIC_PATH__是由micro-app注入的全局变量
+if (window.__MICRO_APP_ENVIRONMENT__) {
+   // eslint-disable-next-line
+   __webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__
+ }
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx
index 47b964e..26c3678 100644
--- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx
+++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx
@@ -19,7 +19,6 @@ import CameraModal from "../components/cameraModal";
 import RemarksModal from "../components/remarksModal";
 import { Setup } from "$components";
 import SideSheets from "../components/sideSheet";
-import { skeletonScreen } from "../../../components/skeletonScreen";
 import { accessType } from "./nvr";
 
 const CameraHeader = (props) => {
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/microApp/actions/index.js b/code/VideoAccess-VCMP/web/client/src/sections/microApp/actions/index.js
new file mode 100644
index 0000000..77dbf80
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/sections/microApp/actions/index.js
@@ -0,0 +1,5 @@
+'use strict';
+
+export default {
+   
+}
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/microApp/containers/index.js b/code/VideoAccess-VCMP/web/client/src/sections/microApp/containers/index.js
new file mode 100644
index 0000000..2466c39
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/sections/microApp/containers/index.js
@@ -0,0 +1,5 @@
+'use strict';
+
+import MicroApp from './microApp';
+
+export { MicroApp };
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/microApp/containers/microApp.jsx b/code/VideoAccess-VCMP/web/client/src/sections/microApp/containers/microApp.jsx
new file mode 100644
index 0000000..ed9b146
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/sections/microApp/containers/microApp.jsx
@@ -0,0 +1,24 @@
+import React, { useEffect } from 'react';
+import { connect } from 'react-redux';
+import { Spin, Card } from '@douyinfe/semi-ui';
+import '../style.less'
+const { Meta } = Card;
+
+const Example = (props) => {
+   const { dispatch, actions, } = props
+
+   return (
+      <Spin>
+         MicroApp
+      </Spin>
+   )
+}
+
+function mapStateToProps (state) {
+   const { auth, global } = state;
+   return {
+
+   };
+}
+
+export default connect(mapStateToProps)(Example);
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/microApp/index.js b/code/VideoAccess-VCMP/web/client/src/sections/microApp/index.js
new file mode 100644
index 0000000..cfcb401
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/sections/microApp/index.js
@@ -0,0 +1,15 @@
+'use strict';
+
+import reducers from './reducers';
+import routes from './routes';
+import actions from './actions';
+import { getNavItem } from './nav-item';
+
+export default {
+   key: 'microApp',
+   name: 'MicroApp',
+   reducers: reducers,
+   routes: routes,
+   actions: actions,
+   getNavItem: getNavItem
+};
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/microApp/nav-item.jsx b/code/VideoAccess-VCMP/web/client/src/sections/microApp/nav-item.jsx
new file mode 100644
index 0000000..3ce11c2
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/sections/microApp/nav-item.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { IconCode } from '@douyinfe/semi-icons';
+
+export function getNavItem (user, dispatch) {
+   return (
+      [
+         {
+            itemKey: 'MicroApp', text: 'MicroApp', icon: <IconCode />,
+            to: '/microApp',
+         },
+      ]
+   );
+}
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/microApp/reducers/index.js b/code/VideoAccess-VCMP/web/client/src/sections/microApp/reducers/index.js
new file mode 100644
index 0000000..7ed1088
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/sections/microApp/reducers/index.js
@@ -0,0 +1,5 @@
+'use strict';
+
+export default {
+
+}
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/microApp/routes.js b/code/VideoAccess-VCMP/web/client/src/sections/microApp/routes.js
new file mode 100644
index 0000000..f717bbd
--- /dev/null
+++ b/code/VideoAccess-VCMP/web/client/src/sections/microApp/routes.js
@@ -0,0 +1,12 @@
+'use strict';
+import { MicroApp, } from './containers';
+
+export default [{
+   type: 'inner',
+   route: {
+      path: '/microApp',
+      key: 'microApp',
+      breadcrumb: 'microApp',
+      component: MicroApp,
+   }
+}];
\ No newline at end of file
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/offline/containers/statuscode.jsx b/code/VideoAccess-VCMP/web/client/src/sections/offline/containers/statuscode.jsx
index e14f667..f8036a9 100644
--- a/code/VideoAccess-VCMP/web/client/src/sections/offline/containers/statuscode.jsx
+++ b/code/VideoAccess-VCMP/web/client/src/sections/offline/containers/statuscode.jsx
@@ -8,7 +8,6 @@ import {Setup} from "$components";
 
 import ProgrammeModal from "../components/programmeModal";
 import NotesModal from "../components/notesModal";
-// import { skeletonScreen } from "../components/skeletonScreen";
 
 export const accessType = {
     "yingshi": "萤石云",
@@ -463,7 +462,6 @@ const Statuscode = (props) => {
                 </div>
                 <Skeleton
                     loading={loading}
-                    // placeholder={skeletonScreen()}
                     active={true}
                 >
                 <Table
diff --git a/code/VideoAccess-VCMP/web/middlewares/webpack-dev.js b/code/VideoAccess-VCMP/web/middlewares/webpack-dev.js
index 7e7326c..8cb664a 100644
--- a/code/VideoAccess-VCMP/web/middlewares/webpack-dev.js
+++ b/code/VideoAccess-VCMP/web/middlewares/webpack-dev.js
@@ -9,34 +9,49 @@ const url = require('url');
 const compiler = webpack(devConfig);
 
 module.exports = {
-    entry: function (app, router, opts) {
-        app.use(proxy('http://localhost:5001', {
-            filter: function (ctx) {
-                return /\/build/.test(url.parse(ctx.url).path);
-            },
-            proxyReqPathResolver: function (ctx) {
-                return 'client' + url.parse(ctx.url).path;
-            }
-        }));
+   entry: function (app, router, opts) {
+      app.use(proxy('http://localhost:5001', {
+         filter: function (ctx) {
+            return /\/build/.test(url.parse(ctx.url).path);
+         },
+         proxyReqPathResolver: function (ctx) {
+            return 'client' + url.parse(ctx.url).path;
+         }
+      }));
 
-        app.use(proxy('http://localhost:5001', {
-            filter: function (ctx) {
-                return /\/$/.test(url.parse(ctx.url).path);
-            },
-            proxyReqPathResolver: function (ctx) {
-                return 'client/build/index.html';
-            }
-        }));
+      app.use(proxy('http://localhost:5001', {
+         filter: function (ctx) {
+            return /\/$/.test(url.parse(ctx.url).path);
+         },
+         proxyReqPathResolver: function (ctx) {
+            return 'client/build/index.html';
+         }
+      }));
 
-        const server = express();
-        server.use(middleware(compiler));
-        // server.use(require("webpack-hot-middleware")(compiler));
-        server.listen('5001', function (err) {
-            if (err) {
-                console.error(err);
-            } else {
-                console.info(`webpack-dev listen 5001`);
-            }
-        })
-    }
+      const server = express();
+
+      // server.use(require("webpack-hot-middleware")(compiler));
+
+      server.all("*", function (req, res, next) {
+         //设置允许跨域的域名，*代表允许任意域名跨域
+         res.header("Access-Control-Allow-Origin", "*");
+         //允许的header类型
+         res.header("Access-Control-Allow-Headers", "content-type");
+         //跨域允许的请求方式 
+         res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
+         if (req.method == 'OPTIONS')
+            res.sendStatus(200); //让options尝试请求快速结束
+         else
+            next();
+      });
+
+      server.use(middleware(compiler));
+      server.listen('5001', function (err) {
+         if (err) {
+            console.error(err);
+         } else {
+            console.info(`webpack-dev listen 5001`);
+         }
+      })
+   }
 };
diff --git a/code/VideoAccess-VCMP/web/package.json b/code/VideoAccess-VCMP/web/package.json
index 4a567e9..98da2dd 100644
--- a/code/VideoAccess-VCMP/web/package.json
+++ b/code/VideoAccess-VCMP/web/package.json
@@ -10,7 +10,7 @@
       "start-params": "node server -p 5000 -u http://localhost:4000 --apiVcmpUrl http://localhost:4000 --apiAuthUrl http://localhost:4200 --apiAnxinyunUrl http://localhost:4100  --iotAuthWeb http://localhost:5200 --iotVideoServer http://221.230.55.27:8081",
       "deploy": "export NODE_ENV=production&& npm run build && node server",
       "build-dev": "cross-env NODE_ENV=development&&webpack --config webpack.config.js",
-      "build": "export NODE_ENV=production&&webpack --config webpack.config.prod.js"
+      "build": "cross-env NODE_ENV=production&&webpack --config webpack.config.prod.js"
    },
    "keywords": [
       "app"
@@ -50,8 +50,9 @@
       "@douyinfe/semi-ui": "^2.8.0",
       "@douyinfe/semi-webpack-plugin": "^2.13.0",
       "@fs/attachment": "^1.0.0",
+      "@micro-zoe/micro-app": "^1.0.0-alpha.1",
       "@peace/components": "0.0.35",
-      "@peace/utils": "^0.0.48",
+      "@peace/utils": "0.0.53",
       "@semi-bot/semi-theme-fscamera": "^1.0.0",
       "@vitejs/plugin-react": "^1.3.1",
       "@vitejs/plugin-react-refresh": "^1.3.6",
diff --git a/code/VideoAccess-VCMP/web/webpack.config.js b/code/VideoAccess-VCMP/web/webpack.config.js
index 573f64e..765dd17 100644
--- a/code/VideoAccess-VCMP/web/webpack.config.js
+++ b/code/VideoAccess-VCMP/web/webpack.config.js
@@ -12,6 +12,9 @@ module.exports = {
    devtool: 'source-map',
    devServer: {
       historyApiFallback: true,
+      // 为 MicroApp 配置跨域
+      'Access-Control-Allow-Origin': '*',
+      allowedHosts: ['127.0.0.1:5100'],
    },
    entry: {
       app: ["@babel/polyfill", PATHS.app]
@@ -39,7 +42,7 @@ module.exports = {
          theme: {
             name: '@semi-bot/semi-theme-fscamera',
             include: '~@semi-bot/semi-theme-fscamera/scss/local.scss'
-        }
+         }
       }),
    ],
    module: {
