refactor: 完善useLayout (#250)

docs/reference/plugin/plugins/layout.md

@@ -8,16 +8,16 @@ import { withBase } from 'vitepress'
 
 为了进一步降低研发成本，我们将布局利用 `fes.js` 插件的方式内置，只需通过简单的配置即可拥有布局，包括导航以及侧边栏。从而做到用户无需关心布局。
 
--   侧边栏菜单数据根据路由中的配置自动生成。
--   布局，提供 `side`、 `top`、`mixin`、`left-right`、`top-left-right` 五种布局。
--   主题，提供 `light`、`dark` 两种主题。
--   默认实现对路由的 404、403 处理。
--   搭配 [@fesjs/plugin-access](./access.html) 插件使用，可以完成对路由的权限控制。
--   搭配 [@fesjs/plugin-locale](./locale.html) 插件使用，提供切换语言的能力。
--   支持自定义头部或者侧边栏区域。
--   菜单支持配置 icon。
--   菜单标题支持国际化。
--   可配置页面是否需要 layout。
+- 侧边栏菜单数据根据路由中的配置自动生成。
+- 布局，提供 `side`、 `top`、`mixin`、`left-right`、`top-left-right` 五种布局。
+- 主题，提供 `light`、`dark` 两种主题。
+- 默认实现对路由的 404、403 处理。
+- 搭配 [@fesjs/plugin-access](./access.html) 插件使用，可以完成对路由的权限控制。
+- 搭配 [@fesjs/plugin-locale](./locale.html) 插件使用，提供切换语言的能力。
+- 支持自定义头部或者侧边栏区域。
+- 菜单支持配置 icon。
+- 菜单标题支持国际化。
+- 可配置页面是否需要 layout。
 
 ## 启用方式
 
@@ -182,58 +182,58 @@ export function layout(layoutConfig, { initialState }) {
 
 ### footer
 
--   **类型**：`String`
--   **默认值**：`null`
+- **类型**：`String`
+- **默认值**：`null`
 
--   **详情**：页面底部的文字。
+- **详情**：页面底部的文字。
 
 ### theme
 
--   **类型**：`String`
--   **默认值**：`dark`
+- **类型**：`String`
+- **默认值**：`dark`
 
--   **详情**：主题，可选有 `dark`、`light`
+- **详情**：主题，可选有 `dark`、`light`
 
 ### navigation
 
--   **类型**：`String`
--   **默认值**：`side`
+- **类型**：`String`
+- **默认值**：`side`
 
--   **详情**：页面布局类型，可选有 `side`、 `top`、 `mixin`
+- **详情**：页面布局类型，可选有 `side`、 `top`、 `mixin`
 
 ### navigationOnError
 
--   **类型**：`String`、`Function`
+- **类型**：`String`、`Function`
 
--   **详情**：指定 `403`、`404` 时，页面的布局类型。值同 `navigation`。也支持函数返回。
+- **详情**：指定 `403`、`404` 时，页面的布局类型。值同 `navigation`。也支持函数返回。
 
 ### isFixedHeader
 
--   **类型**：`Boolean`
--   **默认值**：`false`
+- **类型**：`Boolean`
+- **默认值**：`false`
 
--   **详情**：是否固定头部，不跟随页面滚动。
+- **详情**：是否固定头部，不跟随页面滚动。
 
 ### isFixedSidebar
 
--   **类型**：`Boolean`
--   **默认值**：`true`
+- **类型**：`Boolean`
+- **默认值**：`true`
 
--   **详情**：是否固定 sidebar，不跟随页面滚动。
+- **详情**：是否固定 sidebar，不跟随页面滚动。
 
 ### title
 
--   **类型**：`String`
--   **默认值**：默认为 [编译时配置 title](../../../reference/config/#title)
+- **类型**：`String`
+- **默认值**：默认为 [编译时配置 title](../../../reference/config/#title)
 
--   **详情**：产品名。
+- **详情**：产品名。
 
 ### logo
 
--   **类型**：`String`
--   **默认值**：默认提供 `fes.js` 的 Logo
+- **类型**：`String`
+- **默认值**：默认提供 `fes.js` 的 Logo
 
--   **详情**：Logo 的链接，例如在 public/logo.png 放了一个 logo，可以这么配置([BASE_URL 来自这里](../../../guide/env#process-env))
+- **详情**：Logo 的链接，例如在 public/logo.png 放了一个 logo，可以这么配置([BASE_URL 来自这里](../../../guide/env#process-env))
 
 ```js
 export const layout = {
@@ -243,29 +243,29 @@ export const layout = {
 
 ### multiTabs
 
--   **类型**：`boolean`
--   **默认值**：`false`
+- **类型**：`boolean`
+- **默认值**：`false`
 
--   **详情**：是否开启多页。
+- **详情**：是否开启多页。
 
 ### menus
 
--   **类型**：`[] | () => Ref<[]> | () => []`
--   **默认值**：`[]`
+- **类型**：`[] | () => Ref<[]> | () => []`
+- **默认值**：`[]`
 
--   **详情**：菜单配置
+- **详情**：菜单配置
 
     子项具体配置如下：
 
-    -   **name**：菜单的名称。通过匹配 `name` 和路由元信息 [meta](../../../guide/route.md#扩展路由元信息) 中的 `name`，把菜单和路由关联起来， 然后使用路由元信息补充菜单配置，比如 `title`、`path`  等。
+  - **name**：菜单的名称。通过匹配 `name` 和路由元信息 [meta](../../../guide/route.md#扩展路由元信息) 中的 `name`，把菜单和路由关联起来， 然后使用路由元信息补充菜单配置，比如 `title`、`path`  等。
 
-    -   **path**：菜单的路径，可配置第三方地址。
+  - **path**：菜单的路径，可配置第三方地址。
 
-    -   **query**：同 vue-router 的 query 参数。
+  - **query**：同 vue-router 的 query 参数。
 
-    -   **params**：同 vue-router 的 params 参数。
+  - **params**：同 vue-router 的 params 参数。
 
-    -   **match (v4.0.0+）**：额外匹配的路径，当前路由命中匹配规则时，此菜单高亮。
+  - **match (v4.0.0+）**：额外匹配的路径，当前路由命中匹配规则时，此菜单高亮。
 
         ```
         {
@@ -274,68 +274,68 @@ export const layout = {
         }
         ```
 
-    -   **title**：菜单的标题。
+  - **title**：菜单的标题。
 
-        -   如果同时使用[国际化插件](./locale.md)，而且`title`的值以`$`开头，则使用`$`后面的内容去匹配语言设置。
+    - 如果同时使用[国际化插件](./locale.md)，而且`title`的值以`$`开头，则使用`$`后面的内容去匹配语言设置。
 
-        -   title 支持配置函数，对应 Fes Design 中 Menu 组件的`label`插槽。仅在运行时配置中支持。
+    - title 支持配置函数，对应 Fes Design 中 Menu 组件的`label`插槽。仅在运行时配置中支持。
 
-    -   **icon**: 菜单的图标，只一级标题展示图标。
+  - **icon**: 菜单的图标，只一级标题展示图标。
 
-        -   图标使用[fes-design icon](https://fes-design-4gvn317r3b6bfe17-1254145788.ap-shanghai.app.tcloudbase.com/zh/components/icon.html)，编译时配置使用组件名称，我们会自动引入组件。
+    - 图标使用[fes-design icon](https://fes-design-4gvn317r3b6bfe17-1254145788.ap-shanghai.app.tcloudbase.com/zh/components/icon.html)，编译时配置使用组件名称，我们会自动引入组件。
 
-        -   图标使用本地或者远程 svg 图片。
+    - 图标使用本地或者远程 svg 图片。
 
             ```js
             {
                 icon: '/wine-outline.svg';
             }
             ```
 
-    -   **children**：子菜单配置。
+  - **children**：子菜单配置。
 
 :::tip
 函数类型仅在运行时可用，可以实现动态变更菜单。
 :::
 
 ### menuProps
 
--   **类型**：`Object`
--   **默认值**：`{}`
+- **类型**：`Object`
+- **默认值**：`{}`
 
--   **详情**：菜单的配置：
+- **详情**：菜单的配置：
 
-    -   **defaultExpandAll**：是否默认展开全部菜单。
+  - **defaultExpandAll**：是否默认展开全部菜单。
 
-    -   **expandedKeys**：配置默认展开的菜单，需要传子项是菜单路径的数组。
+  - **expandedKeys**：配置默认展开的菜单，需要传子项是菜单路径的数组。
 
-    -   **accordion**：是否只保持一个子菜单的展开。
+  - **accordion**：是否只保持一个子菜单的展开。
 
 ### sideWidth
 
--   **类型**：`Number`
--   **默认值**：`200`
+- **类型**：`Number`
+- **默认值**：`200`
 
--   **详情**：sidebar 的宽度
+- **详情**：sidebar 的宽度
 
 ### renderCustom
 
--   **类型**： `()=> VNodes`
--   **默认值**：`null`
+- **类型**： `()=> VNodes`
+- **默认值**：`null`
 
--   **详情**： 自定义区域内容，仅运行时。
+- **详情**： 自定义区域内容，仅运行时。
 
 ### unAccessHandler
 
--   **类型**：`({ to, from, next})=> void`
--   **默认值**：`null`
+- **类型**：`({ to, from, next})=> void`
+- **默认值**：`null`
 
--   **详情**：仅运行时，当进入某个路由时，如果路由对应的页面不属于可见资源列表，则会暂停进入，调用 `unAccessHandler` 函数。
--   **参数**
-    -   router：createRouter 创建的路由实例
-    -   to： 准备进入的路由
-    -   from：离开的路由
-    -   next： [next 函数](https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next)
+- **详情**：仅运行时，当进入某个路由时，如果路由对应的页面不属于可见资源列表，则会暂停进入，调用 `unAccessHandler` 函数。
+- **参数**
+  - router：createRouter 创建的路由实例
+  - to： 准备进入的路由
+  - from：离开的路由
+  - next： [next 函数](https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next)
 
 比如：
 
@@ -357,15 +357,15 @@ export const layout = {
 
 ### noFoundHandler
 
--   **类型**：`({ to, from, next})=> void`
--   **默认值**：`null`
+- **类型**：`({ to, from, next})=> void`
+- **默认值**：`null`
 
--   **详情**：仅运行时，当进入某个路由时，如果路由对应的页面不存在，则会调用 `noFoundHandler` 函数。
--   **参数**
-    -   router：createRouter 创建的路由实例
-    -   to： 准备进入的路由
-    -   from：离开的路由
-    -   next： [next 函数](https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next)
+- **详情**：仅运行时，当进入某个路由时，如果路由对应的页面不存在，则会调用 `noFoundHandler` 函数。
+- **参数**
+  - router：createRouter 创建的路由实例
+  - to： 准备进入的路由
+  - from：离开的路由
+  - next： [next 函数](https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next)
 
 比如：
 
@@ -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 { shallowReactive } from 'vue';
+import { inject, ref } from 'vue';
 
-function _useLayout() {
-    const state = shallowReactive({
-        closeTab: () => {},
-    });
+import { useRoute } from '@@/core/coreExports';
 
-    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,
+    };
+}