From f93a05cee438c0ab9f7c41042dfe9256d32a4f4f 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, 19 Mar 2026 17:23:10 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E4=BB=AA=E8=A1=A8=E6=9D=BF=E3=80=81?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):=20Tab=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=8D=95tab=E5=86=85=E9=9A=90=E8=97=8F=E4=B8=8E=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E3=80=81=E6=8E=92=E5=BA=8F=E8=B0=83=E6=95=B4=E7=AD=89?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=20#17984=20(#18119)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../custom-component/common/CommonAttr.vue    |   2 +
 .../custom-component/de-tabs/Component.vue    |  62 +++---
 .../de-tabs/CustomTabsSortSide.vue            | 187 ++++++++++++++++++
 3 files changed, 224 insertions(+), 27 deletions(-)
 create mode 100644 core/core-frontend/src/custom-component/de-tabs/CustomTabsSortSide.vue

diff --git a/core/core-frontend/src/custom-component/common/CommonAttr.vue b/core/core-frontend/src/custom-component/common/CommonAttr.vue
index 9b93b0b825..720d407b60 100644
--- a/core/core-frontend/src/custom-component/common/CommonAttr.vue
+++ b/core/core-frontend/src/custom-component/common/CommonAttr.vue
@@ -13,6 +13,7 @@ import CarouselSetting from '@/custom-component/common/CarouselSetting.vue'
 import CommonBorderSetting from '@/custom-component/common/CommonBorderSetting.vue'
 import CollapseSwitchItem from '../../components/collapse-switch-item/src/CollapseSwitchItem.vue'
 import TabBackgroundOverall from '@/custom-component/de-tabs/TabBackgroundOverall.vue'
+import CustomTabsSortSide from '@/custom-component/de-tabs/CustomTabsSortSide.vue'
 const snapshotStore = snapshotStoreWithOut()
 
 const { t } = useI18n()
@@ -204,6 +205,7 @@ onMounted(() => {
           :themes="themes"
           :element="element"
         ></common-style-set>
+        <CustomTabsSortSide :themes="themes" :config="element"></CustomTabsSortSide>
       </collapse-switch-item>
       <el-collapse-item
         v-if="styleShow"
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 b93204a28c..bc2cba6e2b 100644
--- a/core/core-frontend/src/custom-component/de-tabs/Component.vue
+++ b/core/core-frontend/src/custom-component/de-tabs/Component.vue
@@ -27,6 +27,7 @@
           :lazy="isEditMode"
           :label="tabItem.title"
           :name="tabItem.name"
+          v-if="!tabItem.hidden"
         >
           <template #label>
             <div class="custom-tab-title" @mousedown.stop>
@@ -90,33 +91,35 @@
         v-for="(tabItem, index) in element.propValue"
         :class="{ 'switch-hidden': element.editableTabsValue !== tabItem.name }"
       >
-        <de-canvas
-          v-if="isEdit && !mobileInPc"
-          :ref="'tabCanvas_' + index"
-          :component-data="tabItem.componentData"
-          :canvas-style-data="canvasStyleData"
-          :canvas-view-info="canvasViewInfo"
-          :canvas-id="element.id + '--' + tabItem.name"
-          :class="moveActive ? 'canvas-move-in' : ''"
-          :canvas-position="'tab'"
-          :canvas-active="element.editableTabsValue === tabItem.name"
-          :font-family="fontFamily"
-        ></de-canvas>
-        <de-preview
-          v-else
-          :ref="'dashboardPreview'"
-          :dv-info="dvInfo"
-          :cur-gap="curPreviewGap"
-          :component-data="tabItem.componentData"
-          :canvas-style-data="{}"
-          :canvas-view-info="canvasViewInfo"
-          :canvas-id="element.id + '--' + tabItem.name"
-          :preview-active="element.editableTabsValue === tabItem.name"
-          :show-position="showPosition"
-          :outer-scale="scale"
-          :font-family="fontFamily"
-          :outer-search-count="searchCount"
-        ></de-preview>
+        <template v-if="!tabItem.hidden">
+          <de-canvas
+            v-if="isEdit && !mobileInPc"
+            :ref="'tabCanvas_' + index"
+            :component-data="tabItem.componentData"
+            :canvas-style-data="canvasStyleData"
+            :canvas-view-info="canvasViewInfo"
+            :canvas-id="element.id + '--' + tabItem.name"
+            :class="moveActive ? 'canvas-move-in' : ''"
+            :canvas-position="'tab'"
+            :canvas-active="element.editableTabsValue === tabItem.name"
+            :font-family="fontFamily"
+          ></de-canvas>
+          <de-preview
+            v-else
+            :ref="'dashboardPreview'"
+            :dv-info="dvInfo"
+            :cur-gap="curPreviewGap"
+            :component-data="tabItem.componentData"
+            :canvas-style-data="{}"
+            :canvas-view-info="canvasViewInfo"
+            :canvas-id="element.id + '--' + tabItem.name"
+            :preview-active="element.editableTabsValue === tabItem.name"
+            :show-position="showPosition"
+            :outer-scale="scale"
+            :font-family="fontFamily"
+            :outer-search-count="searchCount"
+          ></de-preview>
+        </template>
       </div>
     </de-custom-tab>
     <el-dialog
@@ -359,6 +362,7 @@ function addTab() {
   const newTab = {
     name: newName,
     title: t('visualization.new_tab'),
+    hidden: false,
     componentData: [],
     closable: true
   }
@@ -723,6 +727,8 @@ onMounted(() => {
     eventBus.on('onTabMoveIn-' + element.value.id, componentMoveIn)
     eventBus.on('onTabMoveOut-' + element.value.id, componentMoveOut)
     eventBus.on('onTabSortChange-' + element.value.id, reShow)
+    eventBus.on('onTabDelete-' + element.value.id, deleteCur)
+    eventBus.on('onTabCopy-' + element.value.id, copyCur)
   }
   currentInstance = getCurrentInstance()
   initCarousel()
@@ -749,6 +755,8 @@ onBeforeUnmount(() => {
     eventBus.off('onTabMoveIn-' + element.value.id, componentMoveIn)
     eventBus.off('onTabMoveOut-' + element.value.id, componentMoveOut)
     eventBus.off('onTabSortChange-' + element.value.id, reShow)
+    eventBus.off('onTabDelete-' + element.value.id, deleteCur)
+    eventBus.off('onTabCopy-' + element.value.id, copyCur)
   }
 })
 onBeforeMount(() => {
diff --git a/core/core-frontend/src/custom-component/de-tabs/CustomTabsSortSide.vue b/core/core-frontend/src/custom-component/de-tabs/CustomTabsSortSide.vue
new file mode 100644
index 0000000000..63288b80e8
--- /dev/null
+++ b/core/core-frontend/src/custom-component/de-tabs/CustomTabsSortSide.vue
@@ -0,0 +1,187 @@
+<template>
+  <div style="display: flex; width: 100%">
+    <div style="flex: 1; min-width: 0">
+      <draggable :list="config.propValue" animation="300" class="drag-list" @end="onSortChange">
+        <template #item="{ element }">
+          <span
+            :key="element.name"
+            class="item-dimension"
+            :class="{ 'item-dimension-dark': themes === 'dark' }"
+            :title="element.title"
+          >
+            <el-icon size="20px">
+              <Icon name="drag"><drag class="svg-icon" /></Icon>
+            </el-icon>
+            <span class="item-span">
+              {{ element.title }}
+            </span>
+          </span>
+        </template>
+      </draggable>
+    </div>
+    <div style="width: 80px">
+      <div v-for="item in config.propValue" :key="item" class="item-icon">
+        <el-icon class="component-base" @click="onDelete(item)">
+          <Icon name="dv-show"><Delete class="svg-icon opt-icon" /></Icon>
+        </el-icon>
+        <el-icon
+          v-show="item.hidden"
+          class="component-base component-icon-display"
+          @click="() => (item['hidden'] = false)"
+        >
+          <Icon name="dv-eye-close"><dvEyeClose class="svg-icon opt-icon" /></Icon>
+        </el-icon>
+        <el-icon
+          v-show="!item.hidden"
+          class="component-base"
+          @click="() => (item['hidden'] = true)"
+        >
+          <Icon name="dv-show"><dvShow class="svg-icon opt-icon" /></Icon>
+        </el-icon>
+
+        <el-icon v-show="!item.hidden" class="component-base" @click="onCopy(item)">
+          <Icon name="dv-show"><CopyDocument class="svg-icon opt-icon" /></Icon>
+        </el-icon>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import drag from '@/assets/svg/drag.svg'
+import draggable from 'vuedraggable'
+import { 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'
+import dvShow from '@/assets/svg/dv-show.svg'
+
+const snapshotStore = snapshotStoreWithOut()
+
+const props = withDefaults(
+  defineProps<{
+    themes?: EditorTheme
+    config: any
+  }>(),
+  {
+    themes: 'dark',
+    config: {
+      propValue: []
+    }
+  }
+)
+
+const { config, themes } = toRefs(props)
+
+const onSortChange = () => {
+  snapshotStore.recordSnapshotCache('tab-sort-save')
+  eventBus.emit('onTabSortChange-' + config.value.id)
+}
+
+const onDelete = item => {
+  snapshotStore.recordSnapshotCache('tab')
+  eventBus.emit('onTabDelete-' + config.value.id, deepCopy(item))
+}
+
+const onCopy = item => {
+  snapshotStore.recordSnapshotCache('tab')
+  eventBus.emit('onTabCopy-' + config.value.id, deepCopy(item))
+}
+import { ElIcon } from 'element-plus-secondary'
+import Icon from '../../components/icon-custom/src/Icon.vue'
+import { deepCopy } from '@/utils/utils'
+</script>
+
+<style scoped lang="less">
+.drag-list {
+  overflow: auto;
+  max-height: 400px;
+}
+
+.item-icon {
+  height: 30px;
+  padding: 2px;
+  margin: 2px !important;
+  text-align: left;
+  color: #606266;
+  display: flex;
+  align-items: center;
+}
+
+.item-dimension {
+  padding: 2px;
+  margin: 2px;
+  border: solid 1px #eee;
+  text-align: left;
+  color: #606266;
+  /*background-color: rgba(35,46,64,.05);*/
+  background-color: white;
+  display: flex;
+  align-items: center;
+}
+
+.item-icon {
+  cursor: move;
+  margin: 0 2px;
+}
+
+.item-span {
+  display: inline-block;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.blackTheme .item-dimension {
+  border: solid 1px;
+  border-color: var(--ed-border-color);
+  color: var(--TextPrimary);
+  background-color: var(--MainBG);
+}
+
+.item-dimension-dark {
+  border: solid 1px;
+  border-color: var(--TableBorderColor);
+  color: var(--TextPrimary);
+  background-color: var(--MainBG);
+}
+
+.item-dimension + .item-dimension {
+  margin-top: 6px;
+}
+
+.item-dimension:hover {
+  color: #1890ff;
+  background: #e8f4ff;
+  border-color: #a3d3ff;
+  cursor: pointer;
+}
+
+.blackTheme .item-dimension:hover {
+  color: var(--Main);
+  background: var(--ContentBG);
+  cursor: pointer;
+}
+
+.component-base {
+  cursor: pointer;
+  height: 22px !important;
+  width: 22px !important;
+  border-radius: 4px;
+  padding: 0 4px;
+  color: #a6a6a6;
+
+  .opt-icon {
+    font-size: 16px;
+  }
+
+  &:hover {
+    background: rgba(235, 235, 235, 0.1);
+  }
+
+  &:active {
+    background: rgba(235, 235, 235, 0.1);
+  }
+}
+</style>