From a5d422ea04494f8cd8f21082a6d8abfde6026768 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=AC=E6=B5=B7?= <445436867@qq.com>
Date: Tue, 11 Apr 2023 15:38:51 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dlayout=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E6=8A=98=E5=8F=A0=E4=B8=8D=E6=9B=B4=E6=96=B0=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=E9=97=AE=E9=A2=98=20(#184)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

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

* fix: 修复menu问题
---
 .../fes-plugin-access/src/runtime/core.tpl    | 20 +++----
 .../src/runtime/helpers/pluginAccess.js       | 21 +++----
 .../src/runtime/helpers/pluginLocale.js       |  2 +-
 .../fes-plugin-layout/src/runtime/runtime.js  |  5 +-
 .../src/runtime/views/Menu.vue                | 57 ++++++++++++-------
 .../fes-plugin-locale/src/runtime/core.tpl    | 10 ++--
 .../fes-plugin-locale/src/runtime/runtime.js  |  4 +-
 7 files changed, 64 insertions(+), 55 deletions(-)

diff --git a/packages/fes-plugin-access/src/runtime/core.tpl b/packages/fes-plugin-access/src/runtime/core.tpl
index 12d5f794..5164b130 100644
--- a/packages/fes-plugin-access/src/runtime/core.tpl
+++ b/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;
 };
diff --git a/packages/fes-plugin-layout/src/runtime/helpers/pluginAccess.js b/packages/fes-plugin-layout/src/runtime/helpers/pluginAccess.js
index a18b90bd..23f52022 100644
--- a/packages/fes-plugin-layout/src/runtime/helpers/pluginAccess.js
+++ b/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(() =>
-            item.children.some((child) => {
-                const rst = hasAccessByMenuItem(child);
-                return rst && rst.value;
-            }),
-        );
+        return item.children.some((child) => {
+            const rst = hasAccessByMenuItem(child);
+            return rst;
+        });
     }
-    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) {
diff --git a/packages/fes-plugin-layout/src/runtime/helpers/pluginLocale.js b/packages/fes-plugin-layout/src/runtime/helpers/pluginLocale.js
index fc2a6693..0691f188 100644
--- a/packages/fes-plugin-layout/src/runtime/helpers/pluginLocale.js
+++ b/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;
diff --git a/packages/fes-plugin-layout/src/runtime/runtime.js b/packages/fes-plugin-layout/src/runtime/runtime.js
index de9ab180..e5022259 100644
--- a/packages/fes-plugin-layout/src/runtime/runtime.js
+++ b/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') {
diff --git a/packages/fes-plugin-layout/src/runtime/views/Menu.vue b/packages/fes-plugin-layout/src/runtime/views/Menu.vue
index ef4e2d75..0e4ba224 100644
--- a/packages/fes-plugin-layout/src/runtime/views/Menu.vue
+++ b/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) =>
-    menus.map((menu) => {
+const transform = (menus, level = 1) =>
+    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);
-            if (index === -1) {
-                return props.expandedKeys;
-            }
-            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);
+
+        const expandedKeysRef = ref(props.expandedKeys);
+
+        watch(
+            [menuArray, activePath],
+            () => {
+                let index = menuArray.value.findIndex((item) => item.value === activePath.value);
+                if (index === -1) {
+                    return;
                 }
-            }
-            return props.expandedKeys.concat(arr.map((item) => item.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);
+                    }
+                }
+                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,
         };
diff --git a/packages/fes-plugin-locale/src/runtime/core.tpl b/packages/fes-plugin-locale/src/runtime/core.tpl
index 0e4b6f26..72b876f8 100644
--- a/packages/fes-plugin-locale/src/runtime/core.tpl
+++ b/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 };
diff --git a/packages/fes-plugin-locale/src/runtime/runtime.js b/packages/fes-plugin-locale/src/runtime/runtime.js
index c642d7e7..a555ea87 100644
--- a/packages/fes-plugin-locale/src/runtime/runtime.js
+++ b/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);