feat： 新增图表外层

src/views/chart/ContentEdit/components/ShapeBox/index.ts

@@ -0,0 +1,3 @@
+import ShapeBox from './index.vue'
+
+export { ShapeBox }

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

@@ -0,0 +1,13 @@
+<template>
+  <div class="go-shape-box">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped>
+@include go(shape-box) {
+  position: absolute;
+}
+</style>

src/views/chart/ContentEdit/hooks/useStyle.hook.ts

@@ -10,8 +10,13 @@ export const useComponentStyle = (attr: AttrType, index: number) => {
     zIndex: index,
     left: `${attr.x}px`,
     top: `${attr.y}px`,
-    width: `${attr.w}px`,
-    height: `${attr.h}px`
   }
   return componentStyle
 }
+export const useSizeStyle = (attr: AttrType) => {
+  const sizeStyle = {
+    width: `${attr.w}px`,
+    height: `${attr.h}px`
+  }
+  return sizeStyle
+}

src/views/chart/ContentEdit/index.vue

@@ -12,14 +12,19 @@
     <div id="go-chart-edit-content">
       <!-- 展示 -->
       <EditRange>
-        <component
-          class="edit-content-chart" 
+        <ShapeBox
           v-for="(item, index) in chartEditStore.getComponentList"
           :key="item.id"
-          :is="item.key"
-          :chartData="item"
+          :index="index"
           :style="useComponentStyle(item.attr, index)"
-        />
+        >
+          <component
+            class="edit-content-chart"
+            :is="item.key"
+            :chartData="item"
+            :style="useSizeStyle(item.attr)"
+          />
+        </ShapeBox>
       </EditRange>
     </div>
     <!-- 底部控制 -->
@@ -34,10 +39,11 @@ import { onUnmounted, onMounted, toRefs } from 'vue'
 import { ContentBox } from '../ContentBox/index'
 import { EditRange } from './components/EditRange'
 import { EditBottom } from './components/EditBottom'
+import { ShapeBox } from './components/ShapeBox/index'
 import { useLayout } from './hooks/useLayout.hook'
 import { handleDrop, handleDragOver } from './hooks/useDrop.hook'
 import { getChartEditStore } from './hooks/useStore.hook'
-import { useComponentStyle } from './hooks/useStyle.hook'
+import { useComponentStyle, useSizeStyle } from './hooks/useStyle.hook'
 
 const chartEditStore = getChartEditStore()
 
@@ -50,21 +56,19 @@ useLayout()
   position: relative;
   width: 100%;
   overflow: hidden;
-  @include background-image("background-point");
+  @include background-image('background-point');
   @extend .go-point-bg;
   @include goId(chart-edit-content) {
-    position: relative;
-    top: 20px;
-    left: 20px;
+    margin: 20px;
+    overflow: hidden;
     transform-origin: left top;
     border: 1px solid rgba(0, 0, 0, 0);
-    overflow: hidden;
     @extend .go-transition;
     &.content-resize {
       border-radius: 15px;
-      @include hover-border-color("hover-border-color");
+      @include hover-border-color('hover-border-color');
     }
-    .edit-content-chart{
+    .edit-content-chart {
       position: absolute;
     }
   }