From ade912687c7f4555101233d8d53568ffd6262a6c 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: Tue, 26 May 2026 11:29:08 +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):=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E9=A2=84=E8=A7=88=E6=93=8D=E4=BD=9C=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E6=8E=A7=E5=88=B6=20(#18486)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dashboard-style/OverallSetting.vue        | 24 ++++++++++++++++++
 .../canvas/ComponentWrapper.vue               |  7 +++++-
 .../visualization/CanvasBaseSetting.vue       | 25 +++++++++++++++++++
 core/core-frontend/src/locales/en.ts          |  2 ++
 core/core-frontend/src/locales/tw.ts          |  2 ++
 core/core-frontend/src/locales/zh-CN.ts       |  2 ++
 core/core-frontend/src/utils/canvasUtils.ts   |  6 +++++
 .../editor/util/dataVisualization.ts          |  1 +
 8 files changed, 68 insertions(+), 1 deletion(-)

diff --git a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue
index d41be9fd6c..655fce7f53 100644
--- a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue
+++ b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue
@@ -255,6 +255,30 @@
         </span>
       </el-checkbox>
     </el-form-item>
+    <el-form-item
+      v-show="dvInfo.type === 'dashboard'"
+      style="margin-bottom: 8px"
+      :class="'form-item-' + themes"
+    >
+      <el-checkbox
+        :effect="themes"
+        size="small"
+        v-model="canvasStyleData.suspensionViewButtonAvailable"
+        @change="themeChange"
+      >
+        <span class="data-area-label">
+          <span style="margin-right: 4px"> {{ t('visualization.hover_button_tips') }}</span>
+          <el-tooltip class="item" :effect="toolTip" placement="bottom">
+            <template #content>
+              <div>{{ t('visualization.preview_effect') }}</div>
+            </template>
+            <el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
+              <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
+            </el-icon>
+          </el-tooltip>
+        </span>
+      </el-checkbox>
+    </el-form-item>
     <el-form-item
       v-show="dvInfo.type === 'dashboard'"
       class="form-item"
diff --git a/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue b/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
index d13ea75bde..03b5c2a6b8 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
@@ -459,7 +459,12 @@ onBeforeUnmount(() => {
       </el-icon>
     </div>
     <component-edit-bar
-      v-if="!showPositionActive.includes('canvas') && !props.isSelector"
+      v-if="
+        !showPositionActive.includes('canvas') &&
+        !props.isSelector &&
+        (canvasStyleData.suspensionViewButtonAvailable === undefined ||
+          canvasStyleData.suspensionViewButtonAvailable)
+      "
       class="wrapper-edit-bar"
       ref="componentEditBarRef"
       :canvas-id="canvasId"
diff --git a/core/core-frontend/src/components/visualization/CanvasBaseSetting.vue b/core/core-frontend/src/components/visualization/CanvasBaseSetting.vue
index baf01396d3..2b21f64dd6 100644
--- a/core/core-frontend/src/components/visualization/CanvasBaseSetting.vue
+++ b/core/core-frontend/src/components/visualization/CanvasBaseSetting.vue
@@ -66,6 +66,31 @@
         </el-checkbox>
       </el-form-item>
 
+      <el-form-item
+        v-if="!isDesktopFlag"
+        class="form-item no-margin-bottom"
+        :class="'form-item-' + themes"
+      >
+        <el-checkbox
+          size="small"
+          :effect="themes"
+          v-model="canvasStyleData.suspensionViewButtonAvailable"
+          @change="onThemeChange"
+        >
+          <div style="display: flex; line-height: 14px">
+            <span style="margin-right: 4px">{{ t('visualization.hover_button_tips') }}</span>
+            <el-tooltip class="item" :effect="themes" placement="bottom">
+              <template #content>
+                <div>{{ t('visualization.preview_effect') }}</div>
+              </template>
+              <el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
+                <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
+              </el-icon>
+            </el-tooltip>
+          </div>
+        </el-checkbox>
+      </el-form-item>
+
       <el-form-item class="form-item no-margin-bottom" :class="'form-item-' + themes">
         <el-checkbox
           :effect="themes"
diff --git a/core/core-frontend/src/locales/en.ts b/core/core-frontend/src/locales/en.ts
index 9ec7fee533..fb5b58568c 100644
--- a/core/core-frontend/src/locales/en.ts
+++ b/core/core-frontend/src/locales/en.ts
@@ -2982,6 +2982,8 @@ export default {
     column_name: 'Field name'
   },
   visualization: {
+    hover_button_tips: 'Display chart action buttons',
+    preview_effect: 'Takes effect in preview mode',
     img_can_not_null: 'Image cannot be empty',
     outer_params_type_tips1:
       "When the type is 'filter', it only applies to text dropdown, text tree, and number dropdown. For text tree filtering format, separate multiple levels with '-de-'",
diff --git a/core/core-frontend/src/locales/tw.ts b/core/core-frontend/src/locales/tw.ts
index 88eae6188e..a800e75f3d 100644
--- a/core/core-frontend/src/locales/tw.ts
+++ b/core/core-frontend/src/locales/tw.ts
@@ -2900,6 +2900,8 @@ export default {
     column_name: '欄位名稱'
   },
   visualization: {
+    hover_button_tips: '顯示圖表操作按鈕',
+    preview_effect: '預覽時生效',
     img_can_not_null: '圖片不能為空',
     outer_params_type_tips1:
       "類型為過濾時僅對文字下拉、文字樹、數字下拉有效。文字樹的過濾格式中，多級之間使用 '-de-' 分隔",
diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts
index 7ced36dc7a..e8c9178a36 100644
--- a/core/core-frontend/src/locales/zh-CN.ts
+++ b/core/core-frontend/src/locales/zh-CN.ts
@@ -2906,6 +2906,8 @@ export default {
     column_name: '字段名称'
   },
   visualization: {
+    hover_button_tips: '显示图表操作按钮',
+    preview_effect: '预览时生效',
     img_can_not_null: '图片不能为空',
     outer_params_type_tips1:
       "类型为过滤时仅对文本下拉、文本树、数字下拉，文本树的过滤格式多级之间使用'-de-' 隔离",
diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts
index 8ede7eeb60..c17eb0d09b 100644
--- a/core/core-frontend/src/utils/canvasUtils.ts
+++ b/core/core-frontend/src/utils/canvasUtils.ts
@@ -318,6 +318,12 @@ export function historyAdaptor(
   canvasStyleResult.dashboard['gapMode'] = canvasStyleResult.dashboard['gapMode'] || 'middle'
   canvasStyleResult.component['seniorStyleSetting'] =
     canvasStyleResult.component['seniorStyleSetting'] || deepCopy(SENIOR_STYLE_SETTING_LIGHT)
+
+  canvasStyleResult['suspensionViewButtonAvailable'] =
+    canvasStyleResult['suspensionViewButtonAvailable'] === undefined
+      ? true
+      : canvasStyleResult['suspensionViewButtonAvailable']
+
   canvasStyleResult['suspensionButtonAvailable'] =
     canvasStyleResult['suspensionButtonAvailable'] === undefined
       ? false
diff --git a/core/core-frontend/src/views/chart/components/editor/util/dataVisualization.ts b/core/core-frontend/src/views/chart/components/editor/util/dataVisualization.ts
index 5b7b518fe2..c80bc70177 100644
--- a/core/core-frontend/src/views/chart/components/editor/util/dataVisualization.ts
+++ b/core/core-frontend/src/views/chart/components/editor/util/dataVisualization.ts
@@ -97,6 +97,7 @@ export const DEFAULT_CANVAS_STYLE_DATA_BASE = {
   popupAvailable: true, // 弹窗区域是否可用 默认为true
   popupButtonAvailable: true, // 弹框区域显示按钮是否可用 默认为true
   suspensionButtonAvailable: false, // 悬浮按钮是否可用 默认false
+  suspensionViewButtonAvailable: true, // 图表悬浮按钮是否可用 默认true
   screenAdaptor: 'widthFirst', // 屏幕适配方式 widthFirst=宽度优先 heightFirst=高度优先 full=铺满全屏 keepSize=不缩放
   dashboardAdaptor: 'keepHeightAndWidth', //仪表板预览展示适配方式 keepHeightAndWidth=高度宽度独立缩放(默认模式)，withWidth=跟随宽度
   scale: 60,