feat: 新增多选中的前置处理，选中存储对象修改成数组形式

src/store/modules/chartEditStore/chartEditStore.d.ts

@@ -107,7 +107,7 @@ export type MousePositionType = {
 // 操作目标
 export type TargetChartType = {
   hoverId?: string
-  selectId?: string
+  selectId: string[]
 }
 
 // 数据记录

src/store/modules/chartEditStore/chartEditStore.ts

@@ -1,5 +1,4 @@
 import { defineStore } from 'pinia'
-import { getUUID, loadingStart, loadingFinish, loadingError } from '@/utils'
 import { CreateComponentType } from '@/packages/index.d'
 import debounce from 'lodash/debounce'
 import cloneDeep from 'lodash/cloneDeep'
@@ -11,6 +10,14 @@ import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHis
 import { useSettingStore } from '@/store/modules/settingStore/settingStore'
 import { HistoryActionTypeEnum, HistoryItemType, HistoryTargetTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
 import { MenuEnum } from '@/enums/editPageEnum'
+import { 
+  getUUID,
+  loadingStart,
+  loadingFinish,
+  loadingError,
+  isString,
+  isArray
+} from '@/utils'
 import {
   ChartEditStoreEnum,
   ChartEditStorage,
@@ -60,7 +67,7 @@ export const useChartEditStore = defineStore({
     // 目标图表
     targetChart: {
       hoverId: undefined,
-      selectId: undefined
+      selectId: []
     },
     // 记录临时数据（复制等）
     recordChart: undefined,
@@ -159,8 +166,36 @@ export const useChartEditStore = defineStore({
       this.targetChart.hoverId = hoverId
     },
     // * 设置目标数据 select
-    setTargetSelectChart(selectId?:TargetChartType["selectId"]) {
+    setTargetSelectChart(selectId?: string | string[], push: boolean = false) {
-      this.targetChart.selectId = selectId
+      // 无 id 清空
+      if(!selectId) {
+        this.targetChart.selectId = []
+        return
+      }
+      // 新增
+      if(push) {
+        // 字符串
+        if(isString(selectId)) {
+          this.targetChart.selectId.push(selectId)
+          return
+        }
+        // 数组
+        if(isArray(selectId)) {
+          this.targetChart.selectId.push(...selectId)
+          return
+        }
+      } else {
+        // 字符串
+        if(isString(selectId)) {
+          this.targetChart.selectId = [selectId]
+          return
+        }
+        // 数组
+        if(isArray(selectId)) {
+          this.targetChart.selectId = selectId
+          return
+        }
+      }
     },
     // * 设置记录数据
     setRecordChart(item: RecordChartType | undefined) {
@@ -175,7 +210,7 @@ export const useChartEditStore = defineStore({
     },
     // * 找到目标 id 数据下标位置（无则返回-1）
     fetchTargetIndex(id?: string): number {
-      const targetId = id || this.getTargetChart.selectId
+      const targetId = id || this.getTargetChart.selectId.length && this.getTargetChart.selectId[0] || undefined
       if(!targetId) {
         loadingFinish()
         return -1

src/views/chart/ContentConfigurations/index.vue

@@ -123,7 +123,8 @@ const expandHindle = () => {
 
 const selectTarget = computed(() => {
   const selectId = chartEditStore.getTargetChart.selectId
-  if (!selectId) return undefined
+  // 排除多个
+  if (selectId.length !== 1) return undefined
   return chartEditStore.componentList[chartEditStore.fetchTargetIndex()]
 })
 

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

@@ -4,12 +4,9 @@
       class="line"
       v-for="item in line.lineArr"
       :key="item"
-      :class="[
+      :class="[item.includes('row') ? 'row' : 'col', line['select'].has(item) && 'visible']"
-        item.includes('row') ? 'row' : 'col',
-        line['select'].has(item) && 'visible'
-      ]"
       :style="useComponentStyle(line['select'].get(item))"
-  ></div>
+    ></div>
   </div>
 </template>
 
@@ -21,7 +18,7 @@ import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStor
 import { useSettingStore } from '@/store/modules/settingStore/settingStore'
 import { CreateComponentType } from '@/packages/index.d'
 import throttle from 'lodash/throttle'
-import cloneDeep  from 'lodash/cloneDeep'
+import cloneDeep from 'lodash/cloneDeep'
 // 全局颜色
 const designStore = useDesignStore()
 const themeColor = ref(designStore.getAppTheme)
@@ -53,7 +50,7 @@ const useComponentStyle = (attr?: Partial<{ x: number; y: number }>) => {
 }
 
 // * 吸附距离
-const minDistance = computed(()=>{
+const minDistance = computed(() => {
   return settingStore.getChartAlignRange
 })
 
@@ -72,9 +69,7 @@ const isSorption = (selectValue: number, componentValue: number) => {
 
 // * 当前目标
 const selectId = computed(() => chartEditStore.getTargetChart.selectId)
-const selectTarget = computed(
+const selectTarget = computed(() => chartEditStore.getComponentList[chartEditStore.fetchTargetIndex()])
-  () => chartEditStore.getComponentList[chartEditStore.fetchTargetIndex()]
-)
 const selectAttr = computed(() => selectTarget.value?.attr || {})
 
 // * 画布坐标
@@ -95,7 +90,7 @@ const canvasPositionList = computed(() => {
 watch(
   () => chartEditStore.getMousePosition,
   throttle(() => {
-    if (!isComputedLine.value) return
+    if (!isComputedLine.value || selectId.value.length !== 1) return
     // 获取目标组件数据
 
     const selectW = selectAttr.value.w
@@ -111,12 +106,12 @@ watch(
     const selectTopY = selectAttr.value.y
     const selectHalfY = selectTopY + selectH / 2
     const selectBottomY = selectTopY + selectH
-    const seletY = [selectTopY, selectHalfY, selectBottomY]
+    const selectY = [selectTopY, selectHalfY, selectBottomY]
 
     line.select.clear()
     line.sorptioned.y = false
     // 循环查询所有组件数据
-    const componentList = chartEditStore.getComponentList.map((e:CreateComponentType) => {
+    const componentList = chartEditStore.getComponentList.map((e: CreateComponentType) => {
       return {
         id: e.id,
         attr: e.attr
@@ -127,7 +122,7 @@ watch(
     line.lineArr.forEach(lineItem => {
       componentList.forEach((component: typeof canvasPositionList.value) => {
         // 排除自身
-        if (selectId.value === component.id) return
+        if (selectId.value[0] === component.id) return
         const componentW = component.attr.w
         const componentH = component.attr.h
 
@@ -163,24 +158,15 @@ watch(
           // 顶部
           if (isSorption(selectHalfY, componentTopY)) {
             line.select.set(lineItem, { y: componentTopY })
-            selectTarget.value.setPosition(
+            selectTarget.value.setPosition(selectLeftX, componentTopY - selectH / 2)
-              selectLeftX,
-              componentTopY - selectH / 2
-            )
           }
           if (isSorption(selectHalfY, componentHalfY)) {
             line.select.set(lineItem, { y: componentHalfY })
-            selectTarget.value.setPosition(
+            selectTarget.value.setPosition(selectLeftX, componentHalfY - selectH / 2)
-              selectLeftX,
-              componentHalfY - selectH / 2
-            )
           }
           if (isSorption(selectHalfY, componentBottomY)) {
             line.select.set(lineItem, { y: componentBottomY })
-            selectTarget.value.setPosition(
+            selectTarget.value.setPosition(selectLeftX, componentBottomY - selectH / 2)
-              selectLeftX,
-              componentBottomY - selectH / 2
-            )
           }
         }
         if (lineItem.includes('rowb')) {
@@ -191,17 +177,11 @@ watch(
           }
           if (isSorption(selectBottomY, componentHalfY)) {
             line.select.set(lineItem, { y: componentHalfY })
-            selectTarget.value.setPosition(
+            selectTarget.value.setPosition(selectLeftX, componentHalfY - selectH)
-              selectLeftX,
-              componentHalfY - selectH
-            )
           }
           if (isSorption(selectBottomY, componentBottomY)) {
             line.select.set(lineItem, { y: componentBottomY })
-            selectTarget.value.setPosition(
+            selectTarget.value.setPosition(selectLeftX, componentBottomY - selectH)
-              selectLeftX,
-              componentBottomY - selectH
-            )
           }
         }
 
@@ -223,24 +203,15 @@ watch(
         if (lineItem.includes('colc')) {
           if (isSorption(selectHalfX, componentLeftX)) {
             line.select.set(lineItem, { x: componentLeftX })
-            selectTarget.value.setPosition(
+            selectTarget.value.setPosition(componentLeftX - selectW / 2, selectTopY)
-              componentLeftX - selectW / 2,
-              selectTopY
-            )
           }
           if (isSorption(selectHalfX, componentHalfX)) {
             line.select.set(lineItem, { x: componentHalfX })
-            selectTarget.value.setPosition(
+            selectTarget.value.setPosition(componentHalfX - selectW / 2, selectTopY)
-              componentHalfX - selectW / 2,
-              selectTopY
-            )
           }
           if (isSorption(selectHalfX, componentRightX)) {
             line.select.set(lineItem, { x: componentRightX })
-            selectTarget.value.setPosition(
+            selectTarget.value.setPosition(componentRightX - selectW / 2, selectTopY)
-              componentRightX - selectW / 2,
-              selectTopY
-            )
           }
         }
         if (lineItem.includes('colr')) {
@@ -254,14 +225,14 @@ watch(
           }
           if (isSorption(selectRightX, componentRightX)) {
             line.select.set(lineItem, { x: componentRightX })
-            selectTarget.value.setPosition( componentRightX - selectW, selectTopY )
+            selectTarget.value.setPosition(componentRightX - selectW, selectTopY)
           }
         }
 
         /*
           * 我也不知道为什么这个不行，还没时间调
           if(lineItem.includes('row')) {
-            seletY.forEach(sY => {
+            selectY.forEach(sY => {
               componentY.forEach(cY => {
                 if (isSorption(sY, cY)) {
                   line.select.set(lineItem, { y: cY })

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

@@ -4,19 +4,16 @@
     <!-- 锚点 -->
     <div
       :class="`shape-point ${point}`"
-      v-for="(point, index) in (select? pointList : [])"
+      v-for="(point, index) in select ? pointList : []"
       :key="index"
       :style="usePointStyle(point, index, item.attr, cursorResize)"
       @mousedown="useMousePointHandle($event, point, item.attr)"
-   ></div>
+    ></div>
 
     <!-- 选中 -->
     <div class="shape-modal" :style="useSizeStyle(item.attr)">
       <div class="shape-modal-select" :class="{ active: select }"></div>
-      <div
+      <div class="shape-modal-change" :class="{ selectActive: select, hoverActive: hover }"></div>
-        class="shape-modal-change"
-        :class="{ selectActive: select, hoverActive: hover }"
-     ></div>
     </div>
   </div>
 </template>
@@ -52,8 +49,10 @@ const hover = computed(() => {
   return props.item.id === chartEditStore.getTargetChart.hoverId
 })
 
+// 兼容多值场景
 const select = computed(() => {
-  return props.item.id === chartEditStore.getTargetChart.selectId
+  const id = props.item.id
+  return chartEditStore.getTargetChart.selectId.find((e: string) => e === id)
 })
 </script>
 
@@ -79,7 +78,7 @@ const select = computed(() => {
       width: 30px;
       transform: translate(-50%, -30%);
     }
-    &.l, 
+    &.l,
     &.r {
       height: 30px;
     }
@@ -89,9 +88,8 @@ const select = computed(() => {
     &.l {
       transform: translate(-45%, -50%);
     }
-    &.rt, 
+    &.rt,
-    &.rb
+    &.rb {
-    {
       transform: translate(-30%, -30%);
     }
   }

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

@@ -43,7 +43,8 @@ const { image } = toRefs(props.componentData.chartConfig)
 
 // 计算当前选中目标
 const select = computed(() => {
-  return props.componentData.id === chartEditStore.getTargetChart.selectId
+  const id = props.componentData.id
+  return chartEditStore.getTargetChart.selectId.find((e: string) => e === id)
 })
 
 const hover = computed(() => {