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

---
 .../src/assets/svg/dv-style-borderRadius.svg  |  2 +-
 .../src/assets/svg/dv-style-borderStyle.svg   |  1 +
 .../svg/dv-style-headFontActiveColor.svg      |  2 +-
 .../common/CommonStyleSet.vue                 | 68 ++++++++++++++++---
 4 files changed, 62 insertions(+), 11 deletions(-)
 create mode 100644 core/core-frontend/src/assets/svg/dv-style-borderStyle.svg

diff --git a/core/core-frontend/src/assets/svg/dv-style-borderRadius.svg b/core/core-frontend/src/assets/svg/dv-style-borderRadius.svg
index 65b43af56a..165add9c7e 100644
--- a/core/core-frontend/src/assets/svg/dv-style-borderRadius.svg
+++ b/core/core-frontend/src/assets/svg/dv-style-borderRadius.svg
@@ -1 +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="1689150709983" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4725" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M231.424 227.04128v160.89088h338.37056a63.8976 63.8976 0 0 1 63.8976 63.8976v314.40896H794.624V331.776a104.61184 104.61184 0 0 0-104.61184-104.61184z" p-id="4726" data-spm-anchor-id="a313x.7781069.0.i0" class="selected"></path></svg>
\ No newline at end of file
+<?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="1713521630002" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4283" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M396 140h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z m-44 684h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z m524-204h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM192 344h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z m0 160h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z m0 160h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z m0 160h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z m320 0h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z m160 0h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z m140-284c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V370c0-127-103-230-230-230H484c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h170c87.3 0 158 70.7 158 158v170zM236 96H92c-4.4 0-8 3.6-8 8v144c0 4.4 3.6 8 8 8h144c4.4 0 8-3.6 8-8V104c0-4.4-3.6-8-8-8z m-48 101.6c0 1.3-1.1 2.4-2.4 2.4h-43.2c-1.3 0-2.4-1.1-2.4-2.4v-43.2c0-1.3 1.1-2.4 2.4-2.4h43.2c1.3 0 2.4 1.1 2.4 2.4v43.2zM920 780H776c-4.4 0-8 3.6-8 8v144c0 4.4 3.6 8 8 8h144c4.4 0 8-3.6 8-8V788c0-4.4-3.6-8-8-8z m-48 101.6c0 1.3-1.1 2.4-2.4 2.4h-43.2c-1.3 0-2.4-1.1-2.4-2.4v-43.2c0-1.3 1.1-2.4 2.4-2.4h43.2c1.3 0 2.4 1.1 2.4 2.4v43.2z" p-id="4284"></path></svg>
diff --git a/core/core-frontend/src/assets/svg/dv-style-borderStyle.svg b/core/core-frontend/src/assets/svg/dv-style-borderStyle.svg
new file mode 100644
index 0000000000..58789ef5b9
--- /dev/null
+++ b/core/core-frontend/src/assets/svg/dv-style-borderStyle.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="1713752109906" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4245" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M176 261.75H92v-168h84z m288-168H272v168h192z m288 0H560v168h192z m180 0h-84v168h84z m-798 378H92v126h42z m420 126h84v-126h-84z m-168 0h84v-126h-84z m-168 0h84v-126h-84z m504 0h84v-126h-84z m168 0h42v-126h-42z m42 252H92v84h840z"  p-id="4246"></path></svg>
diff --git a/core/core-frontend/src/assets/svg/dv-style-headFontActiveColor.svg b/core/core-frontend/src/assets/svg/dv-style-headFontActiveColor.svg
index d96792f768..4c12a4e122 100644
--- a/core/core-frontend/src/assets/svg/dv-style-headFontActiveColor.svg
+++ b/core/core-frontend/src/assets/svg/dv-style-headFontActiveColor.svg
@@ -1 +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="1693218467455" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15153" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M116.181404 133.722146 116.181404 441.133425 201.417293 441.133425 201.417293 133.722146 317.598697 133.722146 317.598697 64 0 64 0 133.722146 116.181404 133.722146ZM412.356282 125.799174 412.356282 64 335.263948 64 335.263948 125.799174 412.356282 125.799174ZM335.263948 168.055021 335.263948 441.133425 412.356282 441.133425 412.356282 168.055021 335.263948 168.055021ZM550.003263 168.055021 550.003263 86.184319 472.91093 86.184319 472.91093 168.055021 426.221206 168.055021 426.221206 218.233837 472.91093 218.233837 472.91093 379.33425C472.91093 393.067469 475.263489 404.159517 479.968678 412.610729 484.673868 421.06194 491.098164 427.576318 499.241762 432.154058 507.385359 436.731797 516.795596 439.812922 527.472757 441.397524 538.149917 442.982126 549.4603 443.774415 561.404242 443.774415 569.004932 443.774415 576.786475 443.598351 584.749103 443.246218 592.711731 442.894084 599.950376 442.189827 606.465253 441.133425L606.465253 383.031637C602.845877 383.735905 599.045588 384.264097 595.064275 384.616231 591.082961 384.968365 586.92074 385.144429 582.577488 385.144429 569.547733 385.144429 560.86136 383.031658 556.518108 378.806052 552.174856 374.580447 550.003263 366.129362 550.003263 353.452545L550.003263 218.233837 606.465253 218.233837 606.465253 168.055021 550.003263 168.055021ZM624.673409 64 624.673409 441.133425 701.765741 441.133425 701.765741 64 624.673409 64ZM930.620557 275.279229 805.209786 275.279229C805.571725 269.997222 806.748006 264.011037 808.738662 257.320495 810.729318 250.629953 814.167674 244.291639 819.05383 238.305364 823.939994 232.31909 830.454771 227.301258 838.598368 223.25172 846.741965 219.20218 856.966547 217.177441 869.272429 217.177441 888.09319 217.177441 902.118061 222.107241 911.347469 231.966988 920.576883 241.826734 927.001178 256.264004 930.620557 275.279229L930.620557 275.279229ZM805.209786 322.817057 1007.71289 322.817057C1009.16064 301.689028 1007.350976 281.441637 1002.283853 262.074278 997.216723 242.706918 988.982765 225.45262 977.581728 210.310867 966.180691 195.169113 951.612922 183.10871 933.877978 174.129299 916.143034 165.149886 895.33193 160.660248 871.444045 160.660248 850.089722 160.660248 830.635866 164.357597 813.081888 171.752407 795.527917 179.147217 780.417248 189.270913 767.749427 202.123796 755.081613 214.97668 745.30944 230.206239 738.432627 247.81293 731.555808 265.41962 728.117453 284.434561 728.117453 304.858322 728.117453 325.986351 731.465325 345.35342 738.161171 362.96011 744.857018 380.566801 754.357741 395.708327 766.663622 408.385144 778.969498 421.061962 793.98969 430.833528 811.724634 437.700138 829.459578 444.566747 849.36585 448 871.444045 448 903.29456 448 930.439475 440.957429 952.87961 426.872077 975.319744 412.786724 991.968627 389.370177 1002.826752 356.621733L934.963782 356.621733C932.430221 365.072945 925.55351 373.083869 914.33344 380.654746 903.113376 388.225622 889.721882 392.011004 874.158566 392.011004 852.442304 392.011004 835.793421 386.553012 824.211418 375.636864 812.629414 364.720716 806.295597 347.114289 805.209786 322.817057ZM0 576 1024 576 1024 640 0 640 0 576ZM0 768 1024 768 1024 832 0 832 0 768ZM0 960 768 960 768 1024 0 1024 0 960Z" fill="#666666" p-id="15154"></path></svg>
\ No newline at end of file
+<?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="1693218467455" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15153" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M116.181404 133.722146 116.181404 441.133425 201.417293 441.133425 201.417293 133.722146 317.598697 133.722146 317.598697 64 0 64 0 133.722146 116.181404 133.722146ZM412.356282 125.799174 412.356282 64 335.263948 64 335.263948 125.799174 412.356282 125.799174ZM335.263948 168.055021 335.263948 441.133425 412.356282 441.133425 412.356282 168.055021 335.263948 168.055021ZM550.003263 168.055021 550.003263 86.184319 472.91093 86.184319 472.91093 168.055021 426.221206 168.055021 426.221206 218.233837 472.91093 218.233837 472.91093 379.33425C472.91093 393.067469 475.263489 404.159517 479.968678 412.610729 484.673868 421.06194 491.098164 427.576318 499.241762 432.154058 507.385359 436.731797 516.795596 439.812922 527.472757 441.397524 538.149917 442.982126 549.4603 443.774415 561.404242 443.774415 569.004932 443.774415 576.786475 443.598351 584.749103 443.246218 592.711731 442.894084 599.950376 442.189827 606.465253 441.133425L606.465253 383.031637C602.845877 383.735905 599.045588 384.264097 595.064275 384.616231 591.082961 384.968365 586.92074 385.144429 582.577488 385.144429 569.547733 385.144429 560.86136 383.031658 556.518108 378.806052 552.174856 374.580447 550.003263 366.129362 550.003263 353.452545L550.003263 218.233837 606.465253 218.233837 606.465253 168.055021 550.003263 168.055021ZM624.673409 64 624.673409 441.133425 701.765741 441.133425 701.765741 64 624.673409 64ZM930.620557 275.279229 805.209786 275.279229C805.571725 269.997222 806.748006 264.011037 808.738662 257.320495 810.729318 250.629953 814.167674 244.291639 819.05383 238.305364 823.939994 232.31909 830.454771 227.301258 838.598368 223.25172 846.741965 219.20218 856.966547 217.177441 869.272429 217.177441 888.09319 217.177441 902.118061 222.107241 911.347469 231.966988 920.576883 241.826734 927.001178 256.264004 930.620557 275.279229L930.620557 275.279229ZM805.209786 322.817057 1007.71289 322.817057C1009.16064 301.689028 1007.350976 281.441637 1002.283853 262.074278 997.216723 242.706918 988.982765 225.45262 977.581728 210.310867 966.180691 195.169113 951.612922 183.10871 933.877978 174.129299 916.143034 165.149886 895.33193 160.660248 871.444045 160.660248 850.089722 160.660248 830.635866 164.357597 813.081888 171.752407 795.527917 179.147217 780.417248 189.270913 767.749427 202.123796 755.081613 214.97668 745.30944 230.206239 738.432627 247.81293 731.555808 265.41962 728.117453 284.434561 728.117453 304.858322 728.117453 325.986351 731.465325 345.35342 738.161171 362.96011 744.857018 380.566801 754.357741 395.708327 766.663622 408.385144 778.969498 421.061962 793.98969 430.833528 811.724634 437.700138 829.459578 444.566747 849.36585 448 871.444045 448 903.29456 448 930.439475 440.957429 952.87961 426.872077 975.319744 412.786724 991.968627 389.370177 1002.826752 356.621733L934.963782 356.621733C932.430221 365.072945 925.55351 373.083869 914.33344 380.654746 903.113376 388.225622 889.721882 392.011004 874.158566 392.011004 852.442304 392.011004 835.793421 386.553012 824.211418 375.636864 812.629414 364.720716 806.295597 347.114289 805.209786 322.817057ZM0 576 1024 576 1024 640 0 640 0 576ZM0 768 1024 768 1024 832 0 832 0 768ZM0 960 768 960 768 1024 0 1024 0 960Z"  p-id="15154"></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 f862c84da9..e6e177e4f9 100644
--- a/core/core-frontend/src/custom-component/common/CommonStyleSet.vue
+++ b/core/core-frontend/src/custom-component/common/CommonStyleSet.vue
@@ -22,7 +22,8 @@
                 is-custom
                 :predefine="state.predefineColors"
                 @change="changeStyle"
-              />
+              >
+              </el-color-picker>
             </el-form-item>
           </el-tooltip>
         </template>
@@ -41,12 +42,17 @@
               :class="'form-item-' + themes"
             >
               <el-select
-                style="width: 50px"
+                :style="{ width: styleOptionMountedKey.width }"
                 :effect="themes"
                 v-model="styleMounted[styleOptionMountedKey.value]"
                 size="small"
                 @change="sizeChange(styleOptionMountedKey.value)"
               >
+                <template #prefix>
+                  <el-icon :class="{ 'dark-icon': themes === 'dark' }">
+                    <Icon :name="styleOptionMountedKey.icon" />
+                  </el-icon>
+                </template>
                 <el-option
                   class="custom-style-option"
                   v-for="option in styleOptionMountedKey.customOption"
@@ -72,10 +78,14 @@
                 :style="{ width: styleOptionKey.width }"
                 :effect="themes"
                 v-model="styleForm[styleOptionKey.value]"
-                placeholder="透明度"
                 size="small"
                 @change="changeStyle"
               >
+                <template #prefix>
+                  <el-icon>
+                    <Icon :name="styleOptionKey.icon" />
+                  </el-icon>
+                </template>
                 <el-option
                   class="custom-style-option"
                   v-for="option in styleOptionKey.customOption"
@@ -325,16 +335,52 @@ const borderStyleList = [
 
 //大小随画布缩放动态变化
 const styleOptionMountedKeyArray = [
-  { value: 'fontSize', label: '字体大小', customOption: fontSizeList.value },
-  { value: 'activeFontSize', label: '激活字体大小', customOption: fontSizeList.value }
+  {
+    value: 'fontSize',
+    label: '字体大小',
+    customOption: fontSizeList.value,
+    width: '80px',
+    icon: 'dv-style-fontSize'
+  },
+  {
+    value: 'activeFontSize',
+    label: '激活字体大小',
+    customOption: fontSizeList.value,
+    width: '80px',
+    icon: 'dv-style-headFontActiveColor'
+  }
 ]
 
 //大小不变
 const styleOptionKeyArray = [
-  { value: 'opacity', label: '透明度', customOption: opacitySizeList, width: '50px' },
-  { value: 'borderWidth', label: '边框宽度', customOption: borderWidthList.value, width: '50px' },
-  { value: 'borderRadius', label: '圆角', customOption: borderRadiusList.value, width: '50px' },
-  { value: 'borderStyle', label: '边框样式', customOption: borderStyleList, width: '60px' }
+  {
+    value: 'opacity',
+    label: '透明度',
+    customOption: opacitySizeList,
+    width: '80px',
+    icon: 'dv-style-opacity'
+  },
+  {
+    value: 'borderWidth',
+    label: '边框宽度',
+    customOption: borderWidthList.value,
+    width: '80px',
+    icon: 'dv-style-opacity'
+  },
+  {
+    value: 'borderRadius',
+    label: '圆角',
+    customOption: borderRadiusList.value,
+    width: '80px',
+    icon: 'dv-style-borderRadius'
+  },
+  {
+    value: 'borderStyle',
+    label: '边框样式',
+    customOption: borderStyleList,
+    width: '90px',
+    icon: 'dv-style-borderStyle'
+  }
 ]
 
 const styleInit = () => {
@@ -514,4 +560,8 @@ watch(
 .custom-row-inner {
   margin: 8px 0px 24px;
 }
+
+.dark-icon {
+  color: #ffffff;
+}
 </style>