Add custom shortcut keys

2023-11-04 02:39:40 +08:00
parent 1eb82c17a5
commit 9eeb1938a3
10 changed files with 307 additions and 250 deletions
--- a/components.d.ts
+++ b/components.d.ts
@@ -23,9 +23,6 @@ declare module 'vue' {
    EditArticle: typeof import('./src/components/Article/EditArticle.vue')['default']
    EditBatchArticleModal: typeof import('./src/components/Article/EditBatchArticleModal.vue')['default']
    EditSingleArticleModal: typeof import('./src/components/Article/EditSingleArticleModal.vue')['default']
-    ElButton: typeof import('element-plus/es')['ElButton']
-    ElForm: typeof import('element-plus/es')['ElForm']
-    ElFormItem: typeof import('element-plus/es')['ElFormItem']
    ElInput: typeof import('element-plus/es')['ElInput']
    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
    ElOption: typeof import('element-plus/es')['ElOption']
@@ -68,7 +65,4 @@ declare module 'vue' {
    WordListModal: typeof import('./src/components/WordListModal.vue')['default']
    WordListModal2: typeof import('./src/components/WordListModal2.vue')['default']
  }
-  export interface ComponentCustomProperties {
-    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
-  }
 }
--- a/src/components/Modal/Modal.vue
+++ b/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()
--- a/src/components/Practice/PracticeWord/TypingWord.vue
+++ b/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>
--- a/src/components/Toolbar/DictModal.vue
+++ b/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;
    }
--- a/src/components/Toolbar/SettingModal.vue
+++ b/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">
--- a/src/components/Toolbar/Toolbar.vue
+++ b/src/components/Toolbar/Toolbar.vue
@@ -59,7 +59,6 @@ watch(() => store.load, n => {
  }
 })

-
 </script>

 <template>
--- a/src/components/WordListModal.vue
+++ b/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
+            }
          }
        }
      }
-    }
+    })
  })
 })

--- a/src/hooks/event.ts
+++ b/src/hooks/event.ts
@@ -2,6 +2,8 @@ import {onMounted, onUnmounted, toRef, toValue, watch} from "vue";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import {$ref} from "vue/macros";
+import {DefaultShortcutKeyMap} from "@/types.ts";
+import {useSettingStore} from "@/stores/setting.ts";

 export function useWindowClick(cb: (e: PointerEvent) => void) {
  onMounted(() => {
@@ -18,32 +20,81 @@ export function useEventListener(type: string, listener: EventListenerOrEventLis
  onUnmounted(() => window.removeEventListener(type, listener))
 }

+export function getShortcutKey(e: KeyboardEvent) {
+  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()
+
+  // console.log('key', shortcutKey)
+  return shortcutKey
+}
+
 export function useStartKeyboardEventListener() {
  const runtimeStore = useRuntimeStore()
+  const settingStore = useSettingStore()

  useEventListener('keydown', (e: KeyboardEvent) => {
+    e.preventDefault()
+
    // console.log('e',e.keyCode,e.code)
    if (!runtimeStore.disableEventListener) {
-      //非英文模式下，输入区域的 keyCode 均为 229时，
-      if ((e.keyCode >= 65 && e.keyCode <= 90)
-        || (e.keyCode >= 48 && e.keyCode <= 57)
-        || e.code === 'Space'
-        || e.code === 'Slash'
-        || e.code === 'Quote'
-        || e.code === 'Comma'
-        || e.code === 'BracketLeft'
-        || e.code === 'BracketRight'
-        || e.code === 'Period'
-        || e.code === 'Minus'
-        || e.code === 'Equal'
-        || e.code === 'Semicolon'
-        // || e.code === 'Backquote'
-        || e.keyCode === 229
-      ) {
-        emitter.emit(EventKey.onTyping, e)
-      } else {
-        emitter.emit(EventKey.keydown, e)
+      let shortcutKey = getShortcutKey(e)
+      // console.log('shortcutKey', shortcutKey)
+
+      let list = Object.entries(settingStore.shortcutKeyMap)
+      let shortcutEvent = ''
+      for (let i = 0; i < list.length; i++) {
+        let [k, v] = list[i]
+        if (v === shortcutKey) {
+          console.log('快捷键', k)
+          shortcutEvent = k
+          break
+        }
      }
+      if (shortcutEvent) {
+        emitter.emit(shortcutEvent, e)
+      } else {
+        //非英文模式下，输入区域的 keyCode 均为 229时，
+        if ((e.keyCode >= 65 && e.keyCode <= 90)
+          || (e.keyCode >= 48 && e.keyCode <= 57)
+          || e.code === 'Space'
+          || e.code === 'Slash'
+          || e.code === 'Quote'
+          || e.code === 'Comma'
+          || e.code === 'BracketLeft'
+          || e.code === 'BracketRight'
+          || e.code === 'Period'
+          || e.code === 'Minus'
+          || e.code === 'Equal'
+          || e.code === 'Semicolon'
+          // || e.code === 'Backquote'
+          || e.keyCode === 229
+        ) {
+          emitter.emit(EventKey.onTyping, e)
+        } else {
+          emitter.emit(EventKey.keydown, e)
+        }
+      }
+
    }
  })
  useEventListener('keyup', (e: KeyboardEvent) => {
@@ -66,7 +117,7 @@ export function useOnKeyboardEventListener(onKeyDown: (e: KeyboardEvent) => void

 export function useDisableEventListener(watchVal?: any) {
  const runtimeStore = useRuntimeStore()
-  watch(watchVal, n => {
+  watch(() => watchVal, n => {
    if (n) {
      runtimeStore.disableEventListener = true
    } else {
--- a/src/stores/setting.ts
+++ b/src/stores/setting.ts
@@ -107,7 +107,7 @@ export const useSettingStore = defineStore('setting', {
            setDefaultConfig()
          }
        }
-        resolve()
+        resolve(true)
      })
    }
  }
--- a/src/types.ts
+++ b/src/types.ts
@@ -5,26 +5,26 @@ import deFlag from "./assets/img/flags/de.png";
 import codeFlag from "@/assets/img/flags/code.png";

 export type Word = {
-    "name": string,
-    "usphone": string,
-    "ukphone": string,
-    "trans": string[]
+  "name": string,
+  "usphone": string,
+  "ukphone": string,
+  "trans": string[]
 }

 export const DefaultWord: Word = {
-    name: '',
-    usphone: '',
-    ukphone: '',
-    trans: []
+  name: '',
+  usphone: '',
+  ukphone: '',
+  trans: []
 }

 export const SaveDict = {
-    key: 'typing-word-dict',
-    version: 1
+  key: 'typing-word-dict',
+  version: 1
 }
 export const SaveConfig = {
-    key: 'typing-word-config',
-    version: 1
+  key: 'typing-word-config',
+  version: 1
 }

 export const PronunciationApi = 'https://dict.youdao.com/dictvoice?audio='
@@ -33,186 +33,199 @@ export type TranslateLanguageType = 'en' | 'zh-CN' | 'ja' | 'de' | 'common' | ''
 export type LanguageType = 'en' | 'ja' | 'de' | 'code'

 export type DictResource = {
-    id: string
-    name: string
-    description: string
-    category: string
-    tags: string[]
-    url: string
-    length: number
-    translateLanguage: TranslateLanguageType
-    type: DictType
-    language: LanguageType
+  id: string
+  name: string
+  description: string
+  category: string
+  tags: string[]
+  url: string
+  length: number
+  translateLanguage: TranslateLanguageType
+  type: DictType
+  language: LanguageType
 }

 export interface Dict {
-    id: string,
-    name: string,
-    description: string,
-    sort: Sort,
-    originWords: Word[],//原始单词
-    words: Word[],
-    chapterWordNumber: number,//章节单词数量
-    chapterWords: Word[][],
-    chapterIndex: number,//章节下标
-    wordIndex: number,//单词下标
-    articles: Article[],
-    statistics: Statistics[],
-    resourceId: string,
-    type: DictType,
-    translateLanguage: TranslateLanguageType
-    language: LanguageType
-    url: string,
+  id: string,
+  name: string,
+  description: string,
+  sort: Sort,
+  originWords: Word[],//原始单词
+  words: Word[],
+  chapterWordNumber: number,//章节单词数量
+  chapterWords: Word[][],
+  chapterIndex: number,//章节下标
+  wordIndex: number,//单词下标
+  articles: Article[],
+  statistics: Statistics[],
+  resourceId: string,
+  type: DictType,
+  translateLanguage: TranslateLanguageType
+  language: LanguageType
+  url: string,
 }


 export enum DictType {
-    collect = 'collect',
-    simple = 'simple',
-    wrong = 'wrong',
-    word = 'word',
-    customWord = 'customWord',
-    article = 'article',
-    customArticle = 'customArticle'
+  collect = 'collect',
+  simple = 'simple',
+  wrong = 'wrong',
+  word = 'word',
+  customWord = 'customWord',
+  article = 'article',
+  customArticle = 'customArticle'
 }

 export const DefaultArticleWord: ArticleWord = {
-    name: '',
-    usphone: '',
-    ukphone: '',
-    trans: [],
-    nextSpace: true,
-    isSymbol: false,
-    symbolPosition: ''
+  name: '',
+  usphone: '',
+  ukphone: '',
+  trans: [],
+  nextSpace: true,
+  isSymbol: false,
+  symbolPosition: ''
 }

 export interface ArticleWord extends Word {
-    nextSpace: boolean,
-    isSymbol: boolean,
-    symbolPosition: 'start' | 'end' | '',
+  nextSpace: boolean,
+  isSymbol: boolean,
+  symbolPosition: 'start' | 'end' | '',
 }

 export interface Sentence {
-    text: string,
-    translate: string,
-    words: ArticleWord[]
+  text: string,
+  translate: string,
+  words: ArticleWord[]
 }

 export enum TranslateType {
-    custom = 'custom',
-    network = 'network',
-    none = 'none'
+  custom = 'custom',
+  network = 'network',
+  none = 'none'
 }

 export interface Article {
-    id: string,
-    title: string,
-    titleTranslate: string,
-    text: string,
-    textFormat: string,
-    textCustomTranslate: string,
-    textCustomTranslateIsFormat: boolean,//翻译是否格式化
-    textNetworkTranslate: string,
-    newWords: Word[],
-    textAllWords: string[],
-    sections: Sentence[][],
-    useTranslateType: TranslateType
+  id: string,
+  title: string,
+  titleTranslate: string,
+  text: string,
+  textFormat: string,
+  textCustomTranslate: string,
+  textCustomTranslateIsFormat: boolean,//翻译是否格式化
+  textNetworkTranslate: string,
+  newWords: Word[],
+  textAllWords: string[],
+  sections: Sentence[][],
+  useTranslateType: TranslateType
 }

 export const DefaultArticle: Article = {
-    // id: uuidv4(),
-    id: '',
-    title: '',
-    titleTranslate: '',
-    text: '',
-    textFormat: '',
-    textCustomTranslate: '',
-    textNetworkTranslate: '',
-    textCustomTranslateIsFormat: false,
-    newWords: [],
-    textAllWords: [],
-    sections: [],
-    useTranslateType: TranslateType.network
+  // id: uuidv4(),
+  id: '',
+  title: '',
+  titleTranslate: '',
+  text: '',
+  textFormat: '',
+  textCustomTranslate: '',
+  textNetworkTranslate: '',
+  textCustomTranslateIsFormat: false,
+  newWords: [],
+  textAllWords: [],
+  sections: [],
+  useTranslateType: TranslateType.network
 }

 export interface Statistics {
-    startDate: number,//开始日期
-    endDate: number//结束日期
-    spend: number,//花费时间
-    total: number//单词数量
-    wrongWordNumber: number//错误数
-    correctRate: number//正确率
+  startDate: number,//开始日期
+  endDate: number//结束日期
+  spend: number,//花费时间
+  total: number//单词数量
+  wrongWordNumber: number//错误数
+  correctRate: number//正确率
 }

 export interface DisplayStatistics extends Statistics {
-    wrongWords: Word[]
+  wrongWords: Word[]
 }

 export const DefaultDisplayStatistics: DisplayStatistics = {
-    startDate: Date.now(),
-    endDate: -1,
-    spend: -1,
-    total: -1,
-    correctRate: -1,
-    wrongWordNumber: -1,
-    wrongWords: [],
+  startDate: Date.now(),
+  endDate: -1,
+  spend: -1,
+  total: -1,
+  correctRate: -1,
+  wrongWordNumber: -1,
+  wrongWords: [],
 }

 export enum Sort {
-    normal = 0,
-    random = 1,
-    reverse = 2
+  normal = 0,
+  random = 1,
+  reverse = 2
 }

 export const ShortcutKeyMap = {
-    Show: 'Escape',
-    Ignore: 'Tab',
-    Remove: '`',
-    Collect: 'Enter',
+  Show: 'Escape',
+  Ignore: 'Tab',
+  Remove: '`',
+  Collect: 'Enter',
+}
+
+export enum ShortcutKey {
+  Show = 'Show',
+  Skip = 'Skip',
+  ToggleSimple = 'ToggleSimple',
+  ToggleCollect = 'ToggleCollect',
+  NextChapter = 'NextChapter',
+  ReplayChapter = 'ReplayChapter',
+  DictationChapter = 'DictationChapter',
+  PlaySound = 'PlaySound',
+  ToggleShowTranslate = 'ToggleShowTranslate',
+  ToggleDictation = 'ToggleDictation',
 }

 export const DefaultShortcutKeyMap = {
-    Show: 'Escape',
-    Skip: 'Tab',
-    SetEasy: '`',
-    SetCollect: 'Enter',
-    NextChapter: 'Ctrl+➡',
-    ReplayChapter: 'Ctrl+Enter',
-    DictationChapter: 'Alt+Enter',
-    PlaySound: 'Ctrl+P',
-    ToggleShowTranslate:'Ctrl+T',
-    ToggleDictation:'Ctrl+I',
+  [ShortcutKey.Show]: 'Escape',
+  [ShortcutKey.Skip]: 'Tab',
+  [ShortcutKey.ToggleSimple]: '`',
+  [ShortcutKey.ToggleCollect]: 'Enter',
+  [ShortcutKey.NextChapter]: 'Ctrl+➡',
+  [ShortcutKey.ReplayChapter]: 'Ctrl+Enter',
+  [ShortcutKey.DictationChapter]: 'Alt+Enter',
+  [ShortcutKey.PlaySound]: 'Ctrl+P',
+  [ShortcutKey.ToggleShowTranslate]: 'Ctrl+T',
+  [ShortcutKey.ToggleDictation]: 'Ctrl+I',
 }


 export enum TranslateEngine {
-    Baidu = 0,
+  Baidu = 0,
 }

 export const languageCategoryOptions = [
-    {id: 'article', name: '文章', flag: bookFlag},
-    {id: 'en', name: '英语', flag: enFlag},
-    {id: 'ja', name: '日语', flag: jpFlag},
-    {id: 'de', name: '德语', flag: deFlag},
-    {id: 'code', name: 'Code', flag: codeFlag},
+  {id: 'article', name: '文章', flag: bookFlag},
+  {id: 'en', name: '英语', flag: enFlag},
+  {id: 'ja', name: '日语', flag: jpFlag},
+  {id: 'de', name: '德语', flag: deFlag},
+  {id: 'code', name: 'Code', flag: codeFlag},
 ]

 export const DefaultDict: Dict = {
-    id: '',
-    name: '',
-    description: '',
-    sort: Sort.normal,
-    originWords: [],//原始单词
-    words: [],
-    chapterWordNumber: 30,//章节单词数量
-    chapterWords: [],
-    chapterIndex: 0,//章节下标
-    wordIndex: 0,//单词下标
-    articles: [],
-    statistics: [],
-    resourceId: '',
-    type: DictType.word,
-    translateLanguage: 'common',
-    language: 'en',
-    url: '',
+  id: '',
+  name: '',
+  description: '',
+  sort: Sort.normal,
+  originWords: [],//原始单词
+  words: [],
+  chapterWordNumber: 30,//章节单词数量
+  chapterWords: [],
+  chapterIndex: 0,//章节下标
+  wordIndex: 0,//单词下标
+  articles: [],
+  statistics: [],
+  resourceId: '',
+  type: DictType.word,
+  translateLanguage: 'common',
+  language: 'en',
+  url: '',
 }