blackteay/fes.js
1
0
Fork 0
mirror of https://github.com/WeBankFinTech/fes.js.git synced 2025-04-05 19:41:57 +08:00
Code Issues Projects Releases Wiki Activity

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

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

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

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

* fix: 修复menu问题
This commit is contained in:
听海 2023-04-11 15:38:51 +08:00 committed by GitHub
parent 155ab33cc4
commit 30be8f8eec
7 changed files with 64 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/fes-plugin-access/src/runtime/core.tpl
View File

@ -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;
};

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

@ -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) {

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

@ -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;

5
packages/fes-plugin-layout/src/runtime/runtime.js
View File

@ -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') {

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

@ -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,
};

10
packages/fes-plugin-locale/src/runtime/core.tpl
View File

@ -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 };

4
packages/fes-plugin-locale/src/runtime/runtime.js
View File

@ -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);