feat: 合并多选功能，解决冲突，升级版本到2.0.4

2026-04-23 00:00:12 +08:00 · 2022-08-19 10:44:44 +08:00
parent f506ccd2e4 32743391f8
commit fa34300401
55 changed files with 1746 additions and 641 deletions
@@ -1,10 +1,11 @@
+import { toRaw } from 'vue'
 import { defineStore } from 'pinia'
-import { CreateComponentType } from '@/packages/index.d'
+import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
+import { PublicGroupConfigClass } from '@/packages/public/publicConfig'
 import debounce from 'lodash/debounce'
 import cloneDeep from 'lodash/cloneDeep'
 import { defaultTheme, globalThemeJson } from '@/settings/chartThemes/index'
 import { requestInterval, previewScaleType, requestIntervalUnit } from '@/settings/designSetting'
-import { RequestBodyEnum } from '@/enums/httpEnum'
 // 记录记录
 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
 // 全局设置
@@ -67,6 +68,8 @@ export const useChartEditStore = defineStore({
      isCreate: false,
      // 拖拽中
      isDrag: false,
+      // 框选中
+      isSelect: false,
      // 同步中
      saveStatus: SyncEnum.PENDING
    },
@@ -128,8 +131,8 @@ export const useChartEditStore = defineStore({
      requestIntervalUnit: requestIntervalUnit,
      requestParams: {
        Body: {
-          "form-data": {},
-          "x-www-form-urlencoded": {},
+          'form-data': {},
+          'x-www-form-urlencoded': {},
          json: '',
          xml: ''
        },
@@ -156,7 +159,7 @@ export const useChartEditStore = defineStore({
    getEditCanvasConfig(): EditCanvasConfigType {
      return this.editCanvasConfig
    },
-    getTargetChart():TargetChartType {
+    getTargetChart(): TargetChartType {
      return this.targetChart
    },
    getRecordChart(): RecordChartType | undefined {
@@ -165,7 +168,7 @@ export const useChartEditStore = defineStore({
    getRequestGlobalConfig(): RequestGlobalConfigType {
      return this.requestGlobalConfig
    },
-    getComponentList(): CreateComponentType[] {
+    getComponentList(): Array<CreateComponentType | CreateComponentGroupType> {
      return this.componentList
    },
    // 获取需要存储的数据项
@@ -183,11 +186,11 @@ export const useChartEditStore = defineStore({
      this.projectInfo[key] = value
    },
    // * 设置 editCanvas 数据项
-    setEditCanvas<T extends keyof EditCanvasType,  K extends EditCanvasType[T]>(key: T, value: K) {
+    setEditCanvas<T extends keyof EditCanvasType, K extends EditCanvasType[T]>(key: T, value: K) {
      this.editCanvas[key] = value
    },
    // * 设置 editCanvasConfig（需保存后端） 数据项
-    setEditCanvasConfig<T extends keyof EditCanvasConfigType,  K extends EditCanvasConfigType[T]>(key: T, value: K) {
+    setEditCanvasConfig<T extends keyof EditCanvasConfigType, K extends EditCanvasConfigType[T]>(key: T, value: K) {
      this.editCanvasConfig[key] = value
    },
    // * 设置右键菜单
@@ -195,39 +198,39 @@ export const useChartEditStore = defineStore({
      this.rightMenuShow = value
    },
    // * 设置目标数据 hover
-    setTargetHoverChart(hoverId?:TargetChartType["hoverId"]) {
+    setTargetHoverChart(hoverId?: TargetChartType['hoverId']) {
      this.targetChart.hoverId = hoverId
    },
    // * 设置目标数据 select
    setTargetSelectChart(selectId?: string | string[], push: boolean = false) {
      // 重复选中
-      if(this.targetChart.selectId.find((e: string) => e === selectId)) return
+      if (this.targetChart.selectId.find((e: string) => e === selectId)) return

      // 无 id 清空
-      if(!selectId) {
+      if (!selectId) {
        this.targetChart.selectId = []
        return
      }
-      // 新增
-      if(push) {
+      // 多选
+      if (push) {
        // 字符串
-        if(isString(selectId)) {
+        if (isString(selectId)) {
          this.targetChart.selectId.push(selectId)
          return
        }
        // 数组
-        if(isArray(selectId)) {
+        if (isArray(selectId)) {
          this.targetChart.selectId.push(...selectId)
          return
        }
      } else {
        // 字符串
-        if(isString(selectId)) {
+        if (isString(selectId)) {
          this.targetChart.selectId = [selectId]
          return
        }
        // 数组
-        if(isArray(selectId)) {
+        if (isArray(selectId)) {
          this.targetChart.selectId = selectId
          return
        }
@@ -239,66 +242,108 @@ export const useChartEditStore = defineStore({
    },
    // * 设置鼠标位置
    setMousePosition(x?: number, y?: number, startX?: number, startY?: number): void {
-      if (startX) this.mousePosition.startX = startX
-      if (startY) this.mousePosition.startY = startY
      if (x) this.mousePosition.x = x
      if (y) this.mousePosition.y = y
+      if (startX) this.mousePosition.startX = startX
+      if (startY) this.mousePosition.startY = startY
    },
-    // * 找到目标 id 数据下标位置（无则返回-1）
+    // * 找到目标 id 数据的下标位置，id可为父级或子集数组（无则返回-1）
    fetchTargetIndex(id?: string): number {
-      const targetId = id || this.getTargetChart.selectId.length && this.getTargetChart.selectId[0] || undefined
-      if(!targetId) {
+      const targetId = id || (this.getTargetChart.selectId.length && this.getTargetChart.selectId[0]) || undefined
+      if (!targetId) {
        loadingFinish()
        return -1
      }
-      const index = this.componentList.findIndex(e => e.id === targetId)
-      if (index === -1) {
-        loadingError()
+      const targetIndex = this.componentList.findIndex(e => e.id === targetId)
+
+      // 当前
+      if (targetIndex !== -1) {
+        return targetIndex
+      } else {
+        const length = this.getComponentList.length
+        for (let i = 0; i < length; i++) {
+          if (this.getComponentList[i].isGroup) {
+            for (const cItem of (this.getComponentList[i] as CreateComponentGroupType).groupList) {
+              if (cItem.id === targetId) {
+                return i
+              }
+            }
+          }
+        }
      }
-      return index
+      return -1
+    },
+    // * 统一格式化处理入参 id
+    idPreFormat(id?: string | string[]) {
+      const idArr = []
+      if (!id) {
+        idArr.push(...this.getTargetChart.selectId)
+        return idArr
+      }
+      if (isString(id)) idArr.push(id)
+      if (isArray(id)) idArr.push(...id)
+      return idArr
    },
    /**
     * * 新增组件列表
-     * @param chartConfig 新图表实例
+     * @param componentInstance 新图表实例
     * @param isHead 是否头部插入
     * @param isHistory 是否进行记录
     * @returns
     */
-    addComponentList(chartConfig: CreateComponentType, isHead = false, isHistory = false): void {
-      if (isHistory) {
-        chartHistoryStore.createAddHistory(chartConfig)
-      }
-      if (isHead) {
-        this.componentList.unshift(chartConfig)
+    addComponentList(
+      componentInstance:
+        | CreateComponentType
+        | CreateComponentGroupType
+        | Array<CreateComponentType | CreateComponentGroupType>,
+      isHead = false,
+      isHistory = false
+    ): void {
+      if (componentInstance instanceof Array) {
+        componentInstance.forEach(item => {
+          this.addComponentList(item, isHead, isHistory)
+        })
        return
      }
-      this.componentList.push(chartConfig)
+      if (isHistory) {
+        chartHistoryStore.createAddHistory([componentInstance])
+      }
+      if (isHead) {
+        this.componentList.unshift(componentInstance)
+        return
+      }
+      this.componentList.push(componentInstance)
    },
-    // * 删除组件列表
-    removeComponentList(isHistory = true): void {
+    // * 删除组件
+    removeComponentList(id?: string | string[], isHistory = true): void {
      try {
+        const idArr = this.idPreFormat(id)
+        const history: Array<CreateComponentType | CreateComponentGroupType> = []
+        // 遍历所有对象
+        if (!idArr.length) return
+
        loadingStart()
-        const index  = this.fetchTargetIndex()
-        if (index !== -1) {
-          isHistory ? chartHistoryStore.createDeleteHistory(this.getComponentList[index]) : undefined
-          this.componentList.splice(index, 1)
-          loadingFinish()
-          return
-        }
-      } catch(value) {
+        idArr.forEach(ids => {
+          const index = this.fetchTargetIndex(ids)
+          if (index !== -1) {
+            history.push(this.getComponentList[index])
+            this.componentList.splice(index, 1)
+          }
+        })
+        isHistory && chartHistoryStore.createDeleteHistory(history)
+        loadingFinish()
+        return
+      } catch (value) {
        loadingError()
      }
    },
    // * 更新组件列表某一项的值
-    updateComponentList(index: number, newData: CreateComponentType) {
+    updateComponentList(index: number, newData: CreateComponentType | CreateComponentGroupType) {
      if (index < 1 && index > this.getComponentList.length) return
      this.componentList[index] = newData
    },
    // * 设置页面样式属性
-    setPageStyle<T extends keyof CSSStyleDeclaration>(
-      key: T,
-      value: any
-    ): void {
+    setPageStyle<T extends keyof CSSStyleDeclaration>(key: T, value: any): void {
      const dom = this.getEditCanvas.editContentDom
      if (dom) {
        dom.style[key] = value
@@ -307,6 +352,9 @@ export const useChartEditStore = defineStore({
    // * 移动组件列表层级位置到两端
    setBothEnds(isEnd = false, isHistory = true): void {
      try {
+        // 暂不支持多选
+        if (this.getTargetChart.selectId.length > 1) return
+
        loadingStart()
        const length = this.getComponentList.length
        if (length < 2) {
@@ -314,18 +362,18 @@ export const useChartEditStore = defineStore({
          return
        }

-        const index  = this.fetchTargetIndex()
+        const index = this.fetchTargetIndex()
        const targetData = this.getComponentList[index]
        if (index !== -1) {
          // 置底排除最底层, 置顶排除最顶层
-          if ((isEnd && index === 0) || (!isEnd && index === length - 1 )) {
+          if ((isEnd && index === 0) || (!isEnd && index === length - 1)) {
            loadingFinish()
            return
          }

          // 记录原有位置
-          const setIndex = (t:CreateComponentType, i:number) => {
-            const temp = cloneDeep(t)
+          const setIndex = (componentInstance: CreateComponentType | CreateComponentGroupType, i: number) => {
+            const temp = cloneDeep(componentInstance)
            temp.attr.zIndex = i
            return temp
          }
@@ -333,18 +381,18 @@ export const useChartEditStore = defineStore({
          // 历史记录
          if (isHistory) {
            chartHistoryStore.createLayerHistory(
-              setIndex(targetData, index),
+              [setIndex(targetData, index)],
              isEnd ? HistoryActionTypeEnum.BOTTOM : HistoryActionTypeEnum.TOP
            )
          }

          // 插入两端
          this.addComponentList(targetData, isEnd)
-          this.getComponentList.splice(isEnd ? index + 1: index, 1)
+          this.getComponentList.splice(isEnd ? index + 1 : index, 1)
          loadingFinish()
          return
        }
-      } catch(value) {
+      } catch (value) {
        loadingError()
      }
    },
@@ -359,6 +407,9 @@ export const useChartEditStore = defineStore({
    // * 上移/下移互换图表位置
    wrap(isDown = false, isHistory = true) {
      try {
+        // 暂不支持多选
+        if (this.getTargetChart.selectId.length > 1) return
+
        loadingStart()
        const length = this.getComponentList.length
        if (length < 2) {
@@ -366,7 +417,7 @@ export const useChartEditStore = defineStore({
          return
        }

-        const index:number  = this.fetchTargetIndex()
+        const index: number = this.fetchTargetIndex()
        if (index !== -1) {
          // 下移排除最底层, 上移排除最顶层
          if ((isDown && index === 0) || (!isDown && index === length - 1)) {
@@ -381,7 +432,7 @@ export const useChartEditStore = defineStore({
          // 历史记录
          if (isHistory) {
            chartHistoryStore.createLayerHistory(
-              targetItem,
+              [targetItem],
              isDown ? HistoryActionTypeEnum.DOWN : HistoryActionTypeEnum.UP
            )
          }
@@ -390,7 +441,7 @@ export const useChartEditStore = defineStore({
          loadingFinish()
          return
        }
-      } catch(value) {
+      } catch (value) {
        loadingError()
      }
    },
@@ -405,18 +456,21 @@ export const useChartEditStore = defineStore({
    // * 复制
    setCopy(isCut = false) {
      try {
+        // 暂不支持多选
+        if (this.getTargetChart.selectId.length > 1) return
+
        loadingStart()
-        const index:number  = this.fetchTargetIndex()
+        const index: number = this.fetchTargetIndex()
        if (index !== -1) {
-          const copyData:RecordChartType = {
-           charts :this.getComponentList[index],
-           type: isCut ? HistoryActionTypeEnum.CUT : HistoryActionTypeEnum.COPY
+          const copyData: RecordChartType = {
+            charts: this.getComponentList[index],
+            type: isCut ? HistoryActionTypeEnum.CUT : HistoryActionTypeEnum.COPY
          }
          this.setRecordChart(copyData)
          window['$message'].success(isCut ? '剪切图表成功' : '复制图表成功！')
          loadingFinish()
        }
-      } catch(value) {
+      } catch (value) {
        loadingError()
      }
    },
@@ -433,7 +487,7 @@ export const useChartEditStore = defineStore({
          loadingFinish()
          return
        }
-        const parseHandle = (e: CreateComponentType) => {
+        const parseHandle = (e: CreateComponentType | CreateComponentGroupType) => {
          e = cloneDeep(e)
          // 生成新 id
          e.id = getUUID()
@@ -449,7 +503,7 @@ export const useChartEditStore = defineStore({
            // 剪切需删除原数据
            if (isCut) {
              this.setTargetSelectChart(e.id)
-              this.removeComponentList(true)
+              this.removeComponentList(undefined, true)
            }
          })
          if (isCut) this.setRecordChart(undefined)
@@ -464,50 +518,59 @@ export const useChartEditStore = defineStore({
          this.setRecordChart(undefined)
        }
        loadingFinish()
-      } catch(value) {
+      } catch (value) {
        loadingError()
      }
    },
    // * 撤回/前进 目标处理
-    setBackAndSetForwardHandle(item: HistoryItemType, isForward = false) {
+    setBackAndSetForwardHandle(HistoryItem: HistoryItemType, isForward = false) {
      // 处理画布
-      if (item.targetType === HistoryTargetTypeEnum.CANVAS) {
-        this.editCanvas = item.historyData as EditCanvasType
+      if (HistoryItem.targetType === HistoryTargetTypeEnum.CANVAS) {
+        this.editCanvas = HistoryItem.historyData[0] as EditCanvasType
        return
      }

-      const historyData = item.historyData as CreateComponentType
+      let historyData = HistoryItem.historyData as Array<CreateComponentType | CreateComponentGroupType>
+      if (isArray(historyData)) {
+        // 选中目标元素，支持多个
+        historyData.forEach((item: CreateComponentType | CreateComponentGroupType) => {
+          this.setTargetSelectChart(item.id, true)
+        })
+      }

      // 处理新增类型
-      const isAdd = item.actionType === HistoryActionTypeEnum.ADD
-      const isDel = item.actionType === HistoryActionTypeEnum.DELETE
-      this.setTargetSelectChart(historyData.id)
+      const isAdd = HistoryItem.actionType === HistoryActionTypeEnum.ADD
+      const isDel = HistoryItem.actionType === HistoryActionTypeEnum.DELETE
      if (isAdd || isDel) {
        if ((isAdd && isForward) || (isDel && !isForward)) {
-          this.addComponentList(historyData)
-          return  
+          historyData.forEach(item => {
+            this.addComponentList(item)
+          })
+          return
        }
-        this.removeComponentList(false)
+        historyData.forEach(item => {
+          this.removeComponentList(item.id, false)
+        })
        return
      }

      // 处理层级
-      const isTop = item.actionType === HistoryActionTypeEnum.TOP
-      const isBottom = item.actionType === HistoryActionTypeEnum.BOTTOM
+      const isTop = HistoryItem.actionType === HistoryActionTypeEnum.TOP
+      const isBottom = HistoryItem.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)
+          this.getComponentList.splice(historyData[0].attr.zIndex, 0, historyData[0])
          return
        }
        if (isTop) this.setTop(false)
        if (isBottom) this.setBottom(false)
      }

-      const isUp = item.actionType === HistoryActionTypeEnum.UP
-      const isDown = item.actionType === HistoryActionTypeEnum.DOWN
+      const isUp = HistoryItem.actionType === HistoryActionTypeEnum.UP
+      const isDown = HistoryItem.actionType === HistoryActionTypeEnum.DOWN
      if (isUp || isDown) {
        if ((isUp && isForward) || (isDown && !isForward)) {
          this.setUp(false)
@@ -517,8 +580,32 @@ export const useChartEditStore = defineStore({
        return
      }

-      // 处理内容修改
-      this.getComponentList[this.fetchTargetIndex()] = item.historyData as CreateComponentType
+      // 处理分组
+      const isGroup = HistoryItem.actionType === HistoryActionTypeEnum.GROUP
+      const isUnGroup = HistoryItem.actionType === HistoryActionTypeEnum.UN_GROUP
+      if (isGroup || isUnGroup) {
+        if ((isGroup && isForward) || (isUnGroup && !isForward)) {
+          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
+        }
+        // 都需使用子组件的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
+      }
    },
    // * 撤回
    setBack() {
@@ -529,17 +616,9 @@ export const useChartEditStore = defineStore({
          loadingFinish()
          return
        }
-        if (Array.isArray(targetData)) {
-          targetData.forEach((e: HistoryItemType) => {
-            this.setBackAndSetForwardHandle(e)
-          })
-          loadingFinish()
-          return
-        }
        this.setBackAndSetForwardHandle(targetData)
        loadingFinish()
-
-      } catch(value) {
+      } catch (value) {
        loadingError()
      }
    },
@@ -552,39 +631,157 @@ export const useChartEditStore = defineStore({
          loadingFinish()
          return
        }
-        if (Array.isArray(targetData)) {
-          targetData.forEach((e: HistoryItemType) => {
-            this.setBackAndSetForwardHandle(e, true)
-          })
-          loadingFinish()
-          return
-        }
        this.setBackAndSetForwardHandle(targetData, true)
        loadingFinish()
-
-      } catch(value) {
+      } catch (value) {
        loadingError()
      }
    },
    // * 移动位置
    setMove(keyboardValue: MenuEnum) {
-      const index  = this.fetchTargetIndex()
-      if(index === -1) return
+      const index = this.fetchTargetIndex()
+      if (index === -1) return
      const attr = this.getComponentList[index].attr
      const distance = settingStore.getChartMoveDistance
      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(id?: string | string[], isHistory = true) {
+      try {
+        const selectIds = this.idPreFormat(id) || this.getTargetChart.selectId
+        if (selectIds.length < 2) return
+
+        loadingStart()
+        const groupClass = new PublicGroupConfigClass()
+        // 记录整体坐标
+        const groupAttr = {
+          l: this.getEditCanvasConfig.width,
+          t: this.getEditCanvasConfig.height,
+          r: 0,
+          b: 0
+        }
+        const targetList: CreateComponentType[] = []
+        const historyList: CreateComponentType[] = []
+
+        // 若目标中有数组则先解组
+        const newSelectIds: string[] = []
+        selectIds.forEach((id: string) => {
+          const targetIndex = this.fetchTargetIndex(id)
+          if (targetIndex !== -1 && this.getComponentList[targetIndex].isGroup) {
+            this.setUnGroup(
+              [id],
+              (e: CreateComponentType[]) => {
+                e.forEach(e => {
+                  this.addComponentList(e)
+                  newSelectIds.push(e.id)
+                })
+              },
+              false
+            )
+          } else if (targetIndex !== -1) {
+            newSelectIds.push(id)
+          }
+        })
+        newSelectIds.forEach((id: string) => {
+          // 获取目标数据并从 list 中移除 (成组后不可再次成组, 断言处理)
+          const item = this.componentList.splice(this.fetchTargetIndex(id), 1)[0] as CreateComponentType
+          const { x, y, w, h } = item.attr
+          const { l, t, r, b } = groupAttr
+          // 左
+          groupAttr.l = l > x ? x : l
+          // 上
+          groupAttr.t = t > y ? y : t
+          // 宽
+          groupAttr.r = r < x + w ? x + w : r
+          // 高
+          groupAttr.b = b < y + h ? y + h : b
+
+          targetList.push(item)
+          historyList.push(toRaw(item))
+        })
+
+        // 修改原数据之前，先记录
+        if (isHistory) chartHistoryStore.createGroupHistory(historyList)
+
+        // 设置子组件的位置
+        targetList.forEach((item: CreateComponentType) => {
+          item.attr.x = item.attr.x - groupAttr.l
+          item.attr.y = item.attr.y - groupAttr.t
+          groupClass.groupList.push(item)
+        })
+
+        // 设置 group 属性
+        groupClass.attr.x = groupAttr.l
+        groupClass.attr.y = groupAttr.t
+        groupClass.attr.w = groupAttr.r - groupAttr.l
+        groupClass.attr.h = groupAttr.b - groupAttr.t
+
+        this.addComponentList(groupClass)
+        this.setTargetSelectChart(groupClass.id)
+
+        loadingFinish()
+      } catch (error) {
+        console.log(error)
+        window['$message'].error('创建分组失败，请联系管理员！')
+        loadingFinish()
+      }
+    },
+    // * 解除分组
+    setUnGroup(ids?: string[], callBack?: (e: CreateComponentType[]) => void, isHistory = true) {
+      try {
+        const selectGroupIdArr = ids || this.getTargetChart.selectId
+        if (selectGroupIdArr.length !== 1) return
+        loadingStart()
+
+        // 解组
+        const unGroup = (targetIndex: number) => {
+          const targetGroup = this.getComponentList[targetIndex] as CreateComponentGroupType
+          if (!targetGroup.isGroup) return
+
+          // 记录数据
+          if (isHistory) chartHistoryStore.createUnGroupHistory(cloneDeep([targetGroup]))
+
+          // 分离组件并还原位置属性
+          targetGroup.groupList.forEach(item => {
+            item.attr.x = item.attr.x + targetGroup.attr.x
+            item.attr.y = item.attr.y + targetGroup.attr.y
+            if (!callBack) {
+              this.addComponentList(item)
+            }
+          })
+          this.setTargetSelectChart(targetGroup.id)
+          // 删除分组
+          this.removeComponentList(targetGroup.id, false)
+
+          if (callBack) {
+            callBack(targetGroup.groupList)
+          }
+        }
+
+        const targetIndex = this.fetchTargetIndex(selectGroupIdArr[0])
+        // 判断目标是否为分组父级
+        if (targetIndex !== -1) {
+          unGroup(targetIndex)
+        }
+
+        loadingFinish()
+      } catch (error) {
+        console.log(error)
+        window['$message'].error('解除分组失败，请联系管理员！')
+        loadingFinish()
      }
    },
    // * 页面缩放设置-----------------
@@ -597,32 +794,24 @@ export const useChartEditStore = defineStore({
    computedScale() {
      if (this.getEditCanvas.editLayoutDom) {
        // 现有展示区域
-        const width =
-          this.getEditCanvas.editLayoutDom.clientWidth - this.getEditCanvas.offset * 2 - 5
-        const height =
-          this.getEditCanvas.editLayoutDom.clientHeight - this.getEditCanvas.offset * 4
+        const width = this.getEditCanvas.editLayoutDom.clientWidth - this.getEditCanvas.offset * 2 - 5
+        const height = this.getEditCanvas.editLayoutDom.clientHeight - this.getEditCanvas.offset * 4

        // 用户设定大小
        const editCanvasWidth = this.editCanvasConfig.width
        const editCanvasHeight = this.editCanvasConfig.height

        // 需保持的比例
-        const baseProportion = parseFloat(
-          (editCanvasWidth / editCanvasHeight).toFixed(5)
-        )
+        const baseProportion = parseFloat((editCanvasWidth / editCanvasHeight).toFixed(5))
        const currentRate = parseFloat((width / height).toFixed(5))

        if (currentRate > baseProportion) {
          // 表示更宽
-          const scaleWidth = parseFloat(
-            ((height * baseProportion) / editCanvasWidth).toFixed(5)
-          )
-          this.setScale( scaleWidth > 1 ? 1 : scaleWidth)
+          const scaleWidth = parseFloat(((height * baseProportion) / editCanvasWidth).toFixed(5))
+          this.setScale(scaleWidth > 1 ? 1 : scaleWidth)
        } else {
          // 表示更高
-          const scaleHeight = parseFloat(
-            (width / baseProportion / editCanvasHeight).toFixed(5)
-          )
+          const scaleHeight = parseFloat((width / baseProportion / editCanvasHeight).toFixed(5))
          this.setScale(scaleHeight > 1 ? 1 : scaleHeight)
        }
      } else {
@@ -655,4 +844,4 @@ export const useChartEditStore = defineStore({
      }
    }
  }
-})
+})