perf: 优化管理端生产加载体验
- 图标与重型组件按需加载,优化菜单预取和页面请求链路 - 开启 gzip 与静态缓存并修复子路由 KeepAlive 冲突
This commit is contained in:
@@ -91,6 +91,7 @@ onBeforeUnmount(() => {
|
||||
</script>
|
||||
<template>
|
||||
<li
|
||||
:data-menu-path="path"
|
||||
:class="[
|
||||
rootMenu.theme,
|
||||
b(),
|
||||
|
||||
@@ -50,6 +50,7 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: [string, string[]];
|
||||
enter: [string];
|
||||
open: [string, string[]];
|
||||
select: [string, string[]];
|
||||
}>();
|
||||
@@ -257,6 +258,25 @@ function handleMenuItemClick(data: MenuItemClicked) {
|
||||
emit('select', path, parentPaths);
|
||||
}
|
||||
|
||||
let enteredPath = '';
|
||||
|
||||
function handleMenuItemEnter(event: Event) {
|
||||
const target = event.target;
|
||||
if (!(target instanceof Element)) {
|
||||
return;
|
||||
}
|
||||
const menuItem = target.closest<HTMLElement>('[data-menu-path]');
|
||||
if (!menuItem || !menu.value?.contains(menuItem)) {
|
||||
return;
|
||||
}
|
||||
const path = menuItem.dataset.menuPath;
|
||||
if (!path || path === enteredPath) {
|
||||
return;
|
||||
}
|
||||
enteredPath = path;
|
||||
emit('enter', path);
|
||||
}
|
||||
|
||||
function handleSubMenuClick({ parentPaths, path }: MenuItemRegistered) {
|
||||
const isOpened = openedMenus.value.includes(path);
|
||||
|
||||
@@ -349,6 +369,9 @@ function getActivePaths() {
|
||||
]"
|
||||
:style="menuStyle"
|
||||
role="menu"
|
||||
@focusin="handleMenuItemEnter"
|
||||
@mouseleave="enteredPath = ''"
|
||||
@mouseover="handleMenuItemEnter"
|
||||
>
|
||||
<template v-if="mode === 'horizontal' && getSlot.showSlotMore">
|
||||
<template v-for="item in getSlot.slotDefault" :key="item.key">
|
||||
|
||||
Reference in New Issue
Block a user