From c998c39559de95684f7e1a62786ed054ec9c3750 Mon Sep 17 00:00:00 2001
From: wanchun <445436867@qq.com>
Date: Wed, 5 Jan 2022 16:38:20 +0800
Subject: [PATCH] =?UTF-8?q?feat(plugin-layout):=20=E8=8F=9C=E5=8D=95?=
=?UTF-8?q?=E6=94=AF=E6=8C=81=E9=85=8D=E7=BD=AE=E9=A2=9D=E5=A4=96=E7=9A=84?=
=?UTF-8?q?=E5=8C=B9=E9=85=8D=E8=A7=84=E5=88=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
docs/reference/plugin/plugins/layout.md | 17 ++++++++++----
docs/zh/reference/plugin/plugins/layout.md | 17 ++++++++++----
.../src/runtime/helpers/utils.js | 9 +++++++
.../src/runtime/views/BaseLayout.vue | 14 +++++------
.../src/runtime/views/Menu.vue | 22 ++++++++++++++++--
.../src/plugins/commands/dev/fes.png | Bin 33821 -> 51741 bytes
6 files changed, 62 insertions(+), 17 deletions(-)
create mode 100644 packages/fes-plugin-layout/src/runtime/helpers/utils.js
diff --git a/docs/reference/plugin/plugins/layout.md b/docs/reference/plugin/plugins/layout.md
index be8a079d..146c5fe2 100644
--- a/docs/reference/plugin/plugins/layout.md
+++ b/docs/reference/plugin/plugins/layout.md
@@ -56,21 +56,21 @@ export default {
}
```
-如果只是不想展示`side`，则：
+如果只是不想展示`sidebar`，则：
```
{
"layout": {
- "side": false
+ "sidebar": false
}
}
```
`layout`的可选配置有：
-- **side**： 左侧区域
+- **sidebar**： 左侧区域，从v4.0.0开始，之前名称叫`side`
-- **top**： 头部区域
+- **header**： 头部区域,，从v4.0.0开始，之前名称叫`top`
- **logo**：logo和标题区域。
@@ -182,6 +182,15 @@ export default {
- **name**：菜单的名称。通过匹配 `name` 和路由元信息 [meta](../../../guide/route.md#扩展路由元信息) 中的 `name`，把菜单和路由关联起来，然后使用路由元信息补充菜单配置，比如 `title`、`path` 等。
- **path**：菜单的路径，可配置第三方地址。
+
+ - **match**：额外匹配的路径，当前路由命中匹配规则时，此菜单高亮。 (v4.0.0+）
+
+```
+{
+ path: '/product',
+ match: ['/product/*', '/product/create']
+}
+```
- **title**：菜单的标题，如果同时使用[国际化插件](./locale.md)，而且`title`的值以`$`开头，则使用`$`后面的内容去匹配语言设置。
diff --git a/docs/zh/reference/plugin/plugins/layout.md b/docs/zh/reference/plugin/plugins/layout.md
index be8a079d..146c5fe2 100644
--- a/docs/zh/reference/plugin/plugins/layout.md
+++ b/docs/zh/reference/plugin/plugins/layout.md
@@ -56,21 +56,21 @@ export default {
}
```
-如果只是不想展示`side`，则：
+如果只是不想展示`sidebar`，则：
```
{
"layout": {
- "side": false
+ "sidebar": false
}
}
```
`layout`的可选配置有：
-- **side**： 左侧区域
+- **sidebar**： 左侧区域，从v4.0.0开始，之前名称叫`side`
-- **top**： 头部区域
+- **header**： 头部区域,，从v4.0.0开始，之前名称叫`top`
- **logo**：logo和标题区域。
@@ -182,6 +182,15 @@ export default {
- **name**：菜单的名称。通过匹配 `name` 和路由元信息 [meta](../../../guide/route.md#扩展路由元信息) 中的 `name`，把菜单和路由关联起来，然后使用路由元信息补充菜单配置，比如 `title`、`path` 等。
- **path**：菜单的路径，可配置第三方地址。
+
+ - **match**：额外匹配的路径，当前路由命中匹配规则时，此菜单高亮。 (v4.0.0+）
+
+```
+{
+ path: '/product',
+ match: ['/product/*', '/product/create']
+}
+```
- **title**：菜单的标题，如果同时使用[国际化插件](./locale.md)，而且`title`的值以`$`开头，则使用`$`后面的内容去匹配语言设置。
diff --git a/packages/fes-plugin-layout/src/runtime/helpers/utils.js b/packages/fes-plugin-layout/src/runtime/helpers/utils.js
new file mode 100644
index 00000000..e8b16aa7
--- /dev/null
+++ b/packages/fes-plugin-layout/src/runtime/helpers/utils.js
@@ -0,0 +1,9 @@
+export const flatNodes = (nodes = []) => nodes.reduce((res, node) => {
+ res.push(node);
+ if (node.children) {
+ res = res.concat(
+ flatNodes(node.children)
+ );
+ }
+ return res;
+}, []);
diff --git a/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue b/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue
index 21f3bc9f..53a357db 100644
--- a/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue
+++ b/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue
@@ -2,7 +2,7 @@