Merge branch 'dev' of gitee.com:dromara/go-view into dev

Signed-off-by: 潘潘 <97274247@qq.com>

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue

@@ -127,8 +127,9 @@ const sendHandle = async () => {
   try {
     const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.requestGlobalConfig))
     loading.value = false
-    if (res && res.data) {
-      targetData.value.option.dataset = newFunctionHandle(res.data, targetData.value.filter)
+    if (res) {
+      if(!res?.data && !targetData.value.filter) window['$message'].warning('您的数据不符合默认格式，请配置过滤器！')
+      targetData.value.option.dataset = newFunctionHandle(res?.data, res, targetData.value.filter)
       showMatching.value = true
       return
     }

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMatchingAndShow/index.vue

@@ -27,7 +27,7 @@
     </n-timeline-item>
     <n-timeline-item v-show="filterShow" color="#97846c" :title="TimelineTitleEnum.FILTER">
       <n-space :size="18" vertical>
-        <n-text depth="3">过滤器将处理接口返回值的「data」字段</n-text>
+        <n-text depth="3">过滤器默认处理接口返回值的「data」字段</n-text>
         <chart-data-monaco-editor></chart-data-monaco-editor>
       </n-space>
     </n-timeline-item>

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue

@@ -1,7 +1,7 @@
 <template>
   <template v-if="targetData.filter">
     <n-card>
-      <p><span class="func-keyword">function</span>&nbsp;&nbsp;filter(data)&nbsp;&nbsp;{</p>
+      <p><span class="func-keyword">function</span>&nbsp;&nbsp;filter(data, res)&nbsp;&nbsp;{</p>
       <!-- 函数体 -->
       <div class="go-ml-4">
         <n-code :code="targetData.filter" language="typescript"></n-code>
@@ -47,7 +47,7 @@
           <div>
             <n-space vertical>
               <n-tag type="info">
-                <span class="func-keyword">function</span>&nbsp;&nbsp;filter(data)&nbsp;&nbsp;{
+                <span class="func-keyword">function</span>&nbsp;&nbsp;filter(data, res)&nbsp;&nbsp;{
               </n-tag>
               <monaco-editor v-model:modelValue="filter" width="460px" height="380px" language="javascript" />
               <n-tag type="info">}</n-tag>
@@ -58,14 +58,20 @@
             <n-space :size="15" vertical>
               <div class="editor-data-show">
                 <n-space>
-                  <n-text depth="3">目标数据：</n-text>
-                  <n-code :code="toString(sourceData)" language="json" :word-wrap="true"></n-code>
+                  <n-text depth="3">默认过滤数据(data)：</n-text>
+                  <n-code :code="toString(sourceData?.data) || '暂无'" language="json" :word-wrap="true"></n-code>
+                </n-space>
+              </div>
+              <div class="editor-data-show">
+                <n-space>
+                  <n-text depth="3">接口返回数据(res)：</n-text>
+                  <n-code :code="toString(sourceData) || '暂无'" language="json" :word-wrap="true"></n-code>
                 </n-space>
               </div>
               <div class="editor-data-show">
                 <n-space>
                   <n-text depth="3">过滤器结果：</n-text>
-                  <n-code :code="filterRes" language="json" :word-wrap="true"></n-code>
+                  <n-code :code="filterRes || '暂无'" language="json" :word-wrap="true"></n-code>
                 </n-space>
               </div>
             </n-space>
@@ -81,7 +87,7 @@
               </template>
               规则
             </n-tag>
-            <n-text class="go-ml-2" depth="2">过滤器将处理接口返回值的「data」字段</n-text>
+            <n-text class="go-ml-2" depth="2">过滤器默认处理接口返回值的「data」字段</n-text>
           </div>
 
           <n-space>
@@ -123,8 +129,8 @@ const sourceData = ref<any>('')
 const fetchTargetData = async () => {
   try {
     const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.requestGlobalConfig))
-    if (res && res.data) {
-      sourceData.value = res.data
+    if (res) {
+      sourceData.value = res
       return
     }
     window['$message'].warning('数据异常，请检查参数！')
@@ -136,8 +142,9 @@ const fetchTargetData = async () => {
 // 过滤结果
 const filterRes = computed(() => {
   try {
-    const fn = new Function('data', filter.value)
-    const res = fn(cloneDeep(sourceData.value))
+    const fn = new Function('data', 'res', filter.value)
+    const response = cloneDeep(sourceData.value)
+    const res = fn(response?.data, response)
     // eslint-disable-next-line vue/no-side-effects-in-computed-properties
     errorFlag.value = false
     return toString(res)

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestTargetConfig/index.vue

@@ -76,7 +76,8 @@ import {
   scatterBasicUrl,
   mapUrl,
   wordCloudUrl,
-  treemapUrl
+  treemapUrl,
+  threeEarth01Url
 } from '@/api/mock'
 
 const { HelpOutlineIcon } = icon.ionicons5
@@ -127,6 +128,9 @@ const apiList = [
   {
     value: `【树图】${treemapUrl}`
   },
+  {
+    value: `【三维地球】${threeEarth01Url}`
+  },
 ]
 </script>
 

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

@@ -17,6 +17,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { useSettingStore } from '@/store/modules/settingStore/settingStore'
 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
+import { setComponentPosition } from '@/utils'
 import throttle from 'lodash/throttle'
 import cloneDeep from 'lodash/cloneDeep'
 // 全局颜色
@@ -96,146 +97,150 @@ const canvasPositionList = computed(() => {
 watch(
   () => chartEditStore.getMousePosition,
   throttle(() => {
-    if (!isComputedLine.value || selectId.value.length !== 1) return
-    // 获取目标组件数据
+    try {
+      if (!isComputedLine.value || selectId.value.length !== 1) return
+      // 获取目标组件数据
 
-    const selectW = selectAttr.value.w
-    const selectH = selectAttr.value.h
+      const selectW = selectAttr.value.w
+      const selectH = selectAttr.value.h
 
-    // 距离左侧
-    const selectLeftX = selectAttr.value.x
-    const selectHalfX = selectLeftX + selectW / 2
-    const selectRightX = selectLeftX + selectW
-    const seletX = [selectLeftX, selectHalfX, selectRightX]
+      // 距离左侧
+      const selectLeftX = selectAttr.value.x
+      const selectHalfX = selectLeftX + selectW / 2
+      const selectRightX = selectLeftX + selectW
+      const seletX = [selectLeftX, selectHalfX, selectRightX]
 
-    // 距离顶部
-    const selectTopY = selectAttr.value.y
-    const selectHalfY = selectTopY + selectH / 2
-    const selectBottomY = selectTopY + selectH
-    const selectY = [selectTopY, selectHalfY, selectBottomY]
+      // 距离顶部
+      const selectTopY = selectAttr.value.y
+      const selectHalfY = selectTopY + selectH / 2
+      const selectBottomY = selectTopY + selectH
+      const selectY = [selectTopY, selectHalfY, selectBottomY]
 
-    line.select.clear()
-    line.sorptioned.y = false
-    // 循环查询所有组件数据
-    const componentList = chartEditStore.getComponentList.map((e: CreateComponentType | CreateComponentGroupType) => {
-      return {
-        id: e.id,
-        attr: e.attr
-      }
-    })
-    componentList.push(canvasPositionList.value)
-    // 传入画布数据
-    line.lineArr.forEach(lineItem => {
-      componentList.forEach((component: typeof canvasPositionList.value) => {
-        // 排除自身
-        if (selectId.value[0] === component.id) return
-        const componentW = component.attr.w
-        const componentH = component.attr.h
-
-        // 距离左侧
-        const componentLeftX = component.attr.x
-        const componentHalfX = componentLeftX + componentW / 2
-        const componentRightX = componentLeftX + componentW
-        const componentX = [componentLeftX, componentHalfX, componentRightX]
-
-        // 距离顶部
-        const componentTopY = component.attr.y
-        const componentHalfY = componentTopY + componentH / 2
-        const componentBottomY = componentTopY + componentH
-        const componentY = [componentTopY, componentHalfY, componentBottomY]
-
-        // 横线对比的是 Y
-        if (lineItem.includes('rowt')) {
-          // 顶部
-          if (isSorption(selectTopY, componentTopY)) {
-            line.select.set(lineItem, { y: componentTopY })
-            selectTarget.value.setPosition(selectLeftX, componentTopY)
-          }
-          if (isSorption(selectTopY, componentHalfY)) {
-            line.select.set(lineItem, { y: componentHalfY })
-            selectTarget.value.setPosition(selectLeftX, componentHalfY)
-          }
-          if (isSorption(selectTopY, componentBottomY)) {
-            line.select.set(lineItem, { y: componentBottomY })
-            selectTarget.value.setPosition(selectLeftX, componentBottomY)
-          }
-        }
-        if (lineItem.includes('rowc')) {
-          // 顶部
-          if (isSorption(selectHalfY, componentTopY)) {
-            line.select.set(lineItem, { y: componentTopY })
-            selectTarget.value.setPosition(selectLeftX, componentTopY - selectH / 2)
-          }
-          if (isSorption(selectHalfY, componentHalfY)) {
-            line.select.set(lineItem, { y: componentHalfY })
-            selectTarget.value.setPosition(selectLeftX, componentHalfY - selectH / 2)
-          }
-          if (isSorption(selectHalfY, componentBottomY)) {
-            line.select.set(lineItem, { y: componentBottomY })
-            selectTarget.value.setPosition(selectLeftX, componentBottomY - selectH / 2)
-          }
-        }
-        if (lineItem.includes('rowb')) {
-          // 顶部
-          if (isSorption(selectBottomY, componentTopY)) {
-            line.select.set(lineItem, { y: componentTopY })
-            selectTarget.value.setPosition(selectLeftX, componentTopY - selectH)
-          }
-          if (isSorption(selectBottomY, componentHalfY)) {
-            line.select.set(lineItem, { y: componentHalfY })
-            selectTarget.value.setPosition(selectLeftX, componentHalfY - selectH)
-          }
-          if (isSorption(selectBottomY, componentBottomY)) {
-            line.select.set(lineItem, { y: componentBottomY })
-            selectTarget.value.setPosition(selectLeftX, componentBottomY - selectH)
-          }
-        }
-
-        // 纵线对比的是 X
-        if (lineItem.includes('coll')) {
-          if (isSorption(selectLeftX, componentLeftX)) {
-            line.select.set(lineItem, { x: componentLeftX })
-            selectTarget.value.setPosition(componentLeftX, selectTopY)
-          }
-          if (isSorption(selectLeftX, componentHalfX)) {
-            line.select.set(lineItem, { x: componentHalfX })
-            selectTarget.value.setPosition(componentHalfX, selectTopY)
-          }
-          if (isSorption(selectLeftX, componentRightX)) {
-            line.select.set(lineItem, { x: componentRightX })
-            selectTarget.value.setPosition(componentRightX, selectTopY)
-          }
-        }
-        if (lineItem.includes('colc')) {
-          if (isSorption(selectHalfX, componentLeftX)) {
-            line.select.set(lineItem, { x: componentLeftX })
-            selectTarget.value.setPosition(componentLeftX - selectW / 2, selectTopY)
-          }
-          if (isSorption(selectHalfX, componentHalfX)) {
-            line.select.set(lineItem, { x: componentHalfX })
-            selectTarget.value.setPosition(componentHalfX - selectW / 2, selectTopY)
-          }
-          if (isSorption(selectHalfX, componentRightX)) {
-            line.select.set(lineItem, { x: componentRightX })
-            selectTarget.value.setPosition(componentRightX - selectW / 2, selectTopY)
-          }
-        }
-        if (lineItem.includes('colr')) {
-          if (isSorption(selectRightX, componentLeftX)) {
-            line.select.set(lineItem, { x: componentLeftX })
-            selectTarget.value.setPosition(componentLeftX - selectW, selectTopY)
-          }
-          if (isSorption(selectRightX, componentHalfX)) {
-            line.select.set(lineItem, { x: componentHalfX })
-            selectTarget.value.setPosition(componentHalfX - selectW, selectTopY)
-          }
-          if (isSorption(selectRightX, componentRightX)) {
-            line.select.set(lineItem, { x: componentRightX })
-            selectTarget.value.setPosition(componentRightX - selectW, selectTopY)
-          }
+      line.select.clear()
+      line.sorptioned.y = false
+      // 循环查询所有组件数据
+      const componentList = chartEditStore.getComponentList.map((e: CreateComponentType | CreateComponentGroupType) => {
+        return {
+          id: e.id,
+          attr: e.attr
         }
       })
-    })
+      componentList.push(canvasPositionList.value)
+      // 传入画布数据
+      line.lineArr.forEach(lineItem => {
+        componentList.forEach((component: typeof canvasPositionList.value) => {
+          // 排除自身
+          if (selectId.value[0] === component.id) return
+          const componentW = component.attr.w
+          const componentH = component.attr.h
+
+          // 距离左侧
+          const componentLeftX = component.attr.x
+          const componentHalfX = componentLeftX + componentW / 2
+          const componentRightX = componentLeftX + componentW
+          const componentX = [componentLeftX, componentHalfX, componentRightX]
+
+          // 距离顶部
+          const componentTopY = component.attr.y
+          const componentHalfY = componentTopY + componentH / 2
+          const componentBottomY = componentTopY + componentH
+          const componentY = [componentTopY, componentHalfY, componentBottomY]
+
+          // 横线对比的是 Y
+          if (lineItem.includes('rowt')) {
+            // 顶部
+            if (isSorption(selectTopY, componentTopY)) {
+              line.select.set(lineItem, { y: componentTopY })
+              setComponentPosition(selectTarget.value, selectLeftX, componentTopY)
+            }
+            if (isSorption(selectTopY, componentHalfY)) {
+              line.select.set(lineItem, { y: componentHalfY })
+              setComponentPosition(selectTarget.value, selectLeftX, componentHalfY)
+            }
+            if (isSorption(selectTopY, componentBottomY)) {
+              line.select.set(lineItem, { y: componentBottomY })
+              setComponentPosition(selectTarget.value, selectLeftX, componentBottomY)
+            }
+          }
+          if (lineItem.includes('rowc')) {
+            // 顶部
+            if (isSorption(selectHalfY, componentTopY)) {
+              line.select.set(lineItem, { y: componentTopY })
+              setComponentPosition(selectTarget.value, selectLeftX, componentTopY - selectH / 2)
+            }
+            if (isSorption(selectHalfY, componentHalfY)) {
+              line.select.set(lineItem, { y: componentHalfY })
+              setComponentPosition(selectTarget.value, selectLeftX, componentHalfY - selectH / 2)
+            }
+            if (isSorption(selectHalfY, componentBottomY)) {
+              line.select.set(lineItem, { y: componentBottomY })
+              setComponentPosition(selectTarget.value, selectLeftX, componentBottomY - selectH / 2)
+            }
+          }
+          if (lineItem.includes('rowb')) {
+            // 顶部
+            if (isSorption(selectBottomY, componentTopY)) {
+              line.select.set(lineItem, { y: componentTopY })
+              setComponentPosition(selectTarget.value, selectLeftX, componentTopY - selectH)
+            }
+            if (isSorption(selectBottomY, componentHalfY)) {
+              line.select.set(lineItem, { y: componentHalfY })
+              setComponentPosition(selectTarget.value, selectLeftX, componentHalfY - selectH)
+            }
+            if (isSorption(selectBottomY, componentBottomY)) {
+              line.select.set(lineItem, { y: componentBottomY })
+              setComponentPosition(selectTarget.value, selectLeftX, componentBottomY - selectH)
+            }
+          }
+
+          // 纵线对比的是 X
+          if (lineItem.includes('coll')) {
+            if (isSorption(selectLeftX, componentLeftX)) {
+              line.select.set(lineItem, { x: componentLeftX })
+              setComponentPosition(selectTarget.value, componentLeftX, selectTopY)
+            }
+            if (isSorption(selectLeftX, componentHalfX)) {
+              line.select.set(lineItem, { x: componentHalfX })
+              setComponentPosition(selectTarget.value, componentHalfX, selectTopY)
+            }
+            if (isSorption(selectLeftX, componentRightX)) {
+              line.select.set(lineItem, { x: componentRightX })
+              setComponentPosition(selectTarget.value, componentRightX, selectTopY)
+            }
+          }
+          if (lineItem.includes('colc')) {
+            if (isSorption(selectHalfX, componentLeftX)) {
+              line.select.set(lineItem, { x: componentLeftX })
+              setComponentPosition(selectTarget.value, componentLeftX - selectW / 2, selectTopY)
+            }
+            if (isSorption(selectHalfX, componentHalfX)) {
+              line.select.set(lineItem, { x: componentHalfX })
+              setComponentPosition(selectTarget.value, componentHalfX - selectW / 2, selectTopY)
+            }
+            if (isSorption(selectHalfX, componentRightX)) {
+              line.select.set(lineItem, { x: componentRightX })
+              setComponentPosition(selectTarget.value, componentRightX - selectW / 2, selectTopY)
+            }
+          }
+          if (lineItem.includes('colr')) {
+            if (isSorption(selectRightX, componentLeftX)) {
+              line.select.set(lineItem, { x: componentLeftX })
+              setComponentPosition(selectTarget.value, componentLeftX - selectW, selectTopY)
+            }
+            if (isSorption(selectRightX, componentHalfX)) {
+              line.select.set(lineItem, { x: componentHalfX })
+              setComponentPosition(selectTarget.value, componentHalfX - selectW, selectTopY)
+            }
+            if (isSorption(selectRightX, componentRightX)) {
+              line.select.set(lineItem, { x: componentRightX })
+              setComponentPosition(selectTarget.value, componentRightX - selectW, selectTopY)
+            }
+          }
+        })
+      })
+    } catch (err) {
+      console.log(err)
+    }
   }, 200),
   {
     deep: true

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

@@ -1,11 +1,16 @@
 <template>
   <div class="go-edit-bottom">
-    <edit-history></edit-history>
+    <n-space>
+      <!-- 历史记录 -->
+      <edit-history></edit-history>
+      <!-- CTRL按键触发展示 -->
+      <n-text id="keyboard-dress-show" depth="3"></n-text>
+    </n-space>
 
     <n-space class="bottom-ri">
       <!-- 快捷键提示 -->
       <edit-shortcut-key />
-      
+
       <!-- 缩放比例 -->
       <n-select
         :disabled="lockScale"
@@ -14,18 +19,13 @@
         size="mini"
         :options="filterOptions"
         @update:value="selectHandle"
-     ></n-select>
+      ></n-select>
 
       <!-- 锁定缩放 -->
       <n-tooltip trigger="hover">
         <template #trigger>
           <n-button @click="lockHandle" text>
-            <n-icon
-              class="lock-icon"
-              :class="{ color: lockScale }"
-              size="18"
-              :depth="2"
-            >
+            <n-icon class="lock-icon" :class="{ color: lockScale }" size="18" :depth="2">
               <lock-closed-outline-icon v-if="lockScale"></lock-closed-outline-icon>
               <lock-open-outline-icon v-else></lock-open-outline-icon>
             </n-icon>
@@ -46,7 +46,7 @@
         :disabled="lockScale"
         :marks="sliderMaks"
         @update:value="sliderHandle"
-     ></n-slider>
+      ></n-slider>
     </n-space>
   </div>
 </template>

src/views/chart/ContentEdit/components/EditTools/hooks/useFile.hooks.ts

@@ -33,15 +33,23 @@ export const useFile = () => {
             negativeButtonProps: { type: 'info', ghost: false },
             // 新增
             onPositiveCallback: async () => {
-              fileData = JSON.parse(fileData)
-              await updateComponent(fileData, false, true)
-              window['$message'].success('导入成功！')
+              try {
+                fileData = JSON.parse(fileData)
+                await updateComponent(fileData, false, true)
+                window['$message'].success('导入成功！')
+              } catch (error) {
+                window['$message'].error('组件导入失败，请检查文件完整性!')
+              }
             },
             // 覆盖
             onNegativeCallback: async () => {
-              fileData = JSON.parse(fileData)
-              await updateComponent(fileData, true, true)
-              window['$message'].success('导入成功！')
+              try {
+                fileData = JSON.parse(fileData)
+                await updateComponent(fileData, true, true)
+                window['$message'].success('导入成功！')
+              } catch (error) {
+                window['$message'].error('组件导入失败，请检查文件完整性!')
+              }
             }
           })
         })

src/views/chart/ContentEdit/hooks/useDrag.hook.ts

@@ -1,12 +1,12 @@
 import { toRaw } from 'vue'
-import { DragKeyEnum, MouseEventButton, WinKeyboard, MacKeyboard } from '@/enums/editPageEnum'
+import { DragKeyEnum, MouseEventButton } from '@/enums/editPageEnum'
 import { createComponent } from '@/packages'
 import { ConfigType } from '@/packages/index.d'
 import { CreateComponentType, CreateComponentGroupType, PickCreateComponentType } from '@/packages/index.d'
 import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
-import { loadingStart, loadingFinish, loadingError } from '@/utils'
+import { loadingStart, loadingFinish, loadingError, setComponentPosition } from '@/utils'
 import { throttle, cloneDeep } from 'lodash'
 
 const chartEditStore = useChartEditStore()
@@ -33,7 +33,7 @@ export const dragHandle = async (e: DragEvent) => {
     // 创建新图表组件
     let newComponent: CreateComponentType = await createComponent(dropData)
 
-    newComponent.setPosition(e.offsetX - newComponent.attr.w / 2, e.offsetY - newComponent.attr.h / 2)
+    setComponentPosition(newComponent, e.offsetX - newComponent.attr.w / 2, e.offsetY - newComponent.attr.h / 2)
     chartEditStore.addComponentList(newComponent, false, true)
     chartEditStore.setTargetSelectChart(newComponent.id)
     loadingFinish()
@@ -190,8 +190,7 @@ export const useMouseHandle = () => {
     if (item.status.lock) return
     onClickOutSide()
     // 按下左键 + CTRL
-    if (e.buttons === MouseEventButton.LEFT && window.$KeyboardActive?.ctrl)
-      return
+    if (e.buttons === MouseEventButton.LEFT && window.$KeyboardActive?.ctrl) return
 
     // 按下右键 + 选中多个 + 目标元素是多选子元素
     const selectId = chartEditStore.getTargetChart.selectId
@@ -264,38 +263,43 @@ export const useMouseHandle = () => {
         // 基于右下角位置检测
         currX = currX > canvasWidth - distance ? canvasWidth - distance : currX
         currY = currY > canvasHeight - distance ? canvasHeight - distance : currY
-
-        componentInstance.attr = Object.assign(componentInstance.attr, {
-          x: currX,
-          y: currY
-        })
+        if (componentInstance) {
+          componentInstance.attr = Object.assign(componentInstance.attr, {
+            x: currX,
+            y: currY
+          })
+        }
       })
       return
     }, 20)
 
     const mouseup = () => {
-      chartEditStore.setMousePosition(0, 0, 0, 0)
-      chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false)
-      // 加入历史栈
-      if (prevComponentInstance.length) {
-        chartEditStore.getTargetChart.selectId.forEach(id => {
-          if (!targetMap.has(id)) return
-          const index = chartEditStore.fetchTargetIndex(id)
-          const curComponentInstance = chartEditStore.getComponentList[index]
-          // 找到记录的所选组件
-          prevComponentInstance.forEach(preItem => {
-            if (preItem.id === id) {
-              preItem.attr = Object.assign(preItem.attr, {
-                offsetX: curComponentInstance.attr.x - preItem.attr.x,
-                offsetY: curComponentInstance.attr.y - preItem.attr.y
-              })
-            }
+      try {
+        chartEditStore.setMousePosition(0, 0, 0, 0)
+        chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false)
+        // 加入历史栈
+        if (prevComponentInstance.length) {
+          chartEditStore.getTargetChart.selectId.forEach(id => {
+            if (!targetMap.has(id)) return
+            const index = chartEditStore.fetchTargetIndex(id)
+            const curComponentInstance = chartEditStore.getComponentList[index]
+            // 找到记录的所选组件
+            prevComponentInstance.forEach(preItem => {
+              if (preItem.id === id) {
+                preItem.attr = Object.assign(preItem.attr, {
+                  offsetX: curComponentInstance.attr.x - preItem.attr.x,
+                  offsetY: curComponentInstance.attr.y - preItem.attr.y
+                })
+              }
+            })
           })
-        })
-        chartEditStore.moveComponentList(prevComponentInstance)
+          chartEditStore.moveComponentList(prevComponentInstance)
+        }
+        document.removeEventListener('mousemove', mousemove)
+        document.removeEventListener('mouseup', mouseup)
+      } catch (err) {
+        console.log(err)
       }
-      document.removeEventListener('mousemove', mousemove)
-      document.removeEventListener('mouseup', mouseup)
     }
 
     document.addEventListener('mousemove', mousemove)

src/views/chart/ContentLayers/components/LayersListItem/index.vue

@@ -9,9 +9,9 @@
         :fallback-src="requireErrorImg()"
       ></n-image>
       <n-ellipsis style="margin-right: auto">
-        <n-text class="list-text" :depth="2">
+        <span class="list-text">
           {{ props.componentData.chartConfig.title }}
-        </n-text>
+        </span>
       </n-ellipsis>
       <layers-status :isGroup="isGroup" :hover="hover" :status="status"></layers-status>
     </div>

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

@@ -2,8 +2,9 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { WinKeyboard, MacKeyboard, MenuEnum } from '@/enums/editPageEnum'
 import throttle from 'lodash/throttle'
 import debounce from 'lodash/debounce'
-
 import keymaster from 'keymaster'
+import { setKeyboardDressShow } from '@/utils'
+
 // Keymaster可以支持识别以下组合键： ⇧，shift，option，⌥，alt，ctrl，control，command，和⌘
 const chartEditStore = useChartEditStore()
 
@@ -27,7 +28,7 @@ export const winKeyboardValue = {
   [MenuEnum.LOCK]: winCtrlMerge('l'),
   [MenuEnum.UNLOCK]: winCtrlMerge(winShiftMerge('l')),
   [MenuEnum.HIDE]: winCtrlMerge('h'),
-  [MenuEnum.SHOW]: winCtrlMerge(winShiftMerge('h')),
+  [MenuEnum.SHOW]: winCtrlMerge(winShiftMerge('h'))
 }
 
 // 这个 Ctrl 后面还是换成了 ⌘
@@ -52,7 +53,7 @@ export const macKeyboardValue = {
   [MenuEnum.LOCK]: macCtrlMerge('l'),
   [MenuEnum.UNLOCK]: macCtrlMerge(macShiftMerge('l')),
   [MenuEnum.HIDE]: macCtrlMerge('h'),
-  [MenuEnum.SHOW]: macCtrlMerge(macShiftMerge('h')),
+  [MenuEnum.SHOW]: macCtrlMerge(macShiftMerge('h'))
 }
 
 // Win 快捷键列表
@@ -77,7 +78,7 @@ const winKeyList: Array<string> = [
   winKeyboardValue.unLock,
 
   winKeyboardValue.hide,
-  winKeyboardValue.show,
+  winKeyboardValue.show
 ]
 
 // Mac 快捷键列表
@@ -102,7 +103,7 @@ const macKeyList: Array<string> = [
   macKeyboardValue.unLock,
 
   macKeyboardValue.hide,
-  macKeyboardValue.show,
+  macKeyboardValue.show
 ]
 
 // 处理键盘记录
@@ -113,11 +114,18 @@ const keyRecordHandle = () => {
   }
   
   document.onkeydown = (e: KeyboardEvent) => {
-    if(e.keyCode === 17 && window.$KeyboardActive) window.$KeyboardActive.ctrl = true
+    if(e.keyCode === 17 && window.$KeyboardActive) {
+      setKeyboardDressShow(e.keyCode)
+      window.$KeyboardActive.ctrl = true
+    }
   }
 
   document.onkeyup = (e: KeyboardEvent) => {
-    if(e.keyCode === 17 && window.$KeyboardActive) window.$KeyboardActive.ctrl = false
+    if(e.keyCode === 17 && window.$KeyboardActive) 
+    {
+      window.$KeyboardActive.ctrl = false
+      setKeyboardDressShow()
+    }
   }
 }
 

src/views/chart/hooks/useSync.hook.ts

@@ -18,7 +18,7 @@ const componentMerge = (object: any, sources: any, notComponent = false) => {
   if (notComponent) return merge(object, sources)
   // 组件排除 options
   const option = sources.option
-  if(!option) return merge(object, sources)
+  if (!option) return merge(object, sources)
 
   // 为 undefined 的 sources 来源对象属性将被跳过详见 https://www.lodashjs.com/docs/lodash.merge
   sources.option = undefined
@@ -66,37 +66,38 @@ export const useSync = () => {
         intComponent(e as CreateComponentType)
       }
     })
+
+    // 创建函数-重新创建是为了处理类种方法消失的问题
+    const create = async (
+      _componentInstance: CreateComponentType,
+      callBack?: (componentInstance: CreateComponentType) => void
+    ) => {
+      // 补充 class 上的方法
+      let newComponent: CreateComponentType = await createComponent(_componentInstance.chartConfig)
+      if (callBack) {
+        if (changeId) {
+          callBack(componentMerge(newComponent, { ..._componentInstance, id: getUUID() }))
+        } else {
+          callBack(componentMerge(newComponent, _componentInstance))
+        }
+      } else {
+        if (changeId) {
+          chartEditStore.addComponentList(
+            componentMerge(newComponent, { ..._componentInstance, id: getUUID() }),
+            false,
+            true
+          )
+        } else {
+          chartEditStore.addComponentList(componentMerge(newComponent, _componentInstance), false, true)
+        }
+      }
+    }
+
     // 数据赋值
     for (const key in projectData) {
       // 组件
       if (key === ChartEditStoreEnum.COMPONENT_LIST) {
         for (const comItem of projectData[key]) {
-          // 重新创建是为了处理类种方法消失的问题
-          const create = async (
-            _componentInstance: CreateComponentType,
-            callBack?: (componentInstance: CreateComponentType) => void
-          ) => {
-            // 补充 class 上的方法
-            let newComponent: CreateComponentType = await createComponent(_componentInstance.chartConfig)
-            if (callBack) {
-              if (changeId) {
-                callBack(componentMerge(newComponent, { ..._componentInstance, id: getUUID() }))
-              } else {
-                callBack(componentMerge(newComponent, _componentInstance))
-              }
-            } else {
-              if (changeId) {
-                chartEditStore.addComponentList(
-                  componentMerge(newComponent, { ..._componentInstance, id: getUUID() }),
-                  false,
-                  true
-                )
-              } else {
-                chartEditStore.addComponentList(componentMerge(newComponent, _componentInstance), false, true)
-              }
-            }
-          }
-
           if (comItem.isGroup) {
             // 创建分组
             let groupClass = new PublicGroupConfigClass()
@@ -106,19 +107,19 @@ export const useSync = () => {
               groupClass = componentMerge(groupClass, comItem)
             }
 
-            // 注册子应用
+            // 异步注册子应用
             const targetList: CreateComponentType[] = []
-            ;(comItem as CreateComponentGroupType).groupList.forEach(groupItem => {
-              create(groupItem, e => {
+            for (const groupItem of (comItem as CreateComponentGroupType).groupList) {
+              await create(groupItem, e => {
                 targetList.push(e)
               })
-            })
+            }
             groupClass.groupList = targetList
 
             // 分组插入到列表
             chartEditStore.addComponentList(groupClass, false, true)
           } else {
-            create(comItem as CreateComponentType)
+            await  create(comItem as CreateComponentType)
           }
         }
       } else {