From b7f8321cf19e0dfb87eb764f3e46d52c6a12a1bd Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Mon, 27 May 2024 16:57:59 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):?=
 =?UTF-8?q?=20=E8=B7=91=E9=A9=AC=E7=81=AF=E7=BB=84=E4=BB=B6=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E5=AD=97=E4=BD=93=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/svg/dv-style-fontFamily.svg    |  1 +
 .../common/CommonStyleSet.vue                 | 50 +++++++++++++++++++
 .../src/custom-component/component-list.ts    |  3 +-
 3 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 core/core-frontend/src/assets/svg/dv-style-fontFamily.svg

diff --git a/core/core-frontend/src/assets/svg/dv-style-fontFamily.svg b/core/core-frontend/src/assets/svg/dv-style-fontFamily.svg
new file mode 100644
index 0000000000..4f6721e5dc
--- /dev/null
+++ b/core/core-frontend/src/assets/svg/dv-style-fontFamily.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="1716798774711" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3450" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M474.3168 450.56H369.3568l66.4576-73.3184 13.7216-6.144h40.96L549.4784 79.1552c-57.6512 3.584-104.448 20.992-141.312 52.224-40.6528 34.5088-60.8256 79.1552-60.8256 134.2464l1.024 24.1664-143.9744 67.9936 2.8672-32.768c9.6256-111.7184 54.6816-194.9696 134.8608-247.808C420.7616 25.6 537.3952 0 692.224 0H1024l-60.0064 184.832h-73.4208l8.192-25.088c4.096-11.8784 6.0416-23.552 6.0416-34.816C904.8064 96.256 840.3968 76.1856 706.56 76.1856h-7.5776l-59.6992 294.8096H892.928l-84.5824 85.2992-15.6672 5.4272a1191.424 1191.424 0 0 0-158.72-11.264h-10.6496l-27.648 136.9088c-26.624 131.3792-78.1312 236.9536-154.8288 316.2112C363.52 983.6544 272.4864 1024 169.1648 1024 111.3088 1024 59.392 1002.5984 14.336 960.3072L0 946.7904l110.1824-110.08 11.4688 23.3472c24.7808 50.3808 63.1808 74.6496 117.9648 74.6496 50.176 0 88.7808-21.7088 117.76-66.4576 30.72-47.5136 59.0848-134.144 84.48-258.8672L474.3168 450.56z"  p-id="3451"></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 eb5b02a3c7..b18c074c0d 100644
--- a/core/core-frontend/src/custom-component/common/CommonStyleSet.vue
+++ b/core/core-frontend/src/custom-component/common/CommonStyleSet.vue
@@ -2,6 +2,39 @@
   <el-row class="custom-row">
     <el-row class="custom-row-inner">
       <el-space wrap>
+        <template v-for="styleOptionKey in styleOptionKeyArrayPre">
+          <el-tooltip
+            :key="styleOptionKey.value"
+            v-if="styleForm[styleOptionKey.value] !== undefined"
+            :effect="themes"
+            placement="bottom"
+          >
+            <template #content> {{ styleOptionKey.label }} </template>
+            <el-form-item class="form-item no-margin-bottom" :class="'form-item-' + themes">
+              <el-select
+                :style="{ width: styleOptionKey.width }"
+                :effect="themes"
+                v-model="styleForm[styleOptionKey.value]"
+                size="small"
+                @change="changeStyle"
+              >
+                <template #prefix>
+                  <el-icon :class="{ 'dark-icon': themes === 'dark' }">
+                    <Icon :name="styleOptionKey.icon" />
+                  </el-icon>
+                </template>
+                <el-option
+                  class="custom-style-option"
+                  v-for="option in styleOptionKey.customOption"
+                  :key="option.value"
+                  :label="option.name"
+                  :value="option.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-tooltip>
+        </template>
+
         <template v-for="styleColorKey in styleColorKeyArray">
           <el-tooltip
             :key="styleColorKey.value"
@@ -274,6 +307,13 @@ const styleMounted = ref({
   color: '#000000'
 })
 
+const fontFamilyList = [
+  { name: '微软雅黑', value: 'Microsoft YaHei' },
+  { name: '宋体', value: 'SimSun, "Songti SC", STSong' },
+  { name: '黑体', value: 'SimHei, Helvetica' },
+  { name: '楷体', value: 'KaiTi, "Kaiti SC", STKaiti' }
+]
+
 const scrollSpeedList = [
   { name: '停止', value: 0 },
   { name: '1', value: 80 },
@@ -376,6 +416,16 @@ const borderStyleList = [
   { name: '点线', value: 'dotted' }
 ]
 
+const styleOptionKeyArrayPre = [
+  {
+    value: 'fontFamily',
+    label: '字体',
+    customOption: fontFamilyList,
+    width: '188px',
+    icon: 'dv-style-fontFamily'
+  }
+]
+
 //大小随画布缩放动态变化
 const styleOptionMountedKeyArray = [
   {
diff --git a/core/core-frontend/src/custom-component/component-list.ts b/core/core-frontend/src/custom-component/component-list.ts
index 1b3ca4d3e4..8b6e3a5e4d 100644
--- a/core/core-frontend/src/custom-component/component-list.ts
+++ b/core/core-frontend/src/custom-component/component-list.ts
@@ -498,7 +498,8 @@ const list = [
       color: '',
       padding: 4,
       verticalAlign: 'middle',
-      scrollSpeed: 0
+      scrollSpeed: 0,
+      fontFamily: 'Microsoft YaHei'
     }
   }
 ]