fix: 新增选择联动

src/store/modules/chartEditStore/chartEditStore.ts

@@ -60,10 +60,11 @@ export const useChartEditStoreStore = defineStore({
     setEditCanvasItem< T extends keyof EditCanvasType,  K extends EditCanvasType[T] >(key: T, value: K) {
       this.editCanvas[key] = value
     },
-    // * 设置目标数据
+    // * 设置目标数据 hover
     setTargetHoverChart(hoverIndex?:TargetChartType["hoverIndex"]) {
       this.targetChart.hoverIndex = hoverIndex
     },
+    // * 设置目标数据 select
     setTargetSelectChart(selectIndex?:TargetChartType["selectIndex"]) {
       this.targetChart.selectIndex = selectIndex
     },

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>

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

@@ -1,6 +1,7 @@
-import { onUnmounted, onMounted, ref, nextTick } from 'vue'
+import { onUnmounted, onMounted } from 'vue'
 import { getChartEditStore } from './useStore.hook'
 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { CreateComponentType } from '@/packages/index.d'
 
 const chartEditStore = getChartEditStore()
 
@@ -28,3 +29,28 @@ export const useLayout = () => {
     })
   })
 }
+
+// 点击事件
+export const mousedownHandle = (e: MouseEvent, item?: CreateComponentType) => {
+  e.preventDefault()
+  e.stopPropagation()
+  if (item) {
+    chartEditStore.setTargetSelectChart(item.id)
+    return
+  }
+  chartEditStore.setTargetSelectChart(item)
+}
+
+// 进入事件
+export const mouseenterHandle = (e: MouseEvent, item: CreateComponentType) => {
+  e.preventDefault()
+  e.stopPropagation()
+  chartEditStore.setTargetHoverChart(item.id)
+}
+
+// 移出事件
+export const mouseleaveHandle = (e: MouseEvent, item: CreateComponentType) => {
+  e.preventDefault()
+  e.stopPropagation()
+  chartEditStore.setTargetHoverChart(undefined)
+}

src/views/chart/ContentEdit/index.vue

@@ -25,12 +25,18 @@
           :on-clickoutside="onClickoutside"
           @select="handleMenuSelect"
         />
+        <!-- 图表 -->
         <ShapeBox
           v-for="(item, index) in chartEditStore.getComponentList"
           :key="item.id"
+          :data-id="item.id"
           :index="index"
           :style="useComponentStyle(item.attr, index)"
+          :item="item"
           @contextmenu="handleContextMenu($event, index)"
+          @mousedown="mousedownHandle($event, item)"
+          @mouseenter="mouseenterHandle($event, item)"
+          @mouseleave="mouseleaveHandle($event, item)"
         >
           <component
             class="edit-content-chart"
@@ -55,7 +61,12 @@ import { EditRange } from './components/EditRange'
 import { EditBottom } from './components/EditBottom'
 import { ShapeBox } from './components/ShapeBox/index'
 
-import { useLayout } from './hooks/useLayout.hook'
+import {
+  useLayout,
+  mousedownHandle,
+  mouseenterHandle,
+  mouseleaveHandle
+} from './hooks/useLayout.hook'
 import { handleDrop, handleDragOver } from './hooks/useDrop.hook'
 import { useContextMenu } from './hooks/useContextMenu.hook'
 import { getChartEditStore } from './hooks/useStore.hook'
@@ -68,8 +79,9 @@ const {
   onClickoutside,
   mousePosition,
   handleContextMenu,
-  handleMenuSelect,
+  handleMenuSelect
 } = useContextMenu()
+
 // 布局处理
 useLayout()
 </script>

src/views/chart/ContentLayers/components/ListItem/index.vue

@@ -73,7 +73,7 @@ $textSize: 10px;
   &.select {
     border: 1px solid v-bind('themeColor');
     /* 需要设置最高级，覆盖 hover 的颜色 */
-    background-color: rgba(0, 0, 0, 0) !important;
+    background-color: rgba(0, 0, 0, 0);
   }
   .select-modal,
   .item-content {
@@ -89,10 +89,10 @@ $textSize: 10px;
     height: calc(100% - 10px);
   }
   .select-modal {
-    background-color: v-bind('themeColor');
-    opacity: 0.3;
     width: 100%;
     height: 100%;
+    opacity: 0.3;
+    background-color: v-bind('themeColor');
   }
   .list-img {
     flex-shrink: 0;