refactor: 重构plugin-layout，统一配置

* docs: 更新文档

* break: plugin-layout优化api

* break: 去掉switch配置,改为使用navigation

* feat: 重构layout

* docs: 升级文档

* feat: 无logo和title时隐藏dom

* fix: 修复一些问题

* fix: 配置提示

* fix: build watch copy 路径识别问题

* docs: 文档

Co-authored-by: winixt <haizekuo@gmail.com>

docs/guide/route.md

@@ -164,8 +164,20 @@ pages
 ```
 这样，如果访问 `/foo`，`/` 不能匹配，会 fallback 到 `*` 路由，通过 `src/pages/*.vue` 进行渲染。
 
-### 扩展路由元信息
+### 智能路由
+可以看到，编译后路由都会有 `count` 属性，这是我们根据精准匹配优先算法原则设计出路由排名算法，对匹配到的路由打分：
+- 路由的路径每个子项得到4分
+- 子项为静态细分(`/list`)再加3分
+- 子项为动态细分（`/:orderId`）再加2分
+- 根段(`/`)再1分
+- 通配符(`*`)匹配到的减去1分
+
+当我们跳转路由时，如果 URL 匹配到多个路由，则选择分数最高的路由。
+
+## 扩展路由元信息
+
 我们在定义路由时可以配置`meta`字段，用来记录一些跟路由相关的信息：
+
 ```js
 const router = new VueRouter({
   routes: [
@@ -185,10 +197,18 @@ const router = new VueRouter({
 })
 ```
 
-接下来我们来配置 `meta`：
 
-<CodeGroup>
-  <CodeGroupItem title="vue" active>
+我们使用`defineRouteMeta` 配置 `meta`：
+
+```js
+import { defineRouteMete } from '@fesjs/fes';
+defineRouteMeta({
+    name: "store",
+    title: "vuex测试"
+})
+```
+
+当然在单文件组件中，还可以通过`<config></config>`配置 `meta`：
 
 ```vue
 <config>
@@ -199,33 +219,13 @@ const router = new VueRouter({
 </config>
 ```
 
-  </CodeGroupItem>
-  <CodeGroupItem title="jsx">
-
-```jsx
-import { defineRouteMeta, useRoute } from '@fesjs/fes';
-defineRouteMeta({
-    name: "store",
-    title: "vuex测试"
-})
-```
-
-  </CodeGroupItem>
-    <CodeGroupItem title="tsx">
-
-```tsx
-import { defineRouteMeta, useRoute } from '@fesjs/fes';
-defineRouteMeta({
-    name: "store",
-    title: "vuex测试"
-})
-```
-
-  </CodeGroupItem>
-</CodeGroup>
+::: tip
+推荐使用`defineRouteMete`，有更好的提示。
+:::
 
 
-则编译后的路由配置为：
+
+路由元信息在编译后会附加到路由配置中：
 ```js{5-8}
 [
     { 
@@ -239,16 +239,6 @@ defineRouteMeta({
 ]
 ```
 
-### 智能路由
-可以看到，编译后路由都会有 `count` 属性，这是我们根据精准匹配优先算法原则设计出路由排名算法，对匹配到的路由打分：
-- 路由的路径每个子项得到4分
-- 子项为静态细分(`/list`)再加3分
-- 子项为动态细分（`/:orderId`）再加2分
-- 根段(`/`)再1分
-- 通配符(`*`)匹配到的减去1分
-
-当我们跳转路由时，如果 URL 匹配到多个路由，则选择分数最高的路由。
-
 ## 路由跳转
 想学习更多，可以查看 [Vue Router 官方文档](https://next.router.vuejs.org/zh/guide/essentials/navigation.html#%E6%9B%BF%E6%8D%A2%E5%BD%93%E5%89%8D%E4%BD%8D%E7%BD%AE)。
 

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 />
-};
 
-```
+### sideWidth
+- **类型**：`Number`
   
-### menus
-- **类型**：`(defaultMenus: [] )=> Ref | []`
+- **默认值**：`200`
 
-- **详情**：运行时修改菜单，入参是默认菜单配置（.fes.js中的menu配置），需要返回一个`Ref`或者数组。
-
-```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，需要传组件本身，而不是组件的名称。
-:::
+- **详情**：sidebar的宽度
   
 
-### header
-- **类型**：`String`
-  
-- **默认值**：`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
+### 4.x 升级到 5.x
 
-- **详情**：Logo的链接。
-
-
-### 其他运行时配置 (> 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

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) => [
         {

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);
                 }
             }

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;
+};

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;
-};

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);

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;
+    });

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;
+    }, []);

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

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

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;

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,
+    };
+};

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>

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>

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;

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,
         };
     },

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;

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>

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;
     };

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;

packages/fes-template-vite/src/app.jsx

@@ -23,5 +23,5 @@ export const beforeRender = {
 };
 
 export const layout = {
-    customHeader: <UserCenter />,
+    renderCustom: () => <UserCenter />,
 };

packages/fes-template/.fes.js

@@ -72,7 +72,7 @@ export default {
                 name: 'pinia'
             }
         ],
-        menuConfig: {
+        menuProps: {
             defaultExpandAll: false
         }
     },

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;
     },
 });

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>

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>

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);