microApp

3 years ago · 4086422ed2
19 changed files with 178 additions and 70 deletions
--- 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>
--- 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>
        //过滤掉一些无用的警告、没有价值的报错
--- 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,
--- 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() {
+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"}} />
+      <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" }} />
   </>
 }
--- 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'));
+microApp.start()
+
+render((<App projectName="飞尚物联" />), document.getElementById('VcmpApp'));
--- 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,7 +174,9 @@ const Root = props => {
            store ?
               <ConfigProvider locale={zhCN}>
                  <Provider store={store}>
+                     <BrowserRouter basename={window.__MICRO_APP_BASE_ROUTE__ || '/'}>
                        <ConnectedRouter history={history}>
+
                           <Switch>
                              {outerRoutes}
                              <Layout
@ -189,7 +191,9 @@ const Root = props => {
                                 component={NoMatch}
                              />
                           </Switch>
+
                        </ConnectedRouter>
+                     </BrowserRouter>
                  </Provider>
               </ConfigProvider>
               : ''
--- a/code/VideoAccess-VCMP/web/client/src/public-path.js
+++ 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__
+ }
--- 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) => {
--- a/code/VideoAccess-VCMP/web/client/src/sections/microApp/actions/index.js
+++ b/code/VideoAccess-VCMP/web/client/src/sections/microApp/actions/index.js
@ -0,0 +1,5 @@
+'use strict';
+
+export default {
+   
+}
--- a/code/VideoAccess-VCMP/web/client/src/sections/microApp/containers/index.js
+++ b/code/VideoAccess-VCMP/web/client/src/sections/microApp/containers/index.js
@ -0,0 +1,5 @@
+'use strict';
+
+import MicroApp from './microApp';
+
+export { MicroApp };
--- a/code/VideoAccess-VCMP/web/client/src/sections/microApp/containers/microApp.jsx
+++ 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);
--- a/code/VideoAccess-VCMP/web/client/src/sections/microApp/index.js
+++ 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
+};
--- a/code/VideoAccess-VCMP/web/client/src/sections/microApp/nav-item.jsx
+++ 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',
+         },
+      ]
+   );
+}
--- a/code/VideoAccess-VCMP/web/client/src/sections/microApp/reducers/index.js
+++ b/code/VideoAccess-VCMP/web/client/src/sections/microApp/reducers/index.js
@ -0,0 +1,5 @@
+'use strict';
+
+export default {
+
+}
--- a/code/VideoAccess-VCMP/web/client/src/sections/microApp/routes.js
+++ 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,
+   }
+}];
--- 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
--- a/code/VideoAccess-VCMP/web/middlewares/webpack-dev.js
+++ b/code/VideoAccess-VCMP/web/middlewares/webpack-dev.js
@ -29,8 +29,23 @@ module.exports = {
      }));

      const server = express();
-        server.use(middleware(compiler));
+
      // 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);
--- 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",
--- 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]