From 8e115d3542a7aeb81d05246422efeced4d21945e Mon Sep 17 00:00:00 2001
From: "yuyuehui.yyh" <yuyuehui.yyh@digital-engine.com>
Date: Fri, 9 Jun 2023 11:15:11 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E6=8F=92=E4=BB=B6=E6=8E=A5?=
 =?UTF-8?q?=E5=85=A5=E6=94=AF=E6=8C=81=20qiankun=20=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/.umirc.ts                      |  4 +++
 ui/app.tsx                        | 59 ++++++++++++++++++++++++++++---
 ui/components/PluginContainer.tsx |  7 +++-
 ui/hooks/useAppData.ts            |  2 ++
 ui/layouts/index.tsx              |  1 -
 ui/models/global.ts               |  2 +-
 6 files changed, 67 insertions(+), 8 deletions(-)

diff --git a/ui/.umirc.ts b/ui/.umirc.ts
index 5ff0bbf98de7..82d5c0ee68ce 100644
--- a/ui/.umirc.ts
+++ b/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: {},
+  },
 };
diff --git a/ui/app.tsx b/ui/app.tsx
index 0ea6f2d55db9..d191e61addae 100644
--- a/ui/app.tsx
+++ b/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,
+  };
 }
diff --git a/ui/components/PluginContainer.tsx b/ui/components/PluginContainer.tsx
index 86e0882d1def..3a3b73d5cb37 100644
--- a/ui/components/PluginContainer.tsx
+++ b/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}
+    />
+  );
 };
diff --git a/ui/hooks/useAppData.ts b/ui/hooks/useAppData.ts
index b6cae0ccca36..51b895d7892d 100644
--- a/ui/hooks/useAppData.ts
+++ b/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;
     }[];
diff --git a/ui/layouts/index.tsx b/ui/layouts/index.tsx
index 32f50088f49d..f6f0f9bdf9af 100644
--- a/ui/layouts/index.tsx
+++ b/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;
diff --git a/ui/models/global.ts b/ui/models/global.ts
index b3aaf09791a6..21c2c89d20ca 100644
--- a/ui/models/global.ts
+++ b/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');
   },
 };