feat: 更改参数名 & 关闭页面清数据

docs/reference/plugin/plugins/layout.md

@@ -366,11 +366,12 @@ function useTitle(title: string | Ref<string>): void;
 当使用多页签模式时，在页面中使用 `useTitle` 可以自定义页面标签：
 ```vue
 <script setup>
-import { ref } from 'vue';
+import { useRoute, useTabTitle } from '@fesjs/fes';
-import { useRoute, useTitle } from '@fesjs/fes';
 
-const title = ref(`详情-${route.params?.id}`);
+const titleRef = useTabTitle(`详情-${route.params?.id}`);
-useTitle(title);
+
+//如果要更新
+titleRef.value = "changed"
 </script>
 ```
 

packages/fes-plugin-layout/src/index.js

@@ -75,7 +75,7 @@ export default (api) => {
 
     api.addPluginExports(() => [
         {
-            specifiers: ['Page', 'useTitle'],
+            specifiers: ['Page', 'useTabTitle'],
             source: join(namespace, 'index.js'),
         },
     ]);

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

@@ -1,2 +1,2 @@
 export { default as Page } from './views/page.vue';
-export { useTitle } from './useTitle';
+export { useTabTitle } from './useTitle';

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

@@ -1,11 +1,18 @@
+import { reactive, ref } from 'vue';
 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) => {
+export const deleteTitle = (patch) => cache.delete(patch);
+
+export const useTabTitle = (title) => {
     const route = useRoute();
-    cache.set(route.path, title);
+    const titleRef = ref(title);
+    const path = route.path;
+
+    cache.set(path, titleRef);
+
+    return titleRef;
 };

packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue

@@ -31,7 +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 { getTitle, deleteTitle } from '../useTitle';
 import Page from './page.vue';
 
 let i = 0;
@@ -117,6 +117,7 @@ export default {
             list.splice(index, 1);
             pageList.value = list;
             pageRef.value.removeKeepAlive(selectedPage.name);
+            deleteTitle(selectedPage.path);
         };
         const reloadPage = (path) => {
             const selectedPage = findPage(path || unref(route.path));

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

@@ -12,7 +12,7 @@ interface Menu {
 
 export const Page: Component;
 
-export function useTitle(title: string | Ref<string>): void;
+export function useTabTitle(title: string | Ref<string>): void;
 
 interface LayoutRuntimeConfig {
     footer?: string;

packages/fes-template/src/pages/menuTest/@id.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="page">menuTest: {{ route.params }}</div>
+    <div class="page">menuTest: {{ route.params }} <input style="border: 1px solid red" /></div>
 </template>
 <config>
 {
@@ -7,15 +7,13 @@
 }
 </config>
 <script>
-import { ref } from 'vue';
+import { useRoute, useTabTitle } from '@fesjs/fes';
-import { useRoute, useTitle } from '@fesjs/fes';
 
 export default {
     components: {},
     setup() {
         const route = useRoute();
-        const title = ref(`详情-${route.params?.id}`);
+        const title = useTabTitle(`详情-${route.params?.id}`);
-        useTitle(title);
 
         setTimeout(() => {
             title.value = `详情-${route.params?.id}-changed`;

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

@@ -1,5 +1,12 @@
 <template>
-    <div class="page">menuTest-index</div>
+    <div class="page">
+        menuTest-index
+        <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>
+        </div>
+    </div>
 </template>
 <config>
 {

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

@@ -1,8 +0,0 @@
-<template>
-    <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>
-    </div>
-    <router-view />
-</template>