refactor: extract customShortcutDialog component

Author: cuixiaorui

apps/client/components/CustomShortcutDialog.vue

@@ -0,0 +1,54 @@
+<template>
+  <UModal
+    v-model="showModal"
+    @close="handleCloseDialog"
+  >
+    <UContainer>
+      <h3 class="mb-4 text-center text-base font-bold">
+        请先按下单键/组合键，通过回车键（Enter ⏎）来设置
+      </h3>
+      <div class="h-8 rounded border border-solid text-center leading-8">
+        {{ shortcutKeyStr }}
+      </div>
+      <div class="mt-2 flex h-8 justify-center gap-0.5 text-center">
+        <div v-if="shortcutKeyTip">
+          <UKbd v-for="key in parseShortcutKeys(shortcutKeyTip)">
+            {{ key }}
+          </UKbd>
+        </div>
+      </div>
+      <div
+        v-if="hasSameShortcutKey"
+        class="mt-4 text-center text-xs"
+        :class="'text-[rgba(136,136,136,1)]'"
+      >
+        已有相同的按键绑定，请重新设置
+      </div>
+    </UContainer>
+  </UModal>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted } from "vue";
+
+import { useShortcutKeyMode } from "~/composables/user/shortcutKey";
+import { parseShortcutKeys } from "~/utils/keyboardShortcuts";
+
+const {
+  showModal,
+  shortcutKeyStr,
+  shortcutKeyTip,
+  hasSameShortcutKey,
+  handleCloseDialog,
+  handleKeydown,
+} = useShortcutKeyMode();
+
+onMounted(() => {
+  document.addEventListener("keydown", handleKeydown);
+});
+onUnmounted(() => {
+  document.removeEventListener("keydown", handleKeydown);
+});
+</script>
+
+<style scoped></style>

apps/client/components/UserMenu.vue

@@ -48,7 +48,7 @@
             :name="item.icon"
             class="mr-3 h-7 w-7"
           ></UIcon>
-          <span class="text-lg font-medium">{{ item.title }}</span>
+          <span class="font-medium">{{ item.title }}</span>
         </button>
       </div>
 

apps/client/composables/user/shortcutKey.ts

@@ -51,30 +51,30 @@ export function convertMacKey(key: string) {
 }
 
 // 自定义快捷键
-export function useShortcutKeyMode() {
-  const showModal = ref<boolean>(false);
-  const currentKeyType = ref<SHORTCUT_KEY_TYPES | "">("");
-  const shortcutKeyStr = ref<string>("");
-  const shortcutKeys = ref<{ [key: string]: any }>({
-    ...DEFAULT_SHORTCUT_KEYS,
-  });
-  const shortcutKeyTip = computed(() => {
-    return shortcutKeyStr.value.replace(/\+/g, "+");
-  });
-  const hasSameShortcutKey = ref(false);
-
-  // 初始化快捷键
-  setShortcutKeys();
-
-  function setShortcutKeys() {
-    const localKeys = localStorage.getItem(SHORTCUT_KEYS);
-    if (localKeys) {
-      shortcutKeys.value = { ...shortcutKeys.value, ...JSON.parse(localKeys) };
-    } else {
-      localStorage.setItem(SHORTCUT_KEYS, JSON.stringify(shortcutKeys.value));
-    }
+const showModal = ref<boolean>(false);
+const currentKeyType = ref<SHORTCUT_KEY_TYPES | "">("");
+const shortcutKeyStr = ref<string>("");
+const shortcutKeys = ref<{ [key: string]: any }>({
+  ...DEFAULT_SHORTCUT_KEYS,
+});
+const hasSameShortcutKey = ref(false);
+const shortcutKeyTip = computed(() => {
+  return shortcutKeyStr.value.replace(/\+/g, "+");
+});
+
+// 初始化快捷键
+setShortcutKeys();
+
+function setShortcutKeys() {
+  const localKeys = localStorage.getItem(SHORTCUT_KEYS);
+  if (localKeys) {
+    shortcutKeys.value = { ...shortcutKeys.value, ...JSON.parse(localKeys) };
+  } else {
+    localStorage.setItem(SHORTCUT_KEYS, JSON.stringify(shortcutKeys.value));
   }
+}
 
+export function useShortcutKeyMode() {
   function handleEdit(type: SHORTCUT_KEY_TYPES) {
     showModal.value = true;
     shortcutKeyStr.value = "";
@@ -121,6 +121,12 @@ export function useShortcutKeyMode() {
     if (!showModal.value) return;
 
     e.preventDefault();
+
+    if (e.key === "Escape") {
+      handleCloseDialog();
+      return;
+    }
+
     const mainKey = getKeyModifier(e);
     if (!mainKey && isEnterKey(e.key)) {
       if (checkSameShortcutKey(shortcutKeyStr.value)) {

apps/client/pages/User/Setting.vue

@@ -173,51 +173,10 @@
       </table>
     </section>
   </div>
-
-  <dialog
-    class="modal mt-[-8vh]"
-    :open="showModal"
-  >
-    <div
-      ref="dialogBoxRef"
-      class="modal-box min-h-[156px] max-w-[48rem]"
-    >
-      <h3 class="mb-4 text-center text-base font-bold text-fuchsia-500">
-        请先按下单键/组合键，通过回车键（Enter ⏎）来设置
-      </h3>
-      <div class="h-8 rounded border border-solid border-fuchsia-500 text-center leading-8">
-        {{ shortcutKeyStr }}
-      </div>
-      <div
-        v-if="shortcutKeyTip"
-        class="mt-2 flex justify-center gap-0.5 text-center"
-      >
-        <UKbd v-for="key in parseShortcutKeys(shortcutKeyTip)">
-          {{ key }}
-        </UKbd>
-      </div>
-      <div
-        v-if="hasSameShortcutKey"
-        class="mt-4 text-center text-xs"
-        :class="'text-[rgba(136,136,136,1)]'"
-      >
-        已有相同的按键绑定，请重新设置
-      </div>
-    </div>
-
-    <!-- click outside to close -->
-    <form
-      method="dialog"
-      class="modal-backdrop"
-    >
-      <button @click="handleCloseDialog"></button>
-    </form>
-  </dialog>
+  <CustomShortcutDialog />
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from "vue";
-
 import { useAutoNextQuestion } from "~/composables/user/autoNext";
 import { useErrorTip } from "~/composables/user/errorTip";
 import { GameMode, useGameMode } from "~/composables/user/gameMode";
@@ -232,8 +191,6 @@ import { useSpaceSubmitAnswer } from "~/composables/user/submitKey";
 import { useShowWordsWidth } from "~/composables/user/words";
 import { parseShortcutKeys } from "~/utils/keyboardShortcuts";
 
-const dialogBoxRef = ref<HTMLElement | null>(null);
-
 const { autoNextQuestion, toggleAutoQuestion } = useAutoNextQuestion();
 const { keyboardSound, toggleKeyboardSound } = useKeyboardSound();
 const { autoPlaySound, toggleAutoPlaySound } = useAutoPronunciation();
@@ -247,16 +204,7 @@ const {
 const { showWordsWidth, toggleAutoWordsWidth } = useShowWordsWidth();
 const { useSpace, toggleUseSpaceSubmitAnswer } = useSpaceSubmitAnswer();
 const { showErrorTip, toggleShowErrorTip } = useErrorTip();
-const {
-  showModal,
-  shortcutKeys,
-  shortcutKeyStr,
-  shortcutKeyTip,
-  hasSameShortcutKey,
-  handleEdit,
-  handleCloseDialog,
-  handleKeydown,
-} = useShortcutKeyMode();
+const { shortcutKeys, handleEdit } = useShortcutKeyMode();
 
 const { getGameModeOptions, currentGameMode, toggleGameMode } = useGameMode();
 
@@ -286,13 +234,6 @@ const shortcutKeyBindList = [
     type: SHORTCUT_KEY_TYPES.PAUSE,
   },
 ];
-
-onMounted(() => {
-  document.addEventListener("keydown", handleKeydown);
-});
-onUnmounted(() => {
-  document.removeEventListener("keydown", handleKeydown);
-});
 </script>
 
 <style scoped>