feat(ui): 插件接入支持 qiankun 模式

ui/.umirc.ts

@@ -3,6 +3,7 @@ export default {
     '@umijs/plugins/dist/valtio',
     '@umijs/plugins/dist/styled-components',
     '@umijs/plugins/dist/react-query',
+    '@umijs/plugins/dist/qiankun',
   ],
   publicPath: '/__umi_ui/entry/',
   base: '/__umi_ui/entry',
@@ -28,4 +29,7 @@ export default {
       'local:moon',
     ],
   },
+  qiankun: {
+    master: {},
+  },
 };

ui/app.tsx

@@ -1,7 +1,7 @@
 import { PluginContainer } from '@/components/PluginContainer';
 import { IAppData } from '@/hooks/useAppData';
 import { globalCSS } from '@/utils/globalCSS';
-import { createGlobalStyle } from 'umi';
+import { createGlobalStyle, MicroApp } from 'umi';
 
 export const styledComponents = {
   GlobalStyle: createGlobalStyle`
@@ -46,6 +46,10 @@ body {
   color: var(--text-color);
 }
 
+#root-master, .qiankun-micro-app-container, #__qiankun_microapp_wrapper_for_qiankun__ {
+  height: 100%;
+}
+
 a {
   color: var(--text-color);
   text-decoration: none;
@@ -73,9 +77,54 @@ export async function patchClientRoutes({ routes }) {
   const uiMenusAdded = modules.map((module) => module.menus || []).flat();
 
   routes[0].routes?.unshift(
-    ...uiMenusAdded.map((menu: any) => ({
-      path: menu.path,
-      element: <PluginContainer url={menu.url} name={menu.name} />,
-    })),
+    ...uiMenusAdded.map((menu) => {
+      const { renderType } = menu;
+
+      if (renderType === 'qiankun') {
+        return {
+          path: `${menu.path}/*`,
+          // 防止 fixed 定位影响到外部布局
+          element: (
+            <div style={{ transform: 'scale(1)', height: '100%' }}>
+              <MicroApp
+                name={menu.name}
+                base={`/__umi_ui/entry/${menu.path}`}
+              />
+            </div>
+          ),
+        };
+      }
+
+      return {
+        path: `${menu.path}/*`,
+        element: <PluginContainer url={menu.url} name={menu.name} />,
+      };
+    }),
+  );
+}
+
+export async function qiankun() {
+  const umiInfo = await fetch('/__umi/api/app-data').then(
+    (res) => res.json() as Promise<IAppData>,
   );
+
+  const modules = umiInfo?.ui?.modules || [];
+
+  // 提供给子应用 umi 的信息和自定义属性
+  const uiMenusQiankunAdded = modules
+    .map((module) => module.menus || [])
+    .flat()
+    .filter((module) => module.renderType === 'qiankun')
+    .map(({ name, meta, url }) => ({
+      name,
+      entry: url,
+      props: {
+        ...meta,
+        umiInfo,
+      },
+    }));
+
+  return {
+    apps: uiMenusQiankunAdded,
+  };
 }

ui/components/PluginContainer.tsx

@@ -1,3 +1,8 @@
 export const PluginContainer = (props: { url: string; name: string }) => {
-  return <iframe style={{ width: '100%', height: '100%' }} src={props.url} />;
+  return (
+    <iframe
+      style={{ width: '100%', height: '100%', border: 0 }}
+      src={props.url}
+    />
+  );
 };

ui/hooks/useAppData.ts

@@ -111,6 +111,8 @@ export interface IAppData {
         url: string;
         icon: string;
         name: string;
+        renderType?: string; // 可以选择配置 qiankun，默认 iframe
+        meta?: any; // 配置乾坤后可以传递的props，比如 yuyanId?
       }[];
       [key: string]: any;
     }[];

ui/layouts/index.tsx

@@ -5,7 +5,6 @@ import { Helmet, Outlet, styled } from 'umi';
 
 const Wrapper = styled.div`
   display: flex;
-  border: 1px solid var(--subtle-color);
   height: 100%;
   aside {
     min-width: 200px;

ui/models/global.ts

@@ -41,6 +41,6 @@ export const actions = {
     const mode = state.mode === 'light' ? 'dark' : 'light';
     state.mode = mode;
     // 是否需要 localstorage 保存上次选择 mode
-    document.querySelector('html').classList.toggle('dark');
+    document.querySelector('html')!.classList.toggle('dark');
   },
 };