From 102b639802acfc0f0fa8621de810488b5ee1a192 Mon Sep 17 00:00:00 2001
From: "gary.fu" <xuebaiyouling@gmail.com>
Date: Tue, 1 Jul 2025 14:41:56 +0800
Subject: [PATCH] =?UTF-8?q?tabs=E6=94=AF=E6=8C=81=E6=8B=96=E5=8A=A8?=
 =?UTF-8?q?=E6=8E=92=E5=BA=8F=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common-tabs-view/index.vue | 25 +++++++++++++++++++++--
 src/stores/TabsViewStore.js               |  7 +++++++
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/components/common-tabs-view/index.vue b/src/components/common-tabs-view/index.vue
index 2d81889..7d1ba57 100644
--- a/src/components/common-tabs-view/index.vue
+++ b/src/components/common-tabs-view/index.vue
@@ -1,15 +1,19 @@
 <script setup>
 import { useTabsViewStore } from '@/stores/TabsViewStore'
 import { useRoute, useRouter } from 'vue-router'
-import { onMounted, ref, watch } from 'vue'
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { isString } from 'lodash-es'
 import TabsViewItem from '@/components/common-tabs-view/tabs-view-item.vue'
 import { toGetParams } from '@/utils'
 import { isNestedRoute } from '@/route/RouteUtils'
+import { useGetDerivedNamespace } from 'element-plus'
+import Sortable from 'sortablejs'
 
 const router = useRouter()
 const route = useRoute()
 const tabsViewStore = useTabsViewStore()
+const tabRef = ref()
+let sortable = null
 watch(route, () => {
   if (route.path) {
     tabsViewStore.addHistoryTab(route)
@@ -22,6 +26,19 @@ onMounted(() => {
     tabsViewStore.addHistoryTab(route)
   }
   tabsViewStore.currentTab = route.path
+  if (tabRef.value?.tabNavRef) {
+    const ns = useGetDerivedNamespace().value
+    const { tabListRef } = tabRef.value.tabNavRef
+    sortable = new Sortable(tabListRef, {
+      animation: 150,
+      draggable: `.${ns}-tabs__item`,
+      filter: '.is-disabled',
+      onEnd (event) {
+        const { oldIndex, newIndex } = event
+        tabsViewStore.reIndexHistoryTab(oldIndex, newIndex)
+      }
+    })
+  }
 })
 
 const selectHistoryTab = path => {
@@ -64,18 +81,22 @@ const tabItems = ref()
 const onDropdownVisibleChange = (visible, tab) => {
   if (visible) {
     tabItems.value.forEach(({ dropdownRef }) => {
-      console.info(Object.assign({}, dropdownRef))
       if (dropdownRef.id !== tab.path) {
         dropdownRef.handleClose()
       }
     })
   }
 }
+onBeforeUnmount(() => {
+  sortable?.destroy()
+  sortable = null
+})
 
 </script>
 
 <template>
   <el-tabs
+    ref="tabRef"
     v-bind="$attrs"
     v-model="tabsViewStore.currentTab"
     class="common-tabs"
diff --git a/src/stores/TabsViewStore.js b/src/stores/TabsViewStore.js
index dc152bd..1a09d5e 100644
--- a/src/stores/TabsViewStore.js
+++ b/src/stores/TabsViewStore.js
@@ -193,6 +193,12 @@ export const useTabsViewStore = defineStore('tabsView', () => {
     }
   }
 
+  const reIndexHistoryTab = (fromIndex, toIndex) => {
+    const tabs = historyTabs.value
+    tabs.splice(toIndex, 0, tabs.splice(fromIndex, 1)[0]) // 插入到 toIndex 位置
+    console.log('新的tabs顺序：', fromIndex, toIndex, tabs.map(t => t.name))
+  }
+
   watch(currentTab, path => {
     currentTabItem.value = historyTabs.value.find(v => path && v.path === path)
   })
@@ -234,6 +240,7 @@ export const useTabsViewStore = defineStore('tabsView', () => {
     addHistoryTab,
     addCachedTab,
     removeCachedTab,
+    reIndexHistoryTab,
     hasCloseDropdown
   }
 }, {