From 0976825070cd00bd2302217e424bfad5397a74e0 Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Thu, 6 Feb 2025 10:01:13 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=9F=A5=E8=AF=A2=E7=BB=84=E4=BB=B6):=20?=
 =?UTF-8?q?=E6=8A=8Acheckbox=E5=8B=BE=E9=80=89=E6=A1=86=E5=8E=BB=E6=8E=89?=
 =?UTF-8?q?=EF=BC=8C=E6=B2=A1=E6=9C=89=E6=84=8F=E4=B9=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../custom-component/v-query/Component.vue    |  8 +-
 .../modules/data-visualization/dvMain.ts      |  2 -
 .../editor/editor-style/VQueryChartStyle.vue  | 90 ++++++++-----------
 3 files changed, 40 insertions(+), 60 deletions(-)

diff --git a/core/core-frontend/src/custom-component/v-query/Component.vue b/core/core-frontend/src/custom-component/v-query/Component.vue
index b86c6cdca7..782a7ea5d6 100644
--- a/core/core-frontend/src/custom-component/v-query/Component.vue
+++ b/core/core-frontend/src/custom-component/v-query/Component.vue
@@ -76,8 +76,6 @@ const defaultStyle = {
   titleShow: false,
   titleColor: '',
   textColorShow: false,
-  bgColorShow: false,
-  borderShow: false,
   labelShow: true,
   title: '',
   labelColor: '#1f2329',
@@ -145,9 +143,7 @@ const { datasetFieldList } = comInfo()
 
 const setCustomStyle = val => {
   const {
-    borderShow,
     borderColor,
-    bgColorShow,
     btnList,
     titleLayout,
     labelColor,
@@ -172,8 +168,8 @@ const setCustomStyle = val => {
     placeholderShow,
     labelShow
   } = val
-  customStyle.background = bgColorShow ? bgColor || '' : ''
-  customStyle.border = borderShow ? borderColor || '' : ''
+  customStyle.background = bgColor || ''
+  customStyle.border = borderColor || ''
   customStyle.btnList = [...btnList]
   customStyle.layout = layout
   customStyle.placeholderShow = placeholderShow ?? true
diff --git a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts b/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
index 3f849381f7..b3b45184a7 100644
--- a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
+++ b/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
@@ -486,14 +486,12 @@ export const dvMainStore = defineStore('dataVisualization', {
               show: true,
               color,
               titleShow: false,
-              borderShow: false,
               text,
               textColorShow: false,
               labelColor,
               borderColor,
               title: '',
               borderWidth: 1,
-              bgColorShow: false,
               bgColor,
               titleColor,
               titleLayout,
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
index 5e7d0a8eed..a7a25bd25c 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
@@ -298,27 +298,49 @@ const onTitleChange = () => {
         </el-collapse-item>
         <el-collapse-item :effect="themes" name="addition" :title="t('v_query.query_condition')">
           <el-form @keydown.stop.prevent.enter label-position="top">
-            <el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
-              <el-checkbox
-                :effect="themes"
-                size="small"
-                v-model="chart.customStyle.component.borderShow"
-              >
-                {{ t('visualization.board') }}
-              </el-checkbox>
-            </el-form-item>
+            <el-row :gutter="8">
+              <el-col :span="12">
+                <el-form-item
+                  :label="t('visualization.board')"
+                  class="form-item w100"
+                  :class="'form-item-' + themes"
+                >
+                  <el-color-picker
+                    :effect="themes"
+                    :trigger-width="106"
+                    is-custom
+                    v-model="chart.customStyle.component.borderColor"
+                    :predefine="predefineColors"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item
+                  :label="t('chart.background')"
+                  class="form-item w100"
+                  :class="'form-item-' + themes"
+                >
+                  <el-color-picker
+                    :effect="themes"
+                    :trigger-width="106"
+                    is-custom
+                    v-model="chart.customStyle.component.bgColor"
+                    :predefine="predefineColors"
+                  />
+                </el-form-item>
+              </el-col>
+            </el-row>
             <el-form-item
+              :effect="themes"
               class="form-item"
-              style="padding-left: 20px"
+              :label="t('visualization.query_condition_space')"
               :class="'form-item-' + themes"
             >
-              <el-color-picker
+              <el-input-number
+                v-model="chart.customStyle.component.queryConditionSpacing"
+                :min="0"
                 :effect="themes"
-                :trigger-width="108"
-                is-custom
-                v-model="chart.customStyle.component.borderColor"
-                :disabled="!chart.customStyle.component.borderShow"
-                :predefine="predefineColors"
+                controls-position="right"
               />
             </el-form-item>
             <el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
@@ -403,42 +425,6 @@ const onTitleChange = () => {
                 v-model.lazy="currentSearch.queryConditionWidth"
               />
             </el-form-item>
-            <el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
-              <el-checkbox
-                :effect="themes"
-                size="small"
-                v-model="chart.customStyle.component.bgColorShow"
-              >
-                {{ t('visualization.custom_query_bg_color') }}
-              </el-checkbox>
-            </el-form-item>
-            <el-form-item
-              class="form-item"
-              style="padding-left: 20px"
-              :class="'form-item-' + themes"
-            >
-              <el-color-picker
-                :effect="themes"
-                :trigger-width="108"
-                is-custom
-                v-model="chart.customStyle.component.bgColor"
-                :disabled="!chart.customStyle.component.bgColorShow"
-                :predefine="predefineColors"
-              />
-            </el-form-item>
-            <el-form-item
-              :effect="themes"
-              class="form-item"
-              :label="t('visualization.query_condition_space')"
-              :class="'form-item-' + themes"
-            >
-              <el-input-number
-                v-model="chart.customStyle.component.queryConditionSpacing"
-                :min="0"
-                :effect="themes"
-                controls-position="right"
-              />
-            </el-form-item>
           </el-form>
         </el-collapse-item>
         <collapse-switch-item