From 8d4b2320abe1c18dacbb97296a7fdbedbf7aa970 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: Wed, 10 Dec 2025 15:13:44 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):?=
 =?UTF-8?q?=20=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F=E8=B7=B3=E8=BD=AC?=
 =?UTF-8?q?=E5=BC=B9=E6=A1=86=E6=94=AF=E6=8C=81=E9=85=8D=E8=89=B2=20(#1757?=
 =?UTF-8?q?0)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../visualization/DePreviewPopDialog.vue      | 18 +++++++-
 .../component-background/CanvasBackground.vue | 46 +++++++++++++++++++
 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   |  3 ++
 .../editor/util/dataVisualization.ts          |  2 +
 7 files changed, 73 insertions(+), 2 deletions(-)

diff --git a/core/core-frontend/src/components/visualization/DePreviewPopDialog.vue b/core/core-frontend/src/components/visualization/DePreviewPopDialog.vue
index 1262eb11d7..c0b52c37eb 100644
--- a/core/core-frontend/src/components/visualization/DePreviewPopDialog.vue
+++ b/core/core-frontend/src/components/visualization/DePreviewPopDialog.vue
@@ -27,6 +27,10 @@
 import { computed, reactive, ref } from 'vue'
 import { useEmbedded } from '@/store/modules/embedded'
 import { XpackComponent } from '@/components/plugin'
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import { storeToRefs } from 'pinia'
+const dvMainStore = dvMainStoreWithOut()
+const { canvasStyleData } = storeToRefs(dvMainStore)
 const state = reactive({
   dialogShow: false,
   name: '',
@@ -39,9 +43,16 @@ const xpackIframe = ref()
 const embeddedStore = useEmbedded()
 const dialogStyle = computed(() => {
   if (state.fullscreen) {
-    return {}
+    return [
+      { '--ed-dialog-bg-color': canvasStyleData.value.dialogBackgroundColor },
+      { '--ed-dialog__close-button': canvasStyleData.value.dialogButton }
+    ]
   } else {
-    return { height: state.height }
+    return [
+      { '--ed-dialog-bg-color': canvasStyleData.value.dialogBackgroundColor },
+      { '--ed-dialog__close-button': canvasStyleData.value.dialogButton },
+      { height: state.height }
+    ]
   }
 })
 
@@ -82,6 +93,9 @@ defineExpose({
 <style lang="less">
 .preview_pop_custom {
   overflow: hidden;
+  .ed-dialog__close {
+    color: var(--ed-dialog__close-button);
+  }
   .preview-main-frame-outer {
     width: 100%;
     height: 100%;
diff --git a/core/core-frontend/src/components/visualization/component-background/CanvasBackground.vue b/core/core-frontend/src/components/visualization/component-background/CanvasBackground.vue
index c9146cfb13..cff2cba8d7 100644
--- a/core/core-frontend/src/components/visualization/component-background/CanvasBackground.vue
+++ b/core/core-frontend/src/components/visualization/component-background/CanvasBackground.vue
@@ -112,6 +112,43 @@
           <img-view-dialog v-model="state.dialogVisible" :image-url="state.dialogImageUrl" />
         </div>
       </div>
+      <el-divider class="m-divider" :class="'m-divider-' + themes"></el-divider>
+      <div class="indented-container">
+        <div class="indented-item">
+          <el-form-item
+            class="form-item"
+            :class="'form-item-' + themes"
+            :label="t('visualization.jump_dialog_background')"
+          >
+            <el-color-picker
+              v-model="canvasStyleData.dialogBackgroundColor"
+              :effect="themes"
+              :trigger-width="computedBackgroundColorPickerWidth"
+              is-custom
+              show-alpha
+              class="color-picker-style"
+              :predefine="state.predefineColors"
+              @change="onBackgroundChange"
+            />
+          </el-form-item>
+          <el-form-item
+            class="form-item"
+            :class="'form-item-' + themes"
+            :label="t('visualization.jump_dialog_button')"
+          >
+            <el-color-picker
+              v-model="canvasStyleData.dialogButton"
+              :effect="themes"
+              :trigger-width="computedBackgroundColorPickerWidth"
+              is-custom
+              show-alpha
+              class="color-picker-style"
+              :predefine="state.predefineColors"
+              @change="onBackgroundChange"
+            />
+          </el-form-item>
+        </div>
+      </div>
     </el-form>
   </div>
 </template>
@@ -392,6 +429,15 @@ watch(
     color: #757575;
   }
 }
+
+.m-divider {
+  border-color: rgba(31, 35, 41, 0.15);
+  margin: 8px 0 8px;
+}
+
+.m-divider-dark {
+  border-color: rgba(233, 236, 241, 0.15) !important;
+}
 </style>
 
 <style lang="less">
diff --git a/core/core-frontend/src/locales/en.ts b/core/core-frontend/src/locales/en.ts
index 59cbb593b4..51dce14174 100644
--- a/core/core-frontend/src/locales/en.ts
+++ b/core/core-frontend/src/locales/en.ts
@@ -2945,6 +2945,8 @@ export default {
     column_name: 'Field name'
   },
   visualization: {
+    jump_dialog_background: 'Jump pop-up background color',
+    jump_dialog_button: 'Jump pop-up button color',
     sqlbot_query_tips: 'Smart Data Query',
     cur_sq_dataset: 'Currently selected dataset:',
     data_match_type: 'Data match type',
diff --git a/core/core-frontend/src/locales/tw.ts b/core/core-frontend/src/locales/tw.ts
index ec36f1abf7..54cfbd1534 100644
--- a/core/core-frontend/src/locales/tw.ts
+++ b/core/core-frontend/src/locales/tw.ts
@@ -2864,6 +2864,8 @@ export default {
     column_name: '欄位名稱'
   },
   visualization: {
+    jump_dialog_background: '跳轉彈框背景色',
+    jump_dialog_button: '跳轉彈框按鈕色',
     sqlbot_query_tips: '智能問數',
     cur_sq_dataset: '當前選擇的數據集：',
     data_match_type: '資料匹配方式',
diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts
index 881d4e6696..617a776491 100644
--- a/core/core-frontend/src/locales/zh-CN.ts
+++ b/core/core-frontend/src/locales/zh-CN.ts
@@ -2870,6 +2870,8 @@ export default {
     column_name: '字段名称'
   },
   visualization: {
+    jump_dialog_background: '跳转弹框背景色',
+    jump_dialog_button: '跳转弹框按钮色',
     sqlbot_query_tips: '智能问数',
     cur_sq_dataset: '当前选择的数据集：',
     data_match_type: '数据匹配方式',
diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts
index 13d85a31a7..bbcc65d31b 100644
--- a/core/core-frontend/src/utils/canvasUtils.ts
+++ b/core/core-frontend/src/utils/canvasUtils.ts
@@ -337,6 +337,9 @@ export function historyAdaptor(
     canvasStyleResult['popupButtonAvailable'] === undefined
       ? true
       : canvasStyleResult['popupButtonAvailable'] //兼容弹框区域按钮开关
+  canvasStyleResult['dialogBackgroundColor'] = canvasStyleResult['dialogBackgroundColor'] || '#fff'
+  canvasStyleResult['dialogButton'] = canvasStyleResult['dialogButton'] || '#020408'
+
   canvasDataResult.forEach(componentItem => {
     historyItemAdaptor(componentItem, reportFilterInfo, attachInfo, canvasVersion, canvasInfo)
   })
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 53ac94ebdf..7463ad933c 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
@@ -126,6 +126,8 @@ export const DEFAULT_CANVAS_STYLE_DATA_DARK = {
   themeId: '10002',
   color: '#fff',
   backgroundColor: '#020408',
+  dialogBackgroundColor: '#fff',
+  dialogButton: '#020408',
   dashboard: DEFAULT_DASHBOARD_STYLE_DARK,
   component: PANEL_CHART_INFO_DARK
 }