fix: layout插件菜单会自动展开当前路由 & 修复之前不合理用法 (#171)

packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue

@@ -168,9 +168,9 @@
 import { ref, computed, onMounted } from 'vue';
 import { useRoute } from '@@/core/coreExports';
 import { FLayout, FAside, FMain, FFooter, FHeader } from '@fesjs/fes-design';
+import defaultLogo from '../assets/logo.png';
 import Menu from './Menu.vue';
 import MultiTabProvider from './MultiTabProvider.vue';
-import defaultLogo from '../assets/logo.png';
 
 export default {
     components: {

packages/fes-plugin-layout/src/runtime/views/Menu.vue

@@ -1,15 +1,43 @@
 <template>
-    <f-menu :modelValue="activePath" :inverted="inverted" :mode="mode" :options="fixedMenus" @select="onMenuClick"></f-menu>
+    <f-menu
+        :modelValue="activePath"
+        :expandedKeys="defaultExpandMenu"
+        :inverted="inverted"
+        :mode="mode"
+        :options="transformedMenus"
+        :defaultExpandAll="defaultExpandAll"
+        :accordion="accordion"
+        @select="onMenuClick"
+    ></f-menu>
 </template>
 
 <script>
 import { computed, h } from 'vue';
 import { FMenu } from '@fesjs/fes-design';
 import { useRoute, useRouter } from '@@/core/coreExports';
-import MenuIcon from './MenuIcon.vue';
 import { transform as transformByAccess } from '../helpers/pluginAccess';
 import { transform as transformByLocale } from '../helpers/pluginLocale';
 import { flatNodes } from '../helpers/utils';
+import MenuIcon from './MenuIcon.vue';
+
+const transform = (menus) =>
+    menus.map((menu) => {
+        const copy = {
+            ...menu,
+            label: menu.title,
+            value: menu.path || Date.now(),
+        };
+        if (menu.icon) {
+            copy.icon = () =>
+                h(MenuIcon, {
+                    icon: menu.icon,
+                });
+        }
+        if (menu.children) {
+            copy.children = transform(menu.children);
+        }
+        return copy;
+    });
 
 export default {
     components: {
@@ -30,32 +58,28 @@ export default {
             type: Boolean,
             default: false,
         },
+        expandedKeys: {
+            type: Array,
+            default() {
+                return [];
+            },
+        },
+        defaultExpandAll: {
+            type: Boolean,
+            default: false,
+        },
+        accordion: {
+            type: Boolean,
+            default: false,
+        },
     },
     setup(props) {
         const route = useRoute();
         const router = useRouter();
-        const transform = (menus) =>
+        const transformedMenus = computed(() => transformByLocale(transformByAccess(transform(props.menus))));
-            menus.map((menu) => {
+        const menuArray = computed(() => flatNodes(transformedMenus.value));
-                const copy = {
-                    ...menu,
-                    label: menu.title,
-                    value: menu.path,
-                };
-                if (menu.icon) {
-                    copy.icon = () =>
-                        h(MenuIcon, {
-                            icon: menu.icon,
-                        });
-                }
-                if (menu.children) {
-                    copy.children = transform(menu.children);
-                }
-                return copy;
-            });
-        const fixedMenus = computed(() => transformByLocale(transformByAccess(transform(props.menus))));
-        const menus = computed(() => flatNodes(fixedMenus.value));
         const activePath = computed(() => {
-            const matchMenus = menus.value.filter((menu) => {
+            const matchMenus = menuArray.value.filter((menu) => {
                 const match = menu.match;
                 if (!match || !Array.isArray(match)) {
                     return false;
@@ -70,6 +94,19 @@ export default {
             }
             return matchMenus[0].path;
         });
+        const defaultExpandMenu = computed(() => {
+            let index = menuArray.value.findIndex((item) => item.value === activePath.value);
+            const activeMenu = menuArray.value[index];
+            const arr = [activeMenu];
+            while (index > 0) {
+                index = index - 1;
+                const lastMenu = menuArray.value[index];
+                if (lastMenu.children && lastMenu.children.indexOf(arr[arr.length - 1]) !== -1) {
+                    arr.push(lastMenu);
+                }
+            }
+            return props.expandedKeys.concat(arr.map((item) => item.value));
+        });
         const onMenuClick = (e) => {
             const path = e.value;
             if (/^https?:\/\//.test(path)) {
@@ -82,7 +119,8 @@ export default {
         };
         return {
             activePath,
-            fixedMenus,
+            defaultExpandMenu,
+            transformedMenus,
             onMenuClick,
         };
     },