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

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

@@ -55,6 +55,7 @@ export type TargetChartType = {
 export enum ChartEditStoreEnum {
   EDIT_RANGE = 'editRange',
   EDIT_CANVAS = 'editCanvas',
+  RIGHT_MENU_SHOW = 'rightMenuShow',
   MOUSE_POSITION = 'mousePosition',
   TARGET_CHART = 'targetChart',
   COMPONENT_LIST = 'componentList'
@@ -63,6 +64,7 @@ export enum ChartEditStoreEnum {
 // Store 类型
 export interface chartEditStoreType {
   [ChartEditStoreEnum.EDIT_CANVAS]: EditCanvasType
+  [ChartEditStoreEnum.RIGHT_MENU_SHOW]: boolean
   [ChartEditStoreEnum.MOUSE_POSITION]: MousePositionType
   [ChartEditStoreEnum.TARGET_CHART]: TargetChartType
   [ChartEditStoreEnum.COMPONENT_LIST]: any[]

src/store/modules/chartEditStore/chartEditStore.ts

@@ -32,6 +32,8 @@ export const useChartEditStoreStore = defineStore({
       // 默认背景色
       background: undefined
     },
+    // 右键菜单
+    rightMenuShow: false,
     // 鼠标定位
     mousePosition: {
       x: 0,
@@ -49,6 +51,9 @@ export const useChartEditStoreStore = defineStore({
     getMousePosition(): MousePositionType {
       return this.mousePosition
     },
+    getRightMenuShow(): boolean {
+      return this.rightMenuShow
+    },
     getEditCanvas(): EditCanvasType {
       return this.editCanvas
     },
@@ -64,6 +69,10 @@ export const useChartEditStoreStore = defineStore({
     setEditCanvasItem< T extends keyof EditCanvasType,  K extends EditCanvasType[T] >(key: T, value: K) {
       this.editCanvas[key] = value
     },
+    // * 设置右键菜单
+    setRightMenuShow(value: boolean) {
+      this.rightMenuShow = value
+    },
     // * 设置目标数据 hover
     setTargetHoverChart(hoverIndex?:TargetChartType["hoverIndex"]) {
       this.targetChart.hoverIndex = hoverIndex

src/store/modules/chartHistoryStore/chartHistoryStore.d.ts

@@ -1,10 +1,28 @@
-export interface HistoryStackType {
+import { CreateComponentType } from '@/packages/index.d'
 
+// 操作类型枚举
+export enum HistoryTypeEnum {
+  ADD = 'add',
+  DELETE = 'delete',
+  MOVE = 'move',
+  SELECT_HISTORY = 'selectHistory'
 }
 
-export interface chartHistoryStoreType {
+// 历史栈
+export enum HistoryStackEnum {
+  BACK_STACK= 'backStack',
+  FORWARD_STACK= 'forwardStack',
+}
+
+// 历史记录项类型
+export interface HistoryItemType extends  CreateComponentType {
+  historyType: HistoryTypeEnum
+}
+
+// 历史 Store 类型
+export interface ChartHistoryStoreType {
   // 后退栈
-  backStack: [],
+  [HistoryStackEnum.BACK_STACK]: Array<HistoryItemType>,
   // 前进栈
-  forwardStack: []
+  [HistoryStackEnum.FORWARD_STACK]: Array<HistoryItemType>,
 }

src/store/modules/chartHistoryStore/chartHistoryStore}.ts

@@ -1,11 +1,62 @@
 import { defineStore } from 'pinia'
-import { chartHistoryStoreType } from './chartHistoryStore.d'
+import {
+  HistoryStackEnum,
+  HistoryItemType,
+  ChartHistoryStoreType
+} from './chartHistoryStore.d'
 import { setLocalStorage, getLocalStorage } from '@/utils'
 import { StorageEnum } from '@/enums/storageEnum'
 
 export const useChartHistoryStoreStore = defineStore({
   id: 'useChartHistoryStore',
-  state: (): chartHistoryStoreType => ({}),
+  state: (): ChartHistoryStoreType => ({
-  getters: {},
+    // 后退栈（记录栈）
-  actions: {}
+    backStack: [],
+    // 前进栈
+    forwardStack: []
+  }),
+  getters: {
+    getBackStack(): Array<HistoryItemType> {
+      return this.backStack
+    },
+    getForwardStack(): Array<HistoryItemType> {
+      return this.forwardStack
+    }
+  },
+  actions: {
+    // * 推入记录栈
+    addBackStackItem(item: HistoryItemType | Array<HistoryItemType>): void {
+      if(item instanceof Array) this.backStack = [...this.backStack, ...item]
+      else this.backStack.push(item)
+    },
+    // * 推入前进栈
+    addForwardStack(item: HistoryItemType | Array<HistoryItemType>): void {
+      if(item instanceof Array) this.forwardStack = [...this.forwardStack, ...item]
+      else this.forwardStack.push(item)
+    },
+    // * 移出记录栈
+    popBackStackItem(
+      index?: number
+    ): HistoryItemType[] | HistoryItemType | undefined {
+      const length = this.backStack.length
+      if (index && length >= index) {
+        return this.backStack.splice(-index)
+      }
+      if (this.backStack.length > 0) {
+        return this.backStack.pop()
+      }
+    },
+    // * 移出前进栈
+    popForwardStack(
+      index?: number
+    ): HistoryItemType[] | HistoryItemType | undefined {
+      const length = this.forwardStack.length
+      if (index && length >= index) {
+        return this.forwardStack.splice(-index)
+      }
+      if (this.forwardStack.length > 0) {
+        return this.forwardStack.pop()
+      }
+    }
+  }
 })

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

@@ -58,17 +58,17 @@ const select = computed(() => {
     }
 
     .shape-modal-select {
-      opacity: 0.2;
+      opacity: 0.1;
-      top: 1px;
+      top: 2px;
-      left: 1px;
+      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/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 { handleContextMenu } = useContextMenu()
-const {
-  showDropdownRef,
-  menuOptions,
-  onClickoutside,
-  mousePosition,
-  handleContextMenu,
-  handleMenuSelect
-} = useContextMenu()
 
 // 布局处理
 useLayout()

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

@@ -1,15 +1,14 @@
 import { reactive, ref, nextTick } from 'vue'
-import { getChartEditStore } from './useStore.hook'
+import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { loadingError } from '@/utils'
 
-const chartEditStore = getChartEditStore()
+const chartEditStore = useChartEditStoreStore()
 
 enum MenuEnum {
   DELETE = 'delete'
 }
 
 export const useContextMenu = () => {
-  const showDropdownRef = ref(false)
   const targetIndex = ref<number>(0)
 
   // * 右键选项
@@ -29,21 +28,21 @@ export const useContextMenu = () => {
     while (target instanceof SVGElement) {
       target = target.parentNode
     }
-    showDropdownRef.value = false
+    chartEditStore.setRightMenuShow(false)
     nextTick().then(() => {
       chartEditStore.setMousePosition(e.clientX, e.clientY)
-      showDropdownRef.value = true
+      chartEditStore.setRightMenuShow(true)
     })
   }
 
   // * 失焦
   const onClickoutside = (e: MouseEvent) => {
-    showDropdownRef.value = false
+    chartEditStore.setRightMenuShow(false)
   }
 
   // * 事件处理
   const handleMenuSelect = (key: string) => {
-    showDropdownRef.value = false
+    chartEditStore.setRightMenuShow(false)
     switch (key) {
       case MenuEnum.DELETE:
         chartEditStore.removeComponentList(targetIndex.value)
@@ -53,7 +52,6 @@ export const useContextMenu = () => {
   }
 
   return {
-    showDropdownRef,
     menuOptions,
     handleContextMenu,
     onClickoutside,

src/views/chart/index.vue

@@ -20,11 +20,26 @@
       </n-layout-content>
     </n-layout>
   </div>
+  <!-- 右键 -->
+  <n-dropdown
+    placement="bottom-start"
+    trigger="manual"
+    size="small"
+    :x="mousePosition.x"
+    :y="mousePosition.y"
+    :options="menuOptions"
+    :show="chartEditStore.getRightMenuShow"
+    :on-clickoutside="onClickoutside"
+    @select="handleMenuSelect"
+  />
 </template>
 
 <script setup lang="ts">
 import { loadAsyncComponent } from '@/utils'
 import { HeaderPro } from '@/layout/components/HeaderPro'
+import { useContextMenu } from './hooks/useContextMenu.hook'
+import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
+const chartEditStore = useChartEditStoreStore()
 
 const HeaderLeftBtn = loadAsyncComponent(() =>
   import('./HeaderLeftBtn/index.vue')
@@ -44,6 +59,15 @@ const ContentCharts = loadAsyncComponent(() =>
 const ContentDetails = loadAsyncComponent(() =>
   import('./ContentDetails/index.vue')
 )
+
+// 右键
+const {
+  menuOptions,
+  onClickoutside,
+  mousePosition,
+  handleContextMenu,
+  handleMenuSelect
+} = useContextMenu()
 </script>
 
 <style lang="scss" scoped>