From beb4661c2d60b0c69fbb076f72b36bf2a18e7c02 Mon Sep 17 00:00:00 2001 From: wanchun <445436867@qq.com> Date: Thu, 9 Mar 2023 11:32:59 +0800 Subject: [PATCH] =?UTF-8?q?feat(plugin-layout):=20=E5=A4=9A=E9=A1=B5?= =?UTF-8?q?=E7=AD=BE=E6=94=AF=E6=8C=81=E9=85=8D=E7=BD=AEtitle?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/reference/plugin/plugins/layout.md | 23 +++++++++++++++++++ .../plugins/commands/webpackConfig/html.js | 2 +- packages/fes-plugin-layout/src/index.js | 2 +- .../fes-plugin-layout/src/runtime/index.js | 1 + .../fes-plugin-layout/src/runtime/useTitle.js | 11 +++++++++ .../src/runtime/views/MultiTabProvider.vue | 10 +++++--- packages/fes-plugin-layout/types.d.ts | 2 ++ .../src/plugins/generateFiles/fes/index.js | 2 +- packages/fes-template/.fes.js | 2 +- .../fes-template/src/pages/menuTest/@id.vue | 21 ++++++++++------- .../fes-template/src/pages/menuTest/index.vue | 12 ++++------ .../src/pages/menuTest/layout.vue | 2 +- 12 files changed, 66 insertions(+), 24 deletions(-) create mode 100644 packages/fes-plugin-layout/src/runtime/useTitle.js diff --git a/docs/reference/plugin/plugins/layout.md b/docs/reference/plugin/plugins/layout.md index 74251c78..635ca324 100644 --- a/docs/reference/plugin/plugins/layout.md +++ b/docs/reference/plugin/plugins/layout.md @@ -354,6 +354,29 @@ export const access = { }; ``` +## API + +### useTitle +类型定义如下： +```ts +function useTitle(title: string | Ref): void; +``` + + +当使用多页签模式时，在页面中使用 `useTitle` 可以自定义页面标签： +```vue + +``` + + + + ## 4.x 升级到 5.x 1. 个性化 layout 配置改为使用传入 navigation diff --git a/packages/fes-builder-webpack/src/plugins/commands/webpackConfig/html.js b/packages/fes-builder-webpack/src/plugins/commands/webpackConfig/html.js index 8c8d45ec..a598b0a3 100644 --- a/packages/fes-builder-webpack/src/plugins/commands/webpackConfig/html.js +++ b/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, }, diff --git a/packages/fes-plugin-layout/src/index.js b/packages/fes-plugin-layout/src/index.js index a06920c8..798e5d0c 100644 --- a/packages/fes-plugin-layout/src/index.js +++ b/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'), }, ]); diff --git a/packages/fes-plugin-layout/src/runtime/index.js b/packages/fes-plugin-layout/src/runtime/index.js index 72f0ee5a..6b680466 100644 --- a/packages/fes-plugin-layout/src/runtime/index.js +++ b/packages/fes-plugin-layout/src/runtime/index.js @@ -1 +1,2 @@ export { default as Page } from './views/page.vue'; +export { useTitle } from './useTitle'; diff --git a/packages/fes-plugin-layout/src/runtime/useTitle.js b/packages/fes-plugin-layout/src/runtime/useTitle.js new file mode 100644 index 00000000..87ad8108 --- /dev/null +++ b/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); +}; diff --git a/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue b/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue index 974fe297..268af3f5 100644 --- a/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue +++ b/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', diff --git a/packages/fes-plugin-layout/types.d.ts b/packages/fes-plugin-layout/types.d.ts index 0c3a5321..fd4e78b6 100644 --- a/packages/fes-plugin-layout/types.d.ts +++ b/packages/fes-plugin-layout/types.d.ts @@ -12,6 +12,8 @@ interface Menu { export const Page: Component; +export function useTitle(title: string | Ref): void; + interface LayoutRuntimeConfig { footer?: string; theme?: 'dark' | 'light'; diff --git a/packages/fes-preset-built-in/src/plugins/generateFiles/fes/index.js b/packages/fes-preset-built-in/src/plugins/generateFiles/fes/index.js index a15bae4e..d64504d3 100644 --- a/packages/fes-preset-built-in/src/plugins/generateFiles/fes/index.js +++ b/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: ( diff --git a/packages/fes-template/.fes.js b/packages/fes-template/.fes.js index 83373159..1f2824ba 100644 --- a/packages/fes-template/.fes.js +++ b/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: [ diff --git a/packages/fes-template/src/pages/menuTest/@id.vue b/packages/fes-template/src/pages/menuTest/@id.vue index 4977d60f..e05530dc 100644 --- a/packages/fes-template/src/pages/menuTest/@id.vue +++ b/packages/fes-template/src/pages/menuTest/@id.vue @@ -1,7 +1,5 @@ { @@ -9,17 +7,24 @@ } diff --git a/packages/fes-template/src/pages/menuTest/index.vue b/packages/fes-template/src/pages/menuTest/index.vue index d3ce9c1b..c6683079 100644 --- a/packages/fes-template/src/pages/menuTest/index.vue +++ b/packages/fes-template/src/pages/menuTest/index.vue @@ -1,7 +1,5 @@ { @@ -10,12 +8,10 @@ diff --git a/packages/fes-template/src/pages/menuTest/layout.vue b/packages/fes-template/src/pages/menuTest/layout.vue index 6e323c0d..10c8f24a 100644 --- a/packages/fes-template/src/pages/menuTest/layout.vue +++ b/packages/fes-template/src/pages/menuTest/layout.vue @@ -1,5 +1,5 @@