fix: 处理分组前进后退的问题

src/store/modules/chartEditStore/chartEditStore.ts

@@ -10,16 +10,13 @@ import { requestInterval, previewScaleType, requestIntervalUnit } from '@/settin
 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
 // 全局设置
 import { useSettingStore } from '@/store/modules/settingStore/settingStore'
-import { HistoryActionTypeEnum, HistoryItemType, HistoryTargetTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
-import { MenuEnum } from '@/enums/editPageEnum'
 import {
-  getUUID,
+  HistoryActionTypeEnum,
-  loadingStart,
+  HistoryItemType,
-  loadingFinish,
+  HistoryTargetTypeEnum
-  loadingError,
+} from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
-  isString,
+import { MenuEnum } from '@/enums/editPageEnum'
-  isArray
+import { getUUID, loadingStart, loadingFinish, loadingError, isString, isArray } from '@/utils'
-} from '@/utils'
 import {
   ChartEditStoreEnum,
   ChartEditStorage,
@@ -115,8 +112,8 @@ export const useChartEditStore = defineStore({
       requestIntervalUnit: requestIntervalUnit,
       requestParams: {
         Body: {
-          "form-data": {},
+          'form-data': {},
-          "x-www-form-urlencoded": {},
+          'x-www-form-urlencoded': {},
           json: '',
           xml: ''
         },
@@ -175,7 +172,7 @@ export const useChartEditStore = defineStore({
       this.rightMenuShow = value
     },
     // * 设置目标数据 hover
-    setTargetHoverChart(hoverId?:TargetChartType["hoverId"]) {
+    setTargetHoverChart(hoverId?: TargetChartType['hoverId']) {
       this.targetChart.hoverId = hoverId
     },
     // * 设置目标数据 select
@@ -226,7 +223,7 @@ export const useChartEditStore = defineStore({
     },
     // * 找到目标 id 数据的下标位置，id可为父级或子集数组（无则返回-1）
     fetchTargetIndex(id?: string): number {
-      const targetId = id || this.getTargetChart.selectId.length && this.getTargetChart.selectId[0] || undefined
+      const targetId = id || (this.getTargetChart.selectId.length && this.getTargetChart.selectId[0]) || undefined
       if (!targetId) {
         loadingFinish()
         return -1
@@ -272,8 +269,7 @@ export const useChartEditStore = defineStore({
       componentInstance:
         | CreateComponentType
         | CreateComponentGroupType
-        | CreateComponentType[]
+        | Array<CreateComponentType | CreateComponentGroupType>,
-        | CreateComponentGroupType[],
       isHead = false,
       isHistory = false
     ): void {
@@ -321,10 +317,7 @@ export const useChartEditStore = defineStore({
       this.componentList[index] = newData
     },
     // * 设置页面样式属性
-    setPageStyle<T extends keyof CSSStyleDeclaration>(
+    setPageStyle<T extends keyof CSSStyleDeclaration>(key: T, value: any): void {
-      key: T,
-      value: any
-    ): void {
       const dom = this.getEditCanvas.editContentDom
       if (dom) {
         dom.style[key] = value
@@ -566,10 +559,25 @@ export const useChartEditStore = defineStore({
       const isUnGroup = HistoryItem.actionType === HistoryActionTypeEnum.UN_GROUP
       if (isGroup || isUnGroup) {
         if ((isGroup && isForward) || (isUnGroup && !isForward)) {
-          this.setGroup(false)
+          const ids: string[] = []
+          if(historyData.length > 1) {
+            historyData.forEach(item => {
+              ids.push(item.id)
+            })
+          } else {
+            (historyData[0] as CreateComponentGroupType).groupList.forEach(item => {
+              ids.push(item.id)
+            })
+          }
+          this.setGroup(ids, false)
           return
         }
-        this.setUnGroup([historyData[0].id], undefined, false)
+        // 都需使用子组件的id去解组
+        if(historyData.length > 1) {
+          this.setUnGroup([(historyData[0] as CreateComponentType).id], undefined, false)
+        } else {
+          this.setUnGroup([(historyData[0] as CreateComponentGroupType).groupList[0].id], undefined, false)
+        }
         return
       }
     },
@@ -584,7 +592,6 @@ export const useChartEditStore = defineStore({
         }
         this.setBackAndSetForwardHandle(targetData)
         loadingFinish()
-
       } catch (value) {
         loadingError()
       }
@@ -600,7 +607,6 @@ export const useChartEditStore = defineStore({
         }
         this.setBackAndSetForwardHandle(targetData, true)
         loadingFinish()
-
       } catch (value) {
         loadingError()
       }
@@ -614,22 +620,22 @@ export const useChartEditStore = defineStore({
       switch (keyboardValue) {
         case MenuEnum.ARROW_UP:
           attr.y -= distance
-          break;
+          break
         case MenuEnum.ARROW_RIGHT:
           attr.x += distance
-          break;
+          break
         case MenuEnum.ARROW_DOWN:
           attr.y += distance
-          break;
+          break
         case MenuEnum.ARROW_LEFT:
           attr.x -= distance
-          break;
+          break
       }
     },
     // * 创建分组
-    setGroup(isHistory = true) {
+    setGroup(id?: string | string[], isHistory = true) {
       try {
-        const selectIds = this.getTargetChart.selectId
+        const selectIds = this.idPreFormat(id) || this.getTargetChart.selectId
         if (selectIds.length < 2) return
 
         loadingStart()
@@ -649,12 +655,16 @@ export const useChartEditStore = defineStore({
         selectIds.forEach((id: string) => {
           const targetIndex = this.fetchTargetIndex(id)
           if (targetIndex !== -1 && this.getComponentList[targetIndex].isGroup) {
-            this.setUnGroup([id], (e: CreateComponentType[]) => {
+            this.setUnGroup(
+              [id],
+              (e: CreateComponentType[]) => {
                 e.forEach(e => {
                   this.addComponentList(e)
                   newSelectIds.push(e.id)
                 })
-            }, false)
+              },
+              false
+            )
           } else if (targetIndex !== -1) {
             newSelectIds.push(id)
           }
@@ -678,7 +688,6 @@ export const useChartEditStore = defineStore({
         })
 
         // 修改原数据之前，先记录
-        console.log(historyList)
         if (isHistory) chartHistoryStore.createGroupHistory(historyList)
 
         // 设置子组件的位置
@@ -717,7 +726,7 @@ export const useChartEditStore = defineStore({
           if (!targetGroup.isGroup) return
 
           // 记录数据
-          if(isHistory) chartHistoryStore.createUnGroupHistory([targetGroup])
+          if (isHistory) chartHistoryStore.createUnGroupHistory(cloneDeep([targetGroup]))
 
           // 分离组件并还原位置属性
           targetGroup.groupList.forEach(item => {
@@ -759,32 +768,24 @@ export const useChartEditStore = defineStore({
     computedScale() {
       if (this.getEditCanvas.editLayoutDom) {
         // 现有展示区域
-        const width =
+        const width = this.getEditCanvas.editLayoutDom.clientWidth - this.getEditCanvas.offset * 2 - 5
-          this.getEditCanvas.editLayoutDom.clientWidth - this.getEditCanvas.offset * 2 - 5
+        const height = this.getEditCanvas.editLayoutDom.clientHeight - this.getEditCanvas.offset * 4
-        const height =
-          this.getEditCanvas.editLayoutDom.clientHeight - this.getEditCanvas.offset * 4
 
         // 用户设定大小
         const editCanvasWidth = this.editCanvasConfig.width
         const editCanvasHeight = this.editCanvasConfig.height
 
         // 需保持的比例
-        const baseProportion = parseFloat(
+        const baseProportion = parseFloat((editCanvasWidth / editCanvasHeight).toFixed(5))
-          (editCanvasWidth / editCanvasHeight).toFixed(5)
-        )
         const currentRate = parseFloat((width / height).toFixed(5))
 
         if (currentRate > baseProportion) {
           // 表示更宽
-          const scaleWidth = parseFloat(
+          const scaleWidth = parseFloat(((height * baseProportion) / editCanvasWidth).toFixed(5))
-            ((height * baseProportion) / editCanvasWidth).toFixed(5)
-          )
           this.setScale(scaleWidth > 1 ? 1 : scaleWidth)
         } else {
           // 表示更高
-          const scaleHeight = parseFloat(
+          const scaleHeight = parseFloat((width / baseProportion / editCanvasHeight).toFixed(5))
-            (width / baseProportion / editCanvasHeight).toFixed(5)
-          )
           this.setScale(scaleHeight > 1 ? 1 : scaleHeight)
         }
       } else {

src/store/modules/chartHistoryStore/chartHistoryStore.ts

@@ -166,7 +166,7 @@ export const useChartHistoryStore = defineStore({
     },
     // * 解除分组
     createUnGroupHistory(item: Array<CreateComponentType | CreateComponentGroupType>) {
-      this.createStackItem(item, HistoryActionTypeEnum.GROUP, HistoryTargetTypeEnum.CHART)
+      this.createStackItem(item, HistoryActionTypeEnum.UN_GROUP, HistoryTargetTypeEnum.CHART)
     }
   }
 })

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

@@ -93,7 +93,7 @@ const labelHandle = (e: HistoryItemType) => {
   // 画布编辑
   if (e.targetType === HistoryTargetTypeEnum.CANVAS) {
     return historyActionTypeName[HistoryTargetTypeEnum.CANVAS]
-  } else if (e.actionType === HistoryActionTypeEnum.GROUP) {
+  } else if (e.actionType === HistoryActionTypeEnum.GROUP || e.actionType === HistoryActionTypeEnum.UN_GROUP) {
     return `${historyActionTypeName[e.actionType]}`
   } else if (e.historyData.length) {
     return `${historyActionTypeName[e.actionType]} - ${(e.historyData[0] as CreateComponentType).chartConfig.title}`