diff --git a/packages/fes-plugin-layout/package.json b/packages/fes-plugin-layout/package.json
index 1f1af348..e20386ef 100644
--- a/packages/fes-plugin-layout/package.json
+++ b/packages/fes-plugin-layout/package.json
@@ -1,40 +1,41 @@
 {
-  "name": "@fesjs/plugin-layout",
-  "version": "5.1.7",
-  "description": "@fesjs/plugin-layout",
-  "main": "lib/index.js",
-  "files": [
-    "lib",
-    "types.d.ts"
-  ],
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/WeBankFinTech/fes.js.git",
-    "directory": "packages/fes-plugin-layout"
-  },
-  "keywords": [
-    "fes"
-  ],
-  "author": "harrywan",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/WeBankFinTech/fes.js/issues"
-  },
-  "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {
-    "@fesjs/utils": "^3.0.1"
-  },
-  "peerDependencies": {
-    "@fesjs/fes": "^3.1.4",
-    "@fesjs/fes-design": ">=0.7.0",
-    "vue": "^3.2.47",
-    "vue-router": "^4.0.1"
-  },
-  "typings": "./types.d.ts"
+    "name": "@fesjs/plugin-layout",
+    "version": "5.1.7",
+    "description": "@fesjs/plugin-layout",
+    "author": "harrywan",
+    "license": "MIT",
+    "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/WeBankFinTech/fes.js.git",
+        "directory": "packages/fes-plugin-layout"
+    },
+    "bugs": {
+        "url": "https://github.com/WeBankFinTech/fes.js/issues"
+    },
+    "keywords": [
+        "fes"
+    ],
+    "main": "lib/index.js",
+    "files": [
+        "lib",
+        "types.d.ts"
+    ],
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "peerDependencies": {
+        "@fesjs/fes": "^3.1.4",
+        "@fesjs/fes-design": ">=0.7.0",
+        "vue": "^3.2.47",
+        "vue-router": "^4.0.1"
+    },
+    "dependencies": {
+        "@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/useTitle.js b/packages/fes-plugin-layout/src/runtime/useTitle.js
index e56636e4..f0417953 100644
--- a/packages/fes-plugin-layout/src/runtime/useTitle.js
+++ b/packages/fes-plugin-layout/src/runtime/useTitle.js
@@ -3,11 +3,11 @@ import { useRoute } from '@@/core/coreExports';
 
 const cache = reactive(new Map());
 
-export const getTitle = (path) => cache.get(path);
+export const getTitle = path => cache.get(path);
 
-export const deleteTitle = (patch) => cache.delete(patch);
+export const deleteTitle = patch => cache.delete(patch);
 
-export const useTabTitle = (title) => {
+export function useTabTitle(title) {
     const route = useRoute();
     const titleRef = ref(title);
     const path = route.path;
@@ -15,4 +15,4 @@ export const useTabTitle = (title) => {
     cache.set(path, titleRef);
 
     return titleRef;
-};
+}
diff --git a/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue b/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue
index 1066fedc..96b9e683 100644
--- a/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue
+++ b/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue
@@ -1,9 +1,9 @@
 <template>
     <template v-if="multiTabs">
         <FTabs
-            :modelValue="route.path"
+            :model-value="route.path"
             closable
-            :tabsPadding="24"
+            :tabs-padding="24"
             type="card"
             class="layout-content-tabs"
             @close="handleCloseTab"
@@ -21,17 +21,19 @@
                 </FDropdown>
             </template>
         </FTabs>
-        <Page ref="pageRef" :pageKey="getPageKey" isAllKeepAlive />
+        <Page ref="pageRef" :page-key="getPageKey" is-all-keep-alive />
     </template>
     <Page v-else />
 </template>
+
 <script>
-import { computed, unref, ref } from 'vue';
-import { FTabs, FTabPane, FDropdown } from '@fesjs/fes-design';
-import { ReloadOutlined, MoreOutlined } from '@fesjs/fes-design/icon';
-import { useRouter, useRoute } from '@@/core/coreExports';
+import { computed, ref, unref } from 'vue';
+import { FDropdown, FTabPane, FTabs } from '@fesjs/fes-design';
+import { MoreOutlined, ReloadOutlined } from '@fesjs/fes-design/icon';
+import { useRoute, useRouter } from '@@/core/coreExports';
 import { transTitle } from '../helpers/pluginLocale';
-import { getTitle, deleteTitle } from '../useTitle';
+import { deleteTitle, getTitle } from '../useTitle';
+import { useLayout } from '../useLayout';
 import Page from './page.vue';
 
 let i = 0;
@@ -52,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));
@@ -78,15 +82,16 @@ export default {
             },
         ];
 
-        const findPage = (path) => pageList.value.find((item) => unref(item.path) === unref(path));
+        const findPage = path => pageList.value.find(item => unref(item.path) === unref(path));
 
         router.beforeEach((to) => {
             const page = findPage(to.path);
-            if (!page) {
+            if (!page)
                 pageList.value = [...pageList.value, createPage(to)];
-            } else {
+
+            else
                 page.route = to;
-            }
+
             return true;
         });
 
@@ -102,16 +107,17 @@ export default {
             }
         };
         const handleCloseTab = async (targetKey) => {
+            targetKey = targetKey || route.path;
             const selectedPage = findPage(targetKey);
             const list = [...pageList.value];
             const index = list.indexOf(selectedPage);
             if (route.path === selectedPage.path) {
                 if (list.length > 1) {
-                    if (list.length - 1 === index) {
+                    if (list.length - 1 === index)
                         await switchPage(list[index - 1].path);
-                    } else {
+
+                    else
                         await switchPage(list[index + 1].path);
-                    }
                 }
             }
             list.splice(index, 1);
@@ -119,11 +125,12 @@ 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) {
+            if (selectedPage)
                 selectedPage.key = getKey();
-            }
         };
         const closeOtherPage = (path) => {
             const selectedPage = findPage(path || unref(route.path));
@@ -132,9 +139,9 @@ export default {
         };
         const getPageKey = (_route) => {
             const selectedPage = findPage(_route.path);
-            if (selectedPage) {
+            if (selectedPage)
                 return selectedPage.key;
-            }
+
             return '';
         };
         const handlerMore = (key) => {
@@ -163,6 +170,7 @@ export default {
     },
 };
 </script>
+
 <style lang="less">
 .layout-content-tabs {
     background: rgb(255, 255, 255);
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 @@
 <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
index fc45bbac..638958a7 100644
--- 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
index d2f96ccf..a2004524 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -438,6 +438,9 @@ importers:
       '@fesjs/utils':
         specifier: ^3.0.1
         version: link:../fes-utils
+      '@vueuse/core':
+        specifier: ^10.7.0
+        version: 10.7.0(vue@3.2.47)
       vue:
         specifier: ^3.2.47
         version: 3.2.47
@@ -5588,6 +5591,10 @@ packages:
   /@types/web-bluetooth@0.0.16:
     resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
 
+  /@types/web-bluetooth@0.0.20:
+    resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
+    dev: false
+
   /@types/ws@8.5.10:
     resolution: {integrity: sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==}
     dependencies:
@@ -6099,6 +6106,18 @@ packages:
       - vue
     dev: true
 
+  /@vueuse/core@10.7.0(vue@3.2.47):
+    resolution: {integrity: sha512-4EUDESCHtwu44ZWK3Gc/hZUVhVo/ysvdtwocB5vcauSV4B7NiGY5972WnsojB3vRNdxvAt7kzJWE2h9h7C9d5w==}
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 10.7.0
+      '@vueuse/shared': 10.7.0(vue@3.2.47)
+      vue-demi: 0.14.6(vue@3.2.47)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
   /@vueuse/core@9.13.0(vue@3.2.47):
     resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==}
     dependencies:
@@ -6115,6 +6134,10 @@ packages:
     resolution: {integrity: sha512-APSjlABrV+Q74c+FR0kFETvcN9W2pAaT3XF3WwqWUuk4srmVxv7DY4WshZxK2KYk1+MVY0Fus6J1Hk/JXVm6Aw==}
     dev: true
 
+  /@vueuse/metadata@10.7.0:
+    resolution: {integrity: sha512-GlaH7tKP2iBCZ3bHNZ6b0cl9g0CJK8lttkBNUX156gWvNYhTKEtbweWLm9rxCPIiwzYcr/5xML6T8ZUEt+DkvA==}
+    dev: false
+
   /@vueuse/metadata@9.13.0:
     resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==}
     dev: false
@@ -6128,6 +6151,15 @@ packages:
       - vue
     dev: true
 
+  /@vueuse/shared@10.7.0(vue@3.2.47):
+    resolution: {integrity: sha512-kc00uV6CiaTdc3i1CDC4a3lBxzaBE9AgYNtFN87B5OOscqeWElj/uza8qVDmk7/U8JbqoONLbtqiLJ5LGRuqlw==}
+    dependencies:
+      vue-demi: 0.14.6(vue@3.2.47)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
   /@vueuse/shared@9.13.0(vue@3.2.47):
     resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
     dependencies:
@@ -6577,8 +6609,8 @@ packages:
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      browserslist: 4.21.5
-      caniuse-lite: 1.0.30001481
+      browserslist: 4.22.1
+      caniuse-lite: 1.0.30001561
       fraction.js: 4.2.0
       normalize-range: 0.1.2
       picocolors: 1.0.0
@@ -14283,6 +14315,21 @@ packages:
       vue: 3.3.4
     dev: true
 
+  /vue-demi@0.14.6(vue@3.2.47):
+    resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      vue: 3.2.47
+    dev: false
+
   /vue-eslint-parser@9.3.2(eslint@8.54.0):
     resolution: {integrity: sha512-q7tWyCVaV9f8iQyIA5Mkj/S6AoJ9KBN8IeUSf3XEmBrOtxOZnfTg5s4KClbZBCK3GtnT/+RyCLZyDHuZwTuBjg==}
     engines: {node: ^14.17.0 || >=16.0.0}