perf: 页面懒加载交互体验优化

easyflow-ui-admin/packages/effects/layouts/src/basic/content/content.vue

@@ -1,17 +1,16 @@
 <script lang="ts" setup>
-import type { VNode } from 'vue';
+import type {VNode} from 'vue';
+import {computed} from 'vue';
 import type {
   RouteLocationNormalizedLoaded,
   RouteLocationNormalizedLoadedGeneric,
 } from 'vue-router';
+import {RouterView} from 'vue-router';
 
-import { computed } from 'vue';
-import { RouterView } from 'vue-router';
+import {preferences, usePreferences} from '@easyflow/preferences';
+import {getTabKey, storeToRefs, useTabbarStore} from '@easyflow/stores';
 
-import { preferences, usePreferences } from '@easyflow/preferences';
-import { getTabKey, storeToRefs, useTabbarStore } from '@easyflow/stores';
-
-import { IFrameRouterView } from '../../iframe';
+import {IFrameRouterView} from '../../iframe';
 
 defineOptions({ name: 'LayoutContent' });
 
@@ -104,7 +103,6 @@ function transformComponent(
         v-if="getEnabledTransition"
         :name="getTransitionName(route)"
         appear
-        mode="out-in"
       >
         <KeepAlive
           v-if="keepAlive"

easyflow-ui-admin/packages/effects/layouts/src/basic/menu/use-mixed-menu.ts

@@ -1,16 +1,16 @@
-import type { MenuRecordRaw } from '@easyflow/types';
+import type {MenuRecordRaw} from '@easyflow/types';
 
-import { computed, onBeforeMount, ref, watch } from 'vue';
-import { useRoute } from 'vue-router';
+import {computed, onBeforeMount, ref, watch} from 'vue';
+import {useRoute} from 'vue-router';
 
-import { preferences, usePreferences } from '@easyflow/preferences';
-import { useAccessStore } from '@easyflow/stores';
-import { findRootMenuByPath } from '@easyflow/utils';
+import {preferences, usePreferences} from '@easyflow/preferences';
+import {useAccessStore} from '@easyflow/stores';
+import {findRootMenuByPath} from '@easyflow/utils';
 
-import { useNavigation } from './use-navigation';
+import {useNavigation} from './use-navigation';
 
 function useMixedMenu() {
-  const { navigation, willOpenedByWindow } = useNavigation();
+  const { navigation, prefetch, willOpenedByWindow } = useNavigation();
   const accessStore = useAccessStore();
   const route = useRoute();
   const splitSideMenus = ref<MenuRecordRaw[]>([]);
@@ -85,6 +85,8 @@ function useMixedMenu() {
    * @param mode 菜单模式
    */
   const handleMenuSelect = (key: string, mode?: string) => {
+    prefetch(key);
+
     if (!needSplit.value || mode === 'vertical') {
       navigation(key);
       return;
@@ -95,6 +97,11 @@ function useMixedMenu() {
     if (!willOpenedByWindow(key)) {
       rootMenuPath.value = rootMenu?.path ?? '';
       splitSideMenus.value = _splitSideMenus;
+      _splitSideMenus.forEach((menu) => {
+        if (menu.path) {
+          prefetch(menu.path);
+        }
+      });
     }
 
     if (_splitSideMenus.length === 0) {
@@ -114,6 +121,8 @@ function useMixedMenu() {
    * @param parentsPath 父级路径
    */
   const handleMenuOpen = (key: string, parentsPath: string[]) => {
+    prefetch(key);
+
     if (parentsPath.length <= 1 && preferences.sidebar.autoActivateChild) {
       navigation(
         defaultSubMap.has(key) ? (defaultSubMap.get(key) as string) : key,