From c432e0ac33e8cf210a5928f7cd6b4ef6806a4a2f Mon Sep 17 00:00:00 2001
From: Netfan <netfan@foxmail.com>
Date: Thu, 17 Oct 2024 14:11:42 +0800
Subject: [PATCH] feat: limit the drag range of tabs, fixed #4640 (#4659)

---
 .../ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue   | 8 +++++++-
 .../@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue    | 1 +
 packages/@core/ui-kit/tabs-ui/src/use-tabs-drag.ts       | 9 ++++++++-
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue b/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
index f64e13d8..44b40e5d 100644
--- a/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
+++ b/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
@@ -69,7 +69,13 @@ const tabsView = computed((): TabConfig[] => {
         v-for="(tab, i) in tabsView"
         :key="tab.key"
         ref="tabRef"
-        :class="[{ 'is-active': tab.key === active, draggable: !tab.affixTab }]"
+        :class="[
+          {
+            'is-active': tab.key === active,
+            draggable: !tab.affixTab,
+            'affix-tab': tab.affixTab,
+          },
+        ]"
         :data-active-tab="active"
         :data-index="i"
         class="tabs-chrome__item draggable translate-all group relative -mr-3 flex h-full select-none items-center"
diff --git a/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue b/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
index 67480f56..e1247267 100644
--- a/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
+++ b/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
@@ -76,6 +76,7 @@ const tabsView = computed((): TabConfig[] => {
           {
             'is-active dark:bg-accent bg-primary/15': tab.key === active,
             draggable: !tab.affixTab,
+            'affix-tab': tab.affixTab,
           },
           typeWithClass.content,
         ]"
diff --git a/packages/@core/ui-kit/tabs-ui/src/use-tabs-drag.ts b/packages/@core/ui-kit/tabs-ui/src/use-tabs-drag.ts
index f76becaf..db4b7ce8 100644
--- a/packages/@core/ui-kit/tabs-ui/src/use-tabs-drag.ts
+++ b/packages/@core/ui-kit/tabs-ui/src/use-tabs-drag.ts
@@ -81,7 +81,14 @@ export function useTabsDrag(props: TabsProps, emit: EmitType) {
       },
       onMove(evt) {
         const parent = findParentElement(evt.related);
-        return parent?.classList.contains('draggable') && props.draggable;
+        if (parent?.classList.contains('draggable') && props.draggable) {
+          const isCurrentAffix = evt.dragged.classList.contains('affix-tab');
+          const isRelatedAffix = evt.related.classList.contains('affix-tab');
+          // 不允许在固定的tab和非固定的tab之间互相拖拽
+          return isCurrentAffix === isRelatedAffix;
+        } else {
+          return false;
+        }
       },
       onStart: () => {
         el.style.cursor = 'grabbing';