feat: 新增撤回前进功能

src/store/modules/chartHistoryStore/chartHistoryDefine.ts

@@ -9,7 +9,12 @@ export const historyActionTypeName = {
   [HistoryActionTypeEnum.UPDATE]: '修改属性',
   [HistoryActionTypeEnum.MOVE]: '移动图表',
   [HistoryActionTypeEnum.PASTE]: '粘贴图表',
-  [HistoryActionTypeEnum.LARYER]: '改变层级',
+  [HistoryActionTypeEnum.COPY]: '复制图表',
+  [HistoryActionTypeEnum.CUT]: '剪切图表',
+  [HistoryActionTypeEnum.TOP]: '层级置顶',
+  [HistoryActionTypeEnum.BOTTOM]: '层级置底',
+  [HistoryActionTypeEnum.UP]: '层级上移',
+  [HistoryActionTypeEnum.DOWN]: '层级下移',
   [HistoryActionTypeEnum.SELECT_HISTORY]: '选择记录',
   
   [HistoryTargetTypeEnum.CANVAS]: '画布初始化'

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

@@ -1,5 +1,5 @@
 import { CreateComponentType } from '@/packages/index.d'
-import { ChartLayoutType } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
+import { EditCanvasType } from '@/store/modules/chartEditStore/chartEditStore.d'
 
 // 操作类型枚举
 export enum HistoryActionTypeEnum {
@@ -17,8 +17,14 @@ export enum HistoryActionTypeEnum {
   CUT = 'cut',
   // 粘贴
   PASTE = 'paste',
-  // 改变层级
-  LARYER = 'laryer',
+  // 置顶
+  TOP = 'top',
+  // 置底
+  BOTTOM = 'bottom',
+  // 上移
+  UP = 'up',
+  // 下移
+  DOWN = 'down',
   // 选择历史记录
   SELECT_HISTORY = 'selectHistory'
 }
@@ -48,7 +54,7 @@ export interface HistoryItemType {
   [HistoryStackItemEnum.ID]: string
   [HistoryStackItemEnum.TARGET_TYPE]: HistoryTargetTypeEnum
   [HistoryStackItemEnum.ACTION_TYPE]: HistoryActionTypeEnum
-  [HistoryStackItemEnum.HISTORY_DATA]: CreateComponentType | ChartLayoutType
+  [HistoryStackItemEnum.HISTORY_DATA]: CreateComponentType | EditCanvasType
 }
 
 // 历史 Store 类型

src/store/modules/chartHistoryStore/chartHistoryStore.ts

@@ -1,7 +1,6 @@
 import { defineStore } from 'pinia'
 import { CreateComponentType } from '@/packages/index.d'
-import { ChartLayoutType } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
-import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
+import { EditCanvasType } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { loadingStart, loadingFinish, loadingError } from '@/utils'
 import {
   HistoryStackEnum,
@@ -35,25 +34,36 @@ export const useChartHistoryStoreStore = defineStore({
      * @param actionType 动作类型
      * @param targetType 对象类型（默认图表）
      */
-    createStackItem(item: CreateComponentType | ChartLayoutType, actionType: HistoryActionTypeEnum, targetType: HistoryTargetTypeEnum = HistoryTargetTypeEnum.CHART) {
+    createStackItem(
+      item: CreateComponentType | EditCanvasType,
+      actionType: HistoryActionTypeEnum,
+      targetType: HistoryTargetTypeEnum = HistoryTargetTypeEnum.CHART
+    ) {
       this.pushBackStackItem({
         [HistoryStackItemEnum.ID]: new Date().getTime().toString(),
         [HistoryStackItemEnum.HISTORY_DATA]: item,
         [HistoryStackItemEnum.ACTION_TYPE]: actionType,
-        [HistoryStackItemEnum.TARGET_TYPE]: targetType,
+        [HistoryStackItemEnum.TARGET_TYPE]: targetType
       })
     },
     // * 画布初始化
-    canvasInit(canvas: ChartLayoutType) {
-      this.createStackItem(canvas, HistoryActionTypeEnum.ADD, HistoryTargetTypeEnum.CANVAS)
+    canvasInit(canvas: EditCanvasType) {
+      this.createStackItem(
+        canvas,
+        HistoryActionTypeEnum.ADD,
+        HistoryTargetTypeEnum.CANVAS
+      )
     },
     // * 推入记录栈
-    pushBackStackItem(item: HistoryItemType | Array<HistoryItemType>, notClear = false): void {
+    pushBackStackItem(
+      item: HistoryItemType | Array<HistoryItemType>,
+      notClear = false
+    ): void {
       if (item instanceof Array) this.backStack = [...this.backStack, ...item]
       else this.backStack.push(item)
-
+      this.backStack.splice(0, this.backStack.length - 20)
       // 新动作需清空前进栈
-      if(notClear) return
+      if (notClear) return
       this.clearForwardStack()
     },
     // * 推入前进栈
@@ -63,7 +73,9 @@ export const useChartHistoryStoreStore = defineStore({
       else this.forwardStack.push(item)
     },
     // * 移出记录栈
-    popBackStackItem( index?: number ): HistoryItemType[] | HistoryItemType | undefined {
+    popBackStackItem(
+      index?: number
+    ): HistoryItemType[] | HistoryItemType | undefined {
       const length = this.backStack.length
       if (index && length >= index) {
         return this.backStack.splice(-index)
@@ -73,7 +85,9 @@ export const useChartHistoryStoreStore = defineStore({
       }
     },
     // * 移出前进栈
-    popForwardStack( index?: number ): HistoryItemType[] | HistoryItemType | undefined {
+    popForwardStack(
+      index?: number
+    ): HistoryItemType[] | HistoryItemType | undefined {
       const length = this.forwardStack.length
       if (index && length >= index) {
         return this.forwardStack.splice(-index)
@@ -96,7 +110,7 @@ export const useChartHistoryStoreStore = defineStore({
           if (!targetData) {
             loadingFinish()
             return
-          } 
+          }
           // 移除记录到前进堆
           this.pushForwardStack(targetData)
           loadingFinish()
@@ -116,7 +130,7 @@ export const useChartHistoryStoreStore = defineStore({
           if (!targetData) {
             loadingFinish()
             return
-          } 
+          }
           // 放入后退栈
           this.pushBackStackItem(targetData, true)
           loadingFinish()
@@ -129,27 +143,58 @@ export const useChartHistoryStoreStore = defineStore({
     },
     // * 新增组件记录
     createAddHistory(item: CreateComponentType) {
-      this.createStackItem(item, HistoryActionTypeEnum.ADD, HistoryTargetTypeEnum.CHART)
+      this.createStackItem(
+        item,
+        HistoryActionTypeEnum.ADD,
+        HistoryTargetTypeEnum.CHART
+      )
     },
     // * 更新属性记录（大小、图表属性）
     createUpdateHistory(item: CreateComponentType) {
-      this.createStackItem(item, HistoryActionTypeEnum.UPDATE, HistoryTargetTypeEnum.CHART)
+      this.createStackItem(
+        item,
+        HistoryActionTypeEnum.UPDATE,
+        HistoryTargetTypeEnum.CHART
+      )
     },
     // * 删除组件记录
     createDeleteHistory(item: CreateComponentType) {
-      this.createStackItem(item, HistoryActionTypeEnum.DELETE, HistoryTargetTypeEnum.CHART)
+      this.createStackItem(
+        item,
+        HistoryActionTypeEnum.DELETE,
+        HistoryTargetTypeEnum.CHART
+      )
     },
     // * 移动组件记录
     createMoveHistory(item: CreateComponentType) {
-      this.createStackItem(item, HistoryActionTypeEnum.MOVE, HistoryTargetTypeEnum.CHART)
+      this.createStackItem(
+        item,
+        HistoryActionTypeEnum.MOVE,
+        HistoryTargetTypeEnum.CHART
+      )
     },
     // * 改变层级组件记录
-    createLaryerHistory(item: CreateComponentType) {
-      this.createStackItem(item, HistoryActionTypeEnum.LARYER, HistoryTargetTypeEnum.CHART)
+    createLaryerHistory(
+      item: CreateComponentType,
+      type:
+        | HistoryActionTypeEnum.TOP
+        | HistoryActionTypeEnum.DOWN
+        | HistoryActionTypeEnum.UP
+        | HistoryActionTypeEnum.BOTTOM
+    ) {
+      this.createStackItem(
+        item,
+        type,
+        HistoryTargetTypeEnum.CHART
+      )
     },
-    // * 粘贴组件记录
+    // * 剪切组件记录
     createPasteHistory(item: CreateComponentType) {
-      this.createStackItem(item, HistoryActionTypeEnum.PASTE, HistoryTargetTypeEnum.CHART)
-    },
+      this.createStackItem(
+        item,
+        HistoryActionTypeEnum.CUT,
+        HistoryTargetTypeEnum.CHART
+      )
+    }
   }
 })