From bb81f11766f331c1d8f4e711bbd9c7ab639e03cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=87=E7=BA=AF?= <harrywan@webank.com>
Date: Wed, 6 Jan 2021 15:33:21 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20plugin-layou=E5=AE=9E=E7=8E=B0=E4=BB=8E?=
 =?UTF-8?q?rootContainer=E6=94=B9=E4=B8=BA=E5=9C=A8=E6=A0=B9=E8=B7=AF?=
 =?UTF-8?q?=E7=94=B1=E6=8F=92=E5=85=A5=E5=85=AC=E5=85=B1=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

好处：
1、布局组件涉及到router-view，需要包裹住router-view，跟rootContainer的默认参数冲突
2、布局组件的内容应该是rootContainer的最底层，但是由于rootContainer的机制，插件循序影响dom结构层级。不能保证布局的内容属于最底层
---
 packages/fes-plugin-layout/package.json       |   3 +
 packages/fes-plugin-layout/src/index.js       |  22 +++-
 .../fes-plugin-layout/src/template/index.tpl  |  41 +++++++
 .../src/template/runtime.tpl                  |  37 ------
 .../src/views/BaseLayout.vue                  |  96 ++-------------
 .../src/views/MultiTabProvider.vue            | 111 ++++++++++++++++++
 .../src/plugins/generateFiles/fes/fes.tpl     |   5 +-
 .../src/plugins/misc/route/index.js           |   7 --
 .../plugins/misc/route/template/baseView.vue  |  22 ----
 9 files changed, 179 insertions(+), 165 deletions(-)
 create mode 100644 packages/fes-plugin-layout/src/template/index.tpl
 delete mode 100644 packages/fes-plugin-layout/src/template/runtime.tpl
 create mode 100644 packages/fes-plugin-layout/src/views/MultiTabProvider.vue
 delete mode 100644 packages/fes-preset-built-in/src/plugins/misc/route/template/baseView.vue

diff --git a/packages/fes-plugin-layout/package.json b/packages/fes-plugin-layout/package.json
index 5ae5a579..da450c6b 100644
--- a/packages/fes-plugin-layout/package.json
+++ b/packages/fes-plugin-layout/package.json
@@ -27,6 +27,9 @@
   "publishConfig": {
     "access": "public"
   },
+  "dependencies": {
+    "@umijs/utils": "3.3.3"
+  },
   "peerDependencies": {
     "@ant-design/icons-vue": "^5.1.6",
     "@webank/fes": "^2.0.0",
diff --git a/packages/fes-plugin-layout/src/index.js b/packages/fes-plugin-layout/src/index.js
index 0095de4f..38dbfc73 100644
--- a/packages/fes-plugin-layout/src/index.js
+++ b/packages/fes-plugin-layout/src/index.js
@@ -1,5 +1,6 @@
 import { readFileSync, copyFileSync, statSync } from 'fs';
 import { join } from 'path';
+import { winPath } from '@umijs/utils';
 
 const namespace = 'plugin-layout';
 
@@ -18,16 +19,18 @@ export default (api) => {
         }
     });
 
-    const absRuntimeFilePath = join(namespace, 'runtime.js');
+    api.addRuntimePluginKey(() => 'layout');
+
+    const absFilePath = join(namespace, 'index.js');
 
     api.onGenerateFiles(() => {
         // 文件写出
         const userConfig = api.config.layout || {};
 
         api.writeTmpFile({
-            path: absRuntimeFilePath,
+            path: absFilePath,
             content: Mustache.render(
-                readFileSync(join(__dirname, 'template/runtime.tpl'), 'utf-8'),
+                readFileSync(join(__dirname, 'template/index.tpl'), 'utf-8'),
                 {
                     REPLACE_USER_CONFIG: JSON.stringify(userConfig),
                     HAS_LOCALE: api.pkg.dependencies?.['@webank/fes-plugin-locale']
@@ -58,7 +61,14 @@ export default (api) => {
         });
     });
 
-    api.addRuntimePluginKey(() => 'layout');
-
-    api.addRuntimePlugin(() => `@@/${absRuntimeFilePath}`);
+    // 把BaseLayout插入到路由配置中，作为跟路由
+    api.modifyRoutes(routes => [
+        {
+            path: '/',
+            component: winPath(
+                join(api.paths.absTmpPath || '', absFilePath)
+            ),
+            children: routes
+        }
+    ]);
 };
diff --git a/packages/fes-plugin-layout/src/template/index.tpl b/packages/fes-plugin-layout/src/template/index.tpl
new file mode 100644
index 00000000..ff67008d
--- /dev/null
+++ b/packages/fes-plugin-layout/src/template/index.tpl
@@ -0,0 +1,41 @@
+import { reactive, defineComponent } from "vue";
+import { getRoutes, plugin, ApplyPluginsType } from "@@/core/coreExports";
+import BaseLayout from "./views/BaseLayout.vue";
+import { fillMenuData } from "./helpers";
+
+const userConfig = reactive({{{REPLACE_USER_CONFIG}}});
+
+const Layout = defineComponent({
+    name: 'Layout',
+    setup(){
+        const runtimeConfig = plugin.applyPlugins({
+            key: "layout",
+            type: ApplyPluginsType.modify,
+            initialValue: {},
+        });
+        const localeShared = plugin.getShared("locale");
+        const routeConfig = getRoutes();
+        userConfig.menus = fillMenuData(userConfig.menus, routeConfig);
+        return () => {
+            const slots = {
+                userCenter: () => {
+                    if (runtimeConfig.userCenter) {
+                        return (
+                            <runtimeConfig.userCenter></runtimeConfig.userCenter>
+                        );
+                    }
+                    return null;
+                },
+                locale: () => {
+                    if (localeShared) {
+                        return <localeShared.SelectLang></localeShared.SelectLang>;
+                    }
+                    return null;
+                },
+            };
+            return <BaseLayout {...userConfig} v-slots={slots}></BaseLayout>;
+        };
+    }
+})
+
+export default Layout;
diff --git a/packages/fes-plugin-layout/src/template/runtime.tpl b/packages/fes-plugin-layout/src/template/runtime.tpl
deleted file mode 100644
index da4f8bdf..00000000
--- a/packages/fes-plugin-layout/src/template/runtime.tpl
+++ /dev/null
@@ -1,37 +0,0 @@
-import { reactive } from "vue";
-import { getRoutes, plugin, ApplyPluginsType } from "@@/core/coreExports";
-import BaseLayout from "./views/BaseLayout.vue";
-import { fillMenuData } from "./helpers";
-
-const userConfig = reactive({{{REPLACE_USER_CONFIG}}});
-export function rootContainer(childComponent, args) {
-    const runtimeConfig = plugin.applyPlugins({
-        key: "layout",
-        type: ApplyPluginsType.modify,
-        initialValue: {},
-    });
-    const localeShared = plugin.getShared("locale");
-    const routeConfig = getRoutes();
-    userConfig.menus = fillMenuData(userConfig.menus, routeConfig);
-    return () => {
-        const slots = {
-            default: () => <childComponent keepAlive={userConfig.multiTabs}></childComponent>,
-            userCenter: () => {
-                if(runtimeConfig.userCenter){
-                    return (<runtimeConfig.userCenter></runtimeConfig.userCenter>)
-                }
-                return null
-            },
-            locale: () => {
-                if(localeShared){
-                    return (<localeShared.SelectLang></localeShared.SelectLang>)
-                }
-                return null
-            }
-          };
-        return (
-            <BaseLayout {...userConfig} v-slots={slots}>
-            </BaseLayout>
-        );
-    };
-}
\ No newline at end of file
diff --git a/packages/fes-plugin-layout/src/views/BaseLayout.vue b/packages/fes-plugin-layout/src/views/BaseLayout.vue
index 0dbfd332..40b451c9 100644
--- a/packages/fes-plugin-layout/src/views/BaseLayout.vue
+++ b/packages/fes-plugin-layout/src/views/BaseLayout.vue
@@ -23,24 +23,8 @@
                 <slot name="locale"></slot>
             </a-layout-header>
             <a-layout-content class="layout-content">
-                <template v-if="multiTabs">
-                    <a-tabs :activeKey="route.path" @tabClick="switchTab" class="layout-content-tabs" hide-add type="editable-card">
-                        <a-tab-pane v-for="page in openedPageList" :key="page.path" closable>
-                            <template #tab>
-                                {{page.name}}
-                                <ReloadOutlined v-show="route.path === page.path" @click="reloadTab(page.path)" class="layout-tabs-close-icon" />
-                            </template>
-                        </a-tab-pane>
-                    </a-tabs>
-                    <router-view v-slot="{ Component, route }">
-                        <keep-alive>
-                            <component :key="getPageKey(route)" :is="Component" />
-                        </keep-alive>
-                    </router-view>
-                </template>
-                <template v-else>
-                    <router-view></router-view>
-                </template>
+                <MultiTabProvider v-if="multiTabs" />
+                <router-view v-else></router-view>
             </a-layout-content>
             <a-layout-footer v-if="routeHasLayout" class="layout-footer">
                 Ant Design ©2020 Created by MumbleFe
@@ -51,18 +35,14 @@
 
 <script>
 import {
-    ref, computed, reactive, unref
+    ref, computed
 } from 'vue';
-import { useRoute, useRouter } from '@@/core/coreExports';
+import { useRoute } from '@@/core/coreExports';
 import Layout from 'ant-design-vue/lib/layout';
 import 'ant-design-vue/lib/layout/style';
-import Tabs from 'ant-design-vue/lib/tabs';
-import 'ant-design-vue/lib/tabs/style';
-import { ReloadOutlined } from '@ant-design/icons-vue';
 import Menu from './Menu';
+import MultiTabProvider from './MultiTabProvider';
 
-let i = 0;
-const getKey = () => ++i;
 
 export default {
     components: {
@@ -71,10 +51,8 @@ export default {
         [Layout.Content.name]: Layout.Content,
         [Layout.Header.name]: Layout.Header,
         [Layout.Footer.name]: Layout.Footer,
-        [Tabs.name]: Tabs,
-        [Tabs.TabPane.name]: Tabs.TabPane,
-        ReloadOutlined,
-        Menu
+        Menu,
+        MultiTabProvider
     },
     props: {
         menus: {
@@ -122,53 +100,12 @@ export default {
     },
     setup() {
         const route = useRoute();
-        const router = useRouter();
-        const openedPageList = reactive([]);
         const routeHasLayout = computed(() => {
             const _routeLayout = route.meta.layout;
             return _routeLayout === undefined ? true : _routeLayout;
         });
-        router.beforeEach((to) => {
-            if (!openedPageList.some(page => unref(page.path) === to.path)) {
-                openedPageList.push({
-                    path: to.path,
-                    route: to,
-                    name: to.meta.name,
-                    key: getKey()
-                });
-            }
-            return true;
-        });
-        // 还需要考虑参数
-        const switchTab = (path) => {
-            const selectedRoute = openedPageList.find(item => item.path === path);
-            if (selectedRoute) {
-                router.push({
-                    path,
-                    query: selectedRoute.route.query,
-                    params: selectedRoute.route.params
-                });
-            }
-        };
-        const reloadTab = (path) => {
-            const selectedPage = openedPageList.find(item => item.path === path);
-            if (selectedPage) {
-                selectedPage.key = getKey();
-            }
-        };
-        const getPageKey = (_route) => {
-            const selectedPage = openedPageList.find(item => item.path === _route.path);
-            if (selectedPage) {
-                return selectedPage.key;
-            }
-            return '';
-        };
         return {
-            getPageKey,
-            reloadTab,
-            switchTab,
             route,
-            openedPageList,
             routeHasLayout,
             collapsed: ref(false)
         };
@@ -224,25 +161,6 @@ export default {
     }
     .layout-content {
         position: relative;
-        .layout-content-tabs {
-            background: rgb(255, 255, 255);
-            margin: 0px;
-            padding-top: 6px;
-            width: 100%;
-            .ant-tabs-nav-container {
-                padding-left: 16px;
-                .layout-tabs-close-icon {
-                    vertical-align: middle;
-                    color: rgba(0, 0, 0, 0.45);
-                    font-size: 12px;
-                    margin-left: 6px;
-                    margin-top: -2px;
-                    &:hover{
-                        color: rgba(0, 0, 0, 0.8);
-                    }
-                }
-            }
-        }
     }
     .layout-footer {
         text-align: center;
diff --git a/packages/fes-plugin-layout/src/views/MultiTabProvider.vue b/packages/fes-plugin-layout/src/views/MultiTabProvider.vue
new file mode 100644
index 00000000..5bcdd5bd
--- /dev/null
+++ b/packages/fes-plugin-layout/src/views/MultiTabProvider.vue
@@ -0,0 +1,111 @@
+<template>
+    <a-tabs :activeKey="route.path" @tabClick="switchTab" class="layout-content-tabs" hide-add type="editable-card">
+        <a-tab-pane v-for="page in openedPageList" :key="page.path" closable>
+            <template #tab>
+                {{page.name}}
+                <ReloadOutlined v-show="route.path === page.path" @click="reloadTab(page.path)" class="layout-tabs-close-icon" />
+            </template>
+        </a-tab-pane>
+    </a-tabs>
+    <router-view v-slot="{ Component, route }">
+        <keep-alive>
+            <component :key="getPageKey(route)" :is="Component" />
+        </keep-alive>
+    </router-view>
+</template>
+<script>
+import {
+    reactive, unref
+} from 'vue';
+import Tabs from 'ant-design-vue/lib/tabs';
+import 'ant-design-vue/lib/tabs/style';
+import { ReloadOutlined } from '@ant-design/icons-vue';
+import { useRouter, useRoute } from '@@/core/coreExports';
+
+let i = 0;
+const getKey = () => ++i;
+export default {
+    components: {
+        [Tabs.name]: Tabs,
+        [Tabs.TabPane.name]: Tabs.TabPane,
+        ReloadOutlined
+    },
+    setup() {
+        const route = useRoute();
+        const router = useRouter();
+        const openedPageList = reactive([{
+            path: unref(route.path),
+            route: {
+                query: unref(route.query),
+                params: unref(route.params)
+            },
+            name: unref(route.meta).name,
+            key: getKey()
+        }]);
+        const findPage = path => openedPageList.find(item => unref(item.path) === path);
+        router.beforeEach((to) => {
+            if (!findPage(to.path)) {
+                openedPageList.push({
+                    path: to.path,
+                    route: to,
+                    name: to.meta.name,
+                    key: getKey()
+                });
+            }
+            return true;
+        });
+        // 还需要考虑参数
+        const switchTab = (path) => {
+            const selectedPage = findPage(path);
+            if (selectedPage) {
+                router.push({
+                    path,
+                    query: selectedPage.route.query,
+                    params: selectedPage.route.params
+                });
+            }
+        };
+        const reloadTab = (path) => {
+            const selectedPage = findPage(path);
+            if (selectedPage) {
+                selectedPage.key = getKey();
+            }
+        };
+        const getPageKey = (_route) => {
+            const selectedPage = findPage(_route.path);
+            if (selectedPage) {
+                return selectedPage.key;
+            }
+            return '';
+        };
+        return {
+            route,
+            openedPageList,
+            getPageKey,
+            reloadTab,
+            switchTab
+        };
+    }
+};
+</script>
+<style lang="less">
+.layout-content-tabs {
+    background: rgb(255, 255, 255);
+    margin: 0px;
+    padding-top: 6px;
+    width: 100%;
+    .ant-tabs-nav-container {
+        padding-left: 16px;
+        .layout-tabs-close-icon {
+            vertical-align: middle;
+            color: rgba(0, 0, 0, 0.45);
+            font-size: 12px;
+            margin-left: 6px;
+            margin-top: -2px;
+            &:hover{
+                color: rgba(0, 0, 0, 0.8);
+            }
+        }
+    }
+}
+</style>
diff --git a/packages/fes-preset-built-in/src/plugins/generateFiles/fes/fes.tpl b/packages/fes-preset-built-in/src/plugins/generateFiles/fes/fes.tpl
index 994c16ec..ca548063 100644
--- a/packages/fes-preset-built-in/src/plugins/generateFiles/fes/fes.tpl
+++ b/packages/fes-preset-built-in/src/plugins/generateFiles/fes/fes.tpl
@@ -8,7 +8,6 @@ import { plugin } from './core/plugin';
 import './core/pluginRegister';
 import { ApplyPluginsType } from '{{{ runtimePath }}}';
 import { getRoutes } from './core/routes/routes';
-import BaseView from './core/routes/baseView';
 
 {{{ imports }}}
 
@@ -19,9 +18,7 @@ const renderClient = (opts = {}) => {
     const rootContainer = plugin.applyPlugins({
         type: ApplyPluginsType.modify,
         key: 'rootContainer',
-        initialValue: defineComponent((props) => {
-            return () => (<BaseView {...props}></BaseView>)
-        }),
+        initialValue: defineComponent(() => () => (<RouterView></RouterView>)),
         args: {
             routes: routes,
             plugin: plugin
diff --git a/packages/fes-preset-built-in/src/plugins/misc/route/index.js b/packages/fes-preset-built-in/src/plugins/misc/route/index.js
index a632d323..d978fe30 100644
--- a/packages/fes-preset-built-in/src/plugins/misc/route/index.js
+++ b/packages/fes-preset-built-in/src/plugins/misc/route/index.js
@@ -250,8 +250,6 @@ export default function (api) {
 
     const absRuntimeFilePath = join(namespace, 'runtime.js');
 
-    const baseViewFilePath = join(namespace, 'baseView.vue');
-
     api.onGenerateFiles(async () => {
         const routesTpl = readFileSync(join(__dirname, 'template/routes.tpl'), 'utf-8');
         const routes = await api.getRoutesJSON();
@@ -269,11 +267,6 @@ export default function (api) {
             path: absRuntimeFilePath,
             content: readFileSync(join(__dirname, 'template/runtime.tpl'), 'utf-8')
         });
-
-        api.writeTmpFile({
-            path: baseViewFilePath,
-            content: readFileSync(join(__dirname, 'template/baseView.vue'), 'utf-8')
-        });
     });
 
     api.addCoreExports(() => [
diff --git a/packages/fes-preset-built-in/src/plugins/misc/route/template/baseView.vue b/packages/fes-preset-built-in/src/plugins/misc/route/template/baseView.vue
deleted file mode 100644
index 7073fc6a..00000000
--- a/packages/fes-preset-built-in/src/plugins/misc/route/template/baseView.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-    <template v-if="keepAlive">
-        <router-view v-slot="{ Component }">
-            <keep-alive>
-                <component :is="Component" />
-            </keep-alive>
-        </router-view>
-    </template>
-    <template v-else>
-        <router-view></router-view>
-    </template>
-</template>
-<script>
-export default {
-    props: {
-        keepAlive: {
-            type: Boolean,
-            default: false
-        }
-    }
-};
-</script>