perf: optimize multiple-tab switching effect

vben
1 parent 949db963
Showing 10 changed files with 72 additions and 17 deletions
src/design/transition/base.less
src/design/transition/breadcrumb.less
src/design/transition/fade.less
src/design/transition/zoom.less
src/hooks/web/useTabs.ts
src/layouts/default/LayoutMenu.tsx
src/layouts/default/multitabs/index.tsx
src/router/guard/pageLoadingGuard.ts
src/store/modules/tab.ts
src/views/demo/feat/tabs/index.vue
 .transition-default() {
   &-enter-active,
   &-leave-active {
-    transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
+    transition: 0.2s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
   }
   &-move {
-    transition: transform 0.6s;
+    transition: transform 0.5s;
   }
 }
 .breadcrumb-enter-active,
 .breadcrumb-leave-active {
-  transition: all 0.38s;
+  transition: all 0.24s;
 }
 .breadcrumb-enter-from,
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.28s ease-in-out;
+  transition: opacity 0.2s ease-in-out;
 }
 .fade-enter-from,
@@ -11,7 +11,7 @@
 // side-fade
 .slide-fade-enter-active,
 .slide-fade-leave-active {
-  transition: opacity 0.35s, transform 0.4s;
+  transition: opacity 0.3s, transform 0.35s;
 }
 .slide-enter-from,
@@ -32,7 +32,7 @@
 // Speed: 1x
 .fade-bottom-enter-active,
 .fade-bottom-leave-active {
-  transition: opacity 0.3s, transform 0.35s;
+  transition: opacity 0.2s, transform 0.25s;
 }
 .fade-bottom-enter-from,
@@ -53,7 +53,7 @@
 // Speed: 1x
 .fade-top-enter-active,
 .fade-top-leave-active {
-  transition: opacity 0.3s, transform 0.35s;
+  transition: opacity 0.2s, transform 0.25s;
 }
 .fade-top-enter-from {
 // zoom-out
 .zoom-out-enter-active,
 .zoom-out-leave-active {
-  transition: opacity 0.35s ease-in-out, transform 0.45s ease-out;
+  transition: opacity 0.2 ease-in-out, transform 0.2s ease-out;
 }
 .zoom-out-enter-from,
@@ -13,7 +13,7 @@
 // zoom-fade
 .zoom-fade-enter-active,
 .zoom-fade-leave-active {
-  transition: transform 0.35s, opacity 0.35s ease-out;
+  transition: transform 0.2s, opacity 0.2s ease-out;
 }
 .zoom-fade-enter-from {
+import { useTimeout } from '/@/hooks/core/useTimeout';
+import { PageEnum } from '/@/enums/pageEnum';
 import { TabItem, tabStore } from '/@/store/modules/tab';
 import { appStore } from '/@/store/modules/app';
+import router from '/@/router';
+
 type Fn = () => void;
 type RouteFn = (tabItem: TabItem) => void;
@@ -66,5 +70,12 @@ export function useTabs() {
     closeOther: () => canIUseFn() && closeOther(tabStore.getCurrentTab),
     closeCurrent: () => canIUseFn() && closeCurrent(tabStore.getCurrentTab),
     resetCache: () => canIUseFn() && resetCache(),
+    addTab: (path: PageEnum, goTo = false) => {
+      useTimeout(() => {
+        tabStore.addTabByPathAction(path);
+      }, 0);
+
+      goTo && router.push(path);
+    },
   };
 }
@@ -5,7 +5,6 @@ import { computed, defineComponent, unref, ref, onMounted, watch } from &#39;vue&#39;;
 import { BasicMenu } from '/@/components/Menu/index';
 import Logo from '/@/layouts/Logo.vue';
-import { PageEnum } from '/@/enums/pageEnum';
 import { MenuModeEnum, MenuSplitTyeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
 // store
@@ -20,10 +19,11 @@ import {
   getFlatChildrenMenus,
   getCurrentParentPath,
 } from '/@/router/menus/index';
-import { useGo } from '/@/hooks/web/usePage';
 import { useRouter } from 'vue-router';
 import { useThrottle } from '/@/hooks/core/useThrottle';
 import { permissionStore } from '/@/store/modules/permission';
+import { useTabs } from '/@/hooks/web/useTabs';
+import { PageEnum } from '/@/enums/pageEnum';
 // import
 export default defineComponent({
@@ -54,6 +54,7 @@ export default defineComponent({
     const menusRef = ref<Menu[]>([]);
     const flatMenusRef = ref<Menu[]>([]);
     const { currentRoute } = useRouter();
+    const { addTab } = useTabs();
     const getProjectConfigRef = computed(() => {
       return appStore.getProjectConfig;
@@ -63,7 +64,6 @@ export default defineComponent({
       return unref(getProjectConfigRef).menuSetting.mode === MenuModeEnum.HORIZONTAL;
     });
-    const go = useGo();
     onMounted(() => {
       genMenus();
     });
@@ -144,7 +144,7 @@ export default defineComponent({
         if (splitType === MenuSplitTyeEnum.TOP) {
           menuStore.commitCurrentTopSplitMenuPathState(path);
         }
-        go(path as PageEnum);
+        addTab(path as PageEnum, true);
       }
     }
@@ -2,7 +2,7 @@ import type { TabContentProps } from &#39;./tab.data&#39;;
 import type { TabItem } from '/@/store/modules/tab';
 import type { AppRouteRecordRaw } from '/@/router/types';
-import { defineComponent, watch, computed, ref, unref } from 'vue';
+import { defineComponent, watch, computed, ref, unref, onMounted } from 'vue';
 import { Tabs } from 'ant-design-vue';
 import TabContent from './TabContent';
@@ -16,12 +16,21 @@ import &#39;./index.less&#39;;
 import { tabStore } from '/@/store/modules/tab';
 import { closeTab } from './useTabDropdown';
 import router from '/@/router';
+import { useTabs } from '/@/hooks/web/useTabs';
+import { PageEnum } from '/@/enums/pageEnum';
+
 export default defineComponent({
   name: 'MultiTabs',
   setup() {
     let isAddAffix = false;
     const go = useGo();
     const { currentRoute } = useRouter();
+
+    onMounted(() => {
+      const { addTab } = useTabs();
+      addTab(unref(currentRoute).path as PageEnum);
+    });
+
     // 当前激活tab
     const activeKeyRef = ref<string>('');
     // 当前tab列表
@@ -38,7 +47,9 @@ export default defineComponent({
         }
         activeKeyRef.value = path;
-        tabStore.commitAddTab((unref(currentRoute) as unknown) as AppRouteRecordRaw);
+        // 监听路由的话虽然可以，但是路由切换的时间会造成卡顿现象？
+        // 使用useTab的addTab的话，当用户手动调转，需要自行调用addTab
+        // tabStore.commitAddTab((unref(currentRoute) as unknown) as AppRouteRecordRaw);
       },
       {
         immediate: true,
@@ -6,6 +6,9 @@ import { userStore } from &#39;/@/store/modules/user&#39;;
 export function createPageLoadingGuard(router: Router) {
   let isFirstLoad = true;
   router.beforeEach(async (to) => {
+    console.log('======================');
+    console.log(2);
+    console.log('======================');
     const {
       openKeepAlive,
       openRouterTransition,
@@ -21,6 +24,7 @@ export function createPageLoadingGuard(router: Router) {
     }
     if (show && openKeepAlive && !isFirstLoad) {
       const tabList = tabStore.getTabsState;
+
       const isOpen = tabList.some((tab) => tab.path === to.path);
       appStore.setPageLoadingAction(!isOpen);
     } else {
@@ -181,6 +181,14 @@ class Tab extends VuexModule {
   }
   @Action
+  addTabByPathAction(path: string): void {
+    if (!path) return;
+    const routes = router.getRoutes();
+    const to = routes.find((item) => item.path === path);
+    to && this.commitAddTab((to as unknown) as AppRouteRecordRaw);
+  }
+
+  @Action
   closeRightTabAction(route: AppRouteRecordRaw | TabItem): void {
     const index = this.tabsState.findIndex((item) => item.path === route.path);
@@ -11,19 +11,40 @@
       <a-button class="mr-2" @click="closeOther">关闭其他</a-button>
       <a-button class="mr-2" @click="closeCurrent">关闭当前</a-button>
       <a-button class="mr-2" @click="refreshPage">刷新当前</a-button>
+      <a-button class="mr-2" @click="openTab">打开图标界面tab</a-button>
     </CollapseContainer>
   </div>
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
   import { CollapseContainer } from '/@/components/Container/index';
+  import { PageEnum } from '/@/enums/pageEnum';
   import { useTabs } from '/@/hooks/web/useTabs';
   export default defineComponent({
     name: 'TabsDemo',
     components: { CollapseContainer },
     setup() {
-      const { closeAll, closeLeft, closeRight, closeOther, closeCurrent, refreshPage } = useTabs();
-      return { closeAll, closeLeft, closeRight, closeOther, closeCurrent, refreshPage };
+      const {
+        closeAll,
+        closeLeft,
+        closeRight,
+        closeOther,
+        closeCurrent,
+        refreshPage,
+        addTab,
+      } = useTabs();
+
+      return {
+        closeAll,
+        closeLeft,
+        closeRight,
+        closeOther,
+        closeCurrent,
+        refreshPage,
+        openTab: () => {
+          addTab('/feat/icon' as PageEnum, true);
+        },
+      };
     },
   });
 </script>