Add custom shortcut keys

src/components/Practice/PracticeArticle/TypingArticle.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import {computed, nextTick, onMounted, onUnmounted, watch} from "vue"
 import {$computed, $ref} from "vue/macros";
-import {Article, ArticleWord, DefaultArticle, ShortKeyMap, Word} from "@/types";
+import {Article, ArticleWord, DefaultArticle, ShortcutKeyMap, Word} from "@/types";
 import {useBaseStore} from "@/stores/base";
 import {usePracticeStore} from "@/stores/practice.ts";
 import {useSettingStore} from "@/stores/setting.ts";
@@ -270,15 +270,15 @@ function onKeyDown(e: KeyboardEvent) {
         input = input.slice(0, -1)
       }
       break
-    case ShortKeyMap.Collect:
+    case ShortcutKeyMap.Collect:
 
       break
-    case ShortKeyMap.Remove:
+    case ShortcutKeyMap.Remove:
       break
-    case ShortKeyMap.Ignore:
+    case ShortcutKeyMap.Ignore:
       nextSentence()
       break
-    case ShortKeyMap.Show:
+    case ShortcutKeyMap.Show:
       if (settingStore.allowWordTip) {
         hoverIndex = {
           sectionIndex: sectionIndex,

src/components/Practice/PracticeWord/TypingWord.vue

@@ -2,7 +2,7 @@
 import {watch} from "vue"
 import {$computed, $ref} from "vue/macros"
 import {useBaseStore} from "@/stores/base.ts"
-import {DictType, DisplayStatistics, ShortKeyMap, Word} from "../../../types";
+import {DictType, DisplayStatistics, ShortcutKeyMap, Word} from "../../../types";
 import {emitter, EventKey} from "@/utils/eventBus.ts"
 import {cloneDeep} from "lodash-es"
 import {usePracticeStore} from "@/stores/practice.ts"
@@ -159,17 +159,17 @@ async function onKeyDown(e: KeyboardEvent) {
     case 'Backspace':
       typingRef.del()
       break
-    case ShortKeyMap.Collect:
+    case ShortcutKeyMap.Collect:
       toggleWordCollect(word)
       break
-    case ShortKeyMap.Remove:
+    case ShortcutKeyMap.Remove:
       toggleWordSimpleWrapper()
       break
-    case ShortKeyMap.Ignore:
+    case ShortcutKeyMap.Ignore:
       next(false)
       e.preventDefault()
       break
-    case ShortKeyMap.Show:
+    case ShortcutKeyMap.Show:
       typingRef.showWord()
       break
   }

src/components/Toolbar/SettingModal.vue

@@ -5,18 +5,60 @@ import {Icon} from '@iconify/vue';
 import {watch, ref} from "vue";
 import {useSettingStore} from "@/stores/setting.ts";
 import {useChangeAllSound, useWatchAllSound} from "@/hooks/sound.ts";
-import {useDisableEventListener} from "@/hooks/event.ts";
+import {useDisableEventListener, useEventListener} from "@/hooks/event.ts";
+import {$computed, $ref} from "vue/macros";
+import {cloneDeep} from "lodash-es";
 
-const tabIndex = $ref(0)
+const tabIndex = $ref(2)
 const settingStore = useSettingStore()
+//@ts-ignore
 const gitLastCommitHash = ref(LATEST_COMMIT_HASH);
 
 const emit = defineEmits([
   'close',
 ])
 
-// useDisableEventListener()
+useDisableEventListener()
 useWatchAllSound()
+let ShortcutKeyMap = {
+  Show: 'Esc',
+  Ignore: 'Tab',
+  Remove: '`',
+  Collect: 'Enter',
+}
+let editShortcutKey = $ref('')
+let shortcutKeyMapRef = $ref(cloneDeep(ShortcutKeyMap))
+
+useEventListener('keydown', (e: KeyboardEvent) => {
+  console.log('e', e, e.keyCode, e.ctrlKey, e.altKey, e.shiftKey)
+  if (!editShortcutKey) return
+  e.preventDefault()
+
+  let shortcutKey = ''
+  if (e.ctrlKey) shortcutKey += 'Ctrl+'
+  if (e.altKey) shortcutKey += 'Alt+'
+  if (e.shiftKey) shortcutKey += 'Shift+'
+  if (e.key !== 'Control' && e.key !== 'Alt' && e.key !== 'Shift') {
+    if (e.keyCode >= 65 && e.keyCode <= 90) {
+      shortcutKey += e.key.toUpperCase()
+    } else {
+      shortcutKey += e.key
+    }
+  }
+  shortcutKey = shortcutKey.trim()
+
+  if (editShortcutKey) {
+    for (const [k, v] of Object.entries(shortcutKeyMapRef)) {
+      if (v === shortcutKey && k !== editShortcutKey) {
+        shortcutKeyMapRef[editShortcutKey] = ShortcutKeyMap[editShortcutKey]
+        return ElMessage.warning('快捷键重复！')
+      }
+    }
+    shortcutKeyMapRef[editShortcutKey] = shortcutKey
+  }
+
+  console.log('key', shortcutKey)
+})
 
 </script>
 
@@ -35,6 +77,10 @@ useWatchAllSound()
             <Icon icon="icon-park-outline:setting-config" width="20" color="#0C8CE9"/>
             <span>其他设置</span>
           </div>
+          <div class="tab" :class="tabIndex === 2 && 'active'" @click="tabIndex = 2">
+            <Icon icon="icon-park-outline:setting-config" width="20" color="#0C8CE9"/>
+            <span>快捷键设置</span>
+          </div>
         </div>
         <div class="git-log">
           Build {{ gitLastCommitHash }}
@@ -230,6 +276,22 @@ useWatchAllSound()
             </div>
           </div>
         </div>
+        <div v-if="tabIndex === 2">
+          <div class="row">
+            <label class="item-title">功能</label>
+            <div class="wrapper">快捷键(点击可修改)</div>
+          </div>
+          <div class="row" v-for="item of Object.entries(shortcutKeyMapRef)">
+            <label class="item-title">{{ item[0] }}</label>
+            <div class="wrapper" @click="editShortcutKey = item[0]">
+              <div class="set-key" v-if="editShortcutKey === item[0]">
+                <input :value="item[1]" readonly type="text" @blur="editShortcutKey = ''">
+                <span @click.stop="editShortcutKey = ''">直接按键盘进行设置</span>
+              </div>
+              <div v-else> {{ item[1] }}</div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </Modal>
@@ -254,7 +316,7 @@ useWatchAllSound()
       padding: 10rem 20rem;
       display: flex;
       flex-direction: column;
-      align-items: center;
+      //align-items: center;
       //justify-content: center;
       gap: 10rem;
 
@@ -272,14 +334,13 @@ useWatchAllSound()
       }
     }
 
-    .git-log{
+    .git-log {
       font-size: 10rem;
       color: gray;
       margin-bottom: 5rem;
     }
   }
 
-
   .content {
     background: var(--color-header-bg);
     flex: 1;
@@ -310,6 +371,17 @@ useWatchAllSound()
           font-size: 12rem;
           color: gray;
         }
+
+        .set-key {
+          align-items: center;
+
+          input {
+            width: 100rem;
+            margin-right: 10rem;
+            height: 24rem;
+            outline: none;
+          }
+        }
       }
 
       .main-title {

src/types.ts

@@ -157,13 +157,15 @@ export enum Sort {
   reverse = 2
 }
 
-export const ShortKeyMap = {
+export const ShortcutKeyMap = {
   Show: 'Escape',
   Ignore: 'Tab',
   Remove: '`',
   Collect: 'Enter',
 }
 
+
+
 export enum TranslateEngine {
   Baidu = 0,
 }