feat(仪表板、数据大屏): 增加图表预览操作按钮控制 (#18486)

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"

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"

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"

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

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-' 分隔",

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-' 隔离",

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

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,