From 3d99c2d7a4e8fb68b598ef1b1750106d0f3852e2 Mon Sep 17 00:00:00 2001
From: linjy <lin.junyuan2@iwhalecloud.com>
Date: Thu, 21 May 2026 21:30:21 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=88=90=E7=99=BE?=
 =?UTF-8?q?=E4=B8=8A=E5=8D=83=E7=BB=84=E4=BB=B6=E5=9C=A8=E6=8B=96=E6=8B=BD?=
 =?UTF-8?q?=E6=97=B6=E4=BA=A7=E5=8D=87=E7=9A=84=E6=80=A7=E8=83=BD=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ContentEdit/components/EditGroup/index.vue  |  6 +-----
 .../components/EditShapeBox/index.vue           | 17 ++++++++++++++++-
 src/views/chart/ContentEdit/index.vue           |  3 +--
 src/views/chart/ContentLayers/index.vue         |  3 +--
 4 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/views/chart/ContentEdit/components/EditGroup/index.vue b/src/views/chart/ContentEdit/components/EditGroup/index.vue
index 03cced49..76ee6456 100644
--- a/src/views/chart/ContentEdit/components/EditGroup/index.vue
+++ b/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({
diff --git a/src/views/chart/ContentEdit/components/EditShapeBox/index.vue b/src/views/chart/ContentEdit/components/EditShapeBox/index.vue
index e42c5e23..1d003bda 100644
--- a/src/views/chart/ContentEdit/components/EditShapeBox/index.vue
+++ b/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>
diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue
index f8d538fc..6e917f5f 100644
--- a/src/views/chart/ContentEdit/index.vue
+++ b/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"
@@ -98,7 +97,7 @@ import { SCALE_KEY } from '@/views/preview/hooks/useScale.hook'
 import { useLayout } from './hooks/useLayout.hook'
 import { useAddKeyboard } from '../hooks/useKeyboard.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'
diff --git a/src/views/chart/ContentLayers/index.vue b/src/views/chart/ContentLayers/index.vue
index 9d7c118f..53c2e118 100644
--- a/src/views/chart/ContentLayers/index.vue
+++ b/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()
 })