perf: optimized page switching effect

Author: vben-admin

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vben-admin-2.0",
-  "version": "2.0.0-beta.4",
+  "version": "2.0.0-beta.5",
   "scripts": {
     "bootstrap": "yarn install",
     "serve": "ts-node --project ./build/tsconfig.json  ./build/script/preserve && cross-env NODE_ENV=development vite",
@@ -55,7 +55,6 @@
     "@typescript-eslint/parser": "^4.4.0",
     "@vue/compiler-sfc": "^3.0.0",
     "autoprefixer": "^9.8.6",
-    "babel-plugin-import": "^1.13.0",
     "commitizen": "^4.2.1",
     "conventional-changelog-cli": "^2.1.0",
     "conventional-changelog-custom-config": "^0.3.1",

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/useApp.tsx src/useApp.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;
+}

src/utils/helper/routeHelper.ts

@@ -95,7 +95,7 @@
   dependencies:
     "@babel/types" "^7.11.0"
 
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.10.4":
+"@babel/helper-module-imports@^7.10.4":
   version "7.10.4"
   resolved "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.10.4.tgz#4c5c54be04bd31670a7382797d75b9fa2e5b5620"
   integrity sha512-nEQJHqYavI217oD9+s5MUBzk6x1IlvoS9WTPfgG43CbMEeStE0v+r+TucWdx8KFGowPGvyOkDT9+7DHedIDnVw==
@@ -175,7 +175,7 @@
   resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.11.5.tgz#c7ff6303df71080ec7a4f5b8c003c58f1cf51037"
   integrity sha512-X9rD8qqm695vgmeaQ4fvz/o3+Wk4ZzQvSHkDBgpYKxpD4qTAUm88ZKtHkVqIOsYFFbIQ6wQYhC6q7pjqVK0E0Q==
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.4", "@babel/runtime@^7.10.5", "@babel/runtime@^7.11.2":
+"@babel/runtime@^7.10.4", "@babel/runtime@^7.10.5", "@babel/runtime@^7.11.2":
   version "7.11.2"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
   integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==
@@ -1214,14 +1214,6 @@ babel-helper-vue-jsx-merge-props@^2.0.3:
   resolved "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz#22aebd3b33902328e513293a8e4992b384f9f1b6"
   integrity sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg==
 
-babel-plugin-import@^1.13.0:
-  version "1.13.0"
-  resolved "https://registry.npmjs.org/babel-plugin-import/-/babel-plugin-import-1.13.0.tgz#c532fd533df9db53b47d4d4db3676090fc5c07a5"
-  integrity sha512-bHU8m0SrY89ub2hBBuYjbennOeH0YUYkVpH6jxKFk0uD8rhN+0jNHIPtXnac+Vn7N/hgkLGGDcIoYK7je3Hhew==
-  dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    "@babel/runtime" "^7.0.0"
-
 bail@^1.0.0:
   version "1.0.5"
   resolved "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz#b6fa133404a392cbc1f8c4bf63f5953351e7a776"