fix: 新增选择联动

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

@@ -1,15 +1,22 @@
 <template>
-  <div class="go-edit-range" :style="useSizeStyle(size)">
+  <div
+    class="go-edit-range"
+    :style="useSizeStyle(size)"
+    @mousedown="mousedownHandle($event, undefined)"
+  >
     <slot></slot>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useSizeStyle } from '../../hooks/useStyle.hook'
+import { mousedownHandle } from '../../hooks/useLayout.hook'
+
 const size = {
   w: 1920,
   h: 1080
 }
+
 </script>
 
 <style lang="scss" scoped>

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

@@ -1,13 +1,66 @@
 <template>
   <div class="go-shape-box">
     <slot></slot>
+
+    <!-- 选中 -->
+    <div class="shape-modal" :style="useSizeStyle(item.attr)">
+      <div v-if="select" class="shape-modal-select"></div>
+      <div v-if="select || hover" class="shape-modal-change"></div>
+    </div>
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, computed, PropType } from 'vue'
+import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
+import { CreateComponentType } from '@/packages/index.d'
+import { useSizeStyle } from '../../hooks/useStyle.hook'
+
+const props = defineProps({
+  item: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+// 全局颜色
+const designStore = useDesignStore()
+const themeColor = ref(designStore.getAppTheme)
+const chartEditStore = useChartEditStoreStore()
+
+// 计算当前选中目标
+const hover = computed(() => {
+  return props.item.id === chartEditStore.getTargetChart.hoverIndex
+})
+
+const select = computed(() => {
+  return props.item.id === chartEditStore.getTargetChart.selectIndex
+})
+</script>
 
 <style lang="scss" scoped>
 @include go(shape-box) {
   position: absolute;
+  .shape-modal {
+    position: absolute;
+    top: 0;
+    left: 0;
+    .shape-modal-select {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      opacity: 0.1;
+      border-radius: 10px;
+      background-color: v-bind('themeColor');
+    }
+    .shape-modal-change {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      border-radius: 10px;
+      border: 2px solid v-bind('themeColor');
+    }
+  }
 }
 </style>