From 54578b45b83274d300d996ab6488bbbbc60b9b36 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Mon, 13 May 2024 15:23:23 +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=BF=87=E6=BB=A4?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=8A=9F=E8=83=BD=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor/editor-style/VQueryChartStyle.vue  | 147 ++++++++++++++----
 .../views/chart/components/editor/index.vue   |   9 --
 2 files changed, 119 insertions(+), 37 deletions(-)

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 06b0810679..4d914de2eb 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
@@ -27,21 +27,36 @@ const { chart } = toRefs(props)
   <div class="attr-style">
     <el-row class="de-collapse-style">
       <el-collapse v-model="state.styleActiveNames" class="style-collapse">
-        <el-collapse-item :themes="themes" name="component" :title="t('visualization.module')">
+        <el-collapse-item :effect="themes" name="component" :title="t('visualization.module')">
           <el-form label-position="top">
-            <el-form-item class="form-item margin-bottom-8">
-              <el-checkbox size="small" v-model="chart.customStyle.component.titleShow">
+            <el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
+              <el-checkbox
+                :effect="themes"
+                size="small"
+                v-model="chart.customStyle.component.titleShow"
+              >
                 {{ t('chart.show') + t('chart.title') }}
               </el-checkbox>
             </el-form-item>
-            <el-form-item class="form-item" style="padding-left: 20px">
+            <el-form-item
+              class="form-item"
+              style="padding-left: 20px"
+              :class="'form-item-' + themes"
+            >
               <el-input
+                :effect="themes"
                 :disabled="!chart.customStyle.component.titleShow"
                 v-model.lazy="chart.customStyle.component.title"
               />
             </el-form-item>
-            <el-form-item label="标题颜色" class="form-item" style="padding-left: 20px">
+            <el-form-item
+              label="标题颜色"
+              class="form-item"
+              style="padding-left: 20px"
+              :class="'form-item-' + themes"
+            >
               <el-color-picker
+                :effect="themes"
                 v-model="chart.customStyle.component.titleColor"
                 :trigger-width="204"
                 :disabled="!chart.customStyle.component.titleShow"
@@ -49,13 +64,22 @@ const { chart } = toRefs(props)
                 :predefine="COLOR_PANEL"
               />
             </el-form-item>
-            <el-form-item class="form-item margin-bottom-8">
-              <el-checkbox size="small" v-model="chart.customStyle.component.labelColorShow">
+            <el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
+              <el-checkbox
+                :effect="themes"
+                size="small"
+                v-model="chart.customStyle.component.labelColorShow"
+              >
                 标签颜色
               </el-checkbox>
             </el-form-item>
-            <el-form-item class="form-item" style="padding-left: 20px">
+            <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.labelColor"
@@ -63,13 +87,22 @@ const { chart } = toRefs(props)
                 :predefine="predefineColors"
               />
             </el-form-item>
-            <el-form-item class="form-item margin-bottom-8">
-              <el-checkbox size="small" v-model="chart.customStyle.component.borderShow">
+            <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-form-item class="form-item" style="padding-left: 20px">
+            <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.borderColor"
@@ -77,13 +110,22 @@ const { chart } = toRefs(props)
                 :predefine="predefineColors"
               />
             </el-form-item>
-            <el-form-item class="form-item margin-bottom-8">
-              <el-checkbox size="small" v-model="chart.customStyle.component.textColorShow">
+            <el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
+              <el-checkbox
+                :effect="themes"
+                size="small"
+                v-model="chart.customStyle.component.textColorShow"
+              >
                 提示文字颜色
               </el-checkbox>
             </el-form-item>
-            <el-form-item class="form-item" style="padding-left: 20px">
+            <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.text"
@@ -91,13 +133,22 @@ const { chart } = toRefs(props)
                 :predefine="predefineColors"
               />
             </el-form-item>
-            <el-form-item class="form-item margin-bottom-8">
-              <el-checkbox size="small" v-model="chart.customStyle.component.bgColorShow">
+            <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('chart.custom_case') + t('chart.backgroundColor') }}
               </el-checkbox>
             </el-form-item>
-            <el-form-item class="form-item" style="padding-left: 20px">
+            <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"
@@ -106,30 +157,47 @@ const { chart } = toRefs(props)
               />
             </el-form-item>
 
-            <el-divider class="m-divider" />
-            <el-form-item class="form-item" label="展示按钮">
-              <el-checkbox-group v-model="chart.customStyle.component.btnList">
-                <el-checkbox size="small" disabled label="sure">
+            <el-divider :effect="themes" class="m-divider" />
+            <el-form-item
+              :effect="themes"
+              class="form-item"
+              label="展示按钮"
+              :class="'form-item-' + themes"
+            >
+              <el-checkbox-group :effect="themes" v-model="chart.customStyle.component.btnList">
+                <el-checkbox :effect="themes" size="small" disabled label="sure">
                   {{ t('commons.adv_search.search') }}
                 </el-checkbox>
-                <el-checkbox size="small" label="clear">
+                <el-checkbox :effect="themes" size="small" label="clear">
                   {{ t('commons.clear') }}
                 </el-checkbox>
-                <el-checkbox size="small" label="reset">
+                <el-checkbox :effect="themes" size="small" label="reset">
                   {{ t('commons.adv_search.reset') }}
                 </el-checkbox>
               </el-checkbox-group>
             </el-form-item>
-            <el-form-item class="form-item" :label="t('chart.label_position')">
-              <el-radio-group class="icon-radio-group" v-model="chart.customStyle.component.layout">
-                <el-radio label="vertical">
+            <el-form-item
+              :effect="themes"
+              class="form-item"
+              :label="t('chart.label_position')"
+              :class="'form-item-' + themes"
+            >
+              <el-radio-group
+                :effect="themes"
+                class="icon-radio-group"
+                v-model="chart.customStyle.component.layout"
+              >
+                <el-radio :effect="themes" label="vertical">
                   <el-tooltip effect="dark" placement="top">
                     <template #content>
                       {{ t('chart.text_pos_top') }}
                     </template>
                     <div
                       class="icon-btn"
-                      :class="{ active: chart.customStyle.component.layout === 'vertical' }"
+                      :class="{
+                        dark: themes === 'dark',
+                        active: chart.customStyle.component.layout === 'vertical'
+                      }"
                     >
                       <el-icon>
                         <Icon name="icon_title-top-align_outlined" />
@@ -145,7 +213,10 @@ const { chart } = toRefs(props)
                     </template>
                     <div
                       class="icon-btn"
-                      :class="{ active: chart.customStyle.component.layout === 'horizontal' }"
+                      :class="{
+                        dark: themes === 'dark',
+                        active: chart.customStyle.component.layout === 'horizontal'
+                      }"
                     >
                       <el-icon>
                         <Icon name="icon_title-left-align_outlined" />
@@ -190,6 +261,26 @@ const { chart } = toRefs(props)
   margin: 0 0 8px;
 }
 
+:deep(.form-item-dark) {
+  .ed-form-item__label {
+    color: @dv-canvas-main-font-color !important;
+  }
+
+  &.select-append {
+    .ed-input-group__append {
+      background-color: transparent;
+    }
+    .dv-dark {
+      & > .ed-input__wrapper {
+        background-color: #1a1a1a;
+      }
+      .ed-input-group__append .ed-select {
+        margin: 0 -20px;
+      }
+    }
+  }
+}
+
 .icon-btn {
   font-size: 16px;
   line-height: 16px;
diff --git a/core/core-frontend/src/views/chart/components/editor/index.vue b/core/core-frontend/src/views/chart/components/editor/index.vue
index 212bc5bc60..f8ef28dcc3 100644
--- a/core/core-frontend/src/views/chart/components/editor/index.vue
+++ b/core/core-frontend/src/views/chart/components/editor/index.vue
@@ -1516,15 +1516,6 @@ const drop = (ev: MouseEvent, type = 'xAxis') => {
 
           <el-row style="height: calc(100vh - 110px); overflow-y: auto">
             <div class="query-style-tab" v-if="view.type === 'VQuery'">
-              <div class="tab-container" style="width: 100%">
-                <el-tabs
-                  class="tab-header"
-                  :class="{ dark: themes === 'dark' }"
-                  v-model="tabActiveVQuery"
-                >
-                  <el-tab-pane name="style" :label="t('chart.chart_style')"> </el-tab-pane>
-                </el-tabs>
-              </div>
               <div style="padding-top: 1px">
                 <VQueryChartStyle :chart="view" :themes="themes" />
               </div>