refactor: 完善useLayout (#250)

docs/reference/plugin/plugins/layout.md

@@ -383,7 +383,7 @@ export const layout = {
 
 ## API
 
-### useTabTitle
+### useTabTitle（建议使用useLayout）
 
 类型定义如下：
 
@@ -404,6 +404,18 @@ titleRef.value = 'changed';
 </script>
 ```
 
+### useLayout
+
+类型定义如下：
+
+```ts
+function useLayout(options: { title?: string }): { title: Ref<string>; reloadTab: () => void; closeTab: () => void };
+```
+
+- title: 更新当前页签的标题
+- reloadTab：重载当前页签
+- closeTab：关闭当前页签
+
 ## 4.x 升级到 5.x
 
 1. 个性化 layout 配置改为使用传入 navigation

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

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

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

@@ -1,12 +1,31 @@
-import { createSharedComposable } from '@vueuse/core';
+import { inject, ref } from 'vue';
-import { shallowReactive } from 'vue';
 
-function _useLayout() {
+import { useRoute } from '@@/core/coreExports';
-    const state = shallowReactive({
-        closeTab: () => {},
-    });
 
-    return state;
+export const PLUGIN_LAYOUT_TITLE_KEY = Symbol('PLUGIN_LAYOUT_TITLE_KEY');
+
+export const PLUGIN_LAYOUT_KEY = Symbol('PLUGIN_LAYOUT_KEY');
+
+export function useTabTitle(title) {
+    const titleMap = inject(PLUGIN_LAYOUT_TITLE_KEY);
+    if (!titleMap) {
+        console.warn('[plugin-layout]: 未正确获取到titleMap');
+        return;
+    }
+    const route = useRoute();
+    const titleRef = ref(title);
+    const path = route.path;
+
+    titleMap.set(path, titleRef);
+
+    return titleRef;
 }
 
-export const useLayout = createSharedComposable(_useLayout);
+export function useLayout(options) {
+    const parent = inject(PLUGIN_LAYOUT_KEY, { reloadTab: () => void 0, closeTab: () => void 0 });
+    const titleRef = useTabTitle(options?.title);
+    return {
+        ...parent,
+        title: titleRef,
+    };
+}

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

@@ -1,18 +0,0 @@
-import { reactive, ref } from 'vue';
-import { useRoute } from '@@/core/coreExports';
-
-const cache = reactive(new Map());
-
-export const getTitle = path => cache.get(path);
-
-export const deleteTitle = patch => cache.delete(patch);
-
-export function useTabTitle(title) {
-    const route = useRoute();
-    const titleRef = ref(title);
-    const path = route.path;
-
-    cache.set(path, titleRef);
-
-    return titleRef;
-}

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

@@ -27,13 +27,12 @@
 </template>
 
 <script>
-import { computed, ref, unref } from 'vue';
+import { computed, provide, reactive, ref, unref } from 'vue';
 import { FDropdown, FTabPane, FTabs } from '@fesjs/fes-design';
 import { MoreOutlined, ReloadOutlined } from '@fesjs/fes-design/icon';
 import { plugin, useRoute, useRouter } from '@@/core/coreExports';
 import { transTitle } from '../helpers/pluginLocale';
-import { deleteTitle, getTitle } from '../useTitle';
+import { PLUGIN_LAYOUT_KEY, PLUGIN_LAYOUT_TITLE_KEY } from '../useLayout';
-import { useLayout } from '../useLayout';
 import Page from './page.vue';
 
 let i = 0;
@@ -54,7 +53,14 @@ export default {
         const pageRef = ref();
         const route = useRoute();
         const router = useRouter();
-        const layoutState = useLayout();
+
+        const titleCache = reactive(new Map());
+
+        provide(PLUGIN_LAYOUT_TITLE_KEY, titleCache);
+
+        const getTitle = path => titleCache.get(path);
+
+        const deleteTitle = patch => titleCache.delete(patch);
 
         const createPage = (_route) => {
             const computedTitle = computed(() => {
@@ -146,7 +152,6 @@ export default {
             pageRef.value.removeKeepAlive(selectedPage.name);
             deleteTitle(selectedPage.path);
         };
-        layoutState.closeTab = handleCloseTab;
 
         const reloadPage = (path) => {
             const selectedPage = findPage(path || unref(route.path));
@@ -179,6 +184,11 @@ export default {
             }
         };
 
+        provide(PLUGIN_LAYOUT_KEY, {
+            closeTab: handleCloseTab,
+            reloadTab: reloadPage,
+        });
+
         return {
             pageRef,
             route,

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

@@ -28,6 +28,8 @@ export const Page: Component;
 
 export function useTabTitle(title: string | Ref<string>): void;
 
+export function useLayout(options: { title?: string }): { title: Ref<string>; reloadTab: () => void; closeTab: () => void };
+
 interface LayoutRuntimeConfig {
     footer?: string;
     theme?: 'dark' | 'light';

packages/fes-template/src/pages/menuTest/[id].vue

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