feat: 处理层级区域分组右键，多选等

src/views/chart/ContentLayers/index.vue

@@ -5,6 +5,7 @@
     title="图层"
     :depth="2"
     @back="backHandle"
+    @mousedown="boxMousedownHandle($event)"
   >
     <template #icon>
       <n-icon size="16" :depth="2">
@@ -25,7 +26,7 @@
           <layers-list-item
             v-else
             :componentData="element"
-            @mousedown="mousedownHandle(element)"
+            @mousedown="mousedownHandle($event, element)"
             @mouseenter="mouseenterHandle(element)" 
             @mouseleave="mouseleaveHandle(element)"
             @contextmenu="handleContextMenu($event, element, optionsHandle)"
@@ -40,7 +41,6 @@
 import { computed, toRaw } from 'vue'
 import Draggable from 'vuedraggable'
 import cloneDeep from 'lodash/cloneDeep'
-
 import { ContentBox } from '../ContentBox/index'
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
@@ -48,7 +48,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'
 import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
-import { MenuEnum } from '@/enums/editPageEnum'
+import { MenuEnum, MouseEventButton, WinKeyboard, MacKeyboard } from '@/enums/editPageEnum'
 
 import { LayersListItem } from './components/LayersListItem/index'
 import { LayersGroupListItem } from './components/LayersGroupListItem/index'
@@ -111,10 +111,32 @@ const onMoveCallback = (val: any) => {
   }
 }
 
+const boxMousedownHandle = (e: MouseEvent) => {
+  chartEditStore.setTargetSelectChart()
+}
+
 // 点击事件
-const mousedownHandle = (item: CreateComponentType) => {
+const mousedownHandle = (e: MouseEvent, item: CreateComponentType) => {
+  e.preventDefault()
+  e.stopPropagation()
   onClickOutSide()
-  chartEditStore.setTargetSelectChart(item.id)
+  // 若此时按下了 CTRL, 表示多选
+  const id = item.id
+  if (
+    e.buttons === MouseEventButton.LEFT &&
+    (window.$KeyboardActive?.has(WinKeyboard.CTRL_SOURCE_KEY) ||
+      window.$KeyboardActive?.has(MacKeyboard.CTRL_SOURCE_KEY))
+  ) {
+    // 若已选中，则去除
+    if (chartEditStore.targetChart.selectId.includes(id)) {
+      const exList = chartEditStore.targetChart.selectId.filter(e => e !== id)
+      chartEditStore.setTargetSelectChart(exList)
+    } else {
+      chartEditStore.setTargetSelectChart(id, true)
+    }
+    return
+  }
+  chartEditStore.setTargetSelectChart(id)
 }
 
 // 进入事件