From 843722009f079d92694955bf53c0a876255d1f06 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Mon, 3 Jun 2024 11:33:44 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E6=97=A0=E6=B3=95=E6=89=B9=E9=87=8F=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E9=80=8F=E6=98=8E=E5=BA=A6=E7=AD=89=E6=A0=B7=E5=BC=8F=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../custom-component/common/CommonAttr.vue    |  8 +++--
 .../common/CommonStyleSet.vue                 | 35 +++++++++++--------
 .../component-group/DragComponent.vue         |  1 +
 3 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/core/core-frontend/src/custom-component/common/CommonAttr.vue b/core/core-frontend/src/custom-component/common/CommonAttr.vue
index c12579e11e..5ab4fd0063 100644
--- a/core/core-frontend/src/custom-component/common/CommonAttr.vue
+++ b/core/core-frontend/src/custom-component/common/CommonAttr.vue
@@ -61,7 +61,7 @@ const onBackgroundChange = val => {
   emits('onAttrChange', { custom: 'commonBackground' })
 }
 
-const onStyleAttrChange = (value, key) => {
+const onStyleAttrChange = ({ key, value }) => {
   snapshotStore.recordSnapshotCache()
   emits('onAttrChange', { custom: 'style', property: key, value: value })
 }
@@ -143,7 +143,11 @@ const stopEvent = e => {
         name="style"
         class="common-style-area"
       >
-        <common-style-set :themes="themes" :element="element"></common-style-set>
+        <common-style-set
+          @onStyleAttrChange="onStyleAttrChange"
+          :themes="themes"
+          :element="element"
+        ></common-style-set>
       </el-collapse-item>
     </el-collapse>
   </div>
diff --git a/core/core-frontend/src/custom-component/common/CommonStyleSet.vue b/core/core-frontend/src/custom-component/common/CommonStyleSet.vue
index 0958e58229..b54855e0cf 100644
--- a/core/core-frontend/src/custom-component/common/CommonStyleSet.vue
+++ b/core/core-frontend/src/custom-component/common/CommonStyleSet.vue
@@ -114,7 +114,7 @@
                 :effect="themes"
                 v-model="styleForm[styleOptionKey.value]"
                 size="small"
-                @change="changeStyle"
+                @change="changeStylePre(styleOptionKey.value)"
               >
                 <template #prefix>
                   <el-icon :class="{ 'dark-icon': themes === 'dark' }">
@@ -279,7 +279,7 @@ const { t } = useI18n()
 const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
 
-const { curComponent, canvasStyleData } = storeToRefs(dvMainStore)
+const { canvasStyleData } = storeToRefs(dvMainStore)
 
 const props = withDefaults(
   defineProps<{
@@ -294,7 +294,7 @@ const expandIcon = (name: string) => {
   return h(Icon, { className: '', name })
 }
 const { themes, element } = toRefs(props)
-const emits = defineEmits(['onTextChange'])
+const emits = defineEmits(['onStyleAttrChange'])
 const styleMounted = ref({
   opacity: 1,
   fontSize: 22,
@@ -491,24 +491,29 @@ const styleOptionKeyArray = [
 ]
 
 const styleInit = () => {
-  if (curComponent.value) {
+  if (element.value) {
     Object.keys(styleMounted.value).forEach(key => {
       styleMounted.value[key] = Math.round(
-        (curComponent.value.style[key] * 100) / canvasStyleData.value.scale
+        (element.value.style[key] * 100) / canvasStyleData.value.scale
       )
     })
   }
 }
 
-const sizeChange = key => {
-  curComponent.value.style[key] = Math.round(
-    (styleMounted.value[key] * canvasStyleData.value.scale) / 100
-  )
-  changeStyle()
+const changeStylePre = key => {
+  changeStyle({ key: key, value: element.value.style[key] })
 }
 
-const changeStyle = () => {
+const sizeChange = key => {
+  element.value.style[key] = Math.round(
+    (styleMounted.value[key] * canvasStyleData.value.scale) / 100
+  )
+  changeStyle({ key: key, value: element.value.style[key] })
+}
+
+const changeStyle = params => {
   snapshotStore.recordSnapshotCache()
+  emits('onStyleAttrChange', params)
 }
 
 const checkBold = () => {
@@ -517,7 +522,7 @@ const checkBold = () => {
   } else {
     styleForm.value.fontWeight = 'normal'
   }
-  changeStyle()
+  changeStyle({ key: 'fontWeight', value: styleForm.value.fontWeight })
 }
 
 const checkItalic = () => {
@@ -526,16 +531,16 @@ const checkItalic = () => {
   } else {
     styleForm.value.fontStyle = 'normal'
   }
-  changeStyle()
+  changeStyle({ key: 'fontStyle', value: styleForm.value.fontStyle })
 }
 
 function setPosition(key, p: 'left' | 'center' | 'right') {
   styleForm.value[key] = p
-  changeStyle()
+  changeStyle({ key: key, p })
 }
 
 watch(
-  () => curComponent.value,
+  () => element.value,
   () => {
     styleInit()
   },
diff --git a/core/core-frontend/src/custom-component/component-group/DragComponent.vue b/core/core-frontend/src/custom-component/component-group/DragComponent.vue
index c5830720a6..5dba4c2cf9 100644
--- a/core/core-frontend/src/custom-component/component-group/DragComponent.vue
+++ b/core/core-frontend/src/custom-component/component-group/DragComponent.vue
@@ -73,6 +73,7 @@ const { icon, name, label, dragInfo, themes } = toRefs(props)
     .drag-icon {
       height: 40px;
       width: 40px;
+      color: #3370ff;
     }
   }
   .label-content {