refactor(数据大屏): 数据大屏跳转弹框支持配色 (#17570)

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%;

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

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

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: '資料匹配方式',

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: '数据匹配方式',

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)
   })

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
 }