refactor: 重构plugin-layout

2025-04-06 03:59:53 +08:00 · 2022-06-22 14:31:52 +08:00 · 2022-06-22 14:31:52 +08:00 · 77e9ed7483
commit 77e9ed7483
parent a123e635b5 6ab2c29984
36 changed files with 623 additions and 758 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,7 @@
+# [3.0.0-beta.10](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-beta.9...v3.0.0-beta.10) (2022-06-16)
+
+
+
 # [3.0.0-beta.9](https://github.com/WeBankFinTech/fes.js/compare/v3.0.0-beta.8...v3.0.0-beta.9) (2022-06-16)


--- a/docs/.vuepress/public/left-right.png
+++ b/docs/.vuepress/public/left-right.png
--- a/docs/guide/route.md
+++ b/docs/guide/route.md
@ -198,7 +198,17 @@ const router = new VueRouter({
 ```


-接下来我们看看如何配置 `meta`。在单文件组件中可以通过`<config></config>`定义：
+我们使用`defineRouteMeta` 配置 `meta`：
+
+```js
+import { defineRouteMete } from '@fesjs/fes';
+defineRouteMeta({
+    name: "store",
+    title: "vuex测试"
+})
+```
+
+当然在单文件组件中，还可以通过`<config></config>`配置 `meta`：

 ```vue
 <config>
@ -209,15 +219,10 @@ const router = new VueRouter({
 </config>
 ```

-在使用`jsx`或者`tsx`时，可以使用`defineRouteMeta` 定义：
+::: tip
+推荐使用`defineRouteMete`，有更好的提示。
+:::

-```jsx
-import { defineRouteMete } from '@fesjs/fes';
-defineRouteMeta({
-    name: "store",
-    title: "vuex测试"
-})
-```


 路由元信息在编译后会附加到路由配置中：
--- a/docs/reference/plugin/plugins/layout.md
+++ b/docs/reference/plugin/plugins/layout.md
@ -1,16 +1,16 @@
 # @fesjs/plugin-layout

 ## 介绍
-为了进一步降低研发成本，我们尝试将布局通过 fes 插件的方式内置，只需通过简单的配置即可拥有布局，包括导航以及侧边栏。从而做到用户无需关心布局。
+为了进一步降低研发成本，我们将布局利用 `fes.js` 插件的方式内置，只需通过简单的配置即可拥有布局，包括导航以及侧边栏。从而做到用户无需关心布局。
 - 侧边栏菜单数据根据路由中的配置自动生成。
- 布局，提供 `side`、 `top`、`mixin` 三种布局。
+- 布局，提供 `side`、 `top`、`mixin`、`left-right` 四种布局。
 - 主题，提供 `light`、`dark` 两种主题。
 - 默认实现对路由的 404、403 处理。
 - 搭配 [@fesjs/plugin-access](./access.html) 插件使用，可以完成对路由的权限控制。
 - 搭配 [@fesjs/plugin-locale](./locale.html) 插件使用，提供切换语言的能力。
- 支持自定义头部区域。
- 菜单支持配置icon
- 菜单标题支持国际化
+- 支持自定义头部或者侧边栏区域。
+- 菜单支持配置icon。
+- 菜单标题支持国际化。
  
 - 可配置页面是否需要 layout。

@ -19,21 +19,14 @@
 ```json
 {
    "dependencies": {
-        "@fesjs/fes": "^2.0.0",
-        "@fesjs/plugin-layout": "^4.0.0"
+        "@fesjs/fes": "^3.0.0",
+        "@fesjs/plugin-layout": "^5.0.0"
    },
 }
 ```

 ## 布局类型
-配置参数是 `navigation`, 布局有三种类型 `side`、`mixin` 和 `top`， 默认是 `side`：
-```js
-export default {
-    layout: {
-        navigation: 'side'
-    }
-}
-```
+配置参数是 `navigation`, 布局有三种类型 `side`、`mixin` 、`top` 和 `left-right`， 默认是 `side`。

 ### side
 <!-- ![side](/side.png) -->
@ -47,45 +40,57 @@ export default {
 <!-- ![mixin](/mixin.png) -->
 <img :src="$withBase('mixin.png')" alt="mixin">

-### 页面禁用布局
-布局是默认开启的，但是可能某些页面不需要展示布局样式，比如登录页面。我们只需要在页面的`.vue`中添加如下配置：
-```vue
-<config lang="json">
-{
-    "layout": false
-}
-</config>
-```
-如果只是不想展示`sidebar`，则：
+### left-right
+<!-- ![mixin](/mixin.png) -->
+<img :src="$withBase('left-right.png')" alt="left-right">
+
+### 页面个性化
+
+可以为页面单独设置布局类型：
 ```
 <config lang="json">
 {
    "layout": {
-        "sidebar": false
+        "navigation": 'top'
    }
 }
 </config>
 ```
-`layout`的可选配置有：
-
- **sidebar**： 左侧区域，从v4.0.0开始，之前名称叫`side`
-  
- **header**： 头部区域，从v4.0.0开始，之前名称叫`top`
-
- **logo**：logo和标题区域。
+当设置为 `null` 时，页面不使用布局。


-## keep-alive
-从 4.0.7 开始支持配置路由页面缓存：
-```
-<config lang="json">
-{
+## 页面缓存
+
+支持配置页面缓存，通过[定义路由元信息](../../../guide/route.html#扩展路由元信息)开启缓存：
+```js
+import { defineRouteMete } from '@fesjs/fes';
+
+defineRouteMeta({
    "keep-alive": true
-}
-</config>
+})
 ```

-## 编译时配置
+### 处理嵌套路由
+Fes.js 里约定目录下有 `layout.vue` 时会生成嵌套路由，以 `layout.vue` 为该目录的公共父组件，layout.vue 中必须实现 `<RouterView/>`。如果嵌套路由下的页面设置了 `keep-alive`，则需要用 `<Page/>` 替换 `<RouterView/>`，`<Page/>`实现了页面缓存。
+
+```vue
+<template>
+    <Page></Page>
+</template>
+<script>
+import { Page } from '@fesjs/fes'
+export default {
+    components: {
+        Page
+    }
+}
+</script>
+```
+
+## 配置
+
+#### 编译时配置方式
+
 在 `.fes.js` 中配置：
 ```js
 export default {
@ -95,17 +100,7 @@ export default {
        // 底部文字
        footer: 'Created by MumbleFE',
        // 主题light
-        theme: 'dark'
-        // 是否开启 tabs
-        multiTabs: false,
-        // 布局类型
-        navigation: 'side',
-        // 是否固定头部
-        fixedHeader: false,
-        // 是否固定sidebar
-        fixedSideBar: true,
-        // sidebar的宽度
-        sideWidth: 200,
+        theme: 'dark',
        menus: [{
            name: 'index'
        }, {
@ -115,14 +110,51 @@ export default {
        }, {
            name: 'simpleList'
        }],
-        menuConfig: {
-            defaultExpandAll: false,
-            expandedKeys: [],
-            accordion: false
-        }
+
    },
 ```

+#### 运行时配置方式
+
+在 `app.js` 中配置：
+```js
+import UserCenter from '@/components/UserCenter';
+export const layout = {
+    renderHeader: ()=> <UserCenter />,
+    menus: [{
+        name: 'index'
+    }]
+};
+
+```
+在`fes.js`中，运行时配置有定义对象和函数两种方式，当使用函数配置`layout`时，`layoutConfig`是编译时配置结果，`initialState`是 `beforeRender.action`执行后创建的应用初始状态数据。         
+。
+```js
+export const layout = (layoutConfig, { initialState }) => ({
+    renderHeader: () => <UserCenter />,
+    menus: () => {
+        const menusRef = ref(layoutConfig.menus);
+        watch(
+            () => initialState.userName,
+            () => {
+                menusRef.value = [
+                    {
+                        name: 'store',
+                    },
+                ];
+            },
+        );
+        return menusRef;
+    },
+});
+```
+
+最终配置结果是运行时配置跟编译时配置合并的结果，运行时配置优先于编译时配置。
+
+实际上运行配置能做的事情更多，推荐用运行时配置方式。
+
+
+
 ### footer
 - **类型**：`String`
  
@ -144,14 +176,14 @@ export default {

 - **详情**：页面布局类型，可选有 `side`、 `top`、 `mixin` 

-### fixedHeader
+### isFixedHeader
 - **类型**：`Boolean`
  
 - **默认值**：`false`

 - **详情**：是否固定头部，不跟随页面滚动。

-### fixedSideBar
+### isFixedSidebar
 - **类型**：`Boolean`
  
 - **默认值**：`true`
@ -161,14 +193,14 @@ export default {
 ### title
 - **类型**：`String`
  
- **默认值**：`name` in package.json
+- **默认值**：默认为 [编译时配置title](../../../reference/config/#title)

- **详情**：产品名，会显示在 Logo 旁边。   
+- **详情**：产品名。   

 ### logo
 - **类型**：`String`
  
- **默认值**：默认提供 fes.js 的 Logo
+- **默认值**：默认提供 `fes.js` 的 Logo

 - **详情**：Logo的链接

@ -181,7 +213,7 @@ export default {
 - **详情**：是否开启多页。

 ### menus
- **类型**：`Array`
+- **类型**：`[] | ()=> Ref<[]>`
  
 - **默认值**：`[]`

@ -203,13 +235,11 @@ export default {
  - **title**：菜单的标题，如果同时使用[国际化插件](./locale.md)，而且`title`的值以`$`开头，则使用`$`后面的内容去匹配语言设置。

  - **icon**: 菜单的图标，只有一级标题展示图标。
-    - 图标使用[fes-design icon](https://fes-design-4gvn317r3b6bfe17-1254145788.ap-shanghai.app.tcloudbase.com/zh/components/icon.html)，在这里使用组件名称。
-```js
-{
-    icon: "AppstoreOutlined"
-}
-```
+
+    - 图标使用[fes-design icon](https://fes-design-4gvn317r3b6bfe17-1254145788.ap-shanghai.app.tcloudbase.com/zh/components/icon.html)，编译时配置使用组件名称，我们会自动引入组件。
+
    - 图标使用本地或者远程svg图片。
+
 ```js
 {
    icon: "/wine-outline.svg"
@ -218,7 +248,13 @@ export default {
  
  - **children**：子菜单配置。

-### menusConfig
+:::tip
+函数类型仅在运行时可用，可以实现动态变更菜单。
+:::
+
+
+
+### menuProps
 - **类型**：`Object`
  
 - **默认值**：`{}`
@ -231,84 +267,29 @@ export default {

  - **accordion**：是否只保持一个子菜单的展开。
  
-## 运行时配置
-在 `app.js` 中配置：
-```js
-import UserCenter from '@/components/UserCenter';
-export const layout = {
-    customHeader: <UserCenter />
-};

-```
-
-### menus
- **类型**：`(defaultMenus: [] )=> Ref | []`
+### sideWidth
+- **类型**：`Number`
  
- **详情**：运行时修改菜单，入参是默认菜单配置（.fes.js中的menu配置），需要返回一个`Ref`或者数组。
+- **默认值**：`200`

-```js
-import { ClusterOutlined } from '@fesjs/fes-design/icon'
-export const layout = layoutConfig => ({
-    ...layoutConfig,
-    customHeader: <UserCenter />,
-    menus: (defaultMenuData) => {
-        const menusRef = ref(defaultMenuData);
-        watch(() => layoutConfig.initialState.userName, () => {
-            menusRef.value = [{
-                name: 'store',
-                icon: <ClusterOutlined />
-            }];
-        });
-        return menusRef;
-    }
-});
-
-```
-`layoutConfig.initialState` 是 `beforeRender.action`执行后创建的应用初始状态数据。         
-
-如果菜单需要根据某些状态动态改变，则返回`Ref`，否则只需要返回数组。
-
-:::tip
-在运行时配置菜单中的icon，需要传组件本身，而不是组件的名称。
-:::
-
-
-### header
- **类型**：`String`
+- **详情**：sidebar的宽度
  
- **默认值**：`true`

- **详情**：是否显示 header 区域。
-
-### sidebar
- **类型**：`String`
-  
- **默认值**：`true`
-
- **详情**：是否显示 sidebar 区域。
-
-### logo
- **类型**：`String`
-  
- **默认值**：`true`
-
- **详情**：是否显示 logo 区域。
-
-### customHeader
- **类型**：Vue Component
+### renderCustom
+- **类型**： `()=> VNodes`
  
 - **默认值**：`null`

- **详情**：top的区域部分位置提供组件自定义功能。
+- **详情**： 自定义区域内容，仅运行时。
+

 ### unAccessHandler
- **类型**：`Function`
+- **类型**：`({ to, from, next})=> void`
  
 - **默认值**：`null`

- **详情**：     
-  
-  当进入某个路由时，如果路由对应的页面不属于可见资源列表，则会暂停进入，调用 `unAccessHandler` 函数。
+- **详情**：仅运行时，当进入某个路由时，如果路由对应的页面不属于可见资源列表，则会暂停进入，调用 `unAccessHandler` 函数。
 - **参数**
  - router：createRouter 创建的路由实例
  - to： 准备进入的路由
@ -334,13 +315,11 @@ export const access = {
 ```

 ### noFoundHandler
- **类型**：函数
+- **类型**：`({ to, from, next})=> void`
  
- **默认值**：null
+- **默认值**：`null`

- **详情**：     
-  
-  当进入某个路由时，如果路由对应的页面不存在，则会调用 `noFoundHandler` 函数。
+- **详情**：仅运行时，当进入某个路由时，如果路由对应的页面不存在，则会调用 `noFoundHandler` 函数。
 - **参数**
  - router：createRouter 创建的路由实例
  - to： 准备进入的路由
@ -361,13 +340,12 @@ export const access = {

 ```

-### logoUrl
- **类型**：`String`
-  
- **默认值**：默认提供 fes.js 的 Logo

- **详情**：Logo的链接。
+### 4.x 升级到 5.x

-
-### 其他运行时配置 (> 4.1.0)
-编译时配置的内容同样支持在运行时配置，但是`logo`除外，用`logoUrl`替代。
+1. 个性化 layout 配置改为使用传入 navigation
+2. renderHeader 改为 renderCustom
+3. fixedHeader 改为 isFixedHeader
+4. menusConfig 改为 menuProps
+5. fixedSideBar 改为 isFixedSidebar
+6. 去掉运行时 logo、header、sidebar 三个区域显示配置，请改为使用 navigation: left-right
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "fes.js",
-  "version": "3.0.0-beta.9",
+  "version": "3.0.0-beta.10",
  "description": "一个好用的前端管理台快速开发框架",
  "preferGlobal": true,
  "private": true,
--- a/packages/create-fes-app/package.json
+++ b/packages/create-fes-app/package.json
@ -1,6 +1,6 @@
 {
  "name": "@fesjs/create-fes-app",
-  "version": "3.0.0-beta.3",
+  "version": "3.0.0-beta.4",
  "description": "create a app base on fes.js",
  "main": "lib/index.js",
  "files": [
--- a/packages/create-fes-app/templates/app/h5/src/styles/common.less
+++ b/packages/create-fes-app/templates/app/h5/src/styles/common.less
@ -26,8 +26,7 @@ a {

 /* 适配 iPhone X 顶部填充*/
@supports (top: env(safe-area-inset-top)){
-    body,
-    .alien-screen-header {
+    body {
        padding-top: constant(safe-area-inset-top, 40px);
        padding-top: env(safe-area-inset-top, 40px);
        padding-top: var(safe-area-inset-top, 40px);
@ -36,10 +35,9 @@ a {

 /* 判断iPhoneX 将 footer 的 padding-bottom 填充到最底部 */
@supports (bottom: env(safe-area-inset-bottom)){
-    body,
-    .alien-screen-footer {
+    body {
        padding-bottom: constant(safe-area-inset-bottom, 20px);
        padding-bottom: env(safe-area-inset-bottom, 20px);
-        padding-top: var(safe-area-inset-bottom, 20px);
+        padding-bottom: var(safe-area-inset-bottom, 20px);
    }
 }
--- a/packages/fes-plugin-layout/src/index.js
+++ b/packages/fes-plugin-layout/src/index.js
@ -24,16 +24,16 @@ export default (api) => {

    api.addRuntimePluginKey(() => 'layout');

-    const absFilePath = join(namespace, 'index.jsx');
+    const absFilePath = join(namespace, 'views/index.jsx');
+
+    const absConfigFilePath = join(namespace, 'helpers/getConfig.js');

    const absRuntimeFilePath = join(namespace, 'runtime.js');

    api.onGenerateFiles(async () => {
-        const HAS_LOCALE = api.hasPlugins(['@fesjs/plugin-locale']);
-
        // .fes配置
        const userConfig = {
-            title: api.pkg.name,
+            title: api.title,
            footer: 'Created by Fes.js',
            ...(api.config.layout || {}),
        };
@ -52,9 +52,15 @@ export default (api) => {

        api.writeTmpFile({
            path: absFilePath,
-            content: Mustache.render(readFileSync(join(__dirname, 'runtime/index.tpl'), 'utf-8'), {
+            content: Mustache.render(readFileSync(join(__dirname, 'runtime/views/index.tpl'), 'utf-8'), {
+                REPLACE_USER_CONFIG: JSON.stringify(userConfig),
+            }),
+        });
+
+        api.writeTmpFile({
+            path: absConfigFilePath,
+            content: Mustache.render(readFileSync(join(__dirname, 'runtime/helpers/getConfig.tpl'), 'utf-8'), {
                REPLACE_USER_CONFIG: JSON.stringify(userConfig),
-                HAS_LOCALE,
            }),
        });

@ -67,6 +73,13 @@ export default (api) => {

    api.addRuntimePlugin(() => `@@/${absRuntimeFilePath}`);

+    api.addPluginExports(() => [
+        {
+            specifiers: ['Page'],
+            source: join(namespace, 'index.js'),
+        },
+    ]);
+
    // 把BaseLayout插入到路由配置中，作为根路由
    api.modifyRoutes((routes) => [
        {
--- a/packages/fes-plugin-layout/src/node/helper.js
+++ b/packages/fes-plugin-layout/src/node/helper.js
@ -1,19 +1,15 @@
-
 export function getIconNamesFromMenu(data) {
    if (!Array.isArray(data)) {
        return [];
    }
    let icons = [];
-    data.forEach((item = { path: '/' }) => {
+    data.forEach((item) => {
        if (item.icon) {
            const { icon } = item;
            // 处理icon
            if (icon) {
                const urlReg = /^((https?|ftp|file):\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/;
-                if (
-                    typeof icon === 'string'
-                    && !(urlReg.test(icon) || icon.includes('.svg'))
-                ) {
+                if (typeof icon === 'string' && !(urlReg.test(icon) || icon.includes('.svg'))) {
                    icons.push(icon);
                }
            }
--- a/packages/fes-plugin-layout/src/runtime/helpers/getConfig.tpl
+++ b/packages/fes-plugin-layout/src/runtime/helpers/getConfig.tpl
@ -0,0 +1,15 @@
+import { plugin, ApplyPluginsType } from '@@/core/coreExports';
+import { initialState } from '@@/initialState';
+
+export default () => {
+    const initConfig = {{{REPLACE_USER_CONFIG}}}
+    const runtimeConfig = plugin.applyPlugins({
+        key: 'layout',
+        type: ApplyPluginsType.modify,
+        initialValue: initConfig,
+        args: {
+            initialState
+        }
+    });
+    return runtimeConfig;
+};
--- a/packages/fes-plugin-layout/src/runtime/helpers/getRuntimeConfig.js
+++ b/packages/fes-plugin-layout/src/runtime/helpers/getRuntimeConfig.js
@ -1,20 +0,0 @@
-import { plugin, ApplyPluginsType } from '@@/core/coreExports';
-import { initialState } from '@@/initialState';
-
-let runtimeConfig;
-
-export default () => {
-    if (!runtimeConfig) {
-        runtimeConfig = plugin.applyPlugins({
-            key: 'layout',
-            type: ApplyPluginsType.modify,
-            initialValue: {
-                initialState,
-                sidebar: true,
-                header: true,
-                logo: true,
-            },
-        });
-    }
-    return runtimeConfig;
-};
--- a/packages/fes-plugin-layout/src/runtime/helpers/pluginAccess.js
+++ b/packages/fes-plugin-layout/src/runtime/helpers/pluginAccess.js
@ -3,9 +3,7 @@ import { computed, ref } from 'vue';
 import { useAccess } from '../../plugin-access/core';

 if (!useAccess) {
-    throw new Error(
-        '[plugin-layout]: pLugin-layout depends on plugin-access，please install plugin-access first！'
-    );
+    throw new Error('[plugin-layout]: pLugin-layout depends on plugin-access，please install plugin-access first！');
 }

 export const hasAccessByMenuItem = (item) => {
@ -14,21 +12,26 @@ export const hasAccessByMenuItem = (item) => {
        return useAccess(item.path);
    }
    if (hasChild) {
-        return computed(() => item.children.some((child) => {
-            const rst = hasAccessByMenuItem(child);
-            return rst && rst.value;
-        }));
+        return computed(() =>
+            item.children.some((child) => {
+                const rst = hasAccessByMenuItem(child);
+                return rst && rst.value;
+            }),
+        );
    }
    return ref(true);
 };

-export const transform = menus => menus.map((menu) => {
-    const hasAccess = hasAccessByMenuItem(menu);
-    if (!hasAccess.value) {
-        return false;
-    }
-    if (menu.children) {
-        menu.children = transform(menu.children);
-    }
-    return menu;
-}).filter(Boolean);
+export const transform = (menus) =>
+    menus
+        .map((menu) => {
+            const hasAccess = hasAccessByMenuItem(menu);
+            if (!hasAccess.value) {
+                return false;
+            }
+            if (menu.children) {
+                menu.children = transform(menu.children);
+            }
+            return menu;
+        })
+        .filter(Boolean);
--- a/packages/fes-plugin-layout/src/runtime/helpers/pluginLocale.js
+++ b/packages/fes-plugin-layout/src/runtime/helpers/pluginLocale.js
@ -12,14 +12,14 @@ export const transTitle = (name) => {
    return name;
 };

-
-export const transform = menus => menus.map((menu) => {
-    const copy = {
-        ...menu,
-        label: transTitle(menu.label)
-    };
-    if (menu.children) {
-        copy.children = transform(menu.children);
-    }
-    return copy;
-});
+export const transform = (menus) =>
+    menus.map((menu) => {
+        const copy = {
+            ...menu,
+            label: transTitle(menu.label),
+        };
+        if (menu.children) {
+            copy.children = transform(menu.children);
+        }
+        return copy;
+    });
--- a/packages/fes-plugin-layout/src/runtime/helpers/utils.js
+++ b/packages/fes-plugin-layout/src/runtime/helpers/utils.js
@ -1,9 +1,8 @@
-export const flatNodes = (nodes = []) => nodes.reduce((res, node) => {
-    res.push(node);
-    if (node.children) {
-        res = res.concat(
-            flatNodes(node.children)
-        );
-    }
-    return res;
-}, []);
+export const flatNodes = (nodes = []) =>
+    nodes.reduce((res, node) => {
+        res.push(node);
+        if (node.children) {
+            res = res.concat(flatNodes(node.children));
+        }
+        return res;
+    }, []);
--- a/packages/fes-plugin-layout/src/runtime/index.js
+++ b/packages/fes-plugin-layout/src/runtime/index.js
@ -0,0 +1 @@
+export { default as Page } from './views/page.vue';
--- a/packages/fes-plugin-layout/src/runtime/index.tpl
+++ b/packages/fes-plugin-layout/src/runtime/index.tpl
@ -1,79 +0,0 @@
-import { ref, defineComponent, computed } from 'vue';
-import { plugin, ApplyPluginsType, } from '@@/core/coreExports';
-import { getRoutes } from '@@/core/routes/routes'
-import BaseLayout from './views/BaseLayout.vue';
-import getRuntimeConfig from './helpers/getRuntimeConfig';
-import fillMenu from './helpers/fillMenu';
-
-const Layout = defineComponent({
-    name: 'Layout',
-    setup() {
-        const userConfig = {{{REPLACE_USER_CONFIG}}};
-        const runtimeConfig = getRuntimeConfig();
-        const {
-            menus,
-            customHeader,
-            menuConfig,
-            // 非 BaseLayout需要的
-            initialState,
-            sidebar,
-            header,
-            logo,
-            // 跟logo冲突，换个名字
-            logoUrl,
-            ...otherConfig
-        } = runtimeConfig;
-        if (logoUrl) {
-            userConfig.logo = logoUrl;
-        }
-        if (menuConfig && typeof menuConfig === 'object') {
-            Object.assign(userConfig.menuConfig, menuConfig);
-        }
-        Object.keys(otherConfig).forEach((p) => {
-            if (otherConfig[p] !== undefined) {
-                userConfig[p] = otherConfig[p];
-            }
-        });
-        let menusRef = ref(userConfig.menus);
-        // 如果运行时配置了menus，则需要处理
-        if (menus && typeof menus === 'function') {
-            menusRef = ref(menus(userConfig.menus));
-        }
-        // 把路由的meta合并到menu配置中
-        const filledMenuRef = computed(() => {
-            return fillMenu(menusRef.value, getRoutes());
-        });
-
-        const localeShared = plugin.getShared('locale');
-        return () => {
-            const slots = {
-                customHeader: () => {
-                    if (runtimeConfig.customHeader) {
-                        return (
-                            <runtimeConfig.customHeader></runtimeConfig.customHeader>
-                        );
-                    }
-                    return null;
-                },
-                locale: () => {
-                    if (localeShared) {
-                        return (
-                            <localeShared.SelectLang></localeShared.SelectLang>
-                        );
-                    }
-                    return null;
-                }
-            };
-            return (
-                <BaseLayout
-                    {...userConfig}
-                    locale={localeShared ? true : false}
-                    menus={filledMenuRef.value}
-                    v-slots={slots}
-                ></BaseLayout>
-            );
-        };
-    }
-});
-
-export default Layout;
--- a/packages/fes-plugin-layout/src/runtime/runtime.js
+++ b/packages/fes-plugin-layout/src/runtime/runtime.js
@ -2,7 +2,8 @@
 import { access as accessApi } from '../plugin-access/core';
 import Exception404 from './views/404.vue';
 import Exception403 from './views/403.vue';
-import getRuntimeConfig from './helpers/getRuntimeConfig';
+// eslint-disable-next-line import/extensions
+import getConfig from './helpers/getConfig';

 if (!accessApi) {
    throw new Error('[plugin-layout]: pLugin-layout depends on plugin-access，please install plugin-access first！');
@ -24,40 +25,41 @@ const handle = (type, router) => {
    }
 };

-export const access = (memo) => ({
-    unAccessHandler({ router, to, from, next }) {
-        const runtimeConfig = getRuntimeConfig();
-        if (runtimeConfig.unAccessHandler && typeof runtimeConfig.unAccessHandler === 'function') {
-            return runtimeConfig.unAccessHandler({
-                router,
-                to,
-                from,
-                next,
-            });
-        }
-        if (to.path === '/404') {
-            handle(404, router);
-            return next('/404');
-        }
-        handle(403, router);
-        next('/403');
-    },
-    noFoundHandler({ router, to, from, next }) {
-        const runtimeConfig = getRuntimeConfig();
-        if (runtimeConfig.noFoundHandler && typeof runtimeConfig.noFoundHandler === 'function') {
-            return runtimeConfig.noFoundHandler({
-                router,
-                to,
-                from,
-                next,
-            });
-        }
-        if (to.path === '/403') {
+export const access = (memo) => {
+    const runtimeConfig = getConfig();
+    return {
+        unAccessHandler({ router, to, from, next }) {
+            if (runtimeConfig.unAccessHandler && typeof runtimeConfig.unAccessHandler === 'function') {
+                return runtimeConfig.unAccessHandler({
+                    router,
+                    to,
+                    from,
+                    next,
+                });
+            }
+            if (to.path === '/404') {
+                handle(404, router);
+                return next('/404');
+            }
            handle(403, router);
-            return next('/403');
-        }
-        handle(404, router);
-        next('/404');
-    },
-    ...memo,
-});
+            next('/403');
+        },
+        noFoundHandler({ router, to, from, next }) {
+            if (runtimeConfig.noFoundHandler && typeof runtimeConfig.noFoundHandler === 'function') {
+                return runtimeConfig.noFoundHandler({
+                    router,
+                    to,
+                    from,
+                    next,
+                });
+            }
+            if (to.path === '/403') {
+                handle(403, router);
+                return next('/403');
+            }
+            handle(404, router);
+            next('/404');
+        },
+        ...memo,
+    };
+};
--- a/packages/fes-plugin-layout/src/runtime/views/403.vue
+++ b/packages/fes-plugin-layout/src/runtime/views/403.vue
@ -6,15 +6,8 @@
                    d="M0 129.023v-2.084C0 58.364 55.591 2.774 124.165 2.774h2.085c68.574 0 124.165 55.59 124.165 124.165v2.084c0 68.575-55.59 124.166-124.165 124.166h-2.085C55.591 253.189 0 197.598 0 129.023"
                    fill="#E4EBF7"
                ></path>
-                <path
-                    d="M41.417 132.92a8.231 8.231 0 1 1-16.38-1.65 8.231 8.231 0 0 1 16.38 1.65"
-                    fill="#FFF"
-                ></path>
-                <path
-                    d="M38.652 136.36l10.425 5.91M49.989 148.505l-12.58 10.73"
-                    stroke="#FFF"
-                    stroke-width="2"
-                ></path>
+                <path d="M41.417 132.92a8.231 8.231 0 1 1-16.38-1.65 8.231 8.231 0 0 1 16.38 1.65" fill="#FFF"></path>
+                <path d="M38.652 136.36l10.425 5.91M49.989 148.505l-12.58 10.73" stroke="#FFF" stroke-width="2"></path>
                <path
                    d="M41.536 161.28a5.636 5.636 0 1 1-11.216-1.13 5.636 5.636 0 0 1 11.216 1.13M59.154 145.261a5.677 5.677 0 1 1-11.297-1.138 5.677 5.677 0 0 1 11.297 1.138M100.36 29.516l29.66-.013a4.562 4.562 0 1 0-.004-9.126l-29.66.013a4.563 4.563 0 0 0 .005 9.126M111.705 47.754l29.659-.013a4.563 4.563 0 1 0-.004-9.126l-29.66.013a4.563 4.563 0 1 0 .005 9.126"
                    fill="#FFF"
@ -23,11 +16,7 @@
                    d="M114.066 29.503V29.5l15.698-.007a4.563 4.563 0 1 0 .004 9.126l-15.698.007v-.002a4.562 4.562 0 0 0-.004-9.122M185.405 137.723c-.55 5.455-5.418 9.432-10.873 8.882-5.456-.55-9.432-5.418-8.882-10.873.55-5.455 5.418-9.432 10.873-8.882 5.455.55 9.432 5.418 8.882 10.873"
                    fill="#FFF"
                ></path>
-                <path
-                    d="M180.17 143.772l12.572 7.129M193.841 158.42L178.67 171.36"
-                    stroke="#FFF"
-                    stroke-width="2"
-                ></path>
+                <path d="M180.17 143.772l12.572 7.129M193.841 158.42L178.67 171.36" stroke="#FFF" stroke-width="2"></path>
                <path
                    d="M185.55 171.926a6.798 6.798 0 1 1-13.528-1.363 6.798 6.798 0 0 1 13.527 1.363M204.12 155.285a6.848 6.848 0 1 1-13.627-1.375 6.848 6.848 0 0 1 13.626 1.375"
                    fill="#FFF"
@ -86,13 +75,7 @@
                    d="M64.674 85.116s-2.34 8.413-8.912 14.447c.652.548 18.586 10.51 22.144 10.056 5.238-.669 6.417-18.968 1.145-20.531-.702-.208-5.901-1.286-8.853-2.167-.87-.26-1.611-1.71-3.545-.936l-1.98-.869zM128.362 85.826s5.318 1.956 7.325 13.734c-.546.274-17.55 12.35-21.829 7.805-6.534-6.94-.766-17.393 4.275-18.61 4.646-1.121 5.03-1.37 10.23-2.929"
                    fill="#FFF"
                ></path>
-                <path
-                    d="M78.18 94.656s.911 7.41-4.914 13.078"
-                    stroke="#E4EBF7"
-                    stroke-width="1.051"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                ></path>
+                <path d="M78.18 94.656s.911 7.41-4.914 13.078" stroke="#E4EBF7" stroke-width="1.051" stroke-linecap="round" stroke-linejoin="round"></path>
                <path
                    d="M87.397 94.68s3.124 2.572 10.263 2.572c7.14 0 9.074-3.437 9.074-3.437"
                    stroke="#E4EBF7"
@ -127,17 +110,8 @@
                    d="M105.546 74.092c-.022.713-.452 1.279-.96 1.263-.51-.016-.904-.607-.882-1.32.021-.713.452-1.278.96-1.263.51.016.904.607.882 1.32M97.592 74.349c-.022.713-.452 1.278-.961 1.263-.509-.016-.904-.607-.882-1.32.022-.713.452-1.279.961-1.263.51.016.904.606.882 1.32"
                    fill="#552950"
                ></path>
-                <path
-                    d="M91.132 86.786s5.269 4.957 12.679 2.327"
-                    stroke="#DB836E"
-                    stroke-width="1.145"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                ></path>
-                <path
-                    d="M99.776 81.903s-3.592.232-1.44-2.79c1.59-1.496 4.897-.46 4.897-.46s1.156 3.906-3.457 3.25"
-                    fill="#DB836E"
-                ></path>
+                <path d="M91.132 86.786s5.269 4.957 12.679 2.327" stroke="#DB836E" stroke-width="1.145" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M99.776 81.903s-3.592.232-1.44-2.79c1.59-1.496 4.897-.46 4.897-.46s1.156 3.906-3.457 3.25" fill="#DB836E"></path>
                <path
                    d="M102.88 70.6s2.483.84 3.402.715M93.883 71.975s2.492-1.144 4.778-1.073"
                    stroke="#5C2552"
@ -159,52 +133,16 @@
                    stroke-linecap="round"
                    stroke-linejoin="round"
                ></path>
-                <path
-                    d="M66.508 86.763s-1.598 8.83-6.697 14.078"
-                    stroke="#E4EBF7"
-                    stroke-width="1.114"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                ></path>
-                <path
-                    d="M128.31 87.934s3.013 4.121 4.06 11.785"
-                    stroke="#E4EBF7"
-                    stroke-width="1.051"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                ></path>
-                <path
-                    d="M64.09 84.816s-6.03 9.912-13.607 9.903"
-                    stroke="#DB836E"
-                    stroke-width=".795"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                ></path>
+                <path d="M66.508 86.763s-1.598 8.83-6.697 14.078" stroke="#E4EBF7" stroke-width="1.114" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M128.31 87.934s3.013 4.121 4.06 11.785" stroke="#E4EBF7" stroke-width="1.051" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M64.09 84.816s-6.03 9.912-13.607 9.903" stroke="#DB836E" stroke-width=".795" stroke-linecap="round" stroke-linejoin="round"></path>
                <path
                    d="M112.366 65.909l-.142 5.32s5.993 4.472 11.945 9.202c4.482 3.562 8.888 7.455 10.985 8.662 4.804 2.766 8.9 3.355 11.076 1.808 4.071-2.894 4.373-9.878-8.136-15.263-4.271-1.838-16.144-6.36-25.728-9.73"
                    fill="#FFC6A0"
                ></path>
-                <path
-                    d="M130.532 85.488s4.588 5.757 11.619 6.214"
-                    stroke="#DB836E"
-                    stroke-width=".75"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                ></path>
-                <path
-                    d="M121.708 105.73s-.393 8.564-1.34 13.612"
-                    stroke="#E4EBF7"
-                    stroke-width="1.051"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                ></path>
-                <path
-                    d="M115.784 161.512s-3.57-1.488-2.678-7.14"
-                    stroke="#648BD8"
-                    stroke-width="1.051"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                ></path>
+                <path d="M130.532 85.488s4.588 5.757 11.619 6.214" stroke="#DB836E" stroke-width=".75" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M121.708 105.73s-.393 8.564-1.34 13.612" stroke="#E4EBF7" stroke-width="1.051" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path d="M115.784 161.512s-3.57-1.488-2.678-7.14" stroke="#648BD8" stroke-width="1.051" stroke-linecap="round" stroke-linejoin="round"></path>
                <path
                    d="M101.52 290.246s4.326 2.057 7.408 1.03c2.842-.948 4.564.673 7.132 1.186 2.57.514 6.925 1.108 11.772-1.269-.104-5.551-6.939-4.01-12.048-6.763-2.582-1.39-3.812-4.757-3.625-8.863h-9.471s-1.402 10.596-1.169 14.68"
                    fill="#CBD1D1"
@ -213,10 +151,7 @@
                    d="M101.496 290.073s2.447 1.281 6.809.658c3.081-.44 3.74.485 7.479 1.039 3.739.554 10.802-.07 11.91-.9.415 1.108-.347 2.077-.347 2.077s-1.523.608-4.847.831c-2.045.137-5.843.293-7.663-.507-1.8-1.385-5.286-1.917-5.77-.243-3.947.958-7.41-.288-7.41-.288l-.16-2.667z"
                    fill="#2B0849"
                ></path>
-                <path
-                    d="M108.824 276.19h3.116s-.103 6.751 4.57 8.62c-4.673.624-8.62-2.32-7.686-8.62"
-                    fill="#A4AABA"
-                ></path>
+                <path d="M108.824 276.19h3.116s-.103 6.751 4.57 8.62c-4.673.624-8.62-2.32-7.686-8.62" fill="#A4AABA"></path>
                <path
                    d="M57.65 272.52s-2.122 7.47-4.518 12.396c-1.811 3.724-4.255 7.548 5.505 7.548 6.698 0 9.02-.483 7.479-6.648-1.541-6.164.268-13.296.268-13.296H57.65z"
                    fill="#CBD1D1"
@ -240,12 +175,7 @@
                    stroke-linecap="round"
                    stroke-linejoin="round"
                ></path>
-                <path
-                    d="M108.459 220.905s2.759-1.104 6.07-3.863"
-                    stroke="#648BD8"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                ></path>
+                <path d="M108.459 220.905s2.759-1.104 6.07-3.863" stroke="#648BD8" stroke-linecap="round" stroke-linejoin="round"></path>
                <path
                    d="M76.099 223.557s2.608-.587 6.47-3.346M87.33 150.82c-.27 3.088.297 8.478-4.315 9.073M104.829 149.075s.11 13.936-1.286 14.983c-2.207 1.655-2.975 1.934-2.975 1.934M101.014 149.63s.035 12.81-1.19 24.245M94.93 174.965s7.174-1.655 9.38-1.655M75.671 204.754c-.316 1.55-.64 3.067-.973 4.535 0 0-1.45 1.822-1.003 3.756.446 1.934-.943 2.034-4.96 15.273-1.686 5.559-4.464 18.49-6.313 27.447-.078.38-4.018 18.06-4.093 18.423M77.043 196.743a313.269 313.269 0 0 1-.877 4.729M83.908 151.414l-1.19 10.413s-1.091.148-.496 2.23c.111 1.34-2.66 15.692-5.153 30.267M57.58 272.94h13.238"
                    stroke="#648BD8"
@ -289,7 +219,7 @@ import { FButton } from '@fesjs/fes-design';

 export default {
    components: {
-        FButton
+        FButton,
    },
    setup() {
        const router = useRouter();
@ -297,9 +227,9 @@ export default {
            router.back();
        };
        return {
-            click
+            click,
        };
-    }
+    },
 };
 </script>
 <style lang="less" scoped>
--- a/packages/fes-plugin-layout/src/runtime/views/404.vue
+++ b/packages/fes-plugin-layout/src/runtime/views/404.vue
@ -11,15 +11,8 @@
                        mask="url(#b)"
                    ></path>
                </g>
-                <path
-                    d="M39.755 130.84a8.276 8.276 0 1 1-16.468-1.66 8.276 8.276 0 0 1 16.468 1.66"
-                    fill="#FFF"
-                ></path>
-                <path
-                    d="M36.975 134.297l10.482 5.943M48.373 146.508l-12.648 10.788"
-                    stroke="#FFF"
-                    stroke-width="2"
-                ></path>
+                <path d="M39.755 130.84a8.276 8.276 0 1 1-16.468-1.66 8.276 8.276 0 0 1 16.468 1.66" fill="#FFF"></path>
+                <path d="M36.975 134.297l10.482 5.943M48.373 146.508l-12.648 10.788" stroke="#FFF" stroke-width="2"></path>
                <path
                    d="M39.875 159.352a5.667 5.667 0 1 1-11.277-1.136 5.667 5.667 0 0 1 11.277 1.136M57.588 143.247a5.708 5.708 0 1 1-11.358-1.145 5.708 5.708 0 0 1 11.358 1.145M99.018 26.875l29.82-.014a4.587 4.587 0 1 0-.003-9.175l-29.82.013a4.587 4.587 0 1 0 .003 9.176M110.424 45.211l29.82-.013a4.588 4.588 0 0 0-.004-9.175l-29.82.013a4.587 4.587 0 1 0 .004 9.175"
                    fill="#FFF"
@ -28,11 +21,7 @@
                    d="M112.798 26.861v-.002l15.784-.006a4.588 4.588 0 1 0 .003 9.175l-15.783.007v-.002a4.586 4.586 0 0 0-.004-9.172M184.523 135.668c-.553 5.485-5.447 9.483-10.931 8.93-5.485-.553-9.483-5.448-8.93-10.932.552-5.485 5.447-9.483 10.932-8.93 5.485.553 9.483 5.447 8.93 10.932"
                    fill="#FFF"
                ></path>
-                <path
-                    d="M179.26 141.75l12.64 7.167M193.006 156.477l-15.255 13.011"
-                    stroke="#FFF"
-                    stroke-width="2"
-                ></path>
+                <path d="M179.26 141.75l12.64 7.167M193.006 156.477l-15.255 13.011" stroke="#FFF" stroke-width="2"></path>
                <path
                    d="M184.668 170.057a6.835 6.835 0 1 1-13.6-1.372 6.835 6.835 0 0 1 13.6 1.372M203.34 153.325a6.885 6.885 0 1 1-13.7-1.382 6.885 6.885 0 0 1 13.7 1.382"
                    fill="#FFF"
@ -59,10 +48,7 @@
                    d="M205.952 38.387c.5.5.785 1.142.785 1.928s-.286 1.465-.785 1.964c-.572.5-1.214.75-2 .75-.785 0-1.429-.285-1.929-.785-.572-.5-.82-1.143-.82-1.929s.248-1.428.82-1.928c.5-.5 1.144-.75 1.93-.75.785 0 1.462.25 1.999.75m4.285-19.463c1.428 1.249 2.143 2.963 2.143 5.142 0 1.712-.427 3.13-1.219 4.25-.067.096-.137.18-.218.265-.416.429-1.41 1.346-2.956 2.699a5.07 5.07 0 0 0-1.428 1.75 5.207 5.207 0 0 0-.536 2.357v.5h-4.107v-.5c0-1.357.215-2.536.714-3.5.464-.964 1.857-2.464 4.178-4.536l.43-.5c.643-.785.964-1.643.964-2.535 0-1.18-.358-2.108-1-2.785-.678-.68-1.643-1.001-2.858-1.001-1.536 0-2.642.464-3.357 1.43-.37.5-.621 1.135-.76 1.904a1.999 1.999 0 0 1-1.971 1.63h-.004c-1.277 0-2.257-1.183-1.98-2.43.337-1.518 1.02-2.78 2.073-3.784 1.536-1.5 3.607-2.25 6.25-2.25 2.32 0 4.214.607 5.642 1.894"
                    fill="#FFF"
                ></path>
-                <path
-                    d="M52.04 76.131s21.81 5.36 27.307 15.945c5.575 10.74-6.352 9.26-15.73 4.935-10.86-5.008-24.7-11.822-11.577-20.88"
-                    fill="#FFB594"
-                ></path>
+                <path d="M52.04 76.131s21.81 5.36 27.307 15.945c5.575 10.74-6.352 9.26-15.73 4.935-10.86-5.008-24.7-11.822-11.577-20.88" fill="#FFB594"></path>
                <path
                    d="M90.483 67.504l-.449 2.893c-.753.49-4.748-2.663-4.748-2.663l-1.645.748-1.346-5.684s6.815-4.589 8.917-5.018c2.452-.501 9.884.94 10.7 2.278 0 0 1.32.486-2.227.69-3.548.203-5.043.447-6.79 3.132-1.747 2.686-2.412 3.624-2.412 3.624"
                    fill="#FFC6A0"
@ -79,10 +65,7 @@
                    d="M101.067 289.826s2.428 1.271 6.759.653c3.058-.437 3.712.481 7.423 1.031 3.712.55 10.724-.069 11.823-.894.413 1.1-.343 2.063-.343 2.063s-1.512.603-4.812.824c-2.03.136-5.8.291-7.607-.503-1.787-1.375-5.247-1.903-5.728-.241-3.918.95-7.355-.286-7.355-.286l-.16-2.647z"
                    fill="#2B0849"
                ></path>
-                <path
-                    d="M108.341 276.044h3.094s-.103 6.702 4.536 8.558c-4.64.618-8.558-2.303-7.63-8.558"
-                    fill="#A4AABA"
-                ></path>
+                <path d="M108.341 276.044h3.094s-.103 6.702 4.536 8.558c-4.64.618-8.558-2.303-7.63-8.558" fill="#A4AABA"></path>
                <path
                    d="M57.542 272.401s-2.107 7.416-4.485 12.306c-1.798 3.695-4.225 7.492 5.465 7.492 6.648 0 8.953-.48 7.423-6.599-1.53-6.12.266-13.199.266-13.199h-8.669z"
                    fill="#CBD1D1"
@ -106,12 +89,7 @@
                    stroke-linecap="round"
                    stroke-linejoin="round"
                ></path>
-                <path
-                    d="M107.275 222.1s2.773-1.11 6.102-3.884"
-                    stroke="#648BD8"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                ></path>
+                <path d="M107.275 222.1s2.773-1.11 6.102-3.884" stroke="#648BD8" stroke-linecap="round" stroke-linejoin="round"></path>
                <path
                    d="M74.74 224.767s2.622-.591 6.505-3.365M86.03 151.634c-.27 3.106.3 8.525-4.336 9.123M103.625 149.88s.11 14.012-1.293 15.065c-2.219 1.664-2.99 1.944-2.99 1.944M99.79 150.438s.035 12.88-1.196 24.377M93.673 175.911s7.212-1.664 9.431-1.664M74.31 205.861a212.013 212.013 0 0 1-.979 4.56s-1.458 1.832-1.009 3.776c.449 1.944-.947 2.045-4.985 15.355-1.696 5.59-4.49 18.591-6.348 27.597l-.231 1.12M75.689 197.807a320.934 320.934 0 0 1-.882 4.754M82.591 152.233L81.395 162.7s-1.097.15-.5 2.244c.113 1.346-2.674 15.775-5.18 30.43M56.12 274.418h13.31"
                    stroke="#648BD8"
@ -161,13 +139,7 @@
                    stroke-linejoin="round"
                    d="M110.13 74.84l-.896 1.61-.298 4.357h-2.228"
                ></path>
-                <path
-                    d="M110.846 74.481s1.79-.716 2.506.537"
-                    stroke="#5C2552"
-                    stroke-width="1.118"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                ></path>
+                <path d="M110.846 74.481s1.79-.716 2.506.537" stroke="#5C2552" stroke-width="1.118" stroke-linecap="round" stroke-linejoin="round"></path>
                <path
                    d="M92.386 74.282s.477-1.114 1.113-.716c.637.398 1.274 1.433.558 1.99-.717.556.159 1.67.159 1.67"
                    stroke="#DB836E"
@ -175,13 +147,7 @@
                    stroke-linecap="round"
                    stroke-linejoin="round"
                ></path>
-                <path
-                    d="M103.287 72.93s1.83 1.113 4.137.954"
-                    stroke="#5C2552"
-                    stroke-width="1.118"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                ></path>
+                <path d="M103.287 72.93s1.83 1.113 4.137.954" stroke="#5C2552" stroke-width="1.118" stroke-linecap="round" stroke-linejoin="round"></path>
                <path
                    d="M103.685 81.762s2.227 1.193 4.376 1.193M104.64 84.308s.954.398 1.511.318M94.693 81.205s2.308 7.4 10.424 7.639"
                    stroke="#DB836E"
@ -203,29 +169,14 @@
                    stroke-linecap="round"
                    stroke-linejoin="round"
                ></path>
-                <path
-                    d="M119.306 107.329s.452 4.366-2.127 32.062"
-                    stroke="#E4EBF7"
-                    stroke-width="1.101"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                ></path>
+                <path d="M119.306 107.329s.452 4.366-2.127 32.062" stroke="#E4EBF7" stroke-width="1.101" stroke-linecap="round" stroke-linejoin="round"></path>
                <path
                    d="M150.028 151.232h-49.837a1.01 1.01 0 0 1-1.01-1.01v-31.688c0-.557.452-1.01 1.01-1.01h49.837c.558 0 1.01.453 1.01 1.01v31.688a1.01 1.01 0 0 1-1.01 1.01"
                    fill="#F2D7AD"
                ></path>
-                <path
-                    d="M150.29 151.232h-19.863v-33.707h20.784v32.786a.92.92 0 0 1-.92.92"
-                    fill="#F4D19D"
-                ></path>
-                <path
-                    d="M123.554 127.896H92.917a.518.518 0 0 1-.425-.816l6.38-9.113c.193-.277.51-.442.85-.442h31.092l-7.26 10.371z"
-                    fill="#F2D7AD"
-                ></path>
-                <path
-                    fill="#CC9B6E"
-                    d="M123.689 128.447H99.25v-.519h24.169l7.183-10.26.424.298z"
-                ></path>
+                <path d="M150.29 151.232h-19.863v-33.707h20.784v32.786a.92.92 0 0 1-.92.92" fill="#F4D19D"></path>
+                <path d="M123.554 127.896H92.917a.518.518 0 0 1-.425-.816l6.38-9.113c.193-.277.51-.442.85-.442h31.092l-7.26 10.371z" fill="#F2D7AD"></path>
+                <path fill="#CC9B6E" d="M123.689 128.447H99.25v-.519h24.169l7.183-10.26.424.298z"></path>
                <path
                    d="M158.298 127.896h-18.669a2.073 2.073 0 0 1-1.659-.83l-7.156-9.541h19.965c.49 0 .95.23 1.244.622l6.69 8.92a.519.519 0 0 1-.415.83"
                    fill="#F4D19D"
@ -275,13 +226,7 @@
                    d="M186.443 293.613H158.92a3.187 3.187 0 0 1-3.187-3.187v-46.134a3.187 3.187 0 0 1 3.187-3.187h27.524a3.187 3.187 0 0 1 3.187 3.187v46.134a3.187 3.187 0 0 1-3.187 3.187"
                    fill="#F2D7AD"
                ></path>
-                <path
-                    d="M88.979 89.48s7.776 5.384 16.6 2.842"
-                    stroke="#E4EBF7"
-                    stroke-width="1.101"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                ></path>
+                <path d="M88.979 89.48s7.776 5.384 16.6 2.842" stroke="#E4EBF7" stroke-width="1.101" stroke-linecap="round" stroke-linejoin="round"></path>
            </g>
        </svg>
        <div class="page-title">对不起，您访问的页面不存在。</div>
@ -299,7 +244,7 @@ import { FButton } from '@fesjs/fes-design';

 export default {
    components: {
-        FButton
+        FButton,
    },
    setup() {
        const router = useRouter();
@ -307,9 +252,9 @@ export default {
            router.back();
        };
        return {
-            click
+            click,
        };
-    }
+    },
 };
 </script>
 <style lang="less" scoped>
--- a/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue
+++ b/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue
@ -1,18 +1,17 @@
 <template>
-    <f-layout v-if="routeLayout" class="main-layout">
-        <template v-if="navigation === 'side'">
+    <f-layout class="main-layout">
+        <template v-if="currentNavigation === 'side'">
            <f-aside
-                v-if="routeLayout.sidebar"
                v-model:collapsed="collapsedRef"
-                :fixed="fixedSideBar"
+                :fixed="isFixedSidebar"
                :width="`${sideWidth}px`"
                class="layout-aside"
                collapsible
                :inverted="theme === 'dark'"
            >
-                <div v-if="routeLayout.logo" class="layout-logo">
-                    <img :src="logo" class="logo-img" />
-                    <div class="logo-name">{{ title }}</div>
+                <div class="layout-logo">
+                    <img v-if="logo" :src="logo" class="logo-img" />
+                    <div v-if="title" class="logo-name">{{ title }}</div>
                </div>
                <Menu
                    class="layout-menu"
@ -20,15 +19,15 @@
                    :collapsed="collapsedRef"
                    mode="vertical"
                    :inverted="theme === 'dark'"
-                    :expandedKeys="menuConfig?.expandedKeys"
-                    :defaultExpandAll="menuConfig?.defaultExpandAll"
-                    :accordion="menuConfig?.accordion"
+                    :expandedKeys="menuProps?.expandedKeys"
+                    :defaultExpandAll="menuProps?.defaultExpandAll"
+                    :accordion="menuProps?.accordion"
                />
            </f-aside>
-            <f-layout :fixed="fixedSideBar" :style="sideStyleRef">
-                <f-header v-if="routeLayout.header" ref="headerRef" class="layout-header" :fixed="currentFixedHeaderRef">
+            <f-layout :fixed="isFixedSidebar" :style="sideStyleRef">
+                <f-header ref="headerRef" class="layout-header" :fixed="currentFixedHeaderRef">
                    <div class="layout-header-custom">
-                        <slot name="customHeader"></slot>
+                        <slot name="renderCustom"></slot>
                    </div>
                    <template v-if="locale">
                        <slot name="locale"></slot>
@ -44,23 +43,70 @@
                </f-layout>
            </f-layout>
        </template>
-        <template v-if="navigation === 'top'">
-            <f-header v-if="routeLayout.header" ref="headerRef" class="layout-header" :inverted="theme === 'dark'" :fixed="currentFixedHeaderRef">
-                <div v-if="routeLayout.logo" class="layout-logo">
-                    <img :src="logo" class="logo-img" />
-                    <div class="logo-name">{{ title }}</div>
+        <template v-if="currentNavigation === 'left-right'">
+            <f-aside
+                v-model:collapsed="collapsedRef"
+                :fixed="isFixedSidebar"
+                :width="`${sideWidth}px`"
+                class="layout-aside"
+                collapsible
+                :inverted="theme === 'dark'"
+            >
+                <div class="flex-between">
+                    <div>
+                        <div class="layout-logo">
+                            <img v-if="logo" :src="logo" class="logo-img" />
+                            <div v-if="title" class="logo-name">{{ title }}</div>
+                        </div>
+                        <Menu
+                            class="layout-menu"
+                            :menus="menus"
+                            :collapsed="collapsedRef"
+                            mode="vertical"
+                            :inverted="theme === 'dark'"
+                            :expandedKeys="menuProps?.expandedKeys"
+                            :defaultExpandAll="menuProps?.defaultExpandAll"
+                            :accordion="menuProps?.accordion"
+                        />
+                    </div>
+                    <div>
+                        <div class="layout-aside-custom">
+                            <slot name="renderCustom"></slot>
+                        </div>
+                        <div v-if="locale" class="layout-aside-locale">
+                            <slot name="locale"></slot>
+                        </div>
+                    </div>
+                </div>
+            </f-aside>
+            <f-layout :fixed="isFixedSidebar" :style="sideStyleRef">
+                <f-layout :embedded="!multiTabs">
+                    <f-main class="layout-main">
+                        <MultiTabProvider :multiTabs="multiTabs" />
+                    </f-main>
+                    <f-footer v-if="footer" class="layout-footer">
+                        {{ footer }}
+                    </f-footer>
+                </f-layout>
+            </f-layout>
+        </template>
+        <template v-else-if="currentNavigation === 'top'">
+            <f-header ref="headerRef" class="layout-header" :inverted="theme === 'dark'" :fixed="currentFixedHeaderRef">
+                <div class="layout-logo">
+                    <img v-if="logo" :src="logo" class="logo-img" />
+                    <div v-if="title" class="logo-name">{{ title }}</div>
                </div>
                <Menu
                    class="layout-menu"
                    :menus="menus"
                    mode="horizontal"
                    :inverted="theme === 'dark'"
-                    :expandedKeys="menuConfig?.expandedKeys"
-                    :defaultExpandAll="menuConfig?.defaultExpandAll"
-                    :accordion="menuConfig?.accordion"
+                    :expandedKeys="menuProps?.expandedKeys"
+                    :defaultExpandAll="menuProps?.defaultExpandAll"
+                    :accordion="menuProps?.accordion"
                />
                <div class="layout-header-custom">
-                    <slot name="customHeader"></slot>
+                    <slot name="renderCustom"></slot>
                </div>
                <template v-if="locale">
                    <slot name="locale"></slot>
@ -75,39 +121,32 @@
                </f-footer>
            </f-layout>
        </template>
-        <template v-if="navigation === 'mixin'">
-            <f-header v-if="routeLayout.header" ref="headerRef" class="layout-header" :fixed="currentFixedHeaderRef" :inverted="theme === 'dark'">
-                <div v-if="routeLayout.logo" class="layout-logo">
-                    <img :src="logo" class="logo-img" />
-                    <div class="logo-name">{{ title }}</div>
+        <template v-else-if="currentNavigation === 'mixin'">
+            <f-header ref="headerRef" class="layout-header" :fixed="currentFixedHeaderRef" :inverted="theme === 'dark'">
+                <div class="layout-logo">
+                    <img v-if="logo" :src="logo" class="logo-img" />
+                    <div v-if="title" class="logo-name">{{ title }}</div>
                </div>
                <div class="layout-header-custom">
-                    <slot name="customHeader"></slot>
+                    <slot name="renderCustom"></slot>
                </div>
                <template v-if="locale">
                    <slot name="locale"></slot>
                </template>
            </f-header>
            <f-layout :fixed="currentFixedHeaderRef" :style="headerStyleRef">
-                <f-aside
-                    v-if="routeLayout.sidebar"
-                    v-model:collapsed="collapsedRef"
-                    :fixed="fixedSideBar"
-                    :width="`${sideWidth}px`"
-                    collapsible
-                    class="layout-aside"
-                >
+                <f-aside v-model:collapsed="collapsedRef" :fixed="isFixedSidebar" :width="`${sideWidth}px`" collapsible class="layout-aside">
                    <Menu
                        class="layout-menu"
                        :menus="menus"
                        :collapsed="collapsedRef"
                        mode="vertical"
-                        :expandedKeys="menuConfig?.expandedKeys"
-                        :defaultExpandAll="menuConfig?.defaultExpandAll"
-                        :accordion="menuConfig?.accordion"
+                        :expandedKeys="menuProps?.expandedKeys"
+                        :defaultExpandAll="menuProps?.defaultExpandAll"
+                        :accordion="menuProps?.accordion"
                    />
                </f-aside>
-                <f-layout :embedded="!multiTabs" :fixed="fixedSideBar" :style="sideStyleRef">
+                <f-layout :embedded="!multiTabs" :fixed="isFixedSidebar" :style="sideStyleRef">
                    <f-main class="layout-main">
                        <MultiTabProvider :multiTabs="multiTabs" />
                    </f-main>
@ -117,8 +156,12 @@
                </f-layout>
            </f-layout>
        </template>
+        <template v-else>
+            <f-main class="layout-main">
+                <router-view></router-view>
+            </f-main>
+        </template>
    </f-layout>
-    <router-view v-else></router-view>
 </template>

 <script>
@ -128,7 +171,6 @@ import { FLayout, FAside, FMain, FFooter, FHeader } from '@fesjs/fes-design';
 import Menu from './Menu.vue';
 import MultiTabProvider from './MultiTabProvider.vue';
 import defaultLogo from '../assets/logo.png';
-import getRuntimeConfig from '../helpers/getRuntimeConfig';

 export default {
    components: {
@ -167,11 +209,11 @@ export default {
            type: String,
            default: 'side', // side 左右（上/下）、 top 上/下、 mixin 上/下（左/右）
        },
-        fixedHeader: {
+        isFixedHeader: {
            type: Boolean,
            default: false,
        },
-        fixedSideBar: {
+        isFixedSidebar: {
            type: Boolean,
            default: true,
        },
@ -184,63 +226,44 @@ export default {
            default: 200,
        },
        footer: String,
-        menuConfig: {
+        menuProps: {
            type: Object,
        },
    },
    setup(props) {
        const headerRef = ref();
        const headerHeightRef = ref(0);
+        const collapsedRef = ref(false);
+        const route = useRoute();
+
+        const currentNavigation = computed(() => {
+            if (route.meta.layout && route.meta.layout.navigation !== undefined) {
+                return route.meta.layout.navigation;
+            }
+            return props.navigation;
+        });
+
+        const currentFixedHeaderRef = computed(() => props.isFixedHeader || props.navigation === 'mixin');
+        const headerStyleRef = computed(() => (currentFixedHeaderRef.value ? { top: `${headerHeightRef.value}px` } : null));
+        const sideStyleRef = computed(() => {
+            const left = collapsedRef.value ? '48px' : `${props.sideWidth}px`;
+            return props.isFixedSidebar ? { left } : null;
+        });

        onMounted(() => {
            if (headerRef.value) {
                headerHeightRef.value = headerRef.value.$el.offsetHeight;
            }
        });
-
-        const collapsedRef = ref(false);
-        const route = useRoute();
-        const runtimeConfig = getRuntimeConfig();
-        const routeLayout = computed(() => {
-            let config;
-            // meta 中 layout 默认为 true
-            const metaLayoutConfig = route.meta.layout === undefined ? true : route.meta.layout;
-            if (typeof metaLayoutConfig === 'boolean') {
-                config = metaLayoutConfig ? runtimeConfig : false;
-            } else if (typeof metaLayoutConfig === 'object') {
-                config = { ...runtimeConfig, ...metaLayoutConfig };
-            } else {
-                console.error('[plugin-layout]: meta layout must be object or boolean！');
-            }
-            // query 中 layout 默认为 false
-            const routeQueryLayoutConfig = route.query.layout && JSON.parse(route.query.layout);
-            if (typeof routeQueryLayoutConfig === 'boolean') {
-                config = routeQueryLayoutConfig ? runtimeConfig : false;
-            } else if (typeof routeQueryLayoutConfig === 'object') {
-                config = { ...config, ...routeQueryLayoutConfig };
-            } else if (routeQueryLayoutConfig !== undefined) {
-                console.error('[plugin-layout]: query layout must be object or boolean！');
-            }
-            return config;
-        });
-        const currentFixedHeaderRef = computed(() => props.fixedHeader || props.navigation === 'mixin');
-        const headerStyleRef = computed(() => (currentFixedHeaderRef.value ? { top: `${headerHeightRef.value}px` } : null));
-        const sideStyleRef = computed(() =>
-            props.fixedSideBar
-                ? {
-                      left: collapsedRef.value ? '48px' : `${props.sideWidth}px`,
-                  }
-                : null,
-        );
        return {
            headerRef,
            headerHeightRef,
            route,
-            routeLayout,
            collapsedRef,
            currentFixedHeaderRef,
            headerStyleRef,
            sideStyleRef,
+            currentNavigation,
        };
    },
 };
@ -251,6 +274,13 @@ export default {
    .layout-main {
        z-index: 0;
    }
+    .flex-between {
+        display: flex;
+        flex-flow: column;
+        align-items: stretch;
+        justify-content: space-between;
+        min-height: 100%;
+    }
    .layout-header {
        display: flex;
        box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
@ -309,6 +339,15 @@ export default {
        .layout-menu {
            margin-top: 24px;
        }
+
+        .layout-aside-custom {
+            padding: 8px 16px;
+        }
+
+        .layout-aside-locale {
+            padding: 8px 16px;
+        }
+
        &.is-collapsed {
            .layout-logo {
                justify-content: center;
--- a/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue
+++ b/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue
@ -21,17 +21,9 @@
                </FDropdown>
            </template>
        </FTabs>
-        <router-view v-slot="{ Component, route }">
-            <keep-alive :include="keepAlivePages">
-                <component :is="getComponent(Component, route, true)" :key="getPageKey(route)" />
-            </keep-alive>
-        </router-view>
+        <Page :nameList="keepAlivePages" :pageKey="getPageKey" isAllKeepAlive />
    </template>
-    <router-view v-else v-slot="{ Component, route }">
-        <keep-alive :include="keepAlivePages">
-            <component :is="getComponent(Component, route)" />
-        </keep-alive>
-    </router-view>
+    <Page v-else :nameList="keepAlivePages" />
 </template>
 <script>
 import { computed, unref, ref } from 'vue';
@ -39,6 +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 Page from './page.vue';

 let i = 0;
 const getKey = () => ++i;
@ -49,6 +42,7 @@ export default {
        FDropdown,
        ReloadOutlined,
        MoreOutlined,
+        Page,
    },
    props: {
        multiTabs: Boolean,
@ -151,21 +145,6 @@ export default {
            }
        };

-        const getComponent = (Component, _route, isKeep = false) => {
-            if (isKeep || _route.meta['keep-alive']) {
-                const name = _route.meta?.name ?? _route.name;
-                if (name) {
-                    // 修改组件的 name
-                    Component.type.name = name;
-                    // 缓存的关键是组件name在keep-alive的include列表
-                    if (!keepAlivePages.value.includes(name)) {
-                        keepAlivePages.value = [...keepAlivePages.value, name];
-                    }
-                }
-            }
-
-            return Component;
-        };
        return {
            route,
            pageList,
@ -175,7 +154,6 @@ export default {
            handlerMore,
            handleCloseTab,
            actions,
-            getComponent,
            keepAlivePages,
        };
    },
--- a/packages/fes-plugin-layout/src/runtime/views/index.tpl
+++ b/packages/fes-plugin-layout/src/runtime/views/index.tpl
@ -0,0 +1,39 @@
+import { ref, defineComponent, computed } from 'vue';
+import { plugin } from '@@/core/coreExports';
+import { getRoutes } from '@@/core/routes/routes';
+import BaseLayout from './BaseLayout.vue';
+// eslint-disable-next-line import/extensions
+import getConfig from '../helpers/getConfig';
+import fillMenu from '../helpers/fillMenu';
+
+const Layout = defineComponent({
+    name: 'Layout',
+    setup() {
+        const initConfig = {{{REPLACE_USER_CONFIG}}}
+        const config = {...initConfig, ...getConfig()};
+
+        let menusRef = ref(config.menus);
+        // 如果运行时配置了，则需要处理
+        if (config.menus && typeof config.menus === 'function') {
+            menusRef = ref(config.menus());
+        }
+        // 把路由的meta合并到menu配置中
+        const filledMenuRef = computed(() => fillMenu(menusRef.value, getRoutes()));
+
+        const localeShared = plugin.getShared('locale');
+        return () => {
+            const slots = {
+                renderCustom: config.renderCustom,
+                locale: () => {
+                    if (localeShared) {
+                        return <localeShared.SelectLang></localeShared.SelectLang>;
+                    }
+                    return null;
+                },
+            };
+            return <BaseLayout {...config} locale={localeShared ? true : false} menus={filledMenuRef.value} v-slots={slots}></BaseLayout>;
+        };
+    },
+});
+
+export default Layout;
--- a/packages/fes-plugin-layout/src/runtime/views/page.vue
+++ b/packages/fes-plugin-layout/src/runtime/views/page.vue
@ -0,0 +1,64 @@
+<template>
+    <router-view v-slot="{ Component, route }">
+        <keep-alive :include="currentNameList">
+            <component :is="getComponent(Component, route)" :key="pageKey(route)" />
+        </keep-alive>
+    </router-view>
+</template>
+<script>
+import { defineComponent, ref, watch } from 'vue';
+
+export default defineComponent({
+    props: {
+        nameList: {
+            type: Array,
+            default() {
+                return [];
+            },
+        },
+        pageKey: {
+            type: Function,
+            default: () => {},
+        },
+        isAllKeepAlive: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    emits: ['update:nameList'],
+    setup(props, { emit }) {
+        const currentNameList = ref(props.nameList);
+
+        watch(
+            () => props.nameList,
+            () => {
+                if (currentNameList.value !== props.nameList) {
+                    currentNameList.value = props.nameList;
+                }
+            },
+        );
+
+        const getComponent = (Component, route) => {
+            if (props.isAllKeepAlive || route.meta['keep-alive']) {
+                const name = route.meta?.name ?? route.name;
+                if (name) {
+                    // 修改组件的 name
+                    Component.type.name = name;
+                    // 缓存的关键是组件name在keep-alive的include列表
+                    if (!currentNameList.value.includes(name)) {
+                        currentNameList.value = [...currentNameList.value, name];
+                        emit('update:nameList', currentNameList.value);
+                    }
+                }
+            }
+
+            return Component;
+        };
+
+        return {
+            currentNameList,
+            getComponent,
+        };
+    },
+});
+</script>
--- a/packages/fes-plugin-layout/types.d.ts
+++ b/packages/fes-plugin-layout/types.d.ts
@ -1,4 +1,4 @@
-import { Component } from 'vue';
+import {Component, VNode, Ref } from 'vue';
 import { Router, NavigationGuard } from 'vue-router';

 interface Menu {
@ -6,21 +6,27 @@ interface Menu {
    path: string;
    match: string[];
    title: string;
-    icon: string;
+    icon: string | Component;
    children?: Menu[]
 }

 export interface LayoutBuildConfig {
    layout: {
-        title: string;
        footer: string;
        theme: 'dark' | 'light';
+        navigation: 'side' | 'top' | 'mixin' | 'left-right';
+        title: string;
+        isFixedHeader: boolean;
+        isFixedSidebar: boolean;
+        logo: string;
        multiTabs: boolean;
-        navigation: 'side' | 'top' | 'mixin';
-        fixedHeader: boolean;
-        fixedSideBar: boolean;
        sideWidth: number;
        menus: Menu[];
+        menuProps: {
+            expandedKeys: string[];
+            defaultExpandAll: boolean;
+            accordion: boolean;
+        };
    };
 }

@ -28,10 +34,22 @@ export interface LayoutBuildConfig {

 export interface LayoutRuntimeConfig {
    layout: {
-        header: boolean;
-        sidebar: boolean;
-        logo: boolean;
-        customHeader: Component,
+        footer: string;
+        theme: 'dark' | 'light';
+        navigation: 'side' | 'top' | 'mixin' | 'left-right';
+        title: string;
+        isFixedHeader: boolean;
+        isFixedSidebar: boolean;
+        logo: string;
+        multiTabs: boolean;
+        sideWidth: number;
+        menus: Menu[] | (()=> (Ref<Menu[]> | Menu[]));
+        menuProps: {
+            expandedKeys: string[];
+            defaultExpandAll: boolean;
+            accordion: boolean;
+        };
+        renderCustom: ()=> VNode[],
        noFoundHandler: (param: { router: Router } & NavigationGuard) => void;
        unAccessHandler: (param: { router: Router } & NavigationGuard) => void;
    };
--- a/packages/fes-plugin-locale/src/runtime/views/SelectLang.vue
+++ b/packages/fes-plugin-locale/src/runtime/views/SelectLang.vue
@ -5,17 +5,9 @@
        </div>
        <template #content>
            <FScrollbar height="274" class="lang-container">
-                <div
-                    v-for="item in configs"
-                    :key="item.lang"
-                    :class="[
-                        'lang-option',
-                        item.lang === locale && 'is-selected'
-                    ]"
-                    @click="handleSelect(item)"
-                >
-                    <span>{{item.icon}}</span>
-                    <span>{{item.label}}</span>
+                <div v-for="item in configs" :key="item.lang" :class="['lang-option', item.lang === locale && 'is-selected']" @click="handleSelect(item)">
+                    <span>{{ item.icon }}</span>
+                    <span>{{ item.label }}</span>
                </div>
            </FScrollbar>
        </template>
@ -28,13 +20,14 @@ import { LanguageOutlined } from '@fesjs/fes-design/icon';
 import { useI18n } from 'vue-i18n';
 import { computed, ref } from 'vue';
 import langUConfigMap from '../langUConfigMap';
+// eslint-disable-next-line import/extensions
 import { locale as _locale } from '../core';

 export default {
    components: {
        FTooltip,
        FScrollbar,
-        LanguageOutlined
+        LanguageOutlined,
    },
    setup() {
        const { messages, locale } = useI18n();
@ -57,9 +50,9 @@ export default {
            handleSelect,
            locale,
            configs,
-            isOpened
+            isOpened,
        };
-    }
+    },
 };
 </script>
 <style>
@ -68,10 +61,10 @@ export default {
 }
 </style>
 <style lang="less" scoped>
-
 .lang-icon {
    display: flex;
    align-items: center;
+    justify-content: center;
    margin: 0 8px;
    padding: 0 4px;
    cursor: pointer;
--- a/packages/fes-preset-built-in/package.json
+++ b/packages/fes-preset-built-in/package.json
@ -1,6 +1,6 @@
 {
  "name": "@fesjs/preset-built-in",
-  "version": "3.0.0-beta.6",
+  "version": "3.0.0-beta.7",
  "description": "@fesjs/preset-built-in",
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
--- a/packages/fes-preset-built-in/src/plugins/route/index.js
+++ b/packages/fes-preset-built-in/src/plugins/route/index.js
@ -113,18 +113,20 @@ const genRoutes = function (parentRoutes, path, parentRoutePath, config) {
            const routeName = getRouteName(parentRoutePath, fileName);
            const componentPath = getComponentPath(parentRoutePath, ext === '.vue' ? `${fileName}${ext}` : fileName, config);

-            let content = readFileSync(component, 'utf-8');
+            const content = readFileSync(component, 'utf-8');
            let routeMeta = {};
            if (ext === '.vue') {
                const { descriptor } = parse(content);
                const routeMetaBlock = descriptor.customBlocks.find((b) => b.type === 'config');
                routeMeta = routeMetaBlock?.content ? JSON.parse(routeMetaBlock.content) : {};
                if (descriptor.script) {
-                    content = descriptor.script.content;
-                    routeMeta = getRouteMeta(content) || routeMeta;
+                    routeMeta = getRouteMeta(descriptor.script.content) || routeMeta;
                }
-            }
-            if (ext === '.jsx' || ext === '.tsx') {
+                // 优先使用 descriptor.script， 兼容 script 和 script setup 同时存在的情况
+                if (descriptor.scriptSetup && lodash.isEmpty(routeMeta)) {
+                    routeMeta = getRouteMeta(descriptor.scriptSetup.content) || routeMeta;
+                }
+            } else if (ext === '.jsx' || ext === '.tsx') {
                routeMeta = getRouteMeta(content) || {};
            }

--- a/packages/fes-template-h5/src/pages/index.vue
+++ b/packages/fes-template-h5/src/pages/index.vue
@ -1,70 +1,13 @@
 <template>
-    <div class="onepiece m-10px text-yellow-700">
-        fes h5 & 拉夫德鲁<br />
-        <fes-icon :spin="true" class="one-icon" type="smile" @click="clickIcon" />
-        <HelloWorld />
-    </div>
+    <div class="onepiece m-10px text-yellow-700">fes h5 & 拉夫德鲁<br /></div>
 </template>
-<script>
-import { ref } from 'vue';
-import { request, defineRouteMeta } from '@fesjs/fes';
-import HelloWorld from '@/components/helloWorld.vue';
+
+<script setup>
+import { defineRouteMeta } from '@fesjs/fes';

 defineRouteMeta({
    title: '首页',
    name: 'testIndex',
    layout: false,
 });
-
-export default {
-    components: {
-        HelloWorld,
-    },
-    setup() {
-        const fes = ref('fes upgrade to vue3');
-        const rotate = ref(90);
-        const clickIcon = () => {
-            console.log('click icon');
-        };
-
-        const get = () => {
-            request('/api', null, {})
-                .then((data) => {
-                    console.log(data);
-                })
-                .catch((err) => {
-                    console.log('error', err);
-                });
-        };
-
-        get(1);
-
-        return {
-            fes,
-            rotate,
-            clickIcon,
-        };
-    },
-};
 </script>
-
-<style lang="less" scoped>
-@import '@/styles/mixins/hairline';
-@import '@/styles/mixins/hover';
-
-div {
-    padding: 20px;
-    p {
-        margin: 20px;
-    }
-}
-.one-icon {
-    color: yellow;
-    font-size: 24px;
-    .hover();
-}
-.onepiece {
-    text-align: center;
-    .hairline('top');
-}
-</style>
--- a/packages/fes-template-h5/src/styles/common.less
+++ b/packages/fes-template-h5/src/styles/common.less
@ -26,8 +26,7 @@ a {

 /* 适配 iPhone X 顶部填充*/
@supports (top: env(safe-area-inset-top)){
-    body,
-    .alien-screen-header {
+    body {
        padding-top: constant(safe-area-inset-top, 40px);
        padding-top: env(safe-area-inset-top, 40px);
        padding-top: var(safe-area-inset-top, 40px);
@ -36,10 +35,9 @@ a {

 /* 判断iPhoneX 将 footer 的 padding-bottom 填充到最底部 */
@supports (bottom: env(safe-area-inset-bottom)){
-    body,
-    .alien-screen-footer {
+    body  {
        padding-bottom: constant(safe-area-inset-bottom, 20px);
        padding-bottom: env(safe-area-inset-bottom, 20px);
-        padding-top: var(safe-area-inset-bottom, 20px);
+        padding-bottom: var(safe-area-inset-bottom, 20px);
    }
 }
--- a/packages/fes-template-vite/src/app.jsx
+++ b/packages/fes-template-vite/src/app.jsx
@ -23,5 +23,5 @@ export const beforeRender = {
 };

 export const layout = {
-    customHeader: <UserCenter />,
+    renderCustom: () => <UserCenter />,
 };
--- a/packages/fes-template/.fes.js
+++ b/packages/fes-template/.fes.js
@ -72,7 +72,7 @@ export default {
                name: 'pinia'
            }
        ],
-        menuConfig: {
+        menuProps: {
            defaultExpandAll: false
        }
    },
--- a/packages/fes-template/src/app.js
+++ b/packages/fes-template/src/app.js
@ -1,5 +1,5 @@
 import { access as accessApi, pinia, createWatermark } from '@fesjs/fes';
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import PageLoading from '@/components/PageLoading.vue';
 import UserCenter from '@/components/UserCenter.vue';
 import { useStore } from '@/store/main';
@ -24,16 +24,21 @@ export const beforeRender = {
    },
 };

-export const layout = (layoutConfig) => ({
+export const layout = (layoutConfig, { initialState }) => ({
    ...layoutConfig,
-    customHeader: <UserCenter />,
-    menus: (defaultMenuData) => {
-        const menusRef = ref(defaultMenuData);
-        // watch(() => initialValue.initialState.userName, () => {
-        //     menusRef.value = [{
-        //         name: 'store'
-        //     }];
-        // });
+    renderCustom: () => <UserCenter />,
+    menus: () => {
+        const menusRef = ref(layoutConfig.menus);
+        watch(
+            () => initialState.userName,
+            () => {
+                menusRef.value = [
+                    {
+                        name: 'store',
+                    },
+                ];
+            },
+        );
        return menusRef;
    },
 });
--- a/packages/fes-template/src/components/UserCenter.vue
+++ b/packages/fes-template/src/components/UserCenter.vue
@ -15,6 +15,6 @@ export default {
 </script>
 <style lang="less">
 .user-center {
-    text-align: right;
+    text-align: center;
 }
 </style>
--- a/packages/fes-template/src/pages/index.vue
+++ b/packages/fes-template/src/pages/index.vue
@ -5,17 +5,14 @@
    </div>
 </template>

-<script>
+<script setup>
+import { defineRouteMeta } from '@fesjs/fes';
 import { FButton } from '@fesjs/fes-design';

-export default {
-    components: {
-        FButton,
-    },
-    setup() {
-        return {};
-    },
-};
+defineRouteMeta({
+    name: 'index',
+    title: '$home',
+});
 </script>

 <style>
@ -23,10 +20,3 @@ export default {
    height: 1000px;
 }
 </style>
-
-<config>
-{
-    "name": "index",
-    "title": "$home"
-}
-</config>
--- a/packages/fes-template/src/pages/pinia.vue
+++ b/packages/fes-template/src/pages/pinia.vue
@ -1,31 +1,32 @@
 <template>
-    <div>{{store.counter}}</div>
+    <div>{{ store.counter }}</div>
    <FButton class="m-2" @click="store.increment">Button</FButton>
 </template>
 <config>
 {
    "name": "pinia",
-    "title": "pinia"
+    "title": "pinia",
+    "layout": {
+        "navigation": null
+    }
 }
 </config>
 <script>
-import { useStore } from '@/store/main';
 import { FButton } from '@fesjs/fes-design';
+import { useStore } from '@/store/main';

 export default {
    components: {
-        FButton
+        FButton,
    },
    setup() {
        const store = useStore();
        console.log(store);
        return {
-            store
+            store,
        };
-    }
+    },
 };
 </script>

-<style>
-
-</style>
+<style></style>
--- a/scripts/build.mjs
+++ b/scripts/build.mjs
@ -69,7 +69,9 @@ async function getPkgConfig(config, pkgName) {
    const pkgConfigPath = path.join(getPkgPath(pkgName), CONFIG_FILE_NAME);
    if (fs.existsSync(pkgConfigPath)) {
        const content = await import(process.platform === 'win32' ? `file://${pkgConfigPath}` : pkgConfigPath);
-        return merge(config, content.default);
+        const result = merge(config, content.default);
+        result.resolveCopy = result.copy.map((item) => path.join(getPkgPath(pkgName), 'src', item));
+        return result;
    }

    return config;
@ -104,13 +106,17 @@ function cleanBeforeCompilerResult(pkgName, log) {

 function transformFile(filePath, outputPath, config, log) {
    if (/\.[jt]sx?$/.test(path.extname(filePath))) {
-        const code = fs.readFileSync(filePath, 'utf-8');
-        const shortFilePath = genShortPath(filePath);
-        const transformedCode = compiler(code, config);
+        try {
+            const code = fs.readFileSync(filePath, 'utf-8');
+            const shortFilePath = genShortPath(filePath);
+            const transformedCode = compiler(code, config);

-        const type = config.target === 'browser' ? ESM_OUTPUT_DIR : NODE_CJS_OUTPUT_DIR;
-        log(`Transform to ${type} for ${config.target === 'browser' ? chalk.yellow(shortFilePath) : chalk.blue(shortFilePath)}`);
-        fse.outputFileSync(outputPath, transformedCode);
+            const type = config.target === 'browser' ? ESM_OUTPUT_DIR : NODE_CJS_OUTPUT_DIR;
+            log(`Transform to ${type} for ${config.target === 'browser' ? chalk.yellow(shortFilePath) : chalk.blue(shortFilePath)}`);
+            fse.outputFileSync(outputPath, transformedCode);
+        } catch (error) {
+            console.error(error);
+        }
    } else {
        fse.copySync(filePath, outputPath);
    }
@ -140,12 +146,11 @@ function watchFile(dir, outputDir, config, log) {
        })
        .on('all', (event, changeFile) => {
            // 修改的可能是一个目录，一个文件，一个需要 copy 的文件 or 目录
-            const baseName = path.basename(changeFile);
            const shortChangeFile = genShortPath(changeFile);
            const outputPath = changeFile.replace(dir, outputDir);
            const stat = fs.lstatSync(changeFile);
            log(`[${event}] ${shortChangeFile}`);
-            if (config.copy.includes(baseName)) {
+            if (config.resolveCopy.some((item) => changeFile.startsWith(item))) {
                fse.copySync(changeFile, outputPath);
            } else if (stat.isFile()) {
                transformFile(changeFile, outputPath, config, log);
				`@ -0,0 +1 @@`
				`export { default as Page } from './views/page.vue';`