From 1c7e2e04d3ae176081d628a46a22ad5bf4ceea49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=A9=AC=E5=86=9B?= <253495832@qq.com>
Date: Tue, 12 May 2026 15:20:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8A=A8=E6=80=81=E9=98=B4=E5=BD=B1?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ContentEdit/components/EditRule/index.vue | 48 +++++++++++++++++--
 .../components/EditTools/index.vue            |  1 +
 2 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/src/views/chart/ContentEdit/components/EditRule/index.vue b/src/views/chart/ContentEdit/components/EditRule/index.vue
index ca4eb25d..e8ea4162 100644
--- a/src/views/chart/ContentEdit/components/EditRule/index.vue
+++ b/src/views/chart/ContentEdit/components/EditRule/index.vue
@@ -30,6 +30,7 @@ import type { CSSProperties } from 'vue'
 import { listen } from 'dom-helpers'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { CreateComponentGroupType } from '@/packages/index.d'
 import throttle from 'lodash/throttle'
 
 const chartEditStore = useChartEditStore()
@@ -71,7 +72,7 @@ const paletteStyle = computed(() => {
         longfgColor: '#4d4d4d',
         shortfgColor: '#4d4d4d',
         fontColor: '#4d4d4d',
-        shadowColor: '#18181c',
+        shadowColor: '#232324',
         borderColor: '#18181c',
         cornerActiveColor: '#18181c'
       }
@@ -89,13 +90,50 @@ const canvasStyle = computed((): CSSProperties => {
     height: `${height.value}px`
   }
 })
+// 根据 id 查找组件（含分组内子组件）
+const findComponentById = (id: string) => {
+  for (const item of chartEditStore.getComponentList) {
+    if (item.id === id) return item
+    if (item.isGroup) {
+      const child = (item as CreateComponentGroupType).groupList.find(c => c.id === id)
+      if (child) return child
+    }
+  }
+  return null
+}
+
 // 阴影（画布在标尺坐标系中的位置，从 thick 偏移开始）
 const shadow = computed(() => {
+  const selectIds = chartEditStore.getTargetChart.selectId
+  if (!selectIds.length) {
+    return { x: 0, y: 0, width: 0, height: 0 }
+  }
+
+  let minX = Infinity
+  let minY = Infinity
+  let maxX = -Infinity
+  let maxY = -Infinity
+
+  for (const id of selectIds) {
+    const comp = findComponentById(id)
+    if (comp) {
+      const { x, y, w, h } = comp.attr
+      minX = Math.min(minX, x)
+      minY = Math.min(minY, y)
+      maxX = Math.max(maxX, x + w)
+      maxY = Math.max(maxY, y + h)
+    }
+  }
+
+  if (minX === Infinity) {
+    return { x: 0, y: 0, width: 0, height: 0 }
+  }
+
   return {
-    x: 0,
-    y: 0,
-    width: 200,
-    height: 200
+    x: minX,
+    y: minY,
+    width: maxX - minX,
+    height: maxY - minY
   }
 })
 
diff --git a/src/views/chart/ContentEdit/components/EditTools/index.vue b/src/views/chart/ContentEdit/components/EditTools/index.vue
index c92e578c..4537ce67 100644
--- a/src/views/chart/ContentEdit/components/EditTools/index.vue
+++ b/src/views/chart/ContentEdit/components/EditTools/index.vue
@@ -223,6 +223,7 @@ $asideBottom: 70px;
 
 @include go('chart-edit-tools') {
   @extend .go-background-filter;
+  z-index: 9;
   position: absolute;
   display: flex;
   justify-content: space-around;