fix: 解决组件移动未加入历史栈

src/store/modules/chartEditStore/chartEditStore.ts

@@ -313,6 +313,21 @@ export const useChartEditStore = defineStore({
         loadingError()
       }
     },
+    // * 重置组件位置
+    resetComponentPostion(item: CreateComponentType | CreateComponentGroupType):void{
+      const index = this.fetchTargetIndex(item.id)
+      if(index > -1){
+        const componentInstance = this.getComponentList[index]
+        componentInstance.attr = Object.assign(componentInstance.attr, {
+          x: item.attr.x,
+          y: item.attr.y
+        })
+      }
+    },
+    // * 移动组件
+    moveComponentList(item: CreateComponentType | CreateComponentGroupType){
+      chartHistoryStore.createMoveHistory([item])
+    },
     // * 更新组件列表某一项的值
     updateComponentList(index: number, newData: CreateComponentType | CreateComponentGroupType) {
       if (index < 1 && index > this.getComponentList.length) return
@@ -530,6 +545,15 @@ export const useChartEditStore = defineStore({
         return
       }
 
+      // 处理移动
+      const isMove = HistoryItem.actionType === HistoryActionTypeEnum.MOVE
+      if(isMove){
+        historyData.forEach(item => {
+          this.resetComponentPostion(item)
+        })
+        return
+      }
+
       // 处理层级
       const isTop = HistoryItem.actionType === HistoryActionTypeEnum.TOP
       const isBottom = HistoryItem.actionType === HistoryActionTypeEnum.BOTTOM

src/store/modules/chartHistoryStore/chartHistoryStore.ts

@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia'
 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { EditCanvasType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { loadingStart, loadingFinish, loadingError } from '@/utils'
 import { editHistoryMax } from '@/settings/designSetting'
 import {
@@ -10,6 +11,7 @@ import {
   HistoryItemType,
   ChartHistoryStoreType
 } from './chartHistoryStore.d'
+import { cloneDeep } from 'lodash'
 
 export const useChartHistoryStore = defineStore({
   id: 'useChartHistoryStore',
@@ -95,12 +97,33 @@ export const useChartHistoryStore = defineStore({
         // 排除画布初始化
         if (this.getBackStack.length > 1) {
           const targetData = this.popBackStackItem()
-          if (!targetData) {
-            loadingFinish()
-            return
+          // 移动时逻辑单独处理
+          const isMove  = targetData?.actionType === HistoryActionTypeEnum.MOVE
+          if(isMove){
+            const chartEditStore = useChartEditStore()
+            // 将当前状态存入前进栈
+            const curTargetData:HistoryItemType = cloneDeep(targetData)
+            curTargetData.historyData.forEach(item  => {
+              if(item.id){
+                const index = chartEditStore.fetchTargetIndex(item.id)
+                if(index > -1){
+                  const componentInstance = chartEditStore.getComponentList[index]
+                  item.attr = Object.assign(item.attr, {
+                    x: componentInstance.attr.x,
+                    y: componentInstance.attr.y
+                  })
+                }
+              }
+            })
+            this.pushForwardStack(curTargetData)
+          }else{
+            if (!targetData) {
+              loadingFinish()
+              return
+            }
+            // 移除记录到前进栈
+            this.pushForwardStack(targetData)
           }
-          // 移除记录到前进堆
-          this.pushForwardStack(targetData)
           loadingFinish()
           return targetData
         }
@@ -115,12 +138,34 @@ export const useChartHistoryStore = defineStore({
         loadingStart()
         if (this.getForwardStack.length) {
           const targetData = this.popForwardStack()
-          if (!targetData) {
-            loadingFinish()
-            return
+          // 移动时逻辑单独处理
+          const isMove  = targetData?.actionType === HistoryActionTypeEnum.MOVE
+          if(isMove){
+            const chartEditStore = useChartEditStore()
+            // 将当前状态存入后退栈
+            const curTargetData:HistoryItemType = cloneDeep(targetData)
+            curTargetData.historyData.forEach(item  => {
+              if(item.id){
+                const index = chartEditStore.fetchTargetIndex(item.id)
+                if(index > -1){
+                  const componentInstance = chartEditStore.getComponentList[index]
+                  item.attr = Object.assign(item.attr, {
+                    x: componentInstance.attr.x,
+                    y: componentInstance.attr.y
+                  })
+                }
+              }
+            })
+            this.pushBackStackItem(curTargetData, true)
+          }else{
+            if (!targetData) {
+              loadingFinish()
+              return
+            }
+            // 放入后退栈
+            this.pushBackStackItem(targetData, true)
           }
-          // 放入后退栈
-          this.pushBackStackItem(targetData, true)
+          
           loadingFinish()
           return targetData
         }