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
@ -22,14 +22,14 @@ const Header = (props) => {
                style={{
                    height: 60,
                    minWidth: 520,
-          background: "url(/assets/images/background/header.png)",
+                    background: `url(${__webpack_public_path__}assets/images/background/header.png)`,
                    backgroundSize: "100% 100%",
                    color: "white",
                }}
                header={{
                    logo: (
                        <img
-              src="/assets/images/background/logo.png"
+                            src={`/assets/images/background/logo.png`}
                            style={{ display: "inline-block", width: 280, height: 52 }}
                        />
                    ),
@ -38,6 +38,9 @@ const Header = (props) => {
                footer={
                    <Nav.Sub
                        itemKey={"user"}
+                        dropdownStyle={{
+                            position: 'relative'
+                        }}
                        text={
                            <div
                                style={{
@ -47,7 +50,7 @@ const Header = (props) => {
                                }}
                            >
                                <img
-                  src="/assets/images/background/notice.png"
+                                    src={`/assets/images/background/notice.png`}
                                    style={{
                                        display: "inline-block",
                                        width: 18,
--- 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,6 +154,7 @@ const Root = props => {
        store ?
            <ConfigProvider locale={zhCN}>
                <Provider store={store}>
+                    <BrowserRouter basename={window.__MICRO_APP_BASE_ROUTE__ || '/'}>
                        <ConnectedRouter history={history}>
                            <Switch>
                                {outerRoutes}
@ -169,6 +170,7 @@ const Root = props => {
                                />
                            </Switch>
                        </ConnectedRouter>
+                    </BrowserRouter >
                </Provider>
            </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/',