feat: 新增多选的选中框

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

@@ -1,32 +1,47 @@
 <template>
   <div class="go-edit-group-box">
-    <!-- 组合组件 -->
     <edit-shape-box
-      v-for="item in groupData.groupList"
-      :key="item.id"
-      :data-id="item.id"
+      :key="groupData.id"
+      :data-id="groupData.id"
       :index="groupIndex"
-      :style="useComponentStyle(item.attr, groupIndex)"
-      :item="item"
-      @click="mouseClickHandle($event, item)"
-      @mousedown="mousedownHandle($event, item)"
-      @mouseenter="mouseenterHandle($event, item)"
-      @mouseleave="mouseleaveHandle($event, item)"
-      @contextmenu="handleContextMenu($event, item, undefined, undefined, pickOptionsList)"
+      :item="groupData"
+      :style="{
+        ...useComponentStyle(groupData.attr, groupIndex),
+        ...useSizeStyle(groupData.attr),
+        ...getFilterStyle(groupData.styles),
+        ...getTransformStyle(groupData.styles)
+      }"
+      @click="mouseClickHandle($event, groupData)"
+      @mousedown="mousedownHandle($event, groupData)"
+      @mouseenter="mouseenterHandle($event, groupData)"
+      @mouseleave="mouseleaveHandle($event, groupData)"
+      @contextmenu="handleContextMenu($event, groupData, undefined, undefined, pickOptionsList)"
     >
-      <component
-        class="edit-content-chart"
-        :class="animationsClass(item.styles.animations)"
-        :is="item.chartConfig.chartKey"
-        :chartConfig="item"
-        :themeSetting="themeSetting"
-        :themeColor="themeColor"
+      <!-- 组合组件 -->
+      <edit-shape-box
+        v-for="item in groupData.groupList"
+        :key="item.id"
+        :data-id="item.id"
+        :index="groupIndex"
+        :item="item"
         :style="{
-          ...useSizeStyle(item.attr),
-          ...getFilterStyle(item.styles),
-          ...getTransformStyle(item.styles)
+          ...useComponentStyle(item.attr, groupIndex)
         }"
-      ></component>
+      >
+        <component
+          class="edit-content-chart"
+          :class="animationsClass(item.styles.animations)"
+          :is="item.chartConfig.chartKey"
+          :chartConfig="item"
+          :themeSetting="themeSetting"
+          :themeColor="themeColor"
+          :style="{
+            ...useSizeStyle(item.attr),
+            ...getFilterStyle(item.styles),
+            ...getTransformStyle(item.styles)
+          }"
+        ></component>
+      </edit-shape-box>
     </edit-shape-box>
   </div>
 </template>
@@ -43,7 +58,6 @@ import { useMouseHandle } from '../../hooks/useDrag.hook'
 import { useComponentStyle, useSizeStyle } from '../../hooks/useStyle.hook'
 import { EditShapeBox } from '../../components/EditShapeBox'
 
-
 const props = defineProps({
   groupData: {
     type: Object as PropType<CreateComponentGroupType>,

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

@@ -22,13 +22,13 @@
 import { ref, computed, PropType, toRefs } from 'vue'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
-import { CreateComponentType } from '@/packages/index.d'
+import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { useSizeStyle, usePointStyle } from '../../hooks/useStyle.hook'
 import { useMousePointHandle } from '../../hooks/useDrag.hook'
 
 const props = defineProps({
   item: {
-    type: Object as PropType<CreateComponentType>,
+    type: Object as PropType<CreateComponentType | CreateComponentGroupType>,
     required: true
   }
 })