fix: 修改快捷键展示弹窗

2026-04-23 00:00:12 +08:00 · 2022-04-13 10:35:15 +08:00
parent 828497bd08
commit b4ebf8cde3
5 changed files with 151 additions and 60 deletions
@@ -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>
@@ -0,0 +1,2 @@
+import EditShortcutKey from './index.vue'
+export { EditShortcutKey }
@@ -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>