perf: optimized page switching effect

src/components/Menu/src/BasicMenu.tsx

@@ -1,17 +1,7 @@
 import type { MenuState } from './types';
 import type { Menu as MenuType } from '/@/router/types';
 
-import {
-  computed,
-  defineComponent,
-  unref,
-  reactive,
-  toRef,
-  watch,
-  onMounted,
-  watchEffect,
-  ref,
-} from 'vue';
+import { computed, defineComponent, unref, reactive, toRef, watch, onMounted, ref } from 'vue';
 import { basicProps } from './props';
 import { Menu } from 'ant-design-vue';
 import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
@@ -106,11 +96,18 @@ export default defineComponent({
         getParentPath();
       }
     );
-    watchEffect(() => {
-      if (props.items) {
-        handleMenuChange();
+
+    watch(
+      () => props.items,
+      () => {
+        if (props.items) {
+          handleMenuChange();
+        }
+      },
+      {
+        immediate: true,
       }
-    });
+    );
 
     async function getParentPath() {
       const { appendClass } = props;

src/layouts/default/LayoutSideBar.tsx

@@ -158,7 +158,6 @@ export default defineComponent({
         menuSetting: { theme, split: splitMenu },
       } = unref(getProjectConfigRef);
       const { getCollapsedState, getMenuWidthState } = menuStore;
-
       return (
         <Layout.Sider
           onCollapse={onCollapseChange}

src/layouts/default/index.less

@@ -1,5 +1,10 @@
 @import (reference) '../../design/index.less';
 
+.ant-menu-submenu .ant-menu-sub {
+  transition: background 0.1s cubic-bezier(0.645, 0.045, 0.355, 1) 0s,
+    padding 0.1s cubic-bezier(0.645, 0.045, 0.355, 1) 0s !important;
+}
+
 .default-layout {
   &__content {
     position: relative;

src/layouts/default/setting/SettingDrawer.tsx

@@ -262,7 +262,7 @@ export default defineComponent({
             size="small"
             min={0}
             onChange={(e) => {
-              baseHandler('menuWidth', e);
+              baseHandler('lockTime', e);
             }}
             defaultValue={appStore.getProjectConfig.lockTime}
             formatter={(value: string) => {
@@ -448,7 +448,7 @@ export default defineComponent({
           },
         };
       }
-      if (event === 'menuWidth') {
+      if (event === 'lockTime') {
         config = {
           lockTime: value,
         };

src/layouts/iframe/useFrameKeepAlive.ts

@@ -32,9 +32,6 @@ export function useFrameKeepAlive() {
   const getFramePages = computed(() => {
     const ret =
       getAllFramePages((toRaw(router.getRoutes()) as unknown) as AppRouteRecordRaw[]) || [];
-    console.log('======================');
-    console.log(ret);
-    console.log('======================');
     return ret;
   });
 

src/layouts/page/index.tsx

@@ -40,6 +40,7 @@ export default defineComponent({
           <RouterView>
             {{
               default: ({ Component, route }: { Component: any; route: RouteLocation }) => {
+                const name = route.meta.inTab ? ' ' : null;
                 const Content = openCache ? (
                   <KeepAlive max={max} include={cacheTabs}>
                     <Component {...route.params} />
@@ -50,7 +51,7 @@ export default defineComponent({
                 return openRouterTransition ? (
                   <Transition
                     {...on}
-                    name={route.meta.transitionName || routerTransition}
+                    name={name || route.meta.transitionName || routerTransition}
                     mode="out-in"
                   >
                     {() => Content}

src/router/guard/progressGuard.ts

@@ -2,17 +2,20 @@ import type { Router } from 'vue-router';
 
 import NProgress from 'nprogress';
 import 'nprogress/nprogress.css';
+import { getIsOpenTab } from '/@/utils/helper/routeHelper';
 
 export function createProgressGuard(router: Router) {
-  NProgress.inc(0.1);
-  NProgress.configure({ easing: 'ease', speed: 200, showSpinner: false });
+  // NProgress.inc(0.1);
+  // NProgress.configure({ easing: 'ease', speed: 200, showSpinner: false });
 
-  router.beforeEach(async () => {
-    NProgress.start();
+  router.beforeEach(async (to) => {
+    const isOpen = getIsOpenTab(to.path);
+    to.meta.inTab = isOpen;
+    !isOpen && NProgress.start();
     return true;
   });
-  router.afterEach(async () => {
-    NProgress.done();
+  router.afterEach(async (to) => {
+    !to.meta.inTab && NProgress.done();
     return true;
   });
 }

src/router/types.d.ts

@@ -29,6 +29,8 @@ export interface RouteMeta {
 
   // close loading
   afterCloseLoading?: boolean;
+
+  inTab?: boolean;
 }
 
 export interface AppRouteRecordRaw extends Omit<RouteRecordRaw, 'meta'> {

src/utils/helper/routeHelper.ts

@@ -1,6 +1,8 @@
 import type { AppRouteModule, AppRouteRecordRaw } from '/@/router/types';
 import type { RouteRecordRaw } from 'vue-router';
 
+import { appStore } from '/@/store/modules/app';
+import { tabStore } from '/@/store/modules/tab';
 import { createRouter, createWebHashHistory } from 'vue-router';
 import { toRaw } from 'vue';
 import { PAGE_LAYOUT_COMPONENT } from '/@/router/constant';
@@ -45,3 +47,13 @@ export function transformObjToRoute(routeList: AppRouteModule[]) {
   });
   return routeList;
 }
+
+export function getIsOpenTab(toPath: string) {
+  const { openKeepAlive, multiTabsSetting: { show } = {} } = appStore.getProjectConfig;
+
+  if (show && openKeepAlive) {
+    const tabList = tabStore.getTabsState;
+    return tabList.some((tab) => tab.path === toPath);
+  }
+  return false;
+}