From fb6b7c339bd1c44148110a6ca97459f58bdb168e Mon Sep 17 00:00:00 2001
From: harrywan <harrywan@webank.com>
Date: Tue, 23 Nov 2021 16:30:26 +0800
Subject: [PATCH] =?UTF-8?q?fix(plugin-layout):=20=E5=A4=9A=E9=A1=B5?=
 =?UTF-8?q?=E7=AD=BE=E6=A0=87=E9=A2=98=E6=AD=A3=E7=A1=AE=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     |  2 +
 .../create-fes-app/templates/app/pc/.fes.js   |  5 +-
 .../src/runtime/helpers/pluginLocale.js       |  2 +-
 .../src/runtime/views/MultiTabProvider.vue    | 58 +++++++++++--------
 packages/fes-template/.fes.js                 |  2 +-
 5 files changed, 41 insertions(+), 28 deletions(-)

diff --git a/README.md b/README.md
index 2792fba2..deef2cdc 100644
--- a/README.md
+++ b/README.md
@@ -63,6 +63,8 @@ Fes.js 是一个优秀的前端应用解决方案。Fes.js 以 Vue 3.0 和路由
 | [@fesjs/plugin-qiankun](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) |  基于 `qiankun`，提供微服务能力 |
 | [@fesjs/plugin-sass](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) |  样式支持sass |
 | [@fesjs/plugin-monaco-editor](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力，  基于`monaco-editor`（VS Code使用的代码编辑器） |
+| [@fesjs/plugin-windicss](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/windicss.html) | 基于 `windicss`，提供原子化 CSS 能力 |
+
 
 ## 像数 1, 2, 3 一样容易
 使用 `yarn`：
diff --git a/packages/create-fes-app/templates/app/pc/.fes.js b/packages/create-fes-app/templates/app/pc/.fes.js
index 658f9fe3..4f402c18 100644
--- a/packages/create-fes-app/templates/app/pc/.fes.js
+++ b/packages/create-fes-app/templates/app/pc/.fes.js
@@ -5,12 +5,13 @@ export default {
     publicPath: './',
     access: {
         roles: {
-            admin: ["/", "/onepiece"]
+            admin: ["*"],
+            manager: ["/"]
         }
     },
     layout: {
         title: "Fes.js",
-        footer: 'Created by MumbelFe',
+        footer: 'Created by MumbleFe',
         multiTabs: false,
         menus: [{
             name: 'index'
diff --git a/packages/fes-plugin-layout/src/runtime/helpers/pluginLocale.js b/packages/fes-plugin-layout/src/runtime/helpers/pluginLocale.js
index 279ea2d4..5dd18b4e 100644
--- a/packages/fes-plugin-layout/src/runtime/helpers/pluginLocale.js
+++ b/packages/fes-plugin-layout/src/runtime/helpers/pluginLocale.js
@@ -2,7 +2,7 @@ import { unref, computed } from 'vue';
 import { plugin } from '@@/core/coreExports';
 
 
-const transTitle = (name) => {
+export const transTitle = (name) => {
     const sharedLocale = plugin.getShared('locale');
     if (sharedLocale) {
         const { t } = sharedLocale.useI18n();
diff --git a/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue b/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue
index 4ddcbf04..668f9909 100644
--- a/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue
+++ b/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue
@@ -7,9 +7,13 @@
         @tabClick="switchPage"
         @edit="onEdit"
     >
-        <a-tab-pane v-for="page in pageList" :key="page.path" :closable="route.path !== page.path">
+        <a-tab-pane
+            v-for="page in pageList"
+            :key="page.path"
+            :closable="route.path !== page.path"
+        >
             <template #tab>
-                {{page.name}}
+                {{page.title}}
                 <ReloadOutlined
                     v-show="route.path === page.path"
                     class="layout-tabs-close-icon"
@@ -42,7 +46,9 @@
     </router-view>
 </template>
 <script>
-import { reactive, unref } from 'vue';
+import {
+    computed, onMounted, reactive, unref, ref
+} from 'vue';
 import Tabs from 'ant-design-vue/lib/tabs';
 import Dropdown from 'ant-design-vue/lib/dropdown';
 import Menu from 'ant-design-vue/lib/menu';
@@ -51,6 +57,7 @@ import 'ant-design-vue/lib/dropdown/style/css';
 import 'ant-design-vue/lib/tabs/style/css';
 import { ReloadOutlined, MoreOutlined } from '@ant-design/icons-vue';
 import { useRouter, useRoute } from '@@/core/coreExports';
+import { transTitle } from '../helpers/pluginLocale';
 
 let i = 0;
 const getKey = () => ++i;
@@ -67,26 +74,28 @@ export default {
     setup() {
         const route = useRoute();
         const router = useRouter();
-        const pageList = reactive([
-            {
-                path: unref(route.path),
-                route: {
-                    query: unref(route.query),
-                    params: unref(route.params)
-                },
-                name: unref(route.meta).name,
+        const pageList = ref([]);
+
+        const createPage = (route) => {
+            const title = route.meta.title;
+            return {
+                path: route.path,
+                route,
+                name: route.meta.name,
+                title: computed(() => transTitle(title)),
                 key: getKey()
-            }
-        ]);
-        const findPage = path => pageList.find(item => unref(item.path) === unref(path));
+            };
+        };
+
+        const findPage = path => pageList.value.find(item => unref(item.path) === unref(path));
+
+        onMounted(() => {
+            pageList.value = [createPage(route)];
+        });
+
         router.beforeEach((to) => {
             if (!findPage(to.path)) {
-                pageList.push({
-                    path: to.path,
-                    route: to,
-                    name: to.meta.name,
-                    key: getKey()
-                });
+                pageList.value = [...pageList.value, createPage(to)];
             }
             return true;
         });
@@ -104,8 +113,10 @@ export default {
         const onEdit = (targetKey, action) => {
             if (action === 'remove') {
                 const selectedPage = findPage(targetKey);
-                const index = pageList.indexOf(selectedPage);
-                pageList.splice(index, 1);
+                const list = [...pageList.value];
+                const index = list.indexOf(selectedPage);
+                list.splice(index, 1);
+                pageList.value = list;
             }
         };
         const reloadPage = (path) => {
@@ -116,8 +127,7 @@ export default {
         };
         const closeOtherPage = (path) => {
             const selectedPage = findPage(path || unref(route.path));
-            pageList.length = 0;
-            pageList.push(selectedPage);
+            pageList.value = [selectedPage];
         };
         const getPageKey = (_route) => {
             const selectedPage = findPage(_route.path);
diff --git a/packages/fes-template/.fes.js b/packages/fes-template/.fes.js
index 105c7a30..6eb6bd2c 100644
--- a/packages/fes-template/.fes.js
+++ b/packages/fes-template/.fes.js
@@ -33,7 +33,7 @@ export default {
     layout: {
         title: "Fes.js",
         footer: "Created by MumbleFe",
-        multiTabs: false,
+        multiTabs: true,
         navigation: "mixin",
         theme: 'light',
         menus: [