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

docs/reference/plugin/plugins/layout.md

@@ -354,6 +354,29 @@ export const access = {
 };
 ```
 
+## API
+
+### useTitle
+类型定义如下：
+```ts
+function useTitle(title: string | Ref<string>): void;
+```
+                
+                
+当使用多页签模式时，在页面中使用 `useTitle` 可以自定义页面标签：
+```vue
+<script setup>
+import { ref } from 'vue';
+import { useRoute, useTitle } from '@fesjs/fes';
+
+const title = ref(`详情-${route.params?.id}`);
+useTitle(title);
+</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', 'useTitle'],
             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 { useTitle } from './useTitle';

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

@@ -0,0 +1,11 @@
+import { useRoute } from '@@/core/coreExports';
+import { reactive } from 'vue';
+
+const cache = reactive(new Map());
+
+export const getTitle = (path) => cache.get(path);
+
+export const useTitle = (title) => {
+    const route = useRoute();
+    cache.set(route.path, title);
+};

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 } 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',

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

@@ -12,6 +12,8 @@ interface Menu {
 
 export const Page: Component;
 
+export function useTitle(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,7 +1,5 @@
 <template>
-    <div class="page">
+    <div class="page">menuTest: {{ route.params }}</div>
-        menuTest: {{route.params}}
-    </div>
 </template>
 <config>
 {
@@ -9,17 +7,24 @@
 }
 </config>
 <script>
-import { useRoute } from '@fesjs/fes';
+import { ref } from 'vue';
+import { useRoute, useTitle } from '@fesjs/fes';
 
 export default {
-    components: {
+    components: {},
-    },
     setup() {
         const route = useRoute();
+        const title = ref(`详情-${route.params?.id}`);
+        useTitle(title);
+
+        setTimeout(() => {
+            title.value = `详情-${route.params?.id}-changed`;
+        }, 1000);
+
         return {
-            route
+            route,
         };
-    }
+    },
 };
 </script>
 

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

@@ -1,7 +1,5 @@
 <template>
-    <div class="page">
+    <div class="page">menuTest-index</div>
-        menuTest-index
-    </div>
 </template>
 <config>
 {
@@ -10,12 +8,10 @@
 </config>
 <script>
 export default {
-    components: {
+    components: {},
-    },
     setup() {
-        return {
+        return {};
-        };
+    },
-    }
 };
 </script>
 

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

@@ -1,5 +1,5 @@
 <template>
-    <div style="display: flex;flex-direction: column;">
+    <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>