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 {