feat(plugin-layout): 多页签支持配置title (#174)

* feat(plugin-layout): 多页签支持配置title

* feat: 更改参数名 & 关闭页面清数据

* docs: 更新文档

* docs: 更新文档

docs/reference/plugin/plugins/layout.md

@@ -313,7 +313,7 @@ export const layout = (layoutConfig, { initialState }) => ({
 比如：
 
 ```js
-export const access = {
+export const layout = {
     unAccessHandler({ to, next }) {
         const accesssIds = accessApi.getAccess();
         if (to.path === '/404') {
@@ -343,7 +343,7 @@ export const access = {
 比如：
 
 ```js
-export const access = {
+export const layout = {
     noFoundHandler({ next }) {
         const accesssIds = accessApi.getAccess();
         if (!accesssIds.includes('/404')) {
@@ -354,6 +354,30 @@ export const access = {
 };
 ```
 
+## API
+
+### useTabTitle
+类型定义如下：
+```ts
+function useTabTitle(title: string | Ref<string>): void;
+```
+
+
+当使用多页签模式时，在页面中使用 `useTabTitle` 可以自定义页面标签：
+```vue
+<script setup>
+import { useRoute, useTabTitle } from '@fesjs/fes';
+
+const titleRef = useTabTitle(`详情-${route.params?.id}`);
+
+//如果要更新
+titleRef.value = "changed"
+</script>
+```
+
+
+
+
 ## 4.x 升级到 5.x
 
 1. 个性化 layout 配置改为使用传入 navigation

packages/fes-builder-webpack/src/plugins/commands/webpackConfig/html.js

@@ -7,7 +7,7 @@ export default async function createHtmlWebpackConfig({ api, cwd, config, webpac
         filename: '[name].html',
         ...config.html,
         templateParameters: {
-            title: config.html?.title || api.config.title || 'Fes.js',
+            title: api.config.title || config.html?.title || 'fes.js',
             ...resolveRuntimeEnv(publicPath),
             mountElementId: config.mountElementId,
         },

packages/fes-plugin-layout/src/index.js

@@ -75,7 +75,7 @@ export default (api) => {
 
     api.addPluginExports(() => [
         {
-            specifiers: ['Page'],
+            specifiers: ['Page', 'useTabTitle'],
             source: join(namespace, 'index.js'),
         },
     ]);

packages/fes-plugin-layout/src/runtime/index.js

@@ -1 +1,2 @@
 export { default as Page } from './views/page.vue';
+export { useTabTitle } from './useTitle';

packages/fes-plugin-layout/src/runtime/useTitle.js

@@ -0,0 +1,18 @@
+import { reactive, ref } from 'vue';
+import { useRoute } from '@@/core/coreExports';
+
+const cache = reactive(new Map());
+
+export const getTitle = (path) => cache.get(path);
+
+export const deleteTitle = (patch) => cache.delete(patch);
+
+export const useTabTitle = (title) => {
+    const route = useRoute();
+    const titleRef = ref(title);
+    const path = route.path;
+
+    cache.set(path, titleRef);
+
+    return titleRef;
+};

packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue

@@ -31,6 +31,7 @@ import { FTabs, FTabPane, FDropdown } from '@fesjs/fes-design';
 import { ReloadOutlined, MoreOutlined } from '@fesjs/fes-design/icon';
 import { useRouter, useRoute } from '@@/core/coreExports';
 import { transTitle } from '../helpers/pluginLocale';
+import { getTitle, deleteTitle } from '../useTitle';
 import Page from './page.vue';
 
 let i = 0;
@@ -52,17 +53,20 @@ export default {
         const route = useRoute();
         const router = useRouter();
         const createPage = (_route) => {
-            const title = _route.meta.title;
+            const computedTitle = computed(() => {
+                const customTitle = unref(getTitle(_route.path));
+                return customTitle ?? transTitle(_route.meta.title);
+            });
             return {
                 path: _route.path,
                 route: _route,
                 name: _route.meta.name ?? _route.name,
-                title: computed(() => transTitle(title)),
+                title: computedTitle,
                 key: getKey(),
             };
         };
 
-        const pageList = ref([createPage(route)]);
+        const pageList = ref([createPage(router.currentRoute.value)]);
         const actions = [
             {
                 value: 'closeOtherPage',
@@ -113,6 +117,7 @@ export default {
             list.splice(index, 1);
             pageList.value = list;
             pageRef.value.removeKeepAlive(selectedPage.name);
+            deleteTitle(selectedPage.path);
         };
         const reloadPage = (path) => {
             const selectedPage = findPage(path || unref(route.path));

packages/fes-plugin-layout/types.d.ts

@@ -12,6 +12,8 @@ interface Menu {
 
 export const Page: Component;
 
+export function useTabTitle(title: string | Ref<string>): void;
+
 interface LayoutRuntimeConfig {
     footer?: string;
     theme?: 'dark' | 'light';

packages/fes-preset-built-in/src/plugins/generateFiles/fes/index.js

@@ -24,7 +24,7 @@ export default function (api) {
             path: 'fes.js',
             content: Mustache.render(fesTpl, {
                 enableTitle: api.config.title !== false,
-                defaultTitle: api.config.title || '',
+                defaultTitle: api.config.title || 'fes.js',
                 runtimePath,
                 rootElement: `#${api.config.mountElementId || 'app'}`,
                 entryCode: (

packages/fes-template/.fes.js

@@ -41,7 +41,7 @@ export default defineBuildConfig({
     layout: {
         title: 'Fes.js',
         footer: 'Created by MumbleFE',
-        multiTabs: false,
+        multiTabs: true,
         navigation: 'side',
         theme: 'dark',
         menus: [

packages/fes-template/src/pages/menuTest/@id.vue

@@ -1,25 +1,28 @@
 <template>
-    <div class="page">
-        menuTest: {{route.params}}
-    </div>
+    <div class="page">menuTest: {{ route.params }} <input style="border: 1px solid red" /></div>
 </template>
 <config>
 {
     "title": "menuTest-详情"
 }
 </config>
 <script>
-import { useRoute } from '@fesjs/fes';
+import { useRoute, useTabTitle } from '@fesjs/fes';
 
 export default {
-    components: {
-    },
+    components: {},
     setup() {
         const route = useRoute();
+        const title = useTabTitle(`详情-${route.params?.id}`);
+
+        setTimeout(() => {
+            title.value = `详情-${route.params?.id}-changed`;
+        }, 1000);
+
         return {
-            route
+            route,
         };
-    }
+    },
 };
 </script>
 

packages/fes-template/src/pages/menuTest/index.vue

@@ -1,6 +1,11 @@
 <template>
     <div class="page">
         menuTest-index
+        <div style="display: flex; flex-direction: column">
+            <router-link to="/menuTest/1">Go to 1</router-link>
+            <router-link to="/menuTest/2">Go to 2</router-link>
+            <router-link to="/menuTest/3">Go to 3</router-link>
+        </div>
     </div>
 </template>
 <config>
@@ -10,12 +15,10 @@
 </config>
 <script>
 export default {
-    components: {
-    },
+    components: {},
     setup() {
-        return {
-        };
-    }
+        return {};
+    },
 };
 </script>