feat: 多标签Tab页支持拖拽排序 (#426)

* feat: 多标签页Tab页支持拖拽排序

* fix: 和HomePage换序 不做处理

* fix: 右键关闭逻辑调整

* chore: 补充类型声明

src/layouts/components/LayoutContent.vue

@@ -2,12 +2,14 @@
   <t-layout :class="`${prefix}-layout`">
     <t-tabs
       v-if="settingStore.isUseTabsRouter"
+      drag-sort
       theme="card"
       :class="`${prefix}-layout-tabs-nav`"
       :value="$route.path"
       :style="{ position: 'sticky', top: 0, width: '100%' }"
       @change="handleChangeCurrentTab"
       @remove="handleRemove"
+      @drag-sort="handleDragend"
     >
       <t-tab-panel
         v-for="(routeItem, index) in tabRouters"
@@ -147,4 +149,13 @@ const handleTabMenuClick = (visible: boolean, ctx, path: string) => {
   if (ctx.trigger === 'document') activeTabPath.value = null;
   if (visible) activeTabPath.value = path;
 };
+
+const handleDragend = (options: { currentIndex: number; targetIndex: number }) => {
+  const { tabRouters } = tabsRouterStore;
+
+  [tabRouters[options.currentIndex], tabRouters[options.targetIndex]] = [
+    tabRouters[options.targetIndex],
+    tabRouters[options.currentIndex],
+  ];
+};
 </script>

src/store/modules/tabs-router.ts

@@ -49,17 +49,28 @@ export const useTabsRouterStore = defineStore('tabsRouter', {
     // 处理关闭右侧
     subtractTabRouterBehind(newRoute: TRouterInfo) {
       const { routeIdx } = newRoute;
-      this.tabRouterList = this.tabRouterList.slice(0, routeIdx + 1);
+      const homeIdx: number = this.tabRouters.findIndex((route) => route.isHome);
+      let tabRouterList: Array<TRouterInfo> = this.tabRouterList.slice(0, routeIdx + 1);
+      if (routeIdx < homeIdx) {
+        tabRouterList = tabRouterList.concat(homeRoute);
+      }
+      this.tabRouterList = tabRouterList;
     },
     // 处理关闭左侧
     subtractTabRouterAhead(newRoute: TRouterInfo) {
       const { routeIdx } = newRoute;
-      this.tabRouterList = homeRoute.concat(this.tabRouterList.slice(routeIdx));
+      const homeIdx: number = this.tabRouters.findIndex((route) => route.isHome);
+      let tabRouterList: Array<TRouterInfo> = this.tabRouterList.slice(routeIdx);
+      if (routeIdx > homeIdx) {
+        tabRouterList = homeRoute.concat(tabRouterList);
+      }
+      this.tabRouterList = tabRouterList;
     },
     // 处理关闭其他
     subtractTabRouterOther(newRoute: TRouterInfo) {
       const { routeIdx } = newRoute;
-      this.tabRouterList = routeIdx === 0 ? homeRoute : homeRoute.concat([this.tabRouterList?.[routeIdx]]);
+      const homeIdx: number = this.tabRouters.findIndex((route) => route.isHome);
+      this.tabRouterList = routeIdx === homeIdx ? homeRoute : homeRoute.concat([this.tabRouterList?.[routeIdx]]);
     },
     removeTabRouterList() {
       this.tabRouterList = [];