From f4ef24c5173ebb83a02a6e2a94486e65b9b93ad0 Mon Sep 17 00:00:00 2001 From: winixt Date: Mon, 18 Dec 2023 17:57:49 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20useLayout=20?= =?UTF-8?q?=E6=9A=B4=E9=9C=B2=20closeTab=20=E7=9A=84=E8=83=BD=E5=8A=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/fes-plugin-layout/package.json | 3 +- packages/fes-plugin-layout/src/index.js | 12 ++--- .../fes-plugin-layout/src/runtime/index.js | 1 + .../src/runtime/useLayout.js | 12 +++++ .../src/runtime/views/MultiTabProvider.vue | 6 +++ packages/fes-template/src/pages/editor.vue | 12 +++-- packages/fes-template/src/pages/index.vue | 9 ++-- pnpm-lock.yaml | 51 ++++++++++++++++++- 8 files changed, 91 insertions(+), 15 deletions(-) create mode 100644 packages/fes-plugin-layout/src/runtime/useLayout.js diff --git a/packages/fes-plugin-layout/package.json b/packages/fes-plugin-layout/package.json index 3b474dc7..e20386ef 100644 --- a/packages/fes-plugin-layout/package.json +++ b/packages/fes-plugin-layout/package.json @@ -34,7 +34,8 @@ "vue-router": "^4.0.1" }, "dependencies": { - "@fesjs/utils": "^3.0.1" + "@fesjs/utils": "^3.0.1", + "@vueuse/core": "^10.7.0" }, "typings": "./types.d.ts" } diff --git a/packages/fes-plugin-layout/src/index.js b/packages/fes-plugin-layout/src/index.js index 999ca432..5ff334de 100644 --- a/packages/fes-plugin-layout/src/index.js +++ b/packages/fes-plugin-layout/src/index.js @@ -1,5 +1,5 @@ -import { readFileSync } from 'fs'; -import { join } from 'path'; +import { readFileSync } from 'node:fs'; +import { join } from 'node:path'; import { winPath } from '@fesjs/utils'; import { name } from '../package.json'; @@ -40,7 +40,7 @@ export default (api) => { const iconNames = helper.getIconNamesFromMenu(userConfig.menus); - const iconsString = iconNames.map((iconName) => `import { ${iconName} } from '@fesjs/fes-design/icon'`); + const iconsString = iconNames.map(iconName => `import { ${iconName} } from '@fesjs/fes-design/icon'`); api.writeTmpFile({ path: join(namespace, 'icons.js'), content: ` @@ -84,7 +84,7 @@ export default (api) => { api.addPluginExports(() => [ { - specifiers: ['Page', 'useTabTitle'], + specifiers: ['Page', 'useTabTitle', 'useLayout'], source: join(namespace, 'index.js'), }, ]); @@ -92,7 +92,7 @@ export default (api) => { // 把 BaseLayout插入到路由配置中，作为根路由 // 添加 403 和 404 路由 api.modifyRoutes((routes) => { - if (!routes.find((item) => item.path === '/403')) { + if (!routes.find(item => item.path === '/403')) { routes.push({ path: '/403', name: 'Exception403', @@ -102,7 +102,7 @@ export default (api) => { }, }); } - if (!routes.find((item) => item.path === '/404')) { + if (!routes.find(item => item.path === '/404')) { routes.push({ path: '/404', name: 'Exception404', diff --git a/packages/fes-plugin-layout/src/runtime/index.js b/packages/fes-plugin-layout/src/runtime/index.js index 5117f920..f5738924 100644 --- a/packages/fes-plugin-layout/src/runtime/index.js +++ b/packages/fes-plugin-layout/src/runtime/index.js @@ -1,2 +1,3 @@ export { default as Page } from './views/page.vue'; export { useTabTitle } from './useTitle'; +export * from './useLayout'; diff --git a/packages/fes-plugin-layout/src/runtime/useLayout.js b/packages/fes-plugin-layout/src/runtime/useLayout.js new file mode 100644 index 00000000..452cf17d --- /dev/null +++ b/packages/fes-plugin-layout/src/runtime/useLayout.js @@ -0,0 +1,12 @@ +import { createSharedComposable } from '@vueuse/core'; +import { shallowReactive } from 'vue'; + +function _useLayout() { + const state = shallowReactive({ + closeTab: () => {}, + }); + + return state; +} + +export const useLayout = createSharedComposable(_useLayout); diff --git a/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue b/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue index cec9349d..96b9e683 100644 --- a/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue +++ b/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue @@ -33,6 +33,7 @@ import { MoreOutlined, ReloadOutlined } from '@fesjs/fes-design/icon'; import { useRoute, useRouter } from '@@/core/coreExports'; import { transTitle } from '../helpers/pluginLocale'; import { deleteTitle, getTitle } from '../useTitle'; +import { useLayout } from '../useLayout'; import Page from './page.vue'; let i = 0; @@ -53,6 +54,8 @@ export default { const pageRef = ref(); const route = useRoute(); const router = useRouter(); + const layoutState = useLayout(); + const createPage = (_route) => { const computedTitle = computed(() => { const customTitle = unref(getTitle(_route.path)); @@ -104,6 +107,7 @@ export default { } }; const handleCloseTab = async (targetKey) => { + targetKey = targetKey || route.path; const selectedPage = findPage(targetKey); const list = [...pageList.value]; const index = list.indexOf(selectedPage); @@ -121,6 +125,8 @@ export default { pageRef.value.removeKeepAlive(selectedPage.name); deleteTitle(selectedPage.path); }; + layoutState.closeTab = handleCloseTab; + const reloadPage = (path) => { const selectedPage = findPage(path || unref(route.path)); if (selectedPage) diff --git a/packages/fes-template/src/pages/editor.vue b/packages/fes-template/src/pages/editor.vue index c4b192eb..a895987c 100644 --- a/packages/fes-template/src/pages/editor.vue +++ b/packages/fes-template/src/pages/editor.vue @@ -1,29 +1,35 @@ + { "name": "editor", "title": "$editor" } +