refactor: 优化乾坤和layout

WeBankFinTech · Jun 14, 2022 · f582af0 · f582af0
2 parents 4b7a3c5 + 64d7b53
commit f582af0
Show file tree

Hide file tree

Showing 20 changed files with 126 additions and 56 deletions.
diff --git a/.gitignore b/.gitignore
@@ -7,6 +7,7 @@
 .temp
 .hound
 .fes
+.fes*
 dist
 *.log
 node_modules

diff --git a/docs/README.md b/docs/README.md
@@ -13,7 +13,7 @@ features:
   - title: Fast
     details: Fes.js 内置路由、构建、插件管理，提供测试、布局、权限、国际化、状态管理、请求、数据字典、Svg等插件，可以满足大部分日常开发需求。
   - title: Easy
-    details: 基于Vue.js 3.0，上手简单。贯彻 “约定优于配置” 思想，在设计插件上尽可能用约定替代配置，依然提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的API入口，一致化的体验，学习起来更轻松。
+    details: 基于Vue.js 3.0，上手非常简单。贯彻 “约定优于配置” 思想，在设计插件上尽可能用约定替代配置，依然提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的API入口，一致化的体验，学习起来更轻松。
   - title: Strong
     details: 仅仅需要关心页面内容，减少犯错的机会！提供单元测试、覆盖测试的能力保障项目质量。
   - title: 可扩展

diff --git a/docs/reference/api/README.md b/docs/reference/api/README.md
@@ -74,7 +74,6 @@ Fes.js 路由基于 [Vue Router 4.0](https://next.router.vuejs.org/introduction.
 返回当前 `router` 实例。
 ```js
 import { getRouter } from "@fesjs/fes";
-
 const router = getRouter();
 router.push();
 ```

diff --git a/docs/reference/plugin/dev/api.md b/docs/reference/plugin/dev/api.md
@@ -301,7 +301,7 @@ import { access, useAccess } from '@fesjs/fes';
 ```js
 api.addCoreExports(() => [
     {
-        specifiers: ['getRoutes', 'getRouter', 'getHistory', 'destroyRouter'],
+        specifiers: ['getRoutes'],
         source: absCoreFilePath
     }
 ]);

diff --git a/docs/reference/plugin/plugins/qiankun.md b/docs/reference/plugin/plugins/qiankun.md
@@ -269,3 +269,24 @@ export default {
 
 - 主应用使用 props 的模式传递数据（参考主应用装载子应用配置一节）
 - 子应用在生命周期钩子中获取 props 消费数据（参考子应用运行时配置一节） 
+
+
+### MicroApp
+| 属性   | 说明       | 类型          | 默认值     |
+| ---- | ----------- | ------------- | ---------- |
+| name  | 子应用名称，传入`qiankun.main.apps`配置中的`name` | String                      |  -      |
+| settings  | 子应用配置信息        | Object                      |  {}      |
+| props  | 传入子应用的参数        | Object                      |  {}      |
+| lifeCycles  | 子应用生命周期钩子        | Object                      |  {}      |
+| cacheName  | 子应用缓存名称，配置后根据`name`+`cacheName`缓存子应用实例     | Object                      |  -      |
+
+
+### MicroAppWithMemoHistory
+| 属性   | 说明       | 类型          | 默认值     |
+| ---- | ----------- | ------------- | ---------- |
+| name  | 子应用名称，传入`qiankun.main.apps`配置中的`name` | String                      |  -      |
+| settings  | 子应用配置信息        | Object                      |  {}      |
+| props  | 传入子应用的参数        | Object                      |  {}      |
+| lifeCycles  | 子应用生命周期钩子        | Object                      |  {}      |
+| cacheName  | 子应用缓存名称，配置后根据`name`+`cacheName`缓存子应用实例     | Object                      |  -      |
+| url  | 子应用的路由地址    | String                      |  -      |
diff --git a/packages/fes-plugin-layout/package.json b/packages/fes-plugin-layout/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fesjs/plugin-layout",
-  "version": "5.0.0-beta.4",
+  "version": "5.0.0-beta.5",
   "description": "@fesjs/plugin-layout",
   "main": "lib/index.js",
   "files": [

diff --git a/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue b/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue
@@ -9,7 +9,7 @@
             @close="handleCloseTab"
             @update:modelValue="switchPage"
         >
-            <FTabPane v-for="page in pageList" :key="page.path" :value="page.path" :closable="route.path !== page.path">
+            <FTabPane v-for="page in pageList" :key="page.path" :value="page.path" :closable="pageList.length > 1">
                 <template #tab>
                     {{ page.title }}
                     <ReloadOutlined v-show="route.path === page.path" class="layout-tabs-close-icon" @click="reloadPage(page.path)" />
@@ -22,8 +22,8 @@
             </template>
         </FTabs>
         <router-view v-slot="{ Component, route }">
-            <keep-alive>
-                <component :is="Component" :key="getPageKey(route)" />
+            <keep-alive :include="keepAlivePages">
+                <component :is="getComponent(Component, route, true)" :key="getPageKey(route)" />
             </keep-alive>
         </router-view>
     </template>
@@ -59,23 +59,24 @@ export default {
             return {
                 path: _route.path,
                 route: _route,
-                name: _route.meta.name,
+                name: _route.meta.name ?? _route.name,
                 title: computed(() => transTitle(title)),
                 key: getKey(),
             };
         };
+        const keepAlivePages = ref([]);
 
         const route = useRoute();
         const router = useRouter();
         const pageList = ref([createPage(route)]);
         const actions = [
             {
                 value: 'closeOtherPage',
-                label: '关闭其他',
+                label: '关闭其他页签',
             },
             {
                 value: 'reloadPage',
-                label: '刷新当前页',
+                label: '刷新当前页签',
             },
         ];
 
@@ -88,22 +89,37 @@ export default {
             return true;
         });
         // 还需要考虑参数
-        const switchPage = (path) => {
+        const switchPage = async (path) => {
             const selectedPage = findPage(path);
             if (selectedPage) {
-                router.push({
+                await router.push({
                     path,
                     query: selectedPage.route.query,
                     params: selectedPage.route.params,
                 });
             }
         };
-        const handleCloseTab = (targetKey) => {
+        const handleCloseTab = async (targetKey) => {
             const selectedPage = findPage(targetKey);
             const list = [...pageList.value];
             const index = list.indexOf(selectedPage);
+            if (route.path === selectedPage.path) {
+                if (list.length > 1) {
+                    if (list.length - 1 === index) {
+                        await switchPage(list[index - 1].path);
+                    } else {
+                        await switchPage(list[index + 1].path);
+                    }
+                }
+            }
             list.splice(index, 1);
             pageList.value = list;
+            const _keepAlivePages = [...keepAlivePages.value];
+            const keepIndex = _keepAlivePages.indexOf(selectedPage.name);
+            if (keepIndex !== -1) {
+                _keepAlivePages.splice(keepIndex, 1);
+            }
+            keepAlivePages.value = _keepAlivePages;
         };
         const reloadPage = (path) => {
             const selectedPage = findPage(path || unref(route.path));
@@ -114,6 +130,7 @@ export default {
         const closeOtherPage = (path) => {
             const selectedPage = findPage(path || unref(route.path));
             pageList.value = [selectedPage];
+            keepAlivePages.value = [selectedPage.name];
         };
         const getPageKey = (_route) => {
             const selectedPage = findPage(_route.path);
@@ -133,10 +150,10 @@ export default {
                 default:
             }
         };
-        const keepAlivePages = ref([]);
-        const getComponent = (Component, _route) => {
-            if (_route.meta['keep-alive']) {
-                const name = _route.meta?.name || _route.name;
+
+        const getComponent = (Component, _route, isKeep = false) => {
+            if (isKeep || _route.meta['keep-alive']) {
+                const name = _route.meta?.name ?? _route.name;
                 if (name) {
                     // 修改组件的 name
                     Component.type.name = name;

diff --git a/packages/fes-plugin-qiankun/examples/micro/src/pages/micro/index.vue b/packages/fes-plugin-qiankun/examples/micro/src/pages/micro/index.vue
@@ -1,5 +1,6 @@
 <template>
     <div class="haizekuo">micro - index</div>
+    <input />
 </template>
 <config>
 {
@@ -10,7 +11,9 @@
 <script>
 export default {
     setup() {
-        return {};
+        return {
+            bigData: new Array(5 * 1024 * 1024),
+        };
     },
 };
 </script>

diff --git a/packages/fes-plugin-qiankun/examples/micro/src/pages/micro/test.vue b/packages/fes-plugin-qiankun/examples/micro/src/pages/micro/test.vue
@@ -1,5 +1,6 @@
 <template>
     <div class="haizekuo">micro - test</div>
+    <input />
 </template>
 <config>
 {
@@ -10,7 +11,9 @@
 <script>
 export default {
     setup() {
-        return {};
+        return {
+            bigData: new Array(5 * 1024 * 1024),
+        };
     },
 };
 </script>

diff --git a/packages/fes-plugin-qiankun/examples/vite-main/src/pages/index.vue b/packages/fes-plugin-qiankun/examples/vite-main/src/pages/index.vue
@@ -1,6 +1,7 @@
 <template>
     <div>
         main
+        <input />
         <FTabs v-model="activeKey">
             <FTabPane name="Tab 1" value="1">
                 <MicroAppWithMemoHistory key="1" name="micro" url="/micro" />

diff --git a/packages/fes-plugin-qiankun/package.json b/packages/fes-plugin-qiankun/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fesjs/plugin-qiankun",
-  "version": "3.0.0-beta.4",
+  "version": "3.0.0-beta.5",
   "description": "@fesjs/plugin-qiankun",
   "main": "lib/index.js",
   "files": [

diff --git a/packages/fes-plugin-qiankun/src/main/modifyRoutes.js b/packages/fes-plugin-qiankun/src/main/modifyRoutes.js
@@ -1,16 +1,13 @@
 import { defaultHistoryType } from '../constants';
 
 function getMicroApp(options) {
-    const { key, microAppName, masterHistoryType, base, namespace, ...normalizedRouteProps } = options;
-    return `() => {
-return new Promise((resolve)=>{
-    import('@@/${namespace}/getMicroAppRouteComponent').then(({ getMicroAppRouteComponent })=>{
-        resolve(getMicroAppRouteComponent({ key: '${key}', appName: '${microAppName}', base: '${base}', masterHistoryType: '${masterHistoryType}', routeProps: ${JSON.stringify(
+    const { key, microAppName, cacheName, masterHistoryType, base, namespace, ...normalizedRouteProps } = options;
+    return `(async () => {
+const { getMicroAppRouteComponent } = await import('@@/${namespace}/getMicroAppRouteComponent');
+return getMicroAppRouteComponent({key: '${key}', appName: '${microAppName}', cacheName: '${cacheName}', base: '${base}', masterHistoryType: '${masterHistoryType}', routeProps: ${JSON.stringify(
         normalizedRouteProps,
-    )}  }))
-    })
-})
-}`;
+    )} })
+})()`;
 }
 
 function modifyRoutesWithAttachMode({ routes, masterHistoryType, base, namespace }) {
@@ -20,6 +17,7 @@ function modifyRoutesWithAttachMode({ routes, masterHistoryType, base, namespace
                 if (route.meta && route.meta.microApp) {
                     route.component = getMicroApp({
                         key: route.path,
+                        cacheName: route.meta.cacheName ?? route.path,
                         microAppName: route.meta.microApp,
                         masterHistoryType,
                         base,

diff --git a/packages/fes-plugin-qiankun/src/main/runtime/MicroApp.tpl b/packages/fes-plugin-qiankun/src/main/runtime/MicroApp.tpl
@@ -12,13 +12,13 @@ import { mergeWith } from "{{{LODASH_ES}}}";
 // eslint-disable-next-line import/extensions
 import { getMasterOptions } from "./masterOptions";
 
-function unmountMicroApp(microApp) {
+async function unmountMicroApp(microApp) {
     if (!microApp) {
         return;
     }
     const status = microApp.getStatus();
     if (status === 'MOUNTED') {
-        microApp.unmount();
+        await microApp.unmount();
     }
 }
 
@@ -28,6 +28,7 @@ export const MicroApp = defineComponent({
             type: String,
             required: true
         },
+        cacheName: String,
         settings: Object,
         props: Object,
         lifeCycles: Object
@@ -64,11 +65,11 @@ export const MicroApp = defineComponent({
             return {};
         });
 
+
         const propsConfigRef = computed(() => {
             return {
                 ...propsFromConfigRef.value,
                 ...props.props,
-                ...attrs
             };
         });
 
@@ -77,13 +78,13 @@ export const MicroApp = defineComponent({
             const appConfig = appConfigRef.value;
             const { name, entry } = appConfig;
             // 加载新的
-            microAppRef.value = loadMicroApp(
+            const app = loadMicroApp(
                 {
                     // 保证唯一
-                    name: `${name}_${Date.now()}`,
+                    name: `${name}_${props.cacheName || ''}`,
                     entry: entry,
                     container: containerRef.value,
-                    props: {...propsConfigRef.value}
+                    props: {...propsConfigRef.value, ...attrs}
                 },
                 {
                     ...globalSettings,
@@ -96,6 +97,12 @@ export const MicroApp = defineComponent({
                     (v1, v2) => concat(v1 ?? [], v2 ?? [])
                 )
             );
+            ['loadPromise', 'bootstrapPromise', 'mountPromise', 'unmountPromise'].forEach((key)=>{
+                app[key].catch((e)=>{
+                    console.warn("[@fesjs/plugin-qiankun]", e)
+                })
+            })
+            microAppRef.value = app;
         };
 
         // 当参数变化时，update子应用
@@ -131,7 +138,7 @@ export const MicroApp = defineComponent({
                             }
 
                             // 返回 microApp.update 形成链式调用
-                            return microApp.update({...propsConfigRef.value});
+                            return microApp.update({...propsConfigRef.value, ...attrs});
                         }
                     }
                 );

diff --git a/packages/fes-plugin-qiankun/src/main/runtime/MicroAppWithMemoHistory.jsx b/packages/fes-plugin-qiankun/src/main/runtime/MicroAppWithMemoHistory.jsx
@@ -1,4 +1,4 @@
-import { defineComponent, watch } from 'vue';
+import { defineComponent, watch, onUnmounted } from 'vue';
 // eslint-disable-next-line import/extensions
 import { MicroApp } from './MicroApp';
 
@@ -11,6 +11,7 @@ export const MicroAppWithMemoHistory = defineComponent({
             type: String,
             required: true,
         },
+        cacheName: String,
         settings: Object,
         props: Object,
         lifeCycles: Object,
@@ -28,6 +29,9 @@ export const MicroAppWithMemoHistory = defineComponent({
                 microRouter.push(props.url);
             },
         );
+        onUnmounted(() => {
+            microRouter = null;
+        });
         return () => <MicroApp onRouterInit={onRouterInit} {...props} {...attrs}></MicroApp>;
     },
 });
diff --git a/packages/fes-plugin-qiankun/src/main/runtime/getMicroAppRouteComponent.jsx b/packages/fes-plugin-qiankun/src/main/runtime/getMicroAppRouteComponent.jsx
@@ -1,6 +1,6 @@
 // eslint-disable-next-line import/extensions
 import { MicroApp } from './MicroApp';
 
-export function getMicroAppRouteComponent({ key, appName, base, masterHistoryType, routeProps }) {
-    return <MicroApp key={key} base={base} masterHistoryType={masterHistoryType} name={appName} {...routeProps} />;
+export function getMicroAppRouteComponent({ key, appName, base, masterHistoryType, routeProps, cacheName }) {
+    return <MicroApp key={key} base={base} masterHistoryType={masterHistoryType} name={appName} cacheName={cacheName} {...routeProps} />;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,6 +7,7 @@ @@
     .temp
     .hound
     .fes
+    .fes*
     dist
     *.log
     node_modules
@@ Expand Down @@