fix： 修改右键判定区域，新增历史记录store

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

@@ -58,17 +58,17 @@ const select = computed(() => {
     }
 
     .shape-modal-select {
-      opacity: 0.2;
-      top: 1px;
-      left: 1px;
+      opacity: 0.1;
+      top: 2px;
+      left: 2px;
       &.active {
         background-color: v-bind('themeColor');
       }
     }
     .shape-modal-change {
-      border: 1px solid rgba(0, 0, 0, 0);
+      border: 2px solid rgba(0, 0, 0, 0);
       &.active {
-        border: 1px solid v-bind('themeColor');
+        border: 2px solid v-bind('themeColor');
       }
     }
   }

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

@@ -1,63 +0,0 @@
-import { reactive, ref, nextTick } from 'vue'
-import { getChartEditStore } from './useStore.hook'
-import { loadingError } from '@/utils'
-
-const chartEditStore = getChartEditStore()
-
-enum MenuEnum {
-  DELETE = 'delete'
-}
-
-export const useContextMenu = () => {
-  const showDropdownRef = ref(false)
-  const targetIndex = ref<number>(0)
-
-  // * 右键选项
-  const menuOptions = reactive([
-    {
-      label: '删除',
-      key: MenuEnum.DELETE
-    }
-  ])
-
-  // * 右键处理
-  const handleContextMenu = (e: MouseEvent, index: number) => {
-    e.stopPropagation()
-    e.preventDefault()
-    targetIndex.value = index
-    let target = e.target
-    while (target instanceof SVGElement) {
-      target = target.parentNode
-    }
-    showDropdownRef.value = false
-    nextTick().then(() => {
-      chartEditStore.setMousePosition(e.clientX, e.clientY)
-      showDropdownRef.value = true
-    })
-  }
-
-  // * 失焦
-  const onClickoutside = (e: MouseEvent) => {
-    showDropdownRef.value = false
-  }
-
-  // * 事件处理
-  const handleMenuSelect = (key: string) => {
-    showDropdownRef.value = false
-    switch (key) {
-      case MenuEnum.DELETE:
-        chartEditStore.removeComponentList(targetIndex.value)
-        break
-      default: loadingError()
-    }
-  }
-
-  return {
-    showDropdownRef,
-    menuOptions,
-    handleContextMenu,
-    onClickoutside,
-    handleMenuSelect,
-    mousePosition: chartEditStore.getMousePosition
-  }
-}

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

@@ -7,7 +7,7 @@ interface AttrType {
 
 export const useComponentStyle = (attr: AttrType, index: number) => {
   const componentStyle = {
-    zIndex: index,
+    zIndex: index + 1,
     left: `${attr.x}px`,
     top: `${attr.y}px`,
   }

src/views/chart/ContentEdit/index.vue

@@ -13,18 +13,6 @@
     <div id="go-chart-edit-content">
       <!-- 展示 -->
       <EditRange ref="editRangeRef">
-        <!-- 右键 -->
-        <n-dropdown
-          placement="bottom-start"
-          trigger="manual"
-          size="small"
-          :x="mousePosition.x"
-          :y="mousePosition.y"
-          :options="menuOptions"
-          :show="showDropdownRef"
-          :on-clickoutside="onClickoutside"
-          @select="handleMenuSelect"
-        />
         <!-- 图表 -->
         <ShapeBox
           v-for="(item, index) in chartEditStore.getComponentList"
@@ -63,22 +51,14 @@ import { ShapeBox } from './components/ShapeBox/index'
 
 import { useLayout } from './hooks/useLayout.hook'
 import { handleDrop, handleDragOver, useMouseHandle } from './hooks/useDrop.hook'
-import { useContextMenu } from './hooks/useContextMenu.hook'
+import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
 import { getChartEditStore } from './hooks/useStore.hook'
 import { useComponentStyle, useSizeStyle } from './hooks/useStyle.hook'
 import { CreateComponentType } from '@/packages/index.d'
 
 const chartEditStore = getChartEditStore()
 
-// 右键
-const {
-  showDropdownRef,
-  menuOptions,
-  onClickoutside,
-  mousePosition,
-  handleContextMenu,
-  handleMenuSelect
-} = useContextMenu()
+const { handleContextMenu } = useContextMenu()
 
 // 布局处理
 useLayout()