refactor: 组合组件预览优化

core/core-frontend/src/custom-component/group/GroupPreview.vue

@@ -3,6 +3,7 @@ import { toRefs } from 'vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
 import ComponentWrapper from '@/components/data-visualization/canvas/ComponentWrapper.vue'
+import { toPercent } from '@/utils/translate'
 const dvMainStore = dvMainStoreWithOut()
 const { canvasViewInfo } = storeToRefs(dvMainStore)
 
@@ -37,6 +38,15 @@ const props = defineProps({
 })
 
 const { propValue, dvInfo, searchCount } = toRefs(props)
+
+const customGroupStyle = item => {
+  return {
+    width: toPercent(item.groupStyle.width),
+    height: toPercent(item.groupStyle.height),
+    top: toPercent(item.groupStyle.top),
+    left: toPercent(item.groupStyle.left)
+  }
+}
 </script>
 
 <template>
@@ -50,7 +60,7 @@ const { propValue, dvInfo, searchCount } = toRefs(props)
         :config="item"
         :index="index"
         :dv-info="dvInfo"
-        :style="item.groupStyle"
+        :style="customGroupStyle(item)"
         :show-position="showPosition"
         :search-count="searchCount"
       />

core/core-frontend/src/utils/canvasUtils.ts

@@ -142,14 +142,8 @@ export function canvasSave(callBack) {
     if (item.component === 'UserView') {
       item.linkageFilters = []
     } else if (item.component === 'Group') {
-      const groupStyle = item.style
       item.propValue.forEach(groupItem => {
         groupItem.linkageFilters = []
-        // 计算groupStyle
-        groupItem.groupStyle.left = toPercent(groupItem.style.left / groupStyle.width)
-        groupItem.groupStyle.top = toPercent(groupItem.style.top / groupStyle.height)
-        groupItem.groupStyle.width = toPercent(groupItem.style.width / groupStyle.width)
-        groupItem.groupStyle.height = toPercent(groupItem.style.height / groupStyle.height)
       })
     } else if (item.component === 'DeTabs') {
       item.propValue.forEach(tabItem => {