fix：修改删除的bug

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

@@ -47,8 +47,8 @@ export type MousePositionType = {
 
 // 操作目标
 export type TargetChartType = {
-  hoverIndex?: string
-  selectIndex?: string
+  hoverId?: string
+  selectId?: string
 }
 
 // Store 枚举

src/store/modules/chartEditStore/chartEditStore.ts

@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia'
 import debounce from 'lodash/debounce'
 import { loadingStart, loadingFinish, loadingError } from '@/utils'
+import { CreateComponentType } from '@/packages/index.d'
 import {
   chartEditStoreType,
   EditCanvasType,
@@ -41,8 +42,8 @@ export const useChartEditStoreStore = defineStore({
     },
     // 目标图表
     targetChart: {
-      hoverIndex: undefined,
-      selectIndex: undefined
+      hoverId: undefined,
+      selectId: undefined
     },
     // 图表数组
     componentList: []
@@ -74,27 +75,22 @@ export const useChartEditStoreStore = defineStore({
       this.rightMenuShow = value
     },
     // * 设置目标数据 hover
-    setTargetHoverChart(hoverIndex?:TargetChartType["hoverIndex"]) {
-      this.targetChart.hoverIndex = hoverIndex
+    setTargetHoverChart(hoverId?:TargetChartType["hoverId"]) {
+      this.targetChart.hoverId = hoverId
     },
     // * 设置目标数据 select
-    setTargetSelectChart(selectIndex?:TargetChartType["selectIndex"]) {
-      this.targetChart.selectIndex = selectIndex
+    setTargetSelectChart(selectId?:TargetChartType["selectId"]) {
+      this.targetChart.selectId = selectId
     },
     // * 新增组件列表
     addComponentList<T>(chartData: T): void {
       this.componentList.push(chartData)
     },
     // * 删除组件列表
-    removeComponentList<T extends { key: string }>(chartData: T | number): void {
+    removeComponentList(): void {
       loadingStart()
       try {
-        if(typeof chartData === 'number') {
-          this.componentList.splice(chartData, 1)
-          loadingFinish()
-          return
-        }
-        const i = this.componentList.findIndex(e => e.key === chartData.key)
+        const i = this.componentList.findIndex(e => e.id === this.getTargetChart.selectId)
         if (i !== -1) {
           this.componentList.splice(i, 1)
           loadingFinish()

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

@@ -31,11 +31,11 @@ const chartEditStore = useChartEditStoreStore()
 
 // 计算当前选中目标
 const hover = computed(() => {
-  return props.item.id === chartEditStore.getTargetChart.hoverIndex
+  return props.item.id === chartEditStore.getTargetChart.hoverId
 })
 
 const select = computed(() => {
-  return props.item.id === chartEditStore.getTargetChart.selectIndex
+  return props.item.id === chartEditStore.getTargetChart.selectId
 })
 </script>
 

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

@@ -52,7 +52,7 @@ export const mousedownHandleUnStop = (
     chartEditStore.setTargetSelectChart(item.id)
     return
   }
-  chartEditStore.setTargetSelectChart(item)
+  chartEditStore.setTargetSelectChart(undefined)
 }
 
 // 移动图表

src/views/chart/ContentEdit/index.vue

@@ -24,7 +24,7 @@
           @mousedown="mousedownHandle($event, item)"
           @mouseenter="mouseenterHandle($event, item)"
           @mouseleave="mouseleaveHandle($event, item)"
-          @contextmenu="handleContextMenu($event, index)"
+          @contextmenu="handleContextMenu($event, item)"
         >
           <component
             class="edit-content-chart"

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

@@ -43,11 +43,11 @@ const { image, title } = toRefs(props.componentData.chartData)
 
 // 计算当前选中目标
 const select = computed(() => {
-  return props.componentData.id === chartEditStore.getTargetChart.selectIndex
+  return props.componentData.id === chartEditStore.getTargetChart.selectId
 })
 
 const hover = computed(() => {
-  return props.componentData.id === chartEditStore.getTargetChart.hoverIndex
+  return props.componentData.id === chartEditStore.getTargetChart.hoverId
 })
 </script>
 

src/views/chart/ContentLayers/index.vue

@@ -14,13 +14,13 @@
 
     <!-- 图层内容 -->
     <ListItem
-      v-for="item in chartEditStore.getComponentList"
+      v-for="(item) in chartEditStore.getComponentList"
       :key="item.id"
       :componentData="item"
       @mousedown="mousedownHandle(item)"
       @mouseenter="mouseenterHandle(item)"
       @mouseleave="mouseleaveHandle(item)"
-      @contextmenu="handleContextMenu($event, index)"
+      @contextmenu="handleContextMenu($event, item)"
     />
   </ContentBox>
 </template>

src/views/chart/hooks/useContextMenu.hook.ts

@@ -1,5 +1,6 @@
 import { ref, nextTick } from 'vue'
 import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { CreateComponentType } from '@/packages/index.d'
 import { loadingError } from '@/utils'
 
 const chartEditStore = useChartEditStoreStore()
@@ -27,8 +28,6 @@ export const useContextMenu = (menuOption?: {
   const selfOptions = menuOption?.selfOptions
   const optionsHandle = menuOption?.optionsHandle
 
-  const targetIndex = ref<number>(0)
-
   // * 默认选项
   const defaultOptions: MenuOptionsItemType[] = [
     {
@@ -42,10 +41,9 @@ export const useContextMenu = (menuOption?: {
   const menuOptions: MenuOptionsItemType[] = selfOptions || defaultOptions
 
   // * 右键处理
-  const handleContextMenu = (e: MouseEvent, index: number) => {
+  const handleContextMenu = (e: MouseEvent, item: CreateComponentType) => {
     e.stopPropagation()
     e.preventDefault()
-    targetIndex.value = index
     let target = e.target
     while (target instanceof SVGElement) {
       target = target.parentNode
@@ -69,9 +67,9 @@ export const useContextMenu = (menuOption?: {
       (e: MenuOptionsItemType) => e.key === key
     )
     if (!targetItem) loadingError()
-    if (targetItem.length) targetItem.pop()?.fnHandle(targetIndex.value)
+    if (targetItem.length) targetItem.pop()?.fnHandle()
   }
-  console.log(optionsHandle ? optionsHandle(menuOptions) : menuOptions)
+
   return {
     menuOptions: optionsHandle ? optionsHandle(menuOptions) : menuOptions,
     handleContextMenu,