Merge branch 'dev' into dev-commet

src/packages/components/Charts/Lines/LineGradients/config.vue

@@ -12,7 +12,6 @@
         <n-input-number
           v-model:value="item.lineStyle.width"
           :min="1"
-          :max="100"
           size="small"
           placeholder="自动计算"
         ></n-input-number>

src/packages/index.d.ts

@@ -115,7 +115,6 @@ export interface PublicConfigType {
   }
   filter?: string
   status: StatusType
-  setPosition: Function
 }
 
 export interface CreateComponentType extends PublicConfigType, requestConfig {

src/packages/public/publicConfig.ts

@@ -81,12 +81,6 @@ export class PublicConfigClass implements PublicConfigType {
   public request = cloneDeep(requestConfig)
   // 数据过滤
   public filter = undefined
-
-  // 设置坐标
-  public setPosition(x: number, y: number): void {
-    this.attr.x = x
-    this.attr.y = y
-  }
 }
 
 // 多选成组类

src/store/modules/chartEditStore/chartEditStore.ts

@@ -493,34 +493,31 @@ export const useChartEditStore = defineStore({
         }
         const parseHandle = (e: CreateComponentType | CreateComponentGroupType) => {
           e = cloneDeep(e)
-          // 生成新 id
-          e.id = getUUID()
           e.attr.x = this.getMousePosition.x + 30
           e.attr.y = this.getMousePosition.y + 30
+          // 外层生成新 id
+          e.id = getUUID()
+          // 分组列表生成新 id
+          if (e.isGroup) {
+            (e as CreateComponentGroupType).groupList.forEach((item: CreateComponentType) => {
+              item.id = getUUID()
+            })
+          }
+        
           return e
         }
         const isCut = recordCharts.type === HistoryActionTypeEnum.CUT
+        const targetList = Array.isArray(recordCharts.charts) ? recordCharts.charts : [ recordCharts.charts ]
         // 多项
-        if (Array.isArray(recordCharts.charts)) {
+        targetList.forEach((e: CreateComponentType | CreateComponentGroupType) => {
-          recordCharts.charts.forEach((e: CreateComponentType) => {
+          this.addComponentList(parseHandle(e), undefined, true)
-            this.addComponentList(parseHandle(e), undefined, true)
+          // 剪切需删除原数据
-            // 剪切需删除原数据
+          if (isCut) {
-            if (isCut) {
+            this.setTargetSelectChart(e.id)
-              this.setTargetSelectChart(e.id)
+            this.removeComponentList(undefined, true)
-              this.removeComponentList(undefined, true)
+          }
-            }
+        })
-          })
+        if (isCut) this.setRecordChart(undefined)
-          if (isCut) this.setRecordChart(undefined)
-          loadingFinish()
-          return
-        }
-        // 单项
-        this.addComponentList(parseHandle(recordCharts.charts), undefined, true)
-        if (isCut) {
-          this.setTargetSelectChart(recordCharts.charts.id)
-          this.removeComponentList()
-          this.setRecordChart(undefined)
-        }
         loadingFinish()
       } catch (value) {
         loadingError()

src/utils/index.ts

@@ -4,6 +4,6 @@ export * from '@/utils/router'
 export * from '@/utils/storage'
 export * from '@/utils/style'
 export * from '@/utils/plugin'
-export * from '@/utils/componets'
+export * from '@/utils/components'
 export * from '@/utils/type'
 export * from '@/utils/file'

src/utils/utils.ts

@@ -7,7 +7,9 @@ import html2canvas from 'html2canvas'
 import { downloadByA } from './file'
 import { toString } from './type'
 import cloneDeep from 'lodash/cloneDeep'
+import { WinKeyboard } from '@/enums/editPageEnum'
 import { RequestHttpIntervalEnum, RequestParamsObjType } from '@/enums/httpEnum'
+import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 
 /**
  * * 判断是否是开发环境
@@ -72,6 +74,21 @@ export const screenfullFn = (isFullscreen?: boolean, isEnabled?: boolean) => {
   window['$message'].warning('您的浏览器不支持全屏功能！')
 }
 
+/**
+ * 修改元素位置
+ * @param target 对象
+ * @param x X轴
+ * @param y Y轴
+ */
+export const setComponentPosition = (
+  target: CreateComponentType | CreateComponentGroupType,
+  x?: number,
+  y?: number
+) => {
+  x && (target.attr.x = x)
+  y && (target.attr.y = y)
+}
+
 /**
  * * 设置元素属性
  * @param HTMLElement 元素
@@ -249,3 +266,22 @@ export const objToCookie = (obj: RequestParamsObjType) => {
   }
   return str.substring(0, str.length - 1)
 }
+
+/**
+ * * 设置按下键盘按键的底部展示
+ * @param keyCode
+ * @returns
+ */
+export const setKeyboardDressShow = (keyCode?: number) => {
+  const code = new Map([[17, WinKeyboard.CTRL]])
+
+  const dom = document.getElementById('keyboard-dress-show')
+  if (!dom) return
+  if (!keyCode) {
+    dom.innerText = ''
+    return
+  }
+  if (keyCode && code.has(keyCode)) {
+    dom.innerText = `按下了「${code.get(keyCode)}」键`
+  }
+}

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

@@ -128,6 +128,7 @@ const sendHandle = async () => {
     const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.requestGlobalConfig))
     loading.value = false
     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

@@ -58,20 +58,20 @@
             <n-space :size="15" vertical>
               <div class="editor-data-show">
                 <n-space>
-                  <n-text depth="3">目标数据(data)：</n-text>
+                  <n-text depth="3">默认过滤数据(data)：</n-text>
-                  <n-code :code="toString(sourceData?.data) || 'undefined'" language="json" :word-wrap="true"></n-code>
+                  <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-text depth="3">接口返回数据(res)：</n-text>
-                  <n-code :code="toString(sourceData)" language="json" :word-wrap="true"></n-code>
+                  <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>
@@ -87,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>

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 selectW = selectAttr.value.w
-    const selectH = selectAttr.value.h
+      const selectH = selectAttr.value.h
 
-    // 距离左侧
+      // 距离左侧
-    const selectLeftX = selectAttr.value.x
+      const selectLeftX = selectAttr.value.x
-    const selectHalfX = selectLeftX + selectW / 2
+      const selectHalfX = selectLeftX + selectW / 2
-    const selectRightX = selectLeftX + selectW
+      const selectRightX = selectLeftX + selectW
-    const seletX = [selectLeftX, selectHalfX, selectRightX]
+      const seletX = [selectLeftX, selectHalfX, selectRightX]
 
-    // 距离顶部
+      // 距离顶部
-    const selectTopY = selectAttr.value.y
+      const selectTopY = selectAttr.value.y
-    const selectHalfY = selectTopY + selectH / 2
+      const selectHalfY = selectTopY + selectH / 2
-    const selectBottomY = selectTopY + selectH
+      const selectBottomY = selectTopY + selectH
-    const selectY = [selectTopY, selectHalfY, selectBottomY]
+      const selectY = [selectTopY, selectHalfY, selectBottomY]
 
-    line.select.clear()
+      line.select.clear()
-    line.sorptioned.y = false
+      line.sorptioned.y = false
-    // 循环查询所有组件数据
+      // 循环查询所有组件数据
-    const componentList = chartEditStore.getComponentList.map((e: CreateComponentType | CreateComponentGroupType) => {
+      const componentList = chartEditStore.getComponentList.map((e: CreateComponentType | CreateComponentGroupType) => {
-      return {
+        return {
-        id: e.id,
+          id: e.id,
-        attr: e.attr
+          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)
-          }
         }
       })
-    })
+      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
+            <n-icon class="lock-icon" :class="{ color: lockScale }" size="18" :depth="2">
-              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/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)
+    if (e.buttons === MouseEventButton.LEFT && window.$KeyboardActive?.ctrl) return
-      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
-
+        if (componentInstance) {
-        componentInstance.attr = Object.assign(componentInstance.attr, {
+          componentInstance.attr = Object.assign(componentInstance.attr, {
-          x: currX,
+            x: currX,
-          y: currY
+            y: currY
-        })
+          })
+        }
       })
       return
     }, 20)
 
     const mouseup = () => {
-      chartEditStore.setMousePosition(0, 0, 0, 0)
+      try {
-      chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false)
+        chartEditStore.setMousePosition(0, 0, 0, 0)
-      // 加入历史栈
+        chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false)
-      if (prevComponentInstance.length) {
+        // 加入历史栈
-        chartEditStore.getTargetChart.selectId.forEach(id => {
+        if (prevComponentInstance.length) {
-          if (!targetMap.has(id)) return
+          chartEditStore.getTargetChart.selectId.forEach(id => {
-          const index = chartEditStore.fetchTargetIndex(id)
+            if (!targetMap.has(id)) return
-          const curComponentInstance = chartEditStore.getComponentList[index]
+            const index = chartEditStore.fetchTargetIndex(id)
-          // 找到记录的所选组件
+            const curComponentInstance = chartEditStore.getComponentList[index]
-          prevComponentInstance.forEach(preItem => {
+            // 找到记录的所选组件
-            if (preItem.id === id) {
+            prevComponentInstance.forEach(preItem => {
-              preItem.attr = Object.assign(preItem.attr, {
+              if (preItem.id === id) {
-                offsetX: curComponentInstance.attr.x - preItem.attr.x,
+                preItem.attr = Object.assign(preItem.attr, {
-                offsetY: curComponentInstance.attr.y - preItem.attr.y
+                  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/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()
+    }
   }
 }