feat: 集成qiankun

react-ui/config/config.ts

@@ -159,4 +159,19 @@ export default defineConfig({
     javascriptEnabled: true,
   },
   valtio: {},
+  qiankun: {
+    master: {
+      sandbox: true,
+      apps: [
+        {
+          name: 'app1',
+          entry: '//localhost:7001',
+        },
+        {
+          name: 'app2',
+          entry: '//localhost:3000',
+        },
+      ],
+    },
+  },
 });

react-ui/config/routes.ts

@@ -596,6 +596,18 @@ export default [
       },
     ],
   },
+  {
+    name: 'mixed',
+    path: '/mixed',
+    routes: [
+      {
+        name: '父子页面混合',
+        path: '',
+        key: 'mixed',
+        component: './Mixed/index',
+      },
+    ],
+  },
   {
     name: '算力积分',
     path: '/points',
@@ -608,6 +620,18 @@ export default [
       },
     ],
   },
+  {
+    path: '/app1/*',
+    name: '子应用1',
+    microApp: 'app1',
+    layout: true,
+  },
+  {
+    path: '/app2/*',
+    name: '子应用2',
+    microApp: 'app2',
+    layout: true,
+  },
   {
     path: '*',
     layout: false,

react-ui/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "cl-model",
+  "name": "ci4s",
   "version": "1.0.0",
   "private": true,
   "description": "",

react-ui/src/app.tsx

@@ -4,6 +4,7 @@ import { type GlobalInitialState } from '@/types';
 import { menuItemRender } from '@/utils/menuRender';
 import type { Settings as LayoutSettings } from '@ant-design/pro-components';
 import { RuntimeConfig, history } from '@umijs/max';
+import { useState } from 'react';
 import { RuntimeAntdConfig } from 'umi';
 import defaultSettings from '../config/defaultSettings';
 import '../public/fonts/font.css';
@@ -172,6 +173,17 @@ export function render(oldRender: () => void) {
     });
 }
 
+export const useQiankunStateForSlave = () => {
+  const [globalState, setGlobalState] = useState<any>({
+    slogan: 'Hello MicroFrontend',
+  });
+
+  return {
+    globalState,
+    setGlobalState,
+  };
+};
+
 // 主题修改
 export const antd: RuntimeAntdConfig = (memo) => {
   memo.theme ??= {};

react-ui/src/pages/Mixed/index.less

@@ -0,0 +1,3 @@
+.mixed {
+  height: 100%;
+}

react-ui/src/pages/Mixed/index.tsx

@@ -0,0 +1,25 @@
+import { MicroAppWithMemoHistory } from '@umijs/max';
+import { Tabs } from 'antd';
+import styles from './index.less';
+
+const Docs = () => {
+  const mirrorTabItems = [
+    {
+      key: '1',
+      label: '父页面',
+      children: <div style={{ width: '100%', height: '100%', border: 0 }}>Parent</div>,
+    },
+    {
+      key: '2',
+      label: '子页面',
+      children: <MicroAppWithMemoHistory name="app1" url="/app1/home"></MicroAppWithMemoHistory>,
+    },
+  ];
+
+  return (
+    <div className={styles.mixed}>
+      <Tabs items={mirrorTabItems} />
+    </div>
+  );
+};
+export default Docs;