feat： 新增图表外层

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;
     }
   }