feat: shortcut key settings for submit operations

apps/client/components/main/Question.vue

@@ -27,11 +27,13 @@
 import { useCourseStore } from "~/store/course";
 import { useGameMode } from "~/composables/main/game";
 import { ref, computed, onMounted } from "vue";
+import { useSubmitKey } from '~/composables/user/submitKey';
 
 const courseStore = useCourseStore();
 const { userInputWords, activeInputIndex, inputValue } = useInput();
 const { handleKeyup, handleKeydown } = registerShortcutKeyForInputEl();
 const { inputEl, focusing, handleInputFocus, handleBlur } = useFocus();
+const { showSubmitKey } = useSubmitKey()
 
 function useInput() {
   const inputValue = ref("");
@@ -55,13 +57,15 @@ function registerShortcutKeyForInputEl() {
   const { showAnswer } = useGameMode();
 
   function handleKeyup(e: KeyboardEvent) {
+    const submitKey = showSubmitKey()
     const isLastStr = courseStore.checkCorrect(inputValue.value.trim())
-    if (e.code === "Enter" || (e.code === "Space" && isLastStr)) {
+    if ((submitKey === 'All' && (e.code === "Enter" || (e.code === "Space" && isLastStr))) || (e.code === submitKey && isLastStr)) {
       e.stopPropagation();
 
       if (isLastStr) {
         showAnswer();
       }
+
       inputValue.value = "";
     }
   }

apps/client/components/user/Setting.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="space-y-4">
     <section>
-      <h2 class="pb-2">快捷键设置</h2>
+      <h2 class="text-lg">快捷键设置</h2>
       <n-table :bordered="false" :single-line="false">
         <thead>
           <tr>
@@ -30,11 +30,23 @@
     </section>
 
     <section>
-      <h2>声音设置</h2>
+      <h2 class="text-lg">声音设置</h2>
       <div className="form-control w-52">
         <label className="cursor-pointer label">
-          <span className="label-text">自动播放</span> 
-          <input type="checkbox" className="toggle toggle-primary" :checked="autoPlaySound" @change="toggleAutoPlaySound" />
+          <span className="label-text">自动播放</span>
+          <input type="checkbox" className="toggle toggle-primary" :checked="autoPlaySound"
+            @change="toggleAutoPlaySound" />
+        </label>
+      </div>
+    </section>
+
+    <section>
+      <h2 class="text-lg">提交动作设置</h2>
+      <div className="form-control w-80 flex flex-row">
+        <label v-for="item in answerSubmitKeys" :key="item.value" className="cursor-pointer label flex-1 pr-4">
+          <span className="label-text">{{ item.label }}</span>
+          <input type="radio" name="submitKey" className="radio radio-primary" :checked="item.defaultChecked"
+            :value="item.value" @change="handleCheckRadio(item)" />
         </label>
       </div>
     </section>
@@ -62,6 +74,7 @@ import {
   useShortcutKeyMode,
 } from "~/composables/user/setting";
 import { useAutoSound } from "~/composables/user/sound";
+import { useSubmitKey } from '~/composables/user/submitKey'
 
 const { showModal, handleEdit, handleCloseDialog } = useShortcutDialogMode();
 const { shortcutKeyStr, shortcutKeyTip, handleKeyup, shortcutKeyData } =
@@ -75,7 +88,8 @@ function pointDialogOutside(e: MouseEvent) {
   }
 }
 
-const { autoPlaySound, toggleAutoPlaySound } = useAutoSound()
+const { autoPlaySound, toggleAutoPlaySound } = useAutoSound();
+const { answerSubmitKeys, handleCheckRadio } = useSubmitKey()
 
 onMounted(() => {
   document.addEventListener("mouseup", pointDialogOutside);
@@ -85,4 +99,6 @@ onUnmounted(() => {
   document.removeEventListener("mouseup", pointDialogOutside);
   document.removeEventListener("keyup", handleKeyup);
 });
+
+
 </script>

apps/client/composables/user/submitKey.ts

@@ -0,0 +1,56 @@
+import { ref } from "vue";
+
+type AnswerSubmitKeys = {
+  label: string;
+  value: string;
+  defaultChecked: boolean;
+};
+
+export const LOCAL_SUBMIT_KEY = "submitKey";
+const answerSubmitKeys = ref<AnswerSubmitKeys[]>([
+  {
+    label: "回车键",
+    value: "Enter",
+    defaultChecked: true,
+  },
+  {
+    label: "空格键",
+    value: "Space",
+    defaultChecked: false,
+  },
+  {
+    label: "都支持",
+    value: "All",
+    defaultChecked: false,
+  },
+]);
+
+function store(value: string) {
+  localStorage.setItem(LOCAL_SUBMIT_KEY, value);
+}
+
+function loadCache() {
+  const submitKey = localStorage.getItem(LOCAL_SUBMIT_KEY);
+  store(submitKey || "Enter");
+}
+
+function handleCheckRadio(data: AnswerSubmitKeys) {
+  answerSubmitKeys.value.forEach((item) => {
+    item.defaultChecked = false;
+  });
+  data.defaultChecked = true;
+  store(data.value);
+}
+
+function showSubmitKey() {
+  return localStorage.getItem(LOCAL_SUBMIT_KEY);
+}
+
+export function useSubmitKey() {
+  loadCache();
+  return {
+    answerSubmitKeys,
+    handleCheckRadio,
+    showSubmitKey,
+  };
+}

apps/client/composables/user/tests/submitKey.spec.ts

@@ -0,0 +1,29 @@
+import { it, expect, describe, beforeEach } from "vitest";
+import { LOCAL_SUBMIT_KEY, useSubmitKey } from "../submitKey";
+
+describe("set submit key", () => {
+  beforeEach(() => {
+    localStorage.removeItem(LOCAL_SUBMIT_KEY);
+  });
+  it("default value should be Enter if no cache", () => {
+    const { showSubmitKey } = useSubmitKey();
+    expect(showSubmitKey()).toBe("Enter");
+  });
+
+  it("should be equal to cache value if it exists", () => {
+    localStorage.setItem(LOCAL_SUBMIT_KEY, "Space");
+    const { showSubmitKey } = useSubmitKey();
+    expect(showSubmitKey()).toBe("Space");
+  });
+
+  it("should be change value", () => {
+    const { showSubmitKey, handleCheckRadio } = useSubmitKey();
+    const mockData = {
+      label: "都支持",
+      value: "All",
+      defaultChecked: false,
+    };
+    handleCheckRadio(mockData);
+    expect(showSubmitKey()).toBe("All");
+  });
+});