Add custom shortcut keys

src/components/Modal/Modal.vue

@@ -17,7 +17,8 @@ export interface ModalProps {
   footer?: boolean
   header?: boolean
   confirmButtonText?: string
-  cancelButtonText?: string
+  cancelButtonText?: string,
+  keyboard?: boolean
 }
 
 const props = withDefaults(defineProps<ModalProps>(), {
@@ -28,6 +29,7 @@ const props = withDefaults(defineProps<ModalProps>(), {
   header: true,
   confirmButtonText: '确认',
   cancelButtonText: '取消',
+  keyboard: true
 })
 
 const emit = defineEmits([
@@ -67,7 +69,7 @@ function close() {
       visible = false
       resolve(true)
       let rIndex = runtimeStore.modalList.findIndex(item => item.id === id)
-      if (rIndex > 0) {
+      if (rIndex > -1) {
         runtimeStore.modalList.splice(rIndex, 1)
       }
     }, closeTime)
@@ -79,7 +81,7 @@ watch(() => props.modelValue, n => {
   if (n) {
     id = Date.now()
     runtimeStore.modalList.push({id, close})
-    zIndex = zIndex + runtimeStore.modalList.length
+    zIndex = 999 + runtimeStore.modalList.length
     visible = true
   } else {
     close()
@@ -92,7 +94,7 @@ onMounted(() => {
     visible = true
     id = Date.now()
     runtimeStore.modalList.push({id, close})
-    zIndex = zIndex + runtimeStore.modalList.length
+    zIndex = 999 + runtimeStore.modalList.length
   }
 })
 
@@ -100,14 +102,14 @@ onUnmounted(() => {
   if (props.modelValue === undefined) {
     visible = false
     let rIndex = runtimeStore.modalList.findIndex(item => item.id === id)
-    if (rIndex > 0) {
+    if (rIndex > -1) {
       runtimeStore.modalList.splice(rIndex, 1)
     }
   }
 })
 
 useEventListener('keyup', (e: KeyboardEvent) => {
-  if (e.key === 'Escape') {
+  if (e.key === 'Escape' && props.keyboard) {
     let lastItem = runtimeStore.modalList[runtimeStore.modalList.length - 1]
     if (lastItem?.id === id) {
       close()

src/components/Practice/PracticeWord/TypingWord.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import {watch} from "vue"
+import {onMounted, onUnmounted, watch} from "vue"
 import {$computed, $ref} from "vue/macros"
 import {useBaseStore} from "@/stores/base.ts"
-import {DictType, DisplayStatistics, ShortcutKeyMap, Word} from "../../../types";
+import {DefaultShortcutKeyMap, DictType, DisplayStatistics, ShortcutKey, ShortcutKeyMap, Word} from "../../../types";
 import {emitter, EventKey} from "@/utils/eventBus.ts"
 import {cloneDeep} from "lodash-es"
 import {usePracticeStore} from "@/stores/practice.ts"
@@ -130,14 +130,6 @@ function prev() {
   data.index--
 }
 
-function toggleWordSimpleWrapper() {
-  if (!isWordSimple(word)) {
-    toggleWordSimple(word)
-    next(false)
-  } else {
-    toggleWordSimple(word)
-  }
-}
 
 function onKeyUp(e: KeyboardEvent) {
   typingRef.hideWord()
@@ -159,24 +151,47 @@ async function onKeyDown(e: KeyboardEvent) {
     case 'Backspace':
       typingRef.del()
       break
-    case ShortcutKeyMap.Collect:
-      toggleWordCollect(word)
-      break
-    case ShortcutKeyMap.Remove:
-      toggleWordSimpleWrapper()
-      break
-    case ShortcutKeyMap.Ignore:
-      next(false)
-      e.preventDefault()
-      break
-    case ShortcutKeyMap.Show:
-      typingRef.showWord()
-      break
   }
 }
 
 useOnKeyboardEventListener(onKeyDown, onKeyUp)
 
+function skip(e: KeyboardEvent) {
+  next(false)
+  e.preventDefault()
+}
+
+function show(e: KeyboardEvent) {
+  typingRef.showWord()
+}
+
+function collect(e: KeyboardEvent) {
+  toggleWordCollect(word)
+}
+
+function toggleWordSimpleWrapper() {
+  if (!isWordSimple(word)) {
+    toggleWordSimple(word)
+    next(false)
+  } else {
+    toggleWordSimple(word)
+  }
+}
+
+onMounted(() => {
+  emitter.on(ShortcutKey.Show, show)
+  emitter.on(ShortcutKey.Skip, skip)
+  emitter.on(ShortcutKey.ToggleCollect, collect)
+  emitter.on(ShortcutKey.ToggleSimple, toggleWordSimpleWrapper)
+})
+
+onUnmounted(() => {
+  emitter.off(ShortcutKey.Show, show)
+  emitter.off(ShortcutKey.Skip, skip)
+  emitter.off(ShortcutKey.ToggleCollect, collect)
+  emitter.off(ShortcutKey.ToggleSimple, toggleWordSimpleWrapper)
+})
+
 </script>
 
 <template>

src/components/Toolbar/DictModal.vue

@@ -503,7 +503,6 @@ $header-height: 60rem;
       display: flex;
       flex-direction: column;
       gap: 10rem;
-      padding: 15rem;
       min-height: 100rem;
       position: relative;
       border-radius: 10rem;
@@ -529,12 +528,11 @@ $header-height: 60rem;
 
     .setting {
       overflow: auto;
-      flex: 4;
+      flex: 5;
       background: white;
       border-radius: 10rem;
       background: var(--color-second-bg);
       color: var(--color-font-1);
-      padding: 15rem;
 
       .row {
         display: flex;
@@ -555,7 +553,6 @@ $header-height: 60rem;
       border-radius: 10rem;
       background: var(--color-second-bg);
       color: var(--color-font-1);
-      padding: 10rem;
       display: flex;
       flex-direction: column;
     }

src/components/Toolbar/SettingModal.vue

@@ -5,7 +5,7 @@ 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, useEventListener} from "@/hooks/event.ts";
+import {getShortcutKey, useDisableEventListener, useEventListener} from "@/hooks/event.ts";
 import {$computed, $ref} from "vue/macros";
 import {cloneDeep} from "lodash-es";
 import {DefaultShortcutKeyMap} from "@/types.ts";
@@ -25,33 +25,17 @@ useWatchAllSound()
 
 let editShortcutKey = $ref('')
 
+const disabledDefaultKeyboardEvent = $computed(()=>{
+  return editShortcutKey && tabIndex === 2
+})
+
 useEventListener('keydown', (e: KeyboardEvent) => {
-  console.log('e', e, e.keyCode, e.ctrlKey, e.altKey, e.shiftKey)
-  if (!editShortcutKey) return
+  if (!disabledDefaultKeyboardEvent) 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 {
-      if (e.key === 'ArrowRight') {
-        shortcutKey += '➡'
-      } else if (e.key === 'ArrowLeft') {
-        shortcutKey += '⬅'
-      } else if (e.key === 'ArrowUp') {
-        shortcutKey += '⬆'
-      } else if (e.key === 'ArrowDown') {
-        shortcutKey += '⬇'
-      } else {
-        shortcutKey += e.key
-      }
-    }
-  }
-  shortcutKey = shortcutKey.trim()
+  let shortcutKey = getShortcutKey(e)
+  // console.log('e', e, e.keyCode, e.ctrlKey, e.altKey, e.shiftKey)
+  // console.log('key', shortcutKey)
 
   // if (shortcutKey[shortcutKey.length-1] === '+') {
   //   settingStore.shortcutKeyMap[editShortcutKey] = DefaultShortcutKeyMap[editShortcutKey]
@@ -67,7 +51,6 @@ useEventListener('keydown', (e: KeyboardEvent) => {
     }
     settingStore.shortcutKeyMap[editShortcutKey] = shortcutKey
   }
-  console.log('key', shortcutKey)
 })
 
 </script>
@@ -75,6 +58,7 @@ useEventListener('keydown', (e: KeyboardEvent) => {
 <template>
   <Modal
       @close="emit('close')"
+      :keyboard="!disabledDefaultKeyboardEvent"
       title="设置">
     <div class="setting-modal">
       <div class="left">

src/components/Toolbar/Toolbar.vue

@@ -59,7 +59,6 @@ watch(() => store.load, n => {
   }
 })
 
-
 </script>
 
 <template>

src/components/WordListModal.vue

@@ -23,33 +23,35 @@ onMounted(() => {
     show = true
     list = val.list
     title = val.title
-    let count = 0
-    if (val.translateLanguage === 'common') {
-      for (let index = 0; index < list.length; index++) {
-        let w = list[index]
-        if (!w.trans.length) {
-          requestIdleCallback(() => {
-            if (list.length) {
-              let res = runtimeStore.translateWordList.find(a => a.name === w.name)
-              if (res) w = Object.assign(w, res)
-              count++
-              if (count === list.length) {
-                progress = 100
-              } else {
-                if (count % 30 === 0) progress = (count / list.length) * 100
+    requestIdleCallback(() => {
+      let count = 0
+      if (val.translateLanguage === 'common') {
+        for (let index = 0; index < list.length; index++) {
+          let w = list[index]
+          if (!w.trans.length) {
+            requestIdleCallback(() => {
+              if (list.length) {
+                let res = runtimeStore.translateWordList.find(a => a.name === w.name)
+                if (res) w = Object.assign(w, res)
+                count++
+                if (count === list.length) {
+                  progress = 100
+                } else {
+                  if (count % 30 === 0) progress = (count / list.length) * 100
+                }
               }
-            }
-          })
-        } else {
-          count++
-          if (count === list.length) {
-            progress = 100
+            })
           } else {
-            if (count % 30 === 0) progress = (count / list.length) * 100
+            count++
+            if (count === list.length) {
+              progress = 100
+            } else {
+              if (count % 30 === 0) progress = (count / list.length) * 100
+            }
           }
         }
       }
-    }
+    })
   })
 })