feat: 添加 useLayout 暴露 closeTab 的能力

WeBankFinTech · Dec 18, 2023 · f4ef24c · f4ef24c
1 parent f77566a
commit f4ef24c
Show file tree

Hide file tree

Showing 8 changed files with 91 additions and 15 deletions.
diff --git 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
@@ -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,15 +84,15 @@ export default (api) => {
 
     api.addPluginExports(() => [
         {
-            specifiers: ['Page', 'useTabTitle'],
+            specifiers: ['Page', 'useTabTitle', 'useLayout'],
             source: join(namespace, 'index.js'),
         },
     ]);
 
     // 把 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
@@ -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
@@ -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
@@ -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
@@ -1,29 +1,35 @@
 <template>
-    <monaco-editor ref="editorRef" v-model="json" :language="language" height="200px" check />
+    <MonacoEditor ref="editorRef" v-model="json" :language="language" height="200px" check />
     {{ json }}
 </template>
+
 <config>
 {
     "name": "editor",
     "title": "$editor"
 }
 </config>
+
 <script>
 import { onMounted, ref } from 'vue';
-import { MonacoEditor } from '@fesjs/fes';
+import { MonacoEditor, useLayout } from '@fesjs/fes';
 
 export default {
     components: {
         MonacoEditor,
     },
     setup() {
-        console.log('editor.vue');
+        const { closeTab } = useLayout();
+
         const editorRef = ref();
         const json = ref('');
         const language = ref('json');
         onMounted(() => {
             setTimeout(() => {
                 language.value = 'html';
+            }, 2000);
+            setTimeout(() => {
+                closeTab();
             }, 3000);
         });
         return {

diff --git a/packages/fes-template/src/pages/index.vue b/packages/fes-template/src/pages/index.vue
@@ -1,7 +1,9 @@
 <template>
     <div class="page">
         home
-        <FButton class="m-2" @click="go">Button</FButton>
+        <FButton class="m-2" @click="go">
+            Button
+        </FButton>
     </div>
 </template>
 
@@ -13,12 +15,13 @@ defineRouteMeta({
     name: 'index',
     title: '$home',
 });
+
 console.log('123123'.replaceAll('123', '234'));
 
 const router = useRouter();
-const go = () => {
+function go() {
     router.push('/editor');
-};
+}
 </script>
 
 <style>

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml