MicroApp Test

2 years ago · 541e6fd9e9
17 changed files with 220 additions and 94 deletions
--- a/code/web/client/index.ejs
+++ b/code/web/client/index.ejs
@ -9,7 +9,7 @@
 </head>

 <body>
-    <div id='App'></div>
+    <div id='IotAuthApp'></div>
 </body>

 </html>
--- a/code/web/client/index.html
+++ b/code/web/client/index.html
@ -9,12 +9,12 @@
 </head>

 <body>
-    <div id='App'></div>
+    <div id='IotAuthApp'></div>

    <!-- Webpack -->
    <script type="text/javascript" src="http://localhost:5201/client/build/app.js"></script>
    <!-- Vite -->
-    <script type="module">
+    <!-- <script type="module">
        import RefreshRuntime from "http://localhost:5202/@react-refresh"
        RefreshRuntime.injectIntoGlobalHook(window)
        window.$RefreshReg$ = () => { }
@ -22,7 +22,7 @@
        window.__vite_plugin_react_preamble_installed__ = true
        const global = window
    </script>
-    <script type="module" src="http://localhost:5202/src/index.jsx"></script>
+    <script type="module" src="http://localhost:5202/src/index.jsx"></script> -->
    <!-- Vite End -->
    <script>
        //过滤掉一些无用的警告、没有价值的报错
--- a/code/web/client/src/app.jsx
+++ b/code/web/client/src/app.jsx
@ -3,6 +3,7 @@
 import React, { useEffect } from 'react';
 import Layout from './layout';
 import Auth from './sections/auth';
+import MicroApp from './sections/microApp'

 const App = props => {
    const { projectName } = props
@ -14,7 +15,7 @@ const App = props => {
    return (
        <Layout
            title={projectName}
-            sections={[Auth]}
+            sections={[Auth, MicroApp]}
        />
    )
 }
--- a/code/web/client/src/index.jsx
+++ b/code/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('IotAuthApp'));
--- a/code/web/client/src/layout/components/header/index.jsx
+++ b/code/web/client/src/layout/components/header/index.jsx
@ -4,82 +4,85 @@ import { connect } from "react-redux";
 import { Nav, Avatar, Dropdown } from "@douyinfe/semi-ui";

 const Header = (props) => {
-  const { dispatch, history, user, actions, socket } = props;
+    const { dispatch, history, user, actions, socket } = props;

-  return (
-    <>
-      <Nav
-        mode={"horizontal"}
-        onClick={({ itemKey }) => {
-          if (itemKey == "logout") {
-            dispatch(actions.auth.logout());
-            if (socket) {
-              socket.disconnect();
-            }
-            history.push(`/signin`);
-          }
-        }}
-        style={{
-          height: 60,
-          minWidth: 520,
-          background: "url(/assets/images/background/header.png)",
-          backgroundSize: "100% 100%",
-          color: "white",
-        }}
-        header={{
-          logo: (
-            <img
-              src="/assets/images/background/logo.png"
-              style={{ display: "inline-block", width: 280, height: 52}}
-            />
-          ),
-          text: "",
-        }}
-        footer={
-          <Nav.Sub
-            itemKey={"user"}
-            text={
-              <div
+    return (
+        <>
+            <Nav
+                mode={"horizontal"}
+                onClick={({ itemKey }) => {
+                    if (itemKey == "logout") {
+                        dispatch(actions.auth.logout());
+                        if (socket) {
+                            socket.disconnect();
+                        }
+                        history.push(`/signin`);
+                    }
+                }}
                style={{
-                  marginLeft: 20,
-                  display: "inline-block",
-                  color: "white",
+                    height: 60,
+                    minWidth: 520,
+                    background: `url(${__webpack_public_path__}assets/images/background/header.png)`,
+                    backgroundSize: "100% 100%",
+                    color: "white",
                }}
-              >
-                <img
-                  src="/assets/images/background/notice.png"
-                  style={{
-                    display: "inline-block",
-                    width: 18,
-                    height: 18,
-                    position: "relative",
-                    top: 6,
-                    left: -10,
-                  }}
-                />
+                header={{
+                    logo: (
+                        <img
+                            src={`/assets/images/background/logo.png`}
+                            style={{ display: "inline-block", width: 280, height: 52 }}
+                        />
+                    ),
+                    text: "",
+                }}
+                footer={
+                    <Nav.Sub
+                        itemKey={"user"}
+                        dropdownStyle={{
+                            position: 'relative'
+                        }}
+                        text={
+                            <div
+                                style={{
+                                    marginLeft: 20,
+                                    display: "inline-block",
+                                    color: "white",
+                                }}
+                            >
+                                <img
+                                    src={`/assets/images/background/notice.png`}
+                                    style={{
+                                        display: "inline-block",
+                                        width: 18,
+                                        height: 18,
+                                        position: "relative",
+                                        top: 6,
+                                        left: -10,
+                                    }}
+                                />

-                <Avatar size="small" color="light-blue" style={{ margin: 4 }}>
-                  <img src="/assets/images/avatar/6.png" />
-                </Avatar>
-                {user && user.namePresent}
-              </div>
-            }
-          >
-            <Nav.Item itemKey={"logout"} text={"退出"} />
-          </Nav.Sub>
-        }
-      />
-    </>
-  );
+                                <Avatar size="small" color="light-blue" style={{ margin: 4 }}>
+                                    <img src="/assets/images/avatar/6.png" />
+                                </Avatar>
+                                {user && user.namePresent}
+                            </div>
+                        }
+                    >
+                        <Nav.Item itemKey={"logout"} text={"退出"} />
+                    </Nav.Sub>
+                }
+            />
+        </>
+    );
 };

-function mapStateToProps(state) {
-  const { global, auth, webSocket } = state;
-  return {
-    actions: global.actions,
-    user: auth.user,
-    socket: webSocket.socket,
-  };
+function mapStateToProps (state) {
+    const { global, auth, webSocket } = state;
+    return {
+        actions: global.actions,
+        user: auth.user,
+        socket: webSocket.socket,
+    };
 }

 export default connect(mapStateToProps)(Header);
--- a/code/web/client/src/layout/index.jsx
+++ b/code/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';
@ -154,23 +154,25 @@ const Root = props => {
        store ?
            <ConfigProvider locale={zhCN}>
                <Provider store={store}>
-                    <ConnectedRouter history={history}>
-                        <Switch>
-                            {outerRoutes}
-                            <Layout
-                                history={history}
-                                routes={innnerRoutes}
-                            >
-                                {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}
+                                >
+                                    {combineRoutes}
+                                </Layout>
+                                <Route
+                                    path={'*'}
+                                    component={NoMatch}
+                                />
+                            </Switch>
+                        </ConnectedRouter>
+                    </BrowserRouter >
                </Provider>
-            </ConfigProvider>
+            </ConfigProvider >
            : ''
    )
 }
--- a/code/web/client/src/public-path.js
+++ b/code/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/web/client/src/sections/microApp/actions/index.js
+++ b/code/web/client/src/sections/microApp/actions/index.js
@ -0,0 +1,5 @@
+'use strict';
+
+export default {
+   
+}
--- a/code/web/client/src/sections/microApp/containers/index.js
+++ b/code/web/client/src/sections/microApp/containers/index.js
@ -0,0 +1,5 @@
+'use strict';
+
+import MicroApp from './microApp';
+
+export { MicroApp };
--- a/code/web/client/src/sections/microApp/containers/microApp.jsx
+++ b/code/web/client/src/sections/microApp/containers/microApp.jsx
@ -0,0 +1,37 @@
+import React, { useEffect } from 'react';
+import { connect } from 'react-redux';
+import { Spin, Card } from '@douyinfe/semi-ui';
+
+const MicroApp = (props) => {
+    const { dispatch, actions, } = props
+
+    return (
+        <div>
+            <p>MicroApp</p>
+            <div style={{
+                height: 'calc(100% - 64px)', overflow: 'auto', position: 'absolute',
+            }}>
+                <micro-app
+                    name='microapp-test'
+                    url='http://localhost:5000/'
+                    baseroute='/microApp'
+                    inline
+                // disableSandbox
+                // shadowDOM
+                style={{height:'100%'}}
+                >
+                    microApp
+                </micro-app>
+            </div>
+        </div>
+    )
+}
+
+function mapStateToProps (state) {
+    const { auth, global } = state;
+    return {
+
+    };
+}
+
+export default connect(mapStateToProps)(MicroApp);
--- a/code/web/client/src/sections/microApp/index.js
+++ b/code/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/web/client/src/sections/microApp/nav-item.jsx
+++ b/code/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/web/client/src/sections/microApp/reducers/index.js
+++ b/code/web/client/src/sections/microApp/reducers/index.js
@ -0,0 +1,5 @@
+'use strict';
+
+export default {
+
+}
--- a/code/web/client/src/sections/microApp/routes.js
+++ b/code/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/web/middlewares/webpack-dev.js
+++ b/code/web/middlewares/webpack-dev.js
@ -29,6 +29,20 @@ module.exports = {
        }));

        const server = express();
+
+        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.use(require("webpack-hot-middleware")(compiler));
        server.listen('5201', function (err) {
--- a/code/web/package.json
+++ b/code/web/package.json
@ -49,6 +49,7 @@
   "dependencies": {
      "@douyinfe/semi-ui": "^2.8.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",
      "@vitejs/plugin-react": "^1.3.1",
--- a/code/web/webpack.config.js
+++ b/code/web/webpack.config.js
@ -12,9 +12,13 @@ module.exports = {
    devtool: 'source-map',
    devServer: {
        historyApiFallback: true,
+        // 为 MicroApp 配置跨域
+        'Access-Control-Allow-Origin': '*',
+        allowedHosts: ['127.0.0.1:5200'],
    },
    entry: {
-        app: ["@babel/polyfill", PATHS.app]
+        app: ["@babel/polyfill", PATHS.app],
+      
    },
    output: {
        publicPath: '/client/build/',