diff --git a/docs/reference/plugin/plugins/layout.md b/docs/reference/plugin/plugins/layout.md
index 22575455..88c39e24 100644
--- a/docs/reference/plugin/plugins/layout.md
+++ b/docs/reference/plugin/plugins/layout.md
@@ -1,76 +1,87 @@
# @fesjs/plugin-layout
## 介绍
+
为了进一步降低研发成本，我们将布局利用 `fes.js` 插件的方式内置，只需通过简单的配置即可拥有布局，包括导航以及侧边栏。从而做到用户无需关心布局。
-- 侧边栏菜单数据根据路由中的配置自动生成。
-- 布局，提供 `side`、 `top`、`mixin`、`left-right` 四种布局。
-- 主题，提供 `light`、`dark` 两种主题。
-- 默认实现对路由的 404、403 处理。
-- 搭配 [@fesjs/plugin-access](./access.html) 插件使用，可以完成对路由的权限控制。
-- 搭配 [@fesjs/plugin-locale](./locale.html) 插件使用，提供切换语言的能力。
-- 支持自定义头部或者侧边栏区域。
-- 菜单支持配置icon。
-- 菜单标题支持国际化。
-
-- 可配置页面是否需要 layout。
+
+- 侧边栏菜单数据根据路由中的配置自动生成。
+- 布局，提供 `side`、 `top`、`mixin`、`left-right` 四种布局。
+- 主题，提供 `light`、`dark` 两种主题。
+- 默认实现对路由的 404、403 处理。
+- 搭配 [@fesjs/plugin-access](./access.html) 插件使用，可以完成对路由的权限控制。
+- 搭配 [@fesjs/plugin-locale](./locale.html) 插件使用，提供切换语言的能力。
+- 支持自定义头部或者侧边栏区域。
+- 菜单支持配置 icon。
+- 菜单标题支持国际化。
+- 可配置页面是否需要 layout。
## 启用方式
+
在 `package.json` 中引入依赖：
+
```json
{
"dependencies": {
"@fesjs/fes": "^3.0.0",
"@fesjs/plugin-layout": "^5.0.0"
- },
+ }
}
```
## 布局类型
+
配置参数是 `navigation`, 布局有三种类型 `side`、`mixin` 、`top` 和 `left-right`， 默认是 `side`。
### side
+
![side]()
### top
+
![top]()
### mixin
+
![mixin]()
### left-right
+
![left-right]()
### 页面个性化
可以为页面单独设置布局类型：
-```
-
-{
- "layout": {
- "navigation": 'top'
- }
-}
-
-```
-当设置为 `null` 时，页面不使用布局。
-
-## 页面缓存
-
-支持配置页面缓存，通过[定义路由元信息](../../../guide/route.html#扩展路由元信息)开启缓存：
```js
import { defineRouteMete } from '@fesjs/fes';
defineRouteMeta({
- "keep-alive": true
-})
+ layout: {
+ navigation: null,
+ },
+});
+```
+
+当设置为 `null` 时，页面不使用布局。
+
+## 页面缓存
+
+支持配置页面缓存，通过[定义路由元信息](../../../guide/route.html#扩展路由元信息)开启缓存：
+
+```js
+import { defineRouteMete } from '@fesjs/fes';
+
+defineRouteMeta({
+ 'keep-alive': true,
+});
```
### 处理嵌套路由
+
Fes.js 里约定目录下有 `layout.vue` 时会生成嵌套路由，以 `layout.vue` 为该目录的公共父组件，layout.vue 中必须实现 ``。如果嵌套路由下的页面设置了 `keep-alive`，则需要用 `` 替换 ``，``实现了页面缓存。
```vue
@@ -78,12 +89,12 @@ Fes.js 里约定目录下有 `layout.vue` 时会生成嵌套路由，以 `layout
```
@@ -92,6 +103,7 @@ export default {
#### 编译时配置方式
在 `.fes.js` 中配置：
+
```js
export default {
layout: {
@@ -117,18 +129,22 @@ export default {
#### 运行时配置方式
在 `app.js` 中配置：
+
```js
import UserCenter from '@/components/UserCenter';
export const layout = {
- renderHeader: ()=> ,
- menus: [{
- name: 'index'
- }]
+ renderHeader: () => ,
+ menus: [
+ {
+ name: 'index',
+ },
+ ],
};
-
```
-在`fes.js`中，运行时配置有定义对象和函数两种方式，当使用函数配置`layout`时，`layoutConfig`是编译时配置结果，`initialState`是 `beforeRender.action`执行后创建的应用初始状态数据。
+
+在`fes.js`中，运行时配置有定义对象和函数两种方式，当使用函数配置`layout`时，`layoutConfig`是编译时配置结果，`initialState`是 `beforeRender.action`执行后创建的应用初始状态数据。
。
+
```js
export const layout = (layoutConfig, { initialState }) => ({
renderHeader: () => ,
@@ -153,77 +169,74 @@ export const layout = (layoutConfig, { initialState }) => ({
实际上运行配置能做的事情更多，推荐用运行时配置方式。
-
-
### footer
-- **类型**：`String`
-
-- **默认值**：`null`
-- **详情**：页面底部的文字。
+- **类型**：`String`
+- **默认值**：`null`
+
+- **详情**：页面底部的文字。
### theme
-- **类型**：`String`
-
-- **默认值**：`dark`
-- **详情**：主题，可选有 `dark`、`light`
+- **类型**：`String`
+- **默认值**：`dark`
+
+- **详情**：主题，可选有 `dark`、`light`
### navigation
-- **类型**：`String`
-
-- **默认值**：`side`
-- **详情**：页面布局类型，可选有 `side`、 `top`、 `mixin`
+- **类型**：`String`
+- **默认值**：`side`
+
+- **详情**：页面布局类型，可选有 `side`、 `top`、 `mixin`
### isFixedHeader
-- **类型**：`Boolean`
-
-- **默认值**：`false`
-- **详情**：是否固定头部，不跟随页面滚动。
+- **类型**：`Boolean`
+- **默认值**：`false`
+
+- **详情**：是否固定头部，不跟随页面滚动。
### isFixedSidebar
-- **类型**：`Boolean`
-
-- **默认值**：`true`
-- **详情**：是否固定sidebar，不跟随页面滚动。
+- **类型**：`Boolean`
+- **默认值**：`true`
+
+- **详情**：是否固定 sidebar，不跟随页面滚动。
### title
-- **类型**：`String`
-
-- **默认值**：默认为 [编译时配置title](../../../reference/config/#title)
-- **详情**：产品名。
+- **类型**：`String`
+- **默认值**：默认为 [编译时配置 title](../../../reference/config/#title)
+
+- **详情**：产品名。
### logo
-- **类型**：`String`
-
-- **默认值**：默认提供 `fes.js` 的 Logo
-- **详情**：Logo的链接
+- **类型**：`String`
+- **默认值**：默认提供 `fes.js` 的 Logo
+- **详情**：Logo 的链接
### multiTabs
-- **类型**：`boolean`
-
-- **默认值**：`false`
-- **详情**：是否开启多页。
+- **类型**：`boolean`
+- **默认值**：`false`
+
+- **详情**：是否开启多页。
### menus
-- **类型**：`[] | ()=> Ref<[]>`
-
-- **默认值**：`[]`
-- **详情**：菜单配置，子项具体配置如下：
-
- - **name**：菜单的名称。通过匹配 `name` 和路由元信息 [meta](../../../guide/route.md#扩展路由元信息) 中的 `name`，把菜单和路由关联起来，然后使用路由元信息补充菜单配置，比如 `title`、`path` 等。
-
- - **path**：菜单的路径，可配置第三方地址。
+- **类型**：`[] | ()=> Ref<[]>`
+- **默认值**：`[]`
- - **match**：额外匹配的路径，当前路由命中匹配规则时，此菜单高亮。 (v4.0.0+）
+- **详情**：菜单配置，子项具体配置如下：
+
+ - **name**：菜单的名称。通过匹配 `name` 和路由元信息 [meta](../../../guide/route.md#扩展路由元信息) 中的 `name`，把菜单和路由关联起来， 然后使用路由元信息补充菜单配置，比如 `title`、`path` 等。
+
+ - **path**：菜单的路径，可配置第三方地址。
+
+ - **match**：额外匹配的路径，当前路由命中匹配规则时，此菜单高亮。 (v4.0.0+）
```
{
@@ -231,72 +244,68 @@ export const layout = (layoutConfig, { initialState }) => ({
match: ['/product/*', '/product/create']
}
```
-
- - **title**：菜单的标题，如果同时使用[国际化插件](./locale.md)，而且`title`的值以`$`开头，则使用`$`后面的内容去匹配语言设置。
- - **icon**: 菜单的图标，只有一级标题展示图标。
+- **title**：菜单的标题，如果同时使用[国际化插件](./locale.md)，而且`title`的值以`$`开头，则使用`$`后面的内容去匹配语言设置。
- - 图标使用[fes-design icon](https://fes-design-4gvn317r3b6bfe17-1254145788.ap-shanghai.app.tcloudbase.com/zh/components/icon.html)，编译时配置使用组件名称，我们会自动引入组件。
+- **icon**: 菜单的图标，只有一级标题展示图标。
- - 图标使用本地或者远程svg图片。
+ - 图标使用[fes-design icon](https://fes-design-4gvn317r3b6bfe17-1254145788.ap-shanghai.app.tcloudbase.com/zh/components/icon.html)，编译时配置使用组件名称，我们会自动引入组件。
+
+ - 图标使用本地或者远程 svg 图片。
```js
{
- icon: "/wine-outline.svg"
+ icon: '/wine-outline.svg';
}
```
-
- - **children**：子菜单配置。
+
+- **children**：子菜单配置。
:::tip
函数类型仅在运行时可用，可以实现动态变更菜单。
:::
-
-
### menuProps
-- **类型**：`Object`
-
-- **默认值**：`{}`
-- **详情**：菜单的配置：
-
- - **defaultExpandAll**：是否默认展开全部菜单。
-
- - **expandedKeys**：配置默认展开的菜单，需要传子项是菜单路径的数组。
+- **类型**：`Object`
+- **默认值**：`{}`
- - **accordion**：是否只保持一个子菜单的展开。
-
+- **详情**：菜单的配置：
+
+ - **defaultExpandAll**：是否默认展开全部菜单。
+
+ - **expandedKeys**：配置默认展开的菜单，需要传子项是菜单路径的数组。
+
+ - **accordion**：是否只保持一个子菜单的展开。
### sideWidth
-- **类型**：`Number`
-
-- **默认值**：`200`
-- **详情**：sidebar的宽度
-
+- **类型**：`Number`
+- **默认值**：`200`
+
+- **详情**：sidebar 的宽度
### renderCustom
-- **类型**： `()=> VNodes`
-
-- **默认值**：`null`
-- **详情**： 自定义区域内容，仅运行时。
+- **类型**： `()=> VNodes`
+- **默认值**：`null`
+- **详情**： 自定义区域内容，仅运行时。
### unAccessHandler
-- **类型**：`({ to, from, next})=> void`
-
-- **默认值**：`null`
-- **详情**：仅运行时，当进入某个路由时，如果路由对应的页面不属于可见资源列表，则会暂停进入，调用 `unAccessHandler` 函数。
-- **参数**
- - router：createRouter 创建的路由实例
- - to： 准备进入的路由
- - from：离开的路由
- - next： [next函数](https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next)
+- **类型**：`({ to, from, next})=> void`
+- **默认值**：`null`
+
+- **详情**：仅运行时，当进入某个路由时，如果路由对应的页面不属于可见资源列表，则会暂停进入，调用 `unAccessHandler` 函数。
+- **参数**
+ - router：createRouter 创建的路由实例
+ - to： 准备进入的路由
+ - from：离开的路由
+ - next： [next 函数](https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next)
比如：
+
```js
export const access = {
unAccessHandler({ to, next }) {
@@ -309,24 +318,24 @@ export const access = {
accessApi.setAccess(accesssIds.concat(['/403']));
}
next('/403');
- }
+ },
};
-
```
### noFoundHandler
-- **类型**：`({ to, from, next})=> void`
-
-- **默认值**：`null`
-- **详情**：仅运行时，当进入某个路由时，如果路由对应的页面不存在，则会调用 `noFoundHandler` 函数。
-- **参数**
- - router：createRouter 创建的路由实例
- - to： 准备进入的路由
- - from：离开的路由
- - next： [next函数](https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next)
+- **类型**：`({ to, from, next})=> void`
+- **默认值**：`null`
+
+- **详情**：仅运行时，当进入某个路由时，如果路由对应的页面不存在，则会调用 `noFoundHandler` 函数。
+- **参数**
+ - router：createRouter 创建的路由实例
+ - to： 准备进入的路由
+ - from：离开的路由
+ - next： [next 函数](https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next)
比如：
+
```js
export const access = {
noFoundHandler({ next }) {
@@ -335,12 +344,10 @@ export const access = {
accessApi.setAccess(accesssIds.concat(['/404']));
}
next('/404');
- }
+ },
};
-
```
-
## 4.x 升级到 5.x
1. 个性化 layout 配置改为使用传入 navigation
@@ -348,4 +355,4 @@ export const access = {
3. fixedHeader 改为 isFixedHeader
4. menusConfig 改为 menuProps
5. fixedSideBar 改为 isFixedSidebar
-6. 去掉运行时 logo、header、sidebar 三个区域显示配置，请改为使用 navigation: left-right
\ No newline at end of file
+6. 去掉运行时 logo、header、sidebar 三个区域显示配置，请改为使用 navigation: left-right
diff --git a/packages/fes-builder-vite/package.json b/packages/fes-builder-vite/package.json
index cb9dbf37..97a180c0 100644
--- a/packages/fes-builder-vite/package.json
+++ b/packages/fes-builder-vite/package.json
@@ -27,6 +27,7 @@
"dependencies": {
"@babel/core": "^7.17.9",
"@fesjs/utils": "^3.0.0-beta.0",
+ "@vitejs/plugin-legacy": "^1.8.2",
"@vitejs/plugin-vue": "^2.2.4",
"@vitejs/plugin-vue-jsx": "^1.3.8",
"autoprefixer": "^10.4.4",
@@ -35,9 +36,8 @@
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-safe-parser": "^6.0.0",
"rollup-plugin-visualizer": "^5.6.0",
- "vite": "^2.9.1",
- "vite-plugin-html": "^3.2.0",
- "@vitejs/plugin-legacy": "^1.8.2"
+ "vite": "^2.9.14",
+ "vite-plugin-html": "^3.2.0"
},
"peerDependencies": {
"@fesjs/fes": "^3.0.0-beta.0",
diff --git a/packages/fes-plugin-layout/src/runtime/views/403.vue b/packages/fes-plugin-layout/src/runtime/views/403.vue
index 04501ab3..0da87747 100644
--- a/packages/fes-plugin-layout/src/runtime/views/403.vue
+++ b/packages/fes-plugin-layout/src/runtime/views/403.vue
@@ -208,11 +208,6 @@
上一页
-
-{
- "layout": false
-}
-
diff --git a/packages/fes/types.d.ts b/packages/fes/types.d.ts
index 214915a5..1a657bb1 100644
--- a/packages/fes/types.d.ts
+++ b/packages/fes/types.d.ts
@@ -6,7 +6,6 @@ export * from '@fesjs/runtime';
export interface RouteMeta {
name?: string;
title?: string;
- layout?: boolean | { sidebar?: boolean; header?: boolean; logo?: boolean };
}
export interface PluginRuntimeConfig {}
diff --git a/yarn.lock b/yarn.lock
index 30d76373..85cc93f8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7973,6 +7973,11 @@ nanoid@^3.1.23, nanoid@^3.1.32, nanoid@^3.3.1:
resolved "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.2.tgz#c89622fafb4381cd221421c69ec58547a1eec557"
integrity sha512-CuHBogktKwpm5g2sRgv83jEy2ijFzBwMoYA60orPDR7ynsLijJDqgsi4RDGj3OJpy3Ieb+LYwiRmIOGyytgITA==
+nanoid@^3.3.4:
+ version "3.3.4"
+ resolved "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
+ integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
+
natural-compare@^1.4.0:
version "1.4.0"
resolved "https://registry.npmmirror.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
@@ -8854,6 +8859,15 @@ postcss@^8.0.0, postcss@^8.1.10, postcss@^8.2.15, postcss@^8.3.5, postcss@^8.4.1
picocolors "^1.0.0"
source-map-js "^1.0.2"
+postcss@^8.4.13:
+ version "8.4.14"
+ resolved "https://registry.npmmirror.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf"
+ integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==
+ dependencies:
+ nanoid "^3.3.4"
+ picocolors "^1.0.0"
+ source-map-js "^1.0.2"
+
preact@^10.0.0, preact@^10.7.0:
version "10.7.1"
resolved "https://registry.npmmirror.com/preact/-/preact-10.7.1.tgz#bdd2b2dce91a5842c3b9b34dfe050e5401068c9e"
@@ -10671,13 +10685,13 @@ vite-plugin-windicss@^1.8.3:
kolorist "^1.5.1"
windicss "^3.5.1"
-vite@^2.9.1:
- version "2.9.1"
- resolved "https://registry.npmmirror.com/vite/-/vite-2.9.1.tgz#84bce95fae210a7beb566a0af06246748066b48f"
- integrity sha512-vSlsSdOYGcYEJfkQ/NeLXgnRv5zZfpAsdztkIrs7AZHV8RCMZQkwjo4DS5BnrYTqoWqLoUe1Cah4aVO4oNNqCQ==
+vite@^2.9.14:
+ version "2.9.14"
+ resolved "https://registry.npmmirror.com/vite/-/vite-2.9.14.tgz#c438324c6594afd1050df3777da981dee988bb1b"
+ integrity sha512-P/UCjSpSMcE54r4mPak55hWAZPlyfS369svib/gpmz8/01L822lMPOJ/RYW6tLCe1RPvMvOsJ17erf55bKp4Hw==
dependencies:
esbuild "^0.14.27"
- postcss "^8.4.12"
+ postcss "^8.4.13"
resolve "^1.22.0"
rollup "^2.59.0"
optionalDependencies: