fix: 修改快捷键展示弹窗

src/enums/editPageEnum.ts

@@ -31,7 +31,8 @@ export enum WinKeyboard {
 
 // Mac 键盘枚举
 export enum MacKeyboard {
-  CTRL = '^',
+  // 还是用 Command 吧
+  CTRL = '⌘',
   SHIFT = '⇧',
   ALT = '⌥',
 }

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

@@ -4,13 +4,7 @@
 
     <n-space class="bottom-ri">
       <!-- 快捷键提示 -->
-      <n-popselect :options="shortcutKeyOptions" size="medium">
+      <edit-shortcut-key />
-        <n-button class="scale-btn" quaternary size="mini">
-          <n-icon class="lock-icon" size="18" :depth="2">
-            <DicomOverlayIcon></DicomOverlayIcon>
-          </n-icon>
-        </n-button>
-      </n-popselect>
       
       <!-- 缩放比例 -->
       <n-select
@@ -61,13 +55,12 @@
 import { reactive, ref, toRefs, watchEffect } from 'vue'
 import { icon } from '@/plugins'
 import { EditHistory } from '../EditHistory/index'
+import EditShortcutKey from '../EditShortcutKey/index.vue'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 
 const { LockClosedOutlineIcon, LockOpenOutlineIcon } = icon.ionicons5
-const { DicomOverlayIcon } = icon.carbon
-
 
 // 全局颜色
 const designStore = useDesignStore()
@@ -132,54 +125,6 @@ const sliderMaks = reactive({
   100: ''
 })
 
-// 快捷键
-const shortcutKeyOptions = [
-  {
-    label: '键盘快捷键列表',
-    value: '1'
-  },
-  {
-    label: 'Ctrl + ↑ 向上移动',
-    value: '2'
-  },
-  {
-    label: 'Ctrl + → 向右移动',
-    value: '3'
-  },
-  {
-    label: 'Ctrl + ↓ 向下移动',
-    value: '4'
-  },
-  {
-    label: 'Ctrl + ← 向左移动',
-    value: '5'
-  },
-  {
-    label: 'Ctrl + Delete 删除',
-    value: '6'
-  },
-  {
-    label: 'Ctrl + C 复制',
-    value: '7'
-  },
-  {
-    label: 'Ctrl + X 剪切',
-    value: '8'
-  },
-  {
-    label: 'Ctrl + V 粘贴',
-    value: '9'
-  },
-  {
-    label: 'Ctrl + Z 后退',
-    value: '10'
-  },
-  {
-    label: 'Ctrl + Shift + Z 前进',
-    value: '11'
-  }
-]
-
 // 监听 scale 变化
 watchEffect(() => {
   const value = (scale.value * 100).toFixed(0)
@@ -189,7 +134,7 @@ watchEffect(() => {
 </script>
 
 <style lang="scss" scoped>
-@include go(edit-bottom) {
+@include go('edit-bottom') {
   width: 100%;
   padding: 0 10px;
   display: flex;

src/views/chart/ContentEdit/components/EditShortcutKey/ShortcutKeyModal.vue

@@ -0,0 +1,102 @@
+<template>
+  <n-modal v-model:show="modelShow" @afterLeave="closeHandle">
+    <n-table class="model-content" :bordered="false" :single-line="false">
+      <thead>
+        <tr>
+          <th>功能</th>
+          <th>Win 快捷键</th>
+          <th>Mac 快捷键</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(item, index) in shortcutKeyOptions" :key="index">
+          <td>{{ item.label }}</td>
+          <td>{{ item.win }}</td>
+          <td><span class="fs">{{ item.mac.substr(0,1) }}</span>  + {{ item.mac.substr(3) }}</td>
+        </tr>
+      </tbody>
+    </n-table>
+  </n-modal>
+</template>
+
+<script setup lang="ts">
+import { icon } from '@/plugins'
+import { WinKeyboard, MacKeyboard } from '@/enums/editPageEnum'
+
+const { CloseIcon } = icon.ionicons5
+
+const emit = defineEmits(['update:modelShow'])
+
+defineProps({
+  modelShow: Boolean,
+})
+
+// 快捷键
+const shortcutKeyOptions = [
+  {
+    label: '向上移动',
+    win: `${WinKeyboard.CTRL.toUpperCase()} + ↑ `,
+    mac: `${MacKeyboard.CTRL.toUpperCase()} + ↑ `,
+  },
+  {
+    label: '向右移动',
+    win: `${WinKeyboard.CTRL.toUpperCase()} + → `,
+    mac: `${MacKeyboard.CTRL.toUpperCase()} + → `,
+  },
+  {
+    label: '向下移动',
+    win: `${WinKeyboard.CTRL.toUpperCase()} + ↓ `,
+    mac: `${MacKeyboard.CTRL.toUpperCase()} + ↓ `,
+  },
+  {
+    label: '向左移动',
+    win: `${WinKeyboard.CTRL.toUpperCase()} + ← `,
+    mac: `${MacKeyboard.CTRL.toUpperCase()} + ← `,
+  },
+  {
+    label: '删除',
+    win: 'Delete',
+    mac: `${MacKeyboard.CTRL.toUpperCase()} + Backspace `,
+  },
+  {
+    label: '复制',
+    win: `${WinKeyboard.CTRL.toUpperCase()} + C `,
+    mac: `${MacKeyboard.CTRL.toUpperCase()} + C `,
+  },
+  {
+    label: '剪切',
+    win: `${WinKeyboard.CTRL.toUpperCase()} + X `,
+    mac: `${MacKeyboard.CTRL.toUpperCase()} + X `,
+  },
+  {
+    label: '粘贴',
+    win: `${WinKeyboard.CTRL.toUpperCase()} + V `,
+    mac: `${MacKeyboard.CTRL.toUpperCase()} + V `,
+  },
+  {
+    label: '后退',
+    win: `${WinKeyboard.CTRL.toUpperCase()} + Z `,
+    mac: `${MacKeyboard.CTRL.toUpperCase()} + Z `,
+  },
+  {
+    label: '前进',
+    win: `${WinKeyboard.CTRL.toUpperCase()} + ${WinKeyboard.SHIFT.toUpperCase()} + Z `,
+    mac: `${MacKeyboard.CTRL.toUpperCase()} + ${MacKeyboard.SHIFT.toUpperCase()} + Z `,
+  },
+]
+const closeHandle = () => {
+  emit('update:modelShow', false)
+}
+</script>
+
+<style lang="scss" scoped>
+.model-content {
+  width: 50vw;
+  padding-bottom: 20px;
+  overflow: hidden;
+  border-radius: 15px;
+  .fs {
+    font-size: 22px
+  }
+}
+</style>

src/views/chart/ContentEdit/components/EditShortcutKey/index.ts

@@ -0,0 +1,2 @@
+import EditShortcutKey from './index.vue'
+export { EditShortcutKey }

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

@@ -0,0 +1,41 @@
+<template>
+  <div class="go-edit-shortcut">
+    <shortcut-key-modal v-model:modelShow="modelShow"></shortcut-key-modal>
+    <n-tooltip trigger="hover">
+      <template #trigger>
+        <n-button
+          class="scale-btn"
+          secondary
+          size="small"
+          @click="modelShow = true"
+        >
+          <n-icon size="21" :depth="3">
+            <dicom-overlay-icon></dicom-overlay-icon>
+          </n-icon>
+        </n-button>
+      </template>
+      <span>快捷键</span>
+    </n-tooltip>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { icon } from '@/plugins'
+import ShortcutKeyModal from './ShortcutKeyModal.vue'
+
+const { DicomOverlayIcon } = icon.carbon
+const modelShow = ref<boolean>(false)
+</script>
+
+<style lang="scss" scoped>
+@include go('edit-shortcut') {
+  .scale-btn {
+    margin: 0 10px 0 0;
+    .btn-text {
+      font-size: 12px;
+      margin-right: 3px;
+    }
+  }
+}
+</style>