fix: 修复layout菜单折叠不更新状态问题 (#184)

* fix: 修复layout菜单折叠不更新状态问题

* fix: 修复accessApi.setAccess['/403']执行多次问题

* feat: 手动切换当前路由,菜单也会自动展开

* fix: 修复menu问题

packages/fes-plugin-access/src/runtime/core.tpl

@@ -3,8 +3,6 @@ import createDirective from "./createDirective";
 import createComponent from "./createComponent";
 import {isPlainObject} from "{{{ lodashPath }}}";
 
-const accessKey = Symbol("plugin-access");
-
 function isPromise(obj) {
     return (
         !!obj &&
@@ -132,14 +130,6 @@ const hasAccess = async (path) => {
 };
 
 export const install = (app) => {
-    const allowPageIds = computed(getAllowAccessIds);
-    const useAccess = (path) => {
-        const result = computed(() => {
-            return match(unref(path), allowPageIds.value);
-        });
-        return result;
-    };
-    app.provide(accessKey, useAccess);
     app.directive("access", createDirective(useAccess));
     app.component("Access", createComponent(useAccess));
 };
@@ -153,6 +143,14 @@ export const access = {
     getAccess: getAllowAccessIds,
 };
 
+export const hasAccessSync = (path) => {
+    return match(unref(path), getAllowAccessIds());
+}
+
 export const useAccess = (path) => {
-    return inject(accessKey)(path);
+    const allowPageIds = computed(getAllowAccessIds);
+    const result = computed(() => {
+        return match(unref(path), allowPageIds.value);
+    });
+    return result;
 };

packages/fes-plugin-layout/src/runtime/helpers/pluginAccess.js

@@ -1,32 +1,29 @@
-import { computed, ref } from 'vue';
 // eslint-disable-next-line
-import { useAccess } from '../../plugin-access/core';
+import { hasAccessSync } from '../../plugin-access/core';
 
-if (!useAccess) {
+if (!hasAccessSync) {
     throw new Error('[plugin-layout]: pLugin-layout depends on plugin-access，please install plugin-access first！');
 }
 
 export const hasAccessByMenuItem = (item) => {
     const hasChild = item.children && item.children.length;
     if (item.path && !hasChild) {
-        return useAccess(item.path);
+        return hasAccessSync(item.path);
     }
     if (hasChild) {
-        return computed(() =>
+        return item.children.some((child) => {
-            item.children.some((child) => {
+            const rst = hasAccessByMenuItem(child);
-                const rst = hasAccessByMenuItem(child);
+            return rst;
-                return rst && rst.value;
+        });
-            }),
-        );
     }
-    return ref(true);
+    return true;
 };
 
 export const transform = (menus) =>
     menus
         .map((menu) => {
             const hasAccess = hasAccessByMenuItem(menu);
-            if (!hasAccess.value) {
+            if (!hasAccess) {
                 return false;
             }
             if (menu.children) {

packages/fes-plugin-layout/src/runtime/helpers/pluginLocale.js

@@ -6,7 +6,7 @@ export const transTitle = (name) => {
     }
     const sharedLocale = plugin.getShared('locale');
     if (sharedLocale) {
-        const { t } = sharedLocale.useI18n();
+        const { t } = sharedLocale.locale;
         return t(name.slice(1));
     }
     return name;

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

@@ -7,10 +7,11 @@ if (!accessApi) {
     throw new Error('[plugin-layout]: plugin-layout depends on plugin-access，please install plugin-access first！');
 }
 
+const accessIds = accessApi.getAccess();
+accessApi.setAccess(accessIds.concat(['/403', '/404']));
+
 export const access = (memo) => {
     const runtimeConfig = getConfig();
-    const accessIds = accessApi.getAccess();
-    accessApi.setAccess(accessIds.concat(['/403', '/404']));
     return {
         unAccessHandler({ router, to, from, next }) {
             if (runtimeConfig.unAccessHandler && typeof runtimeConfig.unAccessHandler === 'function') {

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

@@ -1,7 +1,7 @@
 <template>
     <f-menu
+        v-model:expandedKeys="expandedKeysRef"
         :modelValue="activePath"
-        :expandedKeys="defaultExpandMenu"
         :inverted="inverted"
         :mode="mode"
         :options="transformedMenus"
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import { computed, h } from 'vue';
+import { computed, h, ref, watch } from 'vue';
 import { FMenu } from '@fesjs/fes-design';
 import { useRoute, useRouter } from '@@/core/coreExports';
 import { transform as transformByAccess } from '../helpers/pluginAccess';
@@ -20,12 +20,12 @@ import { transform as transformByLocale } from '../helpers/pluginLocale';
 import { flatNodes } from '../helpers/utils';
 import MenuIcon from './MenuIcon.vue';
 
-const transform = (menus) =>
+const transform = (menus, level = 1) =>
-    menus.map((menu) => {
+    menus.map((menu, index) => {
         const copy = {
             ...menu,
             label: menu.title,
-            value: menu.path || Date.now(),
+            value: menu.path || `${level}_${index}`,
         };
         if (menu.icon) {
             copy.icon = () =>
@@ -34,7 +34,7 @@ const transform = (menus) =>
                 });
         }
         if (menu.children) {
-            copy.children = transform(menu.children);
+            copy.children = transform(menu.children, level + 1);
         }
         return copy;
     });
@@ -94,22 +94,34 @@ export default {
             }
             return matchMenus[0].path;
         });
-        const defaultExpandMenu = computed(() => {
+
-            let index = menuArray.value.findIndex((item) => item.value === activePath.value);
+        const expandedKeysRef = ref(props.expandedKeys);
-            if (index === -1) {
+
-                return props.expandedKeys;
+        watch(
-            }
+            [menuArray, activePath],
-            const activeMenu = menuArray.value[index];
+            () => {
-            const arr = [activeMenu];
+                let index = menuArray.value.findIndex((item) => item.value === activePath.value);
-            while (index > 0) {
+                if (index === -1) {
-                index = index - 1;
+                    return;
-                const lastMenu = menuArray.value[index];
-                if (lastMenu.children && lastMenu.children.indexOf(arr[arr.length - 1]) !== -1) {
-                    arr.push(lastMenu);
                 }
-            }
+                const activeMenu = menuArray.value[index];
-            return props.expandedKeys.concat(arr.map((item) => item.value));
+                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);
+                    }
+                }
+                expandedKeysRef.value = expandedKeysRef.value.concat(
+                    arr.filter((item) => !expandedKeysRef.value.includes(item.value)).map((item) => item.value),
+                );
+            },
+            {
+                immediate: true,
+            },
+        );
+
         const onMenuClick = (e) => {
             const path = e.value;
             if (/^https?:\/\//.test(path)) {
@@ -120,9 +132,10 @@ export default {
                 console.warn('[plugin-layout]: 菜单的path只能使以http(s)开头的网址或者路由地址');
             }
         };
+
         return {
             activePath,
-            defaultExpandMenu,
+            expandedKeysRef,
             transformedMenus,
             onMenuClick,
         };

packages/fes-plugin-locale/src/runtime/core.tpl

@@ -85,19 +85,19 @@ const getAllLocales = () => {
 };
 
 const install = (app) => {
-    const runtimeConfig = plugin.applyPlugins({
-        key: "locale",
-        type: ApplyPluginsType.modify,
-        initialValue: {},
-    });
     app.use(i18n);
 };
 
+const t = (key) => {
+    return i18n.global.t(key)
+}
+
 const locale = {
     setLocale,
     addLocale,
     getAllLocales,
     messages,
+    t
 };
 
 export { useI18n, locale, install };

packages/fes-plugin-locale/src/runtime/runtime.js

@@ -1,10 +1,10 @@
 import { plugin } from '@@/core/coreExports';
 // eslint-disable-next-line import/extensions
-import { useI18n, install } from './core';
+import { useI18n, locale, install } from './core';
 import SelectLang from './views/SelectLang.vue';
 
 // 共享出去
-plugin.share('locale', { useI18n, SelectLang });
+plugin.share('locale', { useI18n, locale, SelectLang });
 
 export function onAppCreated({ app }) {
     install(app);