feat: 新增移动快捷键与全局设置

src/components/GoSystemSet/index.ts

@@ -0,0 +1,3 @@
+import GoSystemSet from './index.vue';
+
+export { GoSystemSet };

src/components/SystemSet/index.vue → src/components/GoSystemSet/index.vue

@@ -74,7 +74,7 @@ const list = reactive<ListType[]>([
     value: settingStore.getAsideAllCollapsed,
     type: 'switch',
     name: '菜单折叠',
-    desc: '首页菜单折叠时隐藏全部'
+    desc: '首页菜单折叠时隐藏至界面外'
   },
   {
     key: SettingStoreEnums.HIDE_PACKAGE_ONE_CATEGORY,
@@ -89,7 +89,17 @@ const list = reactive<ListType[]>([
     type: 'switch',
     name: '切换语言',
     desc: '切换语言重新加载页面',
-    tip: '若遇到部分区域语言切换失败，则开启'
+    tip: '若遇到部分区域语言切换失败，则建议开启'
+  },
+  {
+    key: SettingStoreEnums.CHART_MOVE_DISTANCE,
+    value: settingStore.getChartMoveDistance,
+    type: 'number',
+    name: '移动距离',
+    min: 1,
+    step: 1,
+    suffix: 'px',
+    desc: '方向键控制图标移动的距离'
   },
   {
     key: SettingStoreEnums.CHART_ALIGN_RANGE,
@@ -97,10 +107,10 @@ const list = reactive<ListType[]>([
     type: 'number',
     name: '吸附距离',
     min: 10,
-    suffix: 'px',
     step: 2,
+    suffix: 'px',
     desc: '移动图表时的吸附距离'
-  }
+  },
 ])
 
 const closeHandle = () => {

src/components/SystemSet/index.ts

@@ -1,3 +0,0 @@
-import SystemSet from './index.vue';
-
-export { SystemSet };

src/components/UserInfo/index.vue

@@ -19,7 +19,7 @@
   </n-dropdown>
 
   <!-- 系统设置 model -->
-  <system-set v-model:modelShow="modelShow"></system-set>
+  <go-system-set v-model:modelShow="modelShow"></go-system-set>
 </template>
 
 <script lang="ts" setup>
@@ -27,7 +27,7 @@ import { h, ref } from 'vue'
 import { NAvatar, NText } from 'naive-ui'
 import { renderIcon } from '@/utils'
 import { openDoc, logout, renderLang } from '@/utils'
-import { SystemSet } from '@/components/SystemSet/index'
+import { GoSystemSet } from '@/components/GoSystemSet/index'
 import Person from './person.png'
 
 import { icon } from '@/plugins'

src/enums/editPageEnum.ts

@@ -2,3 +2,20 @@
 export enum DragKeyEnum {
   DROG_KEY = 'ChartData'
 }
+
+// 右键枚举
+export enum MenuEnum {
+  ARROW_UP = 'up',
+  ARROW_RIGHT = 'right',
+  ARROW_DOWN = 'down',
+  ARROW_LEFT = 'left',
+  DELETE = 'delete',
+  COPY = 'copy',
+  CUT = 'cut',
+  PARSE = 'parse',
+  TOP = 'top',
+  BOTTOM = 'bottom',
+  UP = 'up',
+  DOWN = 'down',
+  CLEAR = 'clear',
+}

src/settings/systemSetting.ts

@@ -9,5 +9,8 @@ export const hidePackageOneCategory = true
 // 切换语言是否进行路由刷新
 export const changeLangReload = false
 
+// 图表移动时按方向键移动的距离
+export const chartMoveDistance = 5
+
 // 图表拖拽时的吸附距离（px）
-export const chartAlignRange = '10'
+export const chartAlignRange = 10

src/store/modules/chartEditStore/chartEditStore.ts

@@ -5,9 +5,13 @@ import debounce from 'lodash/debounce'
 import cloneDeep from 'lodash/cloneDeep'
 import { defaultTheme, globalThemeJson } from '@/settings/chartThemes/index'
 import { requestInterval } from '@/settings/designSetting'
+import { chartMoveDistance } from '@/settings/systemSetting'
 // 记录记录
 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 {
   ChartEditStoreEnum,
   ChartEditStorage,
@@ -20,7 +24,8 @@ import {
   EditCanvasConfigType
 } from './chartEditStore.d'
 
-const chartHistoryStoreStore = useChartHistoryStore()
+const chartHistoryStore = useChartHistoryStore()
+const settingStore = useSettingStore()
 
 // 编辑区域内容
 export const useChartEditStore = defineStore({
@@ -158,7 +163,7 @@ export const useChartEditStore = defineStore({
       if (x) this.mousePosition.x = x
       if (y) this.mousePosition.y = y
     },
-    // * 找到目标 id 数据下标位置
+    // * 找到目标 id 数据下标位置（无则返回-1）
     fetchTargetIndex(): number {
       if(!this.getTargetChart.selectId) {
         loadingFinish()
@@ -179,7 +184,7 @@ export const useChartEditStore = defineStore({
      */
     addComponentList(chartConfig: CreateComponentType, isEnd = false, isHistory = false): void {
       if (isHistory) {
-        chartHistoryStoreStore.createAddHistory(chartConfig)
+        chartHistoryStore.createAddHistory(chartConfig)
       }
       if (isEnd) {
         this.componentList.unshift(chartConfig)
@@ -193,7 +198,7 @@ export const useChartEditStore = defineStore({
         loadingStart()
         const index  = this.fetchTargetIndex()
         if (index !== -1) {
-          isHistory ? chartHistoryStoreStore.createDeleteHistory(this.getComponentList[index]) : undefined
+          isHistory ? chartHistoryStore.createDeleteHistory(this.getComponentList[index]) : undefined
           this.componentList.splice(index, 1)
           loadingFinish()
           return
@@ -245,7 +250,7 @@ export const useChartEditStore = defineStore({
 
           // 历史记录
           if (isHistory) {
-            chartHistoryStoreStore.createLaryerHistory(
+            chartHistoryStore.createLaryerHistory(
               setIndex(targetData, index),
               isEnd ? HistoryActionTypeEnum.BOTTOM : HistoryActionTypeEnum.TOP
             )
@@ -293,7 +298,7 @@ export const useChartEditStore = defineStore({
 
           // 历史记录
           if (isHistory) {
-            chartHistoryStoreStore.createLaryerHistory(
+            chartHistoryStore.createLaryerHistory(
               targetItem,
               isDown ? HistoryActionTypeEnum.DOWN : HistoryActionTypeEnum.UP
             )
@@ -307,11 +312,11 @@ export const useChartEditStore = defineStore({
         loadingError()
       }
     },
-    // * 上移
+    // * 图层上移
     setUp(isHistory = true) {
       this.wrap(false, isHistory)
     },
-    // * 下移
+    // * 图层下移
     setDown(isHistory = true) {
       this.wrap(true, isHistory)
     },
@@ -438,7 +443,7 @@ export const useChartEditStore = defineStore({
     setBack() {
       try {
         loadingStart()
-        const targetData = chartHistoryStoreStore.backAction()
+        const targetData = chartHistoryStore.backAction()
         if (!targetData) {
           loadingFinish()
           return
@@ -461,7 +466,7 @@ export const useChartEditStore = defineStore({
     setForward() {
       try {
         loadingStart()
-        const targetData = chartHistoryStoreStore.forwardAction()
+        const targetData = chartHistoryStore.forwardAction()
         if (!targetData) {
           loadingFinish()
           return
@@ -480,6 +485,27 @@ export const useChartEditStore = defineStore({
         loadingError()
       }
     },
+    // * 移动位置
+    setMove(keyboardValue: MenuEnum) {
+      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;
+        case MenuEnum.ARROW_RIGHT:
+          attr.x += distance
+          break;
+        case MenuEnum.ARROW_DOWN:
+          attr.y += distance
+          break;
+        case MenuEnum.ARROW_LEFT:
+          attr.x -= distance
+          break;
+      }
+    }, 
     // ----------------
     // * 设置页面变换时候的 Class
     setPageSizeClass(): void {

src/store/modules/settingStore/settingStore.d.ts

@@ -2,6 +2,7 @@ export enum SettingStoreEnums {
   HIDE_PACKAGE_ONE_CATEGORY = 'hidePackageOneCategory',
   CHANGE_LANG_RELOAD = 'changeLangReload',
   ASIDE_ALL_COLLAPSED = 'asideAllCollapsed',
+  CHART_MOVE_DISTANCE = 'chartMoveDistance',
   CHART_ALIGN_RANGE = 'chartAlignRange',
 }
 
@@ -9,5 +10,6 @@ export interface SettingStoreType {
   [SettingStoreEnums.HIDE_PACKAGE_ONE_CATEGORY]: boolean
   [SettingStoreEnums.CHANGE_LANG_RELOAD]: boolean
   [SettingStoreEnums.ASIDE_ALL_COLLAPSED]: boolean
+  [SettingStoreEnums.CHART_MOVE_DISTANCE]: number
   [SettingStoreEnums.CHART_ALIGN_RANGE]: number
 }

src/store/modules/settingStore/settingStore.ts

@@ -3,7 +3,8 @@ import {
   hidePackageOneCategory,
   changeLangReload,
   asideAllCollapsed,
-  chartAlignRange
+  chartAlignRange,
+  chartMoveDistance
 } from '@/settings/systemSetting'
 import { asideCollapsedWidth } from '@/settings/designSetting'
 import { SettingStoreType } from './settingStore.d'
@@ -21,7 +22,8 @@ export const useSettingStore = defineStore({
       hidePackageOneCategory,
       changeLangReload,
       asideAllCollapsed,
-      chartAlignRange
+      chartMoveDistance,
+      chartAlignRange,
     },
   getters: {
     getHidePackageOneCategory(): boolean {
@@ -36,6 +38,9 @@ export const useSettingStore = defineStore({
     getAsideCollapsedWidth(): number {
       return this.asideAllCollapsed ? 0 : asideCollapsedWidth
     },
+    getChartMoveDistance(): number {
+      return this.chartMoveDistance
+    },
     getChartAlignRange(): number {
       return this.chartAlignRange
     }

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

@@ -139,24 +139,40 @@ const shortcutKeyOptions = [
     value: '1'
   },
   {
-    label: 'Alt + Delete 删除',
+    label: 'Alt + ↑ 向上移动',
     value: '2'
   },
   {
-    label: 'Alt + C 复制',
+    label: 'Alt + → 向右移动',
     value: '3'
   },
   {
-    label: 'Alt + X 剪切',
+    label: 'Alt + ↓ 向下移动',
     value: '4'
   },
   {
-    label: 'Alt + Z 后退',
+    label: 'Alt + ← 向左移动',
     value: '5'
   },
   {
-    label: 'Alt + Shift + Z 前进',
+    label: 'Alt + Delete 删除',
     value: '6'
+  },
+  {
+    label: 'Alt + C 复制',
+    value: '7'
+  },
+  {
+    label: 'Alt + X 剪切',
+    value: '8'
+  },
+  {
+    label: 'Alt + Z 后退',
+    value: '9'
+  },
+  {
+    label: 'Alt + Shift + Z 前进',
+    value: '10'
   }
 ]
 

src/views/chart/ContentLayers/index.vue

@@ -34,7 +34,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { CreateComponentType } from '@/packages/index.d'
 import cloneDeep from 'lodash/cloneDeep'
 import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
-import { MenuEnum } from '@/views/chart/hooks/useContextMenu.hook.d'
+import { MenuEnum } from '@/enums/editPageEnum'
 
 import { LayersListItem } from './components/LayersListItem/index'
 import { icon } from '@/plugins'

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

@@ -3,7 +3,8 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { CreateComponentType } from '@/packages/index.d'
 import { renderIcon, loadingError } from '@/utils'
 import { icon } from '@/plugins'
-import { MenuEnum, MenuOptionsItemType } from './useContextMenu.hook.d'
+import { MenuOptionsItemType } from './useContextMenu.hook.d'
+import { MenuEnum } from '@/enums/editPageEnum'
 
 const {
   CopyIcon,

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

@@ -1,11 +1,14 @@
 import { isMac, addEventListener, removeEventListener } from '@/utils'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { MenuEnum } from '@/views/chart/hooks/useContextMenu.hook.d'
+import { MenuEnum } from '@/enums/editPageEnum'
 
 const chartEditStore = useChartEditStore()
 
-
 export const keyboardValue = {
+  [MenuEnum.ARROW_UP]: 'arrowup',
+  [MenuEnum.ARROW_RIGHT]: 'arrowright',
+  [MenuEnum.ARROW_DOWN]: 'arrowdown',
+  [MenuEnum.ARROW_LEFT]: 'arrowleft',
   [MenuEnum.COPY]: 'c',
   [MenuEnum.CUT]: 'x',
   [MenuEnum.PARSE]: 'v',
@@ -34,6 +37,18 @@ const KeyboardHandle = (e: KeyboardEvent) => {
 
   if (e.altKey) {
     switch (key) {
+      // ↑
+      case keyboardValue.up: chartEditStore.setMove(MenuEnum.ARROW_UP)
+        break;
+      // →
+      case keyboardValue.right: chartEditStore.setMove(MenuEnum.ARROW_RIGHT)
+        break;
+      // ↓
+      case keyboardValue.down: chartEditStore.setMove(MenuEnum.ARROW_DOWN)
+        break;
+      // ←
+      case keyboardValue.left: chartEditStore.setMove(MenuEnum.ARROW_LEFT)
+        break;
       // 删除
       case keyboardValue.delete: chartEditStore.removeComponentList()
         break;