From cfddfa03bcc235758ae47f917f0d5f5fee2f67ef Mon Sep 17 00:00:00 2001
From: liweijie0812 <674416404@qq.com>
Date: Tue, 21 Feb 2023 11:36:05 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A4=9A=E6=A0=87=E7=AD=BETab=E9=A1=B5?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E6=8B=96=E6=8B=BD=E6=8E=92=E5=BA=8F=20(#426)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

* fix: 和HomePage换序 不做处理

* fix: 右键关闭逻辑调整

* chore: 补充类型声明
---
 src/layouts/components/LayoutContent.vue | 11 +++++++++++
 src/store/modules/tabs-router.ts         | 17 ++++++++++++++---
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/layouts/components/LayoutContent.vue b/src/layouts/components/LayoutContent.vue
index 77ef192..0c9fea9 100644
--- a/src/layouts/components/LayoutContent.vue
+++ b/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>
diff --git a/src/store/modules/tabs-router.ts b/src/store/modules/tabs-router.ts
index 00092a5..d8d1f38 100644
--- a/src/store/modules/tabs-router.ts
+++ b/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 = [];