From 05c5b5b589785745d14e5ffac577df93806ba63d Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Mon, 22 Apr 2024 16:16:30 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E5=9B=BE=E8=A1=A8):=20=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E4=BF=AE=E6=94=B9=E5=85=AC=E5=85=B1=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=A2=9E=E5=8A=A0=E5=9B=BE=E6=A0=87=E7=AD=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/svg/dv-style-activeFont.svg    |   1 +
 .../assets/svg/dv-style-backgroundColor.svg   |   1 +
 .../src/assets/svg/dv-style-borderColor.svg   |   1 +
 .../common/CommonStyleSet.vue                 | 128 ++++++++++--------
 4 files changed, 75 insertions(+), 56 deletions(-)
 create mode 100644 core/core-frontend/src/assets/svg/dv-style-activeFont.svg
 create mode 100644 core/core-frontend/src/assets/svg/dv-style-backgroundColor.svg
 create mode 100644 core/core-frontend/src/assets/svg/dv-style-borderColor.svg

diff --git a/core/core-frontend/src/assets/svg/dv-style-activeFont.svg b/core/core-frontend/src/assets/svg/dv-style-activeFont.svg
new file mode 100644
index 0000000000..8fe1bc3b1e
--- /dev/null
+++ b/core/core-frontend/src/assets/svg/dv-style-activeFont.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1713773038663" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6292" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M960 64H64C28.8 64 0 92.8 0 128v768c0 35.2 28.8 64 64 64h896c35.2 0 64-28.8 64-64V128c0-35.2-28.8-64-64-64z m-26.56 808h-832v-704h832v704z" p-id="6293"></path><path d="M695.36 735.04c-32.64 0-60.48-9.28-81.92-28.16-22.4-19.2-33.92-44.48-33.92-74.88 0-55.04 32.96-120.96 190.72-120.96h5.12c-0.64-11.52-1.6-18.24-2.24-21.76-0.64-2.88-2.24-7.04-9.6-11.52-3.84-2.24-13.44-6.4-36.48-6.4-49.6 0-49.92 8-50.56 20.16l-0.64 18.24h-88.96l1.28-20.48c5.44-85.76 78.4-96.64 141.76-96.64 40.32 0 72.64 8.64 96.32 25.92 25.6 18.56 38.4 53.12 38.4 102.4v206.72h-88.64v-11.84c-23.68 13.12-50.56 19.2-80.64 19.2z m64.64-147.52c-90.56 0-90.56 31.36-90.56 41.92 0 11.2 4.48 15.68 8.32 18.56 14.4 10.56 45.76 11.52 71.68-1.28 10.88-5.44 19.2-11.84 25.92-20.16v-38.72h-15.36z m-177.6 140.8h-100.16l-45.44-121.92h-137.6L256 728.32H160l165.12-439.36h82.24l175.04 439.36z m-255.36-202.56h80.32l-40.96-110.72-39.36 110.72z"  p-id="6294"></path></svg>
diff --git a/core/core-frontend/src/assets/svg/dv-style-backgroundColor.svg b/core/core-frontend/src/assets/svg/dv-style-backgroundColor.svg
new file mode 100644
index 0000000000..84188fe32e
--- /dev/null
+++ b/core/core-frontend/src/assets/svg/dv-style-backgroundColor.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1713772528957" class="icon" viewBox="0 0 1029 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5278" xmlns:xlink="http://www.w3.org/1999/xlink" width="200.9765625" height="200"><path d="M860.16025 508.587c0-20.48-3.413-40.96-20.48-58.027L505.17325 95.573c-27.306-27.306-68.266-27.306-95.573 0l-98.987 102.4-143.36-153.6c-13.653-13.653-34.133-13.653-47.786 0-13.654 17.067-13.654 37.547 0 51.2l143.36 150.187L20.48025 498.347c-27.307 27.306-27.307 71.68 0 102.4l341.333 354.986c27.307 27.307 68.267 27.307 95.574 0L843.09325 552.96c10.24-13.653 17.067-30.72 17.067-44.373z m-740.693-6.827l191.146-201.387L430.08025 426.667c13.653 13.653 34.133 13.653 47.787 0 13.653-13.654 13.653-37.547 0-51.2L358.40025 249.173l95.573-102.4 337.92 354.987H119.46725z m907.946 334.507c-6.826-75.094-136.533-286.72-136.533-286.72s-126.293 201.386-136.533 286.72C737.28025 976.213 822.61325 993.28 890.88025 993.28c68.267 0 146.773-13.653 136.533-157.013z m0 0"  p-id="5279"></path></svg>
diff --git a/core/core-frontend/src/assets/svg/dv-style-borderColor.svg b/core/core-frontend/src/assets/svg/dv-style-borderColor.svg
new file mode 100644
index 0000000000..3cb03b1910
--- /dev/null
+++ b/core/core-frontend/src/assets/svg/dv-style-borderColor.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1713772449367" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4293" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M770 900c34.242 0 62 27.758 62 62 0 34.242-27.758 62-62 62H254c-34.242 0-62-27.758-62-62 0-34.242 27.758-62 62-62h516z m-78-736c59.05 0 107.032 47.391 107.986 106.214L800 272v33.867c0 19.882-16.118 36-36 36-19.683 0-35.677-15.797-35.995-35.405l-0.005-0.595V272c0-19.683-15.797-35.677-35.405-35.995L692 236H270c-19.683 0-35.677 15.797-35.995 35.405L234 272v424c0 19.683 15.797 35.677 35.405 35.995L270 732h162.756c19.882 0 36 16.118 36 36 0 19.683-15.797 35.677-35.405 36H270c-59.05 0-107.032-47.391-107.986-106.214L162 696V272c0-59.05 47.391-107.032 106.214-107.986L270 164h422z m171.445 200.445l49.497 49.497c9.372 9.372 9.372 24.568 0 33.94l-0.088 0.088-281.16 278.274-95.972 28.583c-8.47 2.522-17.38-2.298-19.902-10.767a16 16 0 0 1 0.228-9.84l31.74-90.946L829.59 364.358c9.387-9.29 24.515-9.252 33.854 0.087z" p-id="4294"></path></svg>
diff --git a/core/core-frontend/src/custom-component/common/CommonStyleSet.vue b/core/core-frontend/src/custom-component/common/CommonStyleSet.vue
index e6e177e4f9..2a05ae332d 100644
--- a/core/core-frontend/src/custom-component/common/CommonStyleSet.vue
+++ b/core/core-frontend/src/custom-component/common/CommonStyleSet.vue
@@ -19,6 +19,8 @@
                 :title="t('chart.text_color')"
                 v-model="styleForm[styleColorKey.value]"
                 class="color-picker-style"
+                :prefix-icon="expandIcon(styleColorKey.icon)"
+                :triggerWidth="styleColorKey.width"
                 is-custom
                 :predefine="state.predefineColors"
                 @change="changeStyle"
@@ -128,48 +130,50 @@
         </el-tooltip>
         <template v-if="styleForm.textAlign">
           <div class="m-divider" :class="'custom-divider-' + themes"></div>
-          <el-tooltip effect="dark" placement="bottom">
-            <template #content>
-              {{ t('chart.text_pos_left') }}
-            </template>
-            <div
-              class="icon-btn"
-              :class="{ dark: themes === 'dark', active: styleForm.textAlign === 'left' }"
-              @click="setPosition('textAlign', 'left')"
-            >
-              <el-icon>
-                <Icon name="icon_left-alignment_outlined" />
-              </el-icon>
-            </div>
-          </el-tooltip>
-          <el-tooltip effect="dark" placement="bottom">
-            <template #content>
-              {{ t('chart.text_pos_center') }}
-            </template>
-            <div
-              class="icon-btn"
-              :class="{ dark: themes === 'dark', active: styleForm.textAlign === 'center' }"
-              @click="setPosition('textAlign', 'center')"
-            >
-              <el-icon>
-                <Icon name="icon_center-alignment_outlined" />
-              </el-icon>
-            </div>
-          </el-tooltip>
-          <el-tooltip effect="dark" placement="bottom">
-            <template #content>
-              {{ t('chart.text_pos_right') }}
-            </template>
-            <div
-              class="icon-btn"
-              :class="{ dark: themes === 'dark', active: styleForm.textAlign === 'right' }"
-              @click="setPosition('textAlign', 'right')"
-            >
-              <el-icon>
-                <Icon name="icon_right-alignment_outlined" />
-              </el-icon>
-            </div>
-          </el-tooltip>
+          <div style="display: flex">
+            <el-tooltip effect="dark" placement="bottom">
+              <template #content>
+                {{ t('chart.text_pos_left') }}
+              </template>
+              <div
+                class="icon-btn"
+                :class="{ dark: themes === 'dark', active: styleForm.textAlign === 'left' }"
+                @click="setPosition('textAlign', 'left')"
+              >
+                <el-icon>
+                  <Icon name="icon_left-alignment_outlined" />
+                </el-icon>
+              </div>
+            </el-tooltip>
+            <el-tooltip effect="dark" placement="bottom">
+              <template #content>
+                {{ t('chart.text_pos_center') }}
+              </template>
+              <div
+                class="icon-btn"
+                :class="{ dark: themes === 'dark', active: styleForm.textAlign === 'center' }"
+                @click="setPosition('textAlign', 'center')"
+              >
+                <el-icon>
+                  <Icon name="icon_center-alignment_outlined" />
+                </el-icon>
+              </div>
+            </el-tooltip>
+            <el-tooltip effect="dark" placement="bottom">
+              <template #content>
+                {{ t('chart.text_pos_right') }}
+              </template>
+              <div
+                class="icon-btn"
+                :class="{ dark: themes === 'dark', active: styleForm.textAlign === 'right' }"
+                @click="setPosition('textAlign', 'right')"
+              >
+                <el-icon>
+                  <Icon name="icon_right-alignment_outlined" />
+                </el-icon>
+              </div>
+            </el-tooltip>
+          </div>
         </template>
         <template v-if="styleForm.headHorizontalPosition">
           <div class="m-divider"></div>
@@ -230,8 +234,8 @@
   </el-row>
 </template>
 
-<script lang="ts" setup>
-import { computed, reactive, ref, toRefs, watch } from 'vue'
+<script lang="tsx" setup>
+import { computed, h, reactive, ref, toRefs, watch } from 'vue'
 import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -253,7 +257,9 @@ const props = withDefaults(
     themes: 'dark'
   }
 )
-
+const expandIcon = (name: string) => {
+  return h(Icon, { className: '', name })
+}
 const { themes, element } = toRefs(props)
 const emits = defineEmits(['onTextChange'])
 const styleMounted = ref({
@@ -287,11 +293,21 @@ const state = reactive({
 })
 
 const styleColorKeyArray = [
-  { value: 'color', label: '颜色' },
-  { value: 'borderColor', label: '边框颜色' },
-  { value: 'headFontColor', label: '头部字体颜色' },
-  { value: 'headFontActiveColor', label: '激活字体颜色' },
-  { value: 'backgroundColor', label: '背景色' }
+  { value: 'color', label: '颜色', width: 90, icon: 'dv-style-color' },
+  { value: 'borderColor', label: '边框颜色', width: 90, icon: 'dv-style-borderColor' },
+  {
+    value: 'headFontColor',
+    label: '头部字体颜色',
+    width: 90,
+    icon: 'dv-style-headFontColor'
+  },
+  {
+    value: 'headFontActiveColor',
+    label: '激活字体颜色',
+    width: 90,
+    icon: 'dv-style-headFontActiveColor'
+  },
+  { value: 'backgroundColor', label: '背景色', width: 90, icon: 'dv-style-backgroundColor' }
 ]
 
 const fontSizeList = computed(() => {
@@ -339,15 +355,15 @@ const styleOptionMountedKeyArray = [
     value: 'fontSize',
     label: '字体大小',
     customOption: fontSizeList.value,
-    width: '80px',
+    width: '90px',
     icon: 'dv-style-fontSize'
   },
   {
     value: 'activeFontSize',
     label: '激活字体大小',
     customOption: fontSizeList.value,
-    width: '80px',
-    icon: 'dv-style-headFontActiveColor'
+    width: '90px',
+    icon: 'dv-style-activeFont'
   }
 ]
 
@@ -357,21 +373,21 @@ const styleOptionKeyArray = [
     value: 'opacity',
     label: '透明度',
     customOption: opacitySizeList,
-    width: '80px',
+    width: '90px',
     icon: 'dv-style-opacity'
   },
   {
     value: 'borderWidth',
     label: '边框宽度',
     customOption: borderWidthList.value,
-    width: '80px',
+    width: '90px',
     icon: 'dv-style-opacity'
   },
   {
     value: 'borderRadius',
     label: '圆角',
     customOption: borderRadiusList.value,
-    width: '80px',
+    width: '90px',
     icon: 'dv-style-borderRadius'
   },
   {