Merge branch 'feat/create-qiankun' of https://github.com/hakushinring…

…/qiankun into feat/create-qiankun
umijs · Dec 29, 2023 · fd0d28a · fd0d28a
2 parents 30304fc + 00a65d2
commit fd0d28a
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 76 deletions.
diff --git a/packages/create-qiankun/src/shared/utils/qiankun.ts b/packages/create-qiankun/src/shared/utils/qiankun.ts
@@ -7,7 +7,7 @@ export interface ISubConfig {
 
 export const installQiankunPkgs = {
   qiankun: '^3.0.0-rc.18',
-  webpackPlugin: '^0.0.1-rc.3',
+  webpackPlugin: '^0.0.1-rc.4',
   reactComponent: '^0.0.1-rc.13',
   vueComponent: '^0.0.1-rc.0',
 };

diff --git a/packages/create-qiankun/template/react18-main/package.json.ejs b/packages/create-qiankun/template/react18-main/package.json.ejs
@@ -12,6 +12,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "antd": "^5.12.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

diff --git a/packages/create-qiankun/template/react18-main/src/App.css b/packages/create-qiankun/template/react18-main/src/App.css
@@ -1,50 +1,15 @@
-body {
-  margin: 0;
-}
-
-.mainapp {
-  line-height: 1;
-}
-
-.mainapp-header > h1 {
-  color: #333;
-  font-size: 36px;
-  font-weight: 700;
-  margin: 0;
-  padding: 36px;
-}
-.mainapp-main {
-  display: flex;
-}
-.mainapp-main .mainapp-sidemenu {
-  width: 130px;
-  list-style: none;
-  margin: 0;
-  margin-left: 40px;
-  padding: 0;
-  border-right: 2px solid #aaa;
-}
-.mainapp-main .mainapp-sidemenu > li {
-  color: #aaa;
-  margin: 20px 0;
-  font-size: 18px;
-  font-weight: 400;
-  cursor: pointer;
-}
-.mainapp-main .mainapp-sidemenu > li:hover {
-  color: #444;
-}
-.mainapp-main .mainapp-sidemenu > li:first-child {
-  margin-top: 5px;
+.app {
+  height: 100%;
+  display: grid;
+  grid-template-columns: 256px 1fr;
+  grid-template-rows: max-content 1fr;
+}
+.main-app-title {
+  font-size: 40px;
+  text-align: center;
+  padding: 16px 0;
 }
 #subapp-container {
-  flex-grow: 1;
-  position: relative;
-  margin: 0 40px;
-}
-#subapp-container .subapp-loading {
-  color: #444;
-  font-size: 28px;
-  font-weight: 600;
-  text-align: center;
+  grid-area: 1 / 2 / span 2 / span 1;
+  overflow: auto;
 }
diff --git a/packages/create-qiankun/template/react18-main/src/App.js b/packages/create-qiankun/template/react18-main/src/App.js
@@ -1,49 +1,44 @@
 import './App.css';
 import subApplication from './microApp/subs.json';
 import { loadMicroApp } from 'qiankun';
-import { useRef } from 'react';
+import { useState } from 'react';
+import { Menu } from 'antd';
+
+const menuItems = subApplication.map(({ name }) => ({ key: name, label: name }))
 
 function App() {
-  const preLoad = useRef(null);
-  const preLoadAppName = useRef(null);
-  async function changeRouterAndLoadApp(app) {
-    if (preLoadAppName.current === app.name) return;
+  const [preLoadApp, setPreLoadApp] = useState(null);
+
+  async function changeRouterAndLoadApp({ key }) {
+    const app = subApplication.find(item => item.name === key)
+    if (!app || preLoadApp?.name === app.name) return;
 
-    if (preLoad.current) {
-      await preLoad.current.unmount();
+    if (preLoadApp) {
+      await preLoadApp.unmount();
     }
 
-    preLoad.current = loadMicroApp({
+    const microApp = loadMicroApp({
       name: app.name,
       entry: app.entry,
       container: document.querySelector('#subapp-container'),
     });
-
-    preLoadAppName.current = app.name;
+    setPreLoadApp(microApp)
 
     window.history.pushState(null, '', app.activeRule);
   }
 
   return (
-    <div className="App">
-      <div className="mainapp">
-        <header className="mainapp-head">
-          <h1>QianKun</h1>
-        </header>
-        <div className="mainapp-main">
-          <ul className="mainapp-sidemenu">
-            {subApplication.map((app, i) => {
-              return (
-                <li key={i} onClick={() => changeRouterAndLoadApp(app)}>
-                  {app.name}
-                </li>
-              );
-            })}
-          </ul>
-          {/* <!-- 子应用  --> */}
-          <main id="subapp-container"></main>
-        </div>
+    <div className="app">
+      <div className="main-app-title">QianKun</div>
+      <div className="main-app-menu">
+        <Menu
+          mode="inline"
+          onSelect={changeRouterAndLoadApp}
+          style={{ width: '100%', height: '100%' }}
+          items={menuItems}
+        />
       </div>
+      <div id="subapp-container"></div>
     </div>
   );
 }

diff --git a/packages/create-qiankun/template/react18-main/src/index.css b/packages/create-qiankun/template/react18-main/src/index.css
@@ -11,3 +11,7 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+#root {
+  height: 100vh;
+}