From b09995677bf54c1e64b8a0a404d434245baedfbd Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Wed, 18 Dec 2024 17:16:02 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):?=
 =?UTF-8?q?=20=E4=BC=98=E5=8C=96tab=E5=92=8C=E5=88=86=E7=BB=84=E7=BB=84?=
 =?UTF-8?q?=E5=90=88=E5=9B=BE=E5=B1=82=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../data-visualization/RealTimeGroup.vue      | 33 +++++++++++++++++--
 .../data-visualization/RealTimeTab.vue        |  1 +
 .../visualization/CanvasCacheDialog.vue       |  4 +--
 .../custom-component/group/GroupPreview.vue   |  1 +
 4 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue b/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue
index 585f277396..d20476762b 100644
--- a/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue
+++ b/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue
@@ -90,6 +90,11 @@ const { areaData } = storeToRefs(composeStore)
 const { curComponent, canvasViewInfo } = storeToRefs(dvMainStore)
 
 const props = defineProps({
+  tabPosition: {
+    type: String,
+    required: false,
+    default: 'main'
+  },
   componentData: []
 })
 
@@ -306,6 +311,7 @@ const expandClick = component => {
                 class="component-item"
                 :class="{
                   'container-item-not-show': !getComponent(index)?.isShow,
+                  'component-item-group-tab': tabPosition === 'groupTab',
                   activated:
                     (curComponent && curComponent?.id === getComponent(index)?.id) ||
                     areaData.components.includes(getComponent(index))
@@ -314,7 +320,7 @@ const expandClick = component => {
               >
                 <div
                   v-show="['DeTabs'].includes(getComponent(index)?.component)"
-                  style="width: 22px; padding-left: 3px"
+                  style="width: 22px"
                 >
                   <el-icon class="component-expand" @click="expandClick(getComponent(index))">
                     <Icon
@@ -479,7 +485,7 @@ const expandClick = component => {
           font-size: 12px;
           margin-left: 10px;
           position: relative;
-          min-width: 43px;
+          min-width: 10px;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
@@ -588,6 +594,29 @@ const expandClick = component => {
 .custom-teleport {
   background: #1a1a1a !important;
 }
+.component-item-group-tab {
+  padding-left: 60px !important;
+}
+
+.component-expand {
+  cursor: pointer;
+  height: 16px !important;
+  width: 16px !important;
+  border-radius: 2px;
+  padding: 0 2px;
+
+  .expand-icon {
+    font-size: 10px;
+  }
+
+  &:hover {
+    background: rgba(235, 235, 235, 0.1);
+  }
+
+  &:active {
+    background: rgba(235, 235, 235, 0.1);
+  }
+}
 </style>
 
 <style lang="less">
diff --git a/core/core-frontend/src/components/data-visualization/RealTimeTab.vue b/core/core-frontend/src/components/data-visualization/RealTimeTab.vue
index 4d76cdc80e..15349a58bc 100644
--- a/core/core-frontend/src/components/data-visualization/RealTimeTab.vue
+++ b/core/core-frontend/src/components/data-visualization/RealTimeTab.vue
@@ -171,6 +171,7 @@ const expandClick = component => {
               </div>
               <div v-if="getComponent(index)?.expand">
                 <real-time-group
+                  tab-position="groupTab"
                   :component-data="getComponent(index).componentData"
                 ></real-time-group>
               </div>
diff --git a/core/core-frontend/src/components/visualization/CanvasCacheDialog.vue b/core/core-frontend/src/components/visualization/CanvasCacheDialog.vue
index 26afe111a2..5d636e4037 100644
--- a/core/core-frontend/src/components/visualization/CanvasCacheDialog.vue
+++ b/core/core-frontend/src/components/visualization/CanvasCacheDialog.vue
@@ -21,10 +21,10 @@
     </el-row>
     <template #footer>
       <div class="dialog-footer">
-        <el-button type="primary" size="mini" @click="doUseCache(false)"
+        <el-button size="mini" @click="doUseCache(false)">{{ t('visualization.no') }}</el-button>
+        <el-button type="primary" size="mini" @click="doUseCache(true)"
           >{{ t('visualization.yes') }}
         </el-button>
-        <el-button size="mini" @click="doUseCache(true)">{{ t('visualization.no') }}</el-button>
       </div>
     </template>
   </el-dialog>
diff --git a/core/core-frontend/src/custom-component/group/GroupPreview.vue b/core/core-frontend/src/custom-component/group/GroupPreview.vue
index ca11cf8d1d..dfc6d459a7 100644
--- a/core/core-frontend/src/custom-component/group/GroupPreview.vue
+++ b/core/core-frontend/src/custom-component/group/GroupPreview.vue
@@ -84,6 +84,7 @@ const userViewEnlargeOpen = (opt, item) => {
         :config="item"
         :index="index"
         :dv-info="dvInfo"
+        :canvas-view-info="canvasViewInfo"
         :style="customGroupStyle(item)"
         :show-position="showPosition"
         :search-count="searchCount"