feat: 新增撤回前进功能

src/packages/utils/publicConfig.ts

@@ -1,15 +1,15 @@
 import { getUUID } from '@/utils'
 import { PublicConfigType } from '@/packages/index.d'
 
-export class publicConfig implements PublicConfigType{
+export class publicConfig implements PublicConfigType {
   public id = getUUID()
   // 重命名
   public rename = undefined
   // 基本信息
-  public attr = { x: 0, y: 0, w: 500, h: 300, zIndex: 0 }
+  public attr = { x: 0, y: 0, w: 500, h: 300, zIndex: -1 }
   // 设置坐标
   public setPosition(x: number, y: number): void {
     this.attr.x = x
     this.attr.y = y
   }
-}
+}

src/plugins/naive.ts

@@ -17,6 +17,7 @@ import {
   NInput,
   NImage,
   NButton,
+  NButtonGroup,
   NForm,
   NFormItem,
   NCheckboxGroup,
@@ -101,6 +102,7 @@ const naive = create({
     NGradientText,
     NInput,
     NButton,
+    NButtonGroup,
     NForm,
     NFormItem,
     NCheckboxGroup,

src/store/modules/chartEditStore/chartEditStore.ts

@@ -13,7 +13,7 @@ import {
 
 // 记录记录
 import { useChartHistoryStoreStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
-import { HistoryActionTypeEnum, HistoryItemType } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
+import { HistoryActionTypeEnum, HistoryItemType, HistoryTargetTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
 
 const chartHistoryStoreStore = useChartHistoryStoreStore()
 
@@ -115,22 +115,22 @@ export const useChartEditStoreStore = defineStore({
      * @returns
      */
     addComponentList(chartData: CreateComponentType, isEnd = false, isHistory = false): void {
-      if(isHistory) {
+      if (isHistory) {
         chartHistoryStoreStore.createAddHistory(chartData)
       }
-      if(isEnd) {
+      if (isEnd) {
         this.componentList.unshift(chartData)
         return
       }
       this.componentList.push(chartData)
     },
     // * 删除组件列表
-    removeComponentList(): void {
+    removeComponentList(isHistory = true): void {
       try {
         loadingStart()
         const index  = this.fetchTargetIndex()
         if (index !== -1) {
-          chartHistoryStoreStore.createDeleteHistory(this.getComponentList[index])
+          isHistory ? chartHistoryStoreStore.createDeleteHistory(this.getComponentList[index]) : undefined
           this.componentList.splice(index, 1)
           loadingFinish()
           return
@@ -141,7 +141,7 @@ export const useChartEditStoreStore = defineStore({
     },
     // * 更新组件列表某一项的值
     updateComponentList(index: number, newData: CreateComponentType) {
-      if(index < 1 && index > this.getComponentList.length) return
+      if (index < 1 && index > this.getComponentList.length) return
       this.componentList[index] = newData
     },
     // * 设置页面样式属性
@@ -155,25 +155,41 @@ export const useChartEditStoreStore = defineStore({
       }
     },
     // * 移动组件列表位置到两端
-    setBothEnds(isEnd = false): void {
+    setBothEnds(isEnd = false, isHistory = true): void {
       try {
         loadingStart()
         const length = this.getComponentList.length
-        if(length < 2) {
+        if (length < 2) {
           loadingFinish()
           return
         }
 
         const index  = this.fetchTargetIndex()
+        const targetData = this.getComponentList[index]
         if (index !== -1) {
           // 置底排除最底层, 置顶排除最顶层
           if ((isEnd && index === 0) || (!isEnd && index === length - 1 )) {
             loadingFinish()
             return
           }
+
+          // 记录原有位置
+          const setIndex = (t:CreateComponentType, i:number) => {
+            const temp = cloneDeep(t)
+            temp.attr.zIndex = i
+            return temp
+          }
+
+          // 历史记录
+          if (isHistory) {
+            chartHistoryStoreStore.createLaryerHistory(
+              setIndex(targetData, index),
+              isEnd ? HistoryActionTypeEnum.BOTTOM : HistoryActionTypeEnum.TOP
+            )
+          }
+
           // 插入两端
-          chartHistoryStoreStore.createLaryerHistory(this.getComponentList[index])
-          this.addComponentList(this.getComponentList[index], isEnd)
+          this.addComponentList(targetData, isEnd)
           this.getComponentList.splice(isEnd ? index + 1: index, 1)
           loadingFinish()
           return
@@ -183,15 +199,15 @@ export const useChartEditStoreStore = defineStore({
       }
     },
     // * 置顶
-    setTop(): void {
-      this.setBothEnds()
+    setTop(isHistory = true): void {
+      this.setBothEnds(false, isHistory)
     },
     // * 置底
-    setBottom(): void {
-      this.setBothEnds(true)
+    setBottom(isHistory = true): void {
+      this.setBothEnds(true, isHistory)
     },
     // * 互换图表位置
-    wrap(isDown = false) {
+    wrap(isDown = false, isHistory = true) {
       try {
         loadingStart()
         const length = this.getComponentList.length
@@ -212,10 +228,15 @@ export const useChartEditStoreStore = defineStore({
           const targetItem = this.getComponentList[index]
           const swapItem = this.getComponentList[swapIndex]
 
-          chartHistoryStoreStore.createLaryerHistory(targetItem)
+          // 历史记录
+          if (isHistory) {
+            chartHistoryStoreStore.createLaryerHistory(
+              targetItem,
+              isDown ? HistoryActionTypeEnum.DOWN : HistoryActionTypeEnum.UP
+            )
+          }
           this.updateComponentList(index, swapItem)
           this.updateComponentList(swapIndex, targetItem)
-
           loadingFinish()
           return
         }
@@ -224,12 +245,12 @@ export const useChartEditStoreStore = defineStore({
       }
     },
     // * 上移
-    setUp() {
-      this.wrap()
+    setUp(isHistory = true) {
+      this.wrap(false, isHistory)
     },
     // * 下移
-    setDown() {
-      this.wrap(true)
+    setDown(isHistory = true) {
+      this.wrap(true, isHistory)
     },
     // * 复制
     setCopy(isCut = false) {
@@ -279,7 +300,7 @@ export const useChartEditStoreStore = defineStore({
             // 剪切需删除原数据
             if (isCut) {
               this.setTargetSelectChart(e.id)
-              this.removeComponentList()
+              this.removeComponentList(true)
             }
           })
           if (isCut) this.setRecordChart(undefined)
@@ -288,7 +309,7 @@ export const useChartEditStoreStore = defineStore({
         }
         // 单项
         this.addComponentList(parseHandle(recordCharts.charts), undefined, true)
-        if(isCut) {
+        if (isCut) {
           this.setTargetSelectChart(recordCharts.charts.id)
           this.removeComponentList()
           this.setRecordChart(undefined)
@@ -298,19 +319,62 @@ export const useChartEditStoreStore = defineStore({
         loadingError()
       }
     },
-    // 撤回处理
+    // * 撤回/前进 目标处理
     setBackAndSetForwardHandle(item: HistoryItemType, isForward = false) {
-      // 前进
-      if (isForward) {
+      // 处理画布
+      if (item.targetType === HistoryTargetTypeEnum.CANVAS) {
+        this.editCanvas = item.historyData as EditCanvasType
         return
       }
-      console.log(item);
+
+      const historyData = item.historyData as CreateComponentType
+
+      // 处理新增类型
+      const isAdd = item.actionType === HistoryActionTypeEnum.ADD
+      const isDel = item.actionType === HistoryActionTypeEnum.DELETE
+      this.setTargetSelectChart(historyData.id)
+      if (isAdd || isDel) {
+        if ((isAdd && isForward) || (isDel && !isForward)) {
+          this.addComponentList(historyData)
+          return  
+        }
+        this.removeComponentList(false)
+        return
+      }
+
+      // 处理层级
+      const isTop = item.actionType === HistoryActionTypeEnum.TOP
+      const isBottom = item.actionType === HistoryActionTypeEnum.BOTTOM
+      if (isTop || isBottom) {
+        if (!isForward) {
+          // 插入到原有位置
+          if (isTop) this.getComponentList.pop()
+          if (isBottom) this.getComponentList.shift()
+          this.getComponentList.splice(historyData.attr.zIndex, 0, historyData)
+          return
+        }
+        if (isTop) this.setTop(false)
+        if (isBottom) this.setBottom(false)
+      }
+
+      const isUp = item.actionType === HistoryActionTypeEnum.UP
+      const isDown = item.actionType === HistoryActionTypeEnum.DOWN
+      if (isUp || isDown) {
+        if ((isUp && isForward) || (isDown && !isForward)) {
+          this.setUp(false)
+          return
+        }
+        this.setDown(false)
+        return
+      }
+
+      // 处理内容修改
+      this.getComponentList[this.fetchTargetIndex()] = item.historyData as CreateComponentType
     },
     // * 撤回
     setBack() {
       try {
         loadingStart()
-        console.log('撤回');
         const targetData = chartHistoryStoreStore.backAction()
         if (!targetData) {
           loadingFinish()
@@ -334,7 +398,6 @@ export const useChartEditStoreStore = defineStore({
     setForward() {
       try {
         loadingStart()
-        console.log('前进');
         const targetData = chartHistoryStoreStore.forwardAction()
         if (!targetData) {
           loadingFinish()

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
+      )
+    }
   }
 })

src/views/chart/ContentDetails/components/Behind/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    后端数据
+    数据
   </div>
 </template>
 

src/views/chart/ContentDetails/components/Setting/index.vue

@@ -1,13 +1,13 @@
 <template>
-  <div>
+  <div class="go-chart-content-details">
     设置
   </div>
 </template>
 
-<script setup>
-
-</script>
+<script setup></script>
 
 <style lang="scss" scoped>
-
+@include go('chart-content-details') {
+  position: relative;
+}
 </style>

src/views/chart/ContentDetails/index.vue

@@ -90,7 +90,7 @@ const tabList = shallowRef([
   },
   {
     key: 'behind',
-    title: '后端数据',
+    title: '数据',
     icon: FlashIcon,
     render: Behind
   }

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

@@ -75,7 +75,13 @@ const iconHandle = (e: HistoryItemType) => {
       return renderIcon(TrashIcon)
     case HistoryActionTypeEnum.PASTE:
       return renderIcon(CopyIcon)
-    case HistoryActionTypeEnum.LARYER:
+    case HistoryActionTypeEnum.TOP:
+        return renderIcon(LayersIcon)
+    case HistoryActionTypeEnum.BOTTOM:
+      return renderIcon(LayersIcon)
+    case HistoryActionTypeEnum.UP:
+      return renderIcon(LayersIcon)
+    case HistoryActionTypeEnum.DOWN:
       return renderIcon(LayersIcon)
     case HistoryActionTypeEnum.MOVE:
       return renderIcon(StackedMoveIcon)

src/views/chart/ContentEdit/index.vue

@@ -50,7 +50,7 @@ import { EditBottom } from './components/EditBottom'
 import { ShapeBox } from './components/ShapeBox/index'
 
 import { useLayout } from './hooks/useLayout.hook'
-import { useAddKeyboard, useRemoveKeyboard } from './hooks/useKeyboard.hook'
+import { useAddKeyboard } from '../hooks/useKeyboard.hook'
 import { handleDrop, handleDragOver, useMouseHandle } from './hooks/useDrop.hook'
 import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
 import { getChartEditStore } from './hooks/useStore.hook'

src/views/chart/HeaderLeftBtn/index.vue

@@ -27,7 +27,7 @@ import { icon } from '@/plugins'
 const { LayersIcon, BarChartIcon, PrismIcon, HomeIcon } = icon.ionicons5
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
-import { useRemoveKeyboard } from '../ContentEdit/hooks/useKeyboard.hook'
+import { useRemoveKeyboard } from '../hooks/useKeyboard.hook'
 
 const { setItem } = useChartLayoutStore()
 const { getLayers, getCharts, getDetails } = toRefs(useChartLayoutStore())

src/views/chart/ContentEdit/hooks/useKeyboard.hook.ts → src/views/chart/hooks/useKeyboard.hook.ts

@@ -1,5 +1,5 @@
 import { isMac, addEventListener, removeEventListener } from '@/utils'
-import { getChartEditStore } from './useStore.hook'
+import { getChartEditStore } from '../ContentEdit/hooks/useStore.hook'
 import { MenuEnum } from '@/views/chart/hooks/useContextMenu.hook'
 
 const chartEditStore = getChartEditStore()
@@ -25,6 +25,7 @@ const KeyboardHandle = (e: KeyboardEvent) => {
     chartEditStore.removeComponentList()
     return
   }
+  
   // 前进
   if (e.ctrlKey && e.shiftKey && key == keyboardValue.back) {
     chartEditStore.setForward()