fix(plugin-layout): 多页签标题正确显示

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`：

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'

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();

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([
+        const pageList = ref([]);
-            {
+
-                path: unref(route.path),
+        const createPage = (route) => {
-                route: {
+            const title = route.meta.title;
-                    query: unref(route.query),
+            return {
-                    params: unref(route.params)
+                path: route.path,
-                },
+                route,
-                name: unref(route.meta).name,
+                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({
+                pageList.value = [...pageList.value, createPage(to)];
-                    path: to.path,
-                    route: to,
-                    name: to.meta.name,
-                    key: getKey()
-                });
             }
             return true;
         });
@@ -104,8 +113,10 @@ export default {
         const onEdit = (targetKey, action) => {
             if (action === 'remove') {
                 const selectedPage = findPage(targetKey);
-                const index = pageList.indexOf(selectedPage);
+                const list = [...pageList.value];
-                pageList.splice(index, 1);
+                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.value = [selectedPage];
-            pageList.push(selectedPage);
         };
         const getPageKey = (_route) => {
             const selectedPage = findPage(_route.path);

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: [