From a475a91d289a5a3c1b793cdb3dc6e6cb2c30a438 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=98=89=E8=B1=AA?=
 <42510293+ziyujiahao@users.noreply.github.com>
Date: Thu, 2 Apr 2026 11:46:22 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20tab=E9=A1=B5=E9=9A=90=E8=97=8F?=
 =?UTF-8?q?=E5=90=8E=EF=BC=8C=E4=B8=8D=E5=8F=82=E4=B8=8E=E8=BD=AE=E6=92=AD?=
 =?UTF-8?q?=20(#18185)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../custom-component/de-tabs/Component.vue    |  9 ++++-
 .../de-tabs/CustomTabsSortSide.vue            | 40 +++++++++++++++----
 2 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/core/core-frontend/src/custom-component/de-tabs/Component.vue b/core/core-frontend/src/custom-component/de-tabs/Component.vue
index 39408ba548..20e1957d26 100644
--- a/core/core-frontend/src/custom-component/de-tabs/Component.vue
+++ b/core/core-frontend/src/custom-component/de-tabs/Component.vue
@@ -703,15 +703,20 @@ const initCarousel = () => {
   if (!isEditMode.value) {
     if (element.value.carousel?.enable) {
       const switchTime = (element.value.carousel.time || 5) * 1000
+      // 过滤出可见的标签页
+      const visibleTabs = element.value.propValue.filter(tab => !tab.hidden)
+
+      // 如果没有可见的标签页，则不启动轮播
+      if (visibleTabs.length === 0) return
       let switchCount = 1
       // 轮播定时器
       carouselTimer = setInterval(() => {
         // 鼠标移入时 停止轮播
         if (!state.hoverFlag) {
-          const nowIndex = switchCount % element.value.propValue.length
+          const nowIndex = switchCount % visibleTabs.length
           switchCount++
           nextTick(() => {
-            element.value.editableTabsValue = element.value.propValue[nowIndex].name
+            element.value.editableTabsValue = visibleTabs[nowIndex].name
           })
         }
       }, switchTime)
diff --git a/core/core-frontend/src/custom-component/de-tabs/CustomTabsSortSide.vue b/core/core-frontend/src/custom-component/de-tabs/CustomTabsSortSide.vue
index 879721b3d5..f6db0da9c5 100644
--- a/core/core-frontend/src/custom-component/de-tabs/CustomTabsSortSide.vue
+++ b/core/core-frontend/src/custom-component/de-tabs/CustomTabsSortSide.vue
@@ -27,15 +27,11 @@
         <el-icon
           v-show="item.hidden"
           class="component-base component-icon-display"
-          @click="() => (item['hidden'] = false)"
+          @click="onShow(item)"
         >
           <Icon name="dv-eye-close"><dvEyeClose class="svg-icon f16" /></Icon>
         </el-icon>
-        <el-icon
-          v-show="!item.hidden"
-          class="component-base"
-          @click="() => (item['hidden'] = true)"
-        >
+        <el-icon v-show="!item.hidden" class="component-base" @click="onHidden(item)">
           <Icon name="dv-show"><dvShow class="svg-icon f16" /></Icon>
         </el-icon>
 
@@ -50,7 +46,7 @@
 <script setup lang="ts">
 import drag from '@/assets/svg/drag.svg'
 import draggable from 'vuedraggable'
-import { toRefs } from 'vue'
+import { nextTick, toRefs } from 'vue'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import eventBus from '@/utils/eventBus'
 import dvEyeClose from '@/assets/svg/dv-eye-close.svg'
@@ -73,14 +69,44 @@ const props = withDefaults(
 
 const { config, themes } = toRefs(props)
 
+// 检查并修正当前激活的tab页（传入当前隐藏的tabItem）
+const checkAndFixCurrentTab = tabItem => {
+  // 如果隐藏的不是当前激活的tab，不需要处理
+  if (tabItem.name !== config.value.editableTabsValue) return
+
+  // 过滤出可见的标签页
+  const visibleTabs = config.value.propValue.filter(tab => !tab.hidden)
+
+  // 如果没有可见标签页，不做处理
+  if (visibleTabs.length === 0) return
+
+  // 切换到第一个可见的tab
+  nextTick(() => {
+    config.value.editableTabsValue = visibleTabs[0].name
+  })
+}
+
 const onSortChange = () => {
   snapshotStore.recordSnapshotCache('tab-sort-save')
   eventBus.emit('onTabSortChange-' + config.value.id)
 }
 
+const onShow = tabItem => {
+  snapshotStore.recordSnapshotCache('tab')
+  tabItem['hidden'] = false
+  config.value.editableTabsValue = tabItem.name
+}
+
+const onHidden = tabItem => {
+  snapshotStore.recordSnapshotCache('tab')
+  tabItem['hidden'] = true
+  checkAndFixCurrentTab(tabItem)
+}
+
 const onDelete = item => {
   snapshotStore.recordSnapshotCache('tab')
   eventBus.emit('onTabDelete-' + config.value.id, deepCopy(item))
+  checkAndFixCurrentTab(item)
 }
 
 const onCopy = item => {