feat: 补充快捷键backspace

src/configs/hotkey.ts

@@ -20,4 +20,76 @@ export const enum KEYS {
   ENTER = 'ENTER',
   SPACE = ' ',
   TAB = 'TAB',
-}
+  BACKSPACE = 'BACKSPACE',
+}
+
+export const HOTKEY_DOC = [
+  {
+    type: '通用',
+    children: [
+      { label: '剪切', value: 'Ctrl + X' },
+      { label: '复制', value: 'Ctrl + C' },
+      { label: '粘贴', value: 'Ctrl + V' },
+      { label: '快速复制粘贴', value: 'Ctrl + D' },
+      { label: '全选', value: 'Ctrl + A' },
+      { label: '撤销', value: 'Ctrl + Z' },
+      { label: '恢复', value: 'Ctrl + Y' },
+      { label: '删除', value: 'Delete / Backspace' },
+    ],
+  },
+  {
+    type: '幻灯片放映',
+    children: [
+      { label: '开始放映幻灯片', value: 'Ctrl + F' },
+      { label: '切换上一页', value: '↑ / ←' },
+      { label: '切换下一页', value: '↓ / → / Enter / Space' },
+      { label: '退出放映', value: 'ESC' },
+    ],
+  },
+  {
+    type: '幻灯片编辑',
+    children: [
+      { label: '新建幻灯片', value: 'Enter' },
+      { label: '缩放画布', value: 'Ctrl + 鼠标滚动' },
+      { label: '放大画布', value: 'Ctrl + =' },
+      { label: '缩小画布', value: 'Ctrl + -' },
+      { label: '缩放画布到合适大小', value: 'Ctrl + 0' },
+      { label: '编辑上一页', value: '↑ / ←' },
+      { label: '编辑下一页', value: '↓ / →' },
+    ],
+  },
+  {
+    type: '元素操作',
+    children: [
+      { label: '移动', value: '↑ / ← / ↓ / →' },
+      { label: '锁定', value: 'Ctrl + L' },
+      { label: '组合', value: 'Ctrl + G' },
+      { label: '取消组合', value: 'Ctrl + Shift + G' },
+      { label: '置顶层', value: 'Alt + F' },
+      { label: '置底层', value: 'Alt + B' },
+      { label: '多选', value: '按住 Ctrl 或 Shift' },
+      { label: '锁定宽高比例', value: '按住 Ctrl 或 Shift' },
+      { label: '创建水平 / 垂直线条', value: '按住 Ctrl 或 Shift' },
+      { label: '确认图片裁剪', value: 'Enter' },
+    ],
+  },
+  {
+    type: '表格编辑',
+    children: [
+      { label: '聚焦到下一个单元格', value: 'Tab' },
+      { label: '在上方插入一行', value: 'Ctrl + ↑' },
+      { label: '在下方插入一行', value: 'Ctrl + ↓' },
+      { label: '在左侧插入一列', value: 'Ctrl + ←' },
+      { label: '在右侧插入一列', value: 'Ctrl + →' },
+    ],
+  },
+  {
+    type: '文本编辑',
+    children: [
+      { label: '加粗', value: 'Ctrl + B' },
+      { label: '斜体', value: 'Ctrl + I' },
+      { label: '下划线', value: 'Ctrl + U' },
+      { label: '删除线', value: 'Ctrl + D' },
+    ],
+  },
+]

src/views/Editor/EditorHeader/HotkeyDoc.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="hotkey-doc">
+    <template v-for="item in hotkeys" :key="item.type">
+      <div class="title">{{item.type}}</div>
+      <div class="hotkey-item" v-for="hotkey in item.children" :key="hotkey.label">
+        <div class="label">{{hotkey.label}}</div>
+        <div class="value">{{hotkey.value}}</div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import { HOTKEY_DOC } from '@/configs/hotkey'
+
+const hotkeys = HOTKEY_DOC
+
+export default defineComponent({
+  name: 'hotkey-doc',
+  setup() {
+    return {
+      hotkeys,
+    }
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.hotkey-doc {
+  height: 100%;
+  overflow: auto;
+  font-size: 12px;
+}
+.title {
+  font-size: 14px;
+  font-weight: 700;
+  border-bottom: 1px solid #e5e5e5;
+  padding: 15px 0 5px 0;
+}
+.hotkey-item {
+  border-bottom: 1px solid #e5e5e5;
+  padding: 15px 0 5px 0;
+  display: flex;
+  align-items: center;
+}
+.label {
+  width: 140px;
+
+  @include ellipsis();
+}
+</style>

src/views/Editor/EditorHeader/index.vue

@@ -53,15 +53,7 @@
       :visible="hotkeyDrawerVisible"
       @close="hotkeyDrawerVisible = false"
     >
-      <div class="hotkeys">
-        <template v-for="item in hotkeys" :key="item.type">
-          <div class="title">{{item.type}}</div>
-          <div class="hotkey-item" v-for="hotkey in item.children" :key="hotkey.label">
-            <div class="label">{{hotkey.label}}</div>
-            <div class="value">{{hotkey.value}}</div>
-          </div>
-        </template>
-      </div>
+      <HotkeyDoc />
     </Drawer>
   </div>
 </template>
@@ -74,81 +66,14 @@ import useScreening from '@/hooks/useScreening'
 import useSlideHandler from '@/hooks/useSlideHandler'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
+import HotkeyDoc from './HotkeyDoc.vue'
 import { message } from 'ant-design-vue'
 
-const hotkeys = [
-  {
-    type: '通用',
-    children: [
-      { label: '剪切', value: 'Ctrl + X' },
-      { label: '复制', value: 'Ctrl + C' },
-      { label: '粘贴', value: 'Ctrl + V' },
-      { label: '快速复制粘贴', value: 'Ctrl + D' },
-      { label: '全选', value: 'Ctrl + A' },
-      { label: '撤销', value: 'Ctrl + Z' },
-      { label: '恢复', value: 'Ctrl + Y' },
-      { label: '删除', value: 'Delete' },
-    ],
-  },
-  {
-    type: '幻灯片放映',
-    children: [
-      { label: '开始放映幻灯片', value: 'Ctrl + F' },
-      { label: '切换上一页', value: '↑ / ←' },
-      { label: '切换下一页', value: '↓ / → / Enter / Space' },
-      { label: '退出放映', value: 'ESC' },
-    ],
-  },
-  {
-    type: '幻灯片编辑',
-    children: [
-      { label: '新建幻灯片', value: 'Enter' },
-      { label: '缩放画布', value: 'Ctrl + 鼠标滚动' },
-      { label: '放大画布', value: 'Ctrl + =' },
-      { label: '缩小画布', value: 'Ctrl + -' },
-      { label: '缩放画布到合适大小', value: 'Ctrl + 0' },
-      { label: '编辑上一页', value: '↑ / ←' },
-      { label: '编辑下一页', value: '↓ / →' },
-    ],
-  },
-  {
-    type: '元素操作',
-    children: [
-      { label: '移动', value: '↑ / ← / ↓ / →' },
-      { label: '锁定', value: 'Ctrl + L' },
-      { label: '组合', value: 'Ctrl + G' },
-      { label: '取消组合', value: 'Ctrl + Shift + G' },
-      { label: '置顶层', value: 'Alt + F' },
-      { label: '置底层', value: 'Alt + B' },
-      { label: '多选', value: '按住 Ctrl 或 Shift' },
-      { label: '锁定宽高比例', value: '按住 Ctrl 或 Shift' },
-      { label: '创建水平 / 垂直线条', value: '按住 Ctrl 或 Shift' },
-      { label: '确认图片裁剪', value: 'Enter' },
-    ],
-  },
-  {
-    type: '表格编辑',
-    children: [
-      { label: '聚焦到下一个单元格', value: 'Tab' },
-      { label: '在上方插入一行', value: 'Ctrl + ↑' },
-      { label: '在下方插入一行', value: 'Ctrl + ↓' },
-      { label: '在左侧插入一列', value: 'Ctrl + ←' },
-      { label: '在右侧插入一列', value: 'Ctrl + →' },
-    ],
-  },
-  {
-    type: '文本编辑',
-    children: [
-      { label: '加粗', value: 'Ctrl + B' },
-      { label: '斜体', value: 'Ctrl + I' },
-      { label: '下划线', value: 'Ctrl + U' },
-      { label: '删除线', value: 'Ctrl + D' },
-    ],
-  },
-]
-
 export default defineComponent({
   name: 'editor-header',
+  components: {
+    HotkeyDoc,
+  },
   setup() {
     const store = useStore()
 
@@ -187,7 +112,6 @@ export default defineComponent({
       resetSlides,
       openDoc,
       hotkeyDrawerVisible,
-      hotkeys,
     }
   },
 })
@@ -212,27 +136,4 @@ export default defineComponent({
   margin: 0 10px;
   cursor: pointer;
 }
-
-.hotkeys {
-  height: 100%;
-  overflow: auto;
-  font-size: 12px;
-}
-.title {
-  font-size: 14px;
-  font-weight: 700;
-  border-bottom: 1px solid #e5e5e5;
-  padding: 15px 0 5px 0;
-}
-.hotkey-item {
-  border-bottom: 1px solid #e5e5e5;
-  padding: 15px 0 5px 0;
-  display: flex;
-  align-items: center;
-}
-.label {
-  width: 140px;
-
-  @include ellipsis();
-}
 </style>

src/views/Editor/useHotkey.ts

@@ -173,7 +173,7 @@ export default () => {
       e.preventDefault()
       order(ElementOrderCommands.BOTTOM)
     }
-    if (key === KEYS.DELETE) {
+    if (key === KEYS.DELETE || key === KEYS.BACKSPACE) {
       if (disableHotkeys.value) return
       e.preventDefault()
       remove()