feat: limit the drag range of tabs, fixed #4640 (#4659)

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"

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,
         ]"

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';