Browse Source

feat(layout->tabs): support insert new tab after current tab (#3471)

* feat: insert new tab after current tab

* fix: go params declare wrong
xachary 1 năm trước cách đây
mục cha
commit
1e34d3e9e4
1 tập tin đã thay đổi với 46 bổ sung3 xóa
  1. 46 3
      src/hooks/web/usePage.ts

+ 46 - 3
src/hooks/web/usePage.ts

@@ -8,6 +8,8 @@ import { REDIRECT_NAME } from '@/router/constant';
 import { isHttpUrl } from '@/utils/is';
 import { openWindow } from '@/utils';
 
+import { useMultipleTabStore } from '@/store/modules/multipleTab';
+
 export type PathAsPageEnum<T> = T extends { path: string } ? T & { path: PageEnum } : T;
 export type RouteLocationRawEx = PathAsPageEnum<RouteLocationRaw>;
 
@@ -15,12 +17,24 @@ function handleError(e: Error) {
   console.error(e);
 }
 
+export enum GoType {
+  'replace',
+  'after',
+}
+
 /**
  * page switch
  */
 export function useGo(_router?: Router) {
-  const { push, replace } = _router || useRouter();
-  function go(opt: RouteLocationRawEx = PageEnum.BASE_HOME, isReplace = false) {
+  const { push, replace, currentRoute } = _router || useRouter();
+
+  function go(opt?: RouteLocationRawEx): void;
+  function go(opt: RouteLocationRawEx, isReplace: boolean): void;
+  function go(opt: RouteLocationRawEx, goType: GoType): void;
+  function go(
+    opt: RouteLocationRawEx = PageEnum.BASE_HOME,
+    goTypeOrIsReplace: boolean | GoType = false,
+  ) {
     if (!opt) {
       return;
     }
@@ -31,7 +45,36 @@ export function useGo(_router?: Router) {
     if (isHttpUrl(path)) {
       return openWindow(path);
     }
-    isReplace ? replace(opt).catch(handleError) : push(opt).catch(handleError);
+
+    const isReplace = goTypeOrIsReplace === true || goTypeOrIsReplace === GoType.replace;
+    const isAfter = goTypeOrIsReplace === GoType.after;
+
+    if (isReplace) {
+      replace(opt).catch(handleError);
+    } else if (isAfter) {
+      const tabStore = useMultipleTabStore();
+      const currentName = unref(currentRoute).name;
+      // 当前 tab
+      const currentIndex = tabStore.getTabList.findIndex((item) => item.name === currentName);
+      // 当前 tab 数量
+      const currentCount = tabStore.getTabList.length;
+      push(opt)
+        .then(() => {
+          if (tabStore.getTabList.length > currentCount) {
+            // 产生新 tab
+            // 新 tab(也是最后一个)
+            const targetIndex = tabStore.getTabList.length - 1;
+            // 新 tab 在 当前 tab 的后面
+            if (currentIndex > -1 && targetIndex > currentIndex) {
+              // 移动 tab
+              tabStore.sortTabs(targetIndex, currentIndex + 1);
+            }
+          }
+        })
+        .catch(handleError);
+    } else {
+      push(opt).catch(handleError);
+    }
   }
   return go;
 }