perf: optimize multiple-tab switching effect

src/layouts/default/LayoutMenu.tsx

@@ -5,7 +5,6 @@ import { computed, defineComponent, unref, ref, onMounted, watch } from 'vue';
 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);
       }
     }
 

src/layouts/default/multitabs/index.tsx

@@ -2,7 +2,7 @@ import type { TabContentProps } from './tab.data';
 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 './index.less';
 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,