!278 fix: 修复成百上千组件在拖拽时产升的性能问题

Merge pull request !278 from linjy/fix-perfGain

src/views/chart/ContentEdit/components/EditGroup/index.vue

@@ -8,7 +8,6 @@
       :hiddenPoint="true"
       :class="animationsClass(groupData.styles.animations)"
       :style="{
-        ...useComponentStyle(groupData.attr, groupIndex),
         ...useSizeStyle(groupData.attr),
         ...getFilterStyle(groupData.styles),
         ...getTransformStyle(groupData.styles),
@@ -28,9 +27,6 @@
         :index="groupIndex"
         :item="item"
         :hiddenPoint="true"
-        :style="{
-          ...useComponentStyle(item.attr, groupIndex)
-        }"
       >
         <component
           class="edit-content-chart"
@@ -60,7 +56,7 @@ import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle,
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useContextMenu, divider } from '@/views/chart/hooks/useContextMenu.hook'
 import { useMouseHandle } from '../../hooks/useDrag.hook'
-import { useComponentStyle, useSizeStyle } from '../../hooks/useStyle.hook'
+import { useSizeStyle } from '../../hooks/useStyle.hook'
 import { EditShapeBox } from '../../components/EditShapeBox'
 
 const props = defineProps({

src/views/chart/ContentEdit/components/EditShapeBox/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="go-shape-box" :class="{ lock, hide }">
+  <div class="go-shape-box" :class="{ lock, hide }" :style="positionStyle">
     <slot></slot>
     <!-- 锚点 -->
     <template v-if="!hiddenPoint">
@@ -38,6 +38,10 @@ const props = defineProps({
   hiddenPoint: {
     type: Boolean,
     required: false
+  },
+  index: {
+    type: Number,
+    default: 0
   }
 })
 
@@ -80,6 +84,17 @@ const lock = computed(() => {
 const hide = computed(() => {
   return props.item.status.hide
 })
+
+// 位置样式
+const positionStyle = computed(() => {
+  const attr = props.item?.attr
+  if (!attr) return {}
+  return {
+    zIndex: props.index + 1,
+    left: `${attr.x}px`,
+    top: `${attr.y}px`
+  }
+})
 </script>
 
 <style lang="scss" scoped>

src/views/chart/ContentEdit/index.vue

@@ -39,7 +39,6 @@
                 :data-id="item.id"
                 :index="index"
                 :style="{
-                  ...useComponentStyle(item.attr, index),
                   ...(getBlendModeStyle(item.styles) as any),
                 }"
                 :item="item"
@@ -106,7 +105,7 @@ import { useLayout } from './hooks/useLayout.hook'
 import { useAddKeyboard } from '../hooks/useKeyboard.hook'
 import { useSync } from '../hooks/useSync.hook'
 import { dragHandle, dragoverHandle, mousedownHandleUnStop, useMouseHandle } from './hooks/useDrag.hook'
-import { useComponentStyle, useSizeStyle } from './hooks/useStyle.hook'
+import { useSizeStyle } from './hooks/useStyle.hook'
 import { useInitVChartsTheme } from '@/hooks'
 
 import { ContentBox } from '../ContentBox/index'

src/views/chart/ContentLayers/index.vue

@@ -65,7 +65,6 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import Draggable from 'vuedraggable'
-import cloneDeep from 'lodash/cloneDeep'
 import { ContentBox } from '../ContentBox/index'
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
 import { ChartLayoutStoreEnum, LayerModeEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
@@ -96,7 +95,7 @@ const layerMode = ref<LayerModeEnum>(chartLayoutStore.getLayerType)
 
 // 逆序展示
 const reverseList = computed(() => {
-  const list: Array<CreateComponentType | CreateComponentGroupType> = cloneDeep(chartEditStore.getComponentList)
+  const list: Array<CreateComponentType | CreateComponentGroupType> = [...chartEditStore.getComponentList]
   return list.reverse()
 })