chore: merge

apps/client/components/main/Question.vue

@@ -43,13 +43,15 @@ import { useGameMode } from "~/composables/main/game";
 import { ref, onMounted, watch } from "vue";
 import { useInput } from "~/composables/main/question";
 import { useShowWordsWidth } from "~/composables/user/words";
+import { useSpaceSubmitAnswer } from "~/composables/user/submitKey";
 
 const courseStore = useCourseStore();
 const inputEl = ref<HTMLInputElement>();
 const { setInputCursorPosition, getInputCursorPosition } = useCursor();
 const { focusing, handleInputFocus, handleBlur } = useFocus();
 const { showAnswer } = useGameMode();
 const { isShowWordsWidth } = useShowWordsWidth();
+const { isUseSpaceSubmitAnswer } = useSpaceSubmitAnswer();
 
 const {
   inputValue,
@@ -148,7 +150,12 @@ function inputWidth(word: string) {
 }
 
 function handleKeydown(e: KeyboardEvent) {
-  handleKeyboardInput(e);
+  handleKeyboardInput(e, {
+    useSpaceSubmitAnswer: {
+      enable: isUseSpaceSubmitAnswer(),
+      callback: showAnswer,
+    },
+  });
 }
 
 function useCursor() {

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,7 +30,7 @@
     </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>
@@ -50,6 +50,17 @@
         </label>
       </div>
     </section>
+
+    <section>
+      <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="useSpace"
+            @change="toggleUseSpaceSubmitAnswer" />
+        </label>
+      </div>
+    </section>
   </div>
 
   <dialog class="modal mt-[-8vh]" :open="showModal">
@@ -75,6 +86,7 @@ import {
 } from "~/composables/user/shortcutKey";
 import { useAutoSound } from "~/composables/user/sound";
 import { useShowWordsWidth } from "~/composables/user/words";
+import { useSpaceSubmitAnswer } from '~/composables/user/submitKey'
 
 const { showModal, handleEdit, handleCloseDialog } = useShortcutDialogMode();
 const { shortcutKeyStr, shortcutKeyTip, handleKeyup, shortcutKeys } =
@@ -88,7 +100,8 @@ function pointDialogOutside(e: MouseEvent) {
   }
 }
 
-const { autoPlaySound, toggleAutoPlaySound } = useAutoSound()
+const { autoPlaySound, toggleAutoPlaySound } = useAutoSound();
+const { toggleUseSpaceSubmitAnswer, useSpace } = useSpaceSubmitAnswer()
 
 const { autoShowWordsWidth, toggleAutoWordsWidth } = useShowWordsWidth()
 
@@ -100,4 +113,6 @@ onUnmounted(() => {
   document.removeEventListener("mouseup", pointDialogOutside);
   document.removeEventListener("keyup", handleKeyup);
 });
+
+
 </script>

apps/client/composables/main/question.ts

@@ -243,7 +243,12 @@ export function useInput({
     }
   }
 
-  function handleKeyboardInput(e: KeyboardEvent) {
+  function handleKeyboardInput(
+    e: KeyboardEvent,
+    options: {
+      useSpaceSubmitAnswer?: { enable: boolean; callback: () => void };
+    } = {}
+  ) {
     if (e.code === "ArrowLeft" || e.code === "ArrowRight") {
       e.preventDefault();
       return;
@@ -256,6 +261,9 @@ export function useInput({
 
     if (e.code === "Space" && lastWordIsActive()) {
       e.preventDefault();
+      if (options.useSpaceSubmitAnswer?.enable) {
+        submitAnswer(options.useSpaceSubmitAnswer.callback);
+      }
       return;
     }
 
@@ -272,7 +280,7 @@ export function useInput({
     if (e.code === "Space" && mode !== Mode.Input) {
       e.preventDefault();
       fixIncorrectWord();
-    } else if (e.code === "Backspace" && mode !== Mode.Fix) {
+    } else if (e.code === "Backspace" && mode === Mode.Fix) {
       e.preventDefault();
       fixFirstIncorrectWord();
     }

apps/client/composables/main/tests/question.spec.ts

@@ -323,7 +323,7 @@ describe("question", () => {
       setInputValue,
       submitAnswer,
       activePreviousIncorrectWord,
-      fixIncorrectWord
+      fixIncorrectWord,
     } = useInput({
       source: () => "i eat apple",
       setInputCursorPosition,
@@ -333,13 +333,45 @@ describe("question", () => {
     setInputValue("he eat banana");
     submitAnswer(() => {});
 
-    await fixIncorrectWord()
-    setInputValue("a")
-    await fixIncorrectWord()
+    await fixIncorrectWord();
+    setInputValue("a");
+    await fixIncorrectWord();
 
     await activePreviousIncorrectWord();
-
-    expect(userInputWords[0].isActive).toBe(true)
-    expect(userInputWords[0].userInput).toBe("a")
+
+    expect(userInputWords[0].isActive).toBe(true);
+    expect(userInputWords[0].userInput).toBe("a");
+  });
+
+  it("should submit answer when enable use space", () => {
+    const setInputCursorPosition = () => {};
+    const getInputCursorPosition = vi.fn();
+
+    const { setInputValue, handleKeyboardInput } = useInput({
+      source: () => "i eat apple",
+      setInputCursorPosition,
+      getInputCursorPosition,
+    });
+
+    const inputValue = "i eat apple";
+    getInputCursorPosition.mockReturnValue(inputValue.length);
+    setInputValue(inputValue);
+
+    const submitAnswerCallback = vi.fn();
+
+    handleKeyboardInput(
+      {
+        code: "Space",
+        preventDefault: () => {},
+      } as any as KeyboardEvent,
+      {
+        useSpaceSubmitAnswer: {
+          enable: true,
+          callback: submitAnswerCallback,
+        },
+      }
+    );
+
+    expect(submitAnswerCallback).toBeCalled();
   });
 });

apps/client/composables/user/submitKey.ts

@@ -0,0 +1,36 @@
+import { ref } from "vue";
+
+export const USE_SPACE_SUBMIT_ANSWER = "useSpaceSubmitAnswer";
+
+const useSpace = ref(false);
+
+function loadCache() {
+  const value = localStorage.getItem(USE_SPACE_SUBMIT_ANSWER);
+  if (value === "false") {
+    store(false);
+  } else if (!value) {
+    store(useSpace.value);
+  } else {
+    store(true);
+  }
+}
+
+const store = function (value: boolean) {
+  useSpace.value = value;
+  localStorage.setItem(USE_SPACE_SUBMIT_ANSWER, `${value}`);
+};
+
+const toggleUseSpaceSubmitAnswer = () => {
+  store(!useSpace.value);
+};
+
+const isUseSpaceSubmitAnswer = () => useSpace.value;
+
+export function useSpaceSubmitAnswer() {
+  loadCache();
+  return {
+    useSpace,
+    isUseSpaceSubmitAnswer,
+    toggleUseSpaceSubmitAnswer,
+  };
+}

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

@@ -0,0 +1,25 @@
+import { it, expect, describe, beforeEach } from "vitest";
+import { USE_SPACE_SUBMIT_ANSWER, useSpaceSubmitAnswer } from "../submitKey";
+
+describe("auto play sound", () => {
+  beforeEach(() => {
+    localStorage.removeItem(USE_SPACE_SUBMIT_ANSWER);
+  });
+  it("should be false if no cache", () => {
+    const { useSpace } = useSpaceSubmitAnswer();
+    expect(useSpace.value).toBe(false);
+  });
+
+  it("should be equal to cache value if it exists", () => {
+    localStorage.setItem(USE_SPACE_SUBMIT_ANSWER, "false");
+    const { useSpace } = useSpaceSubmitAnswer();
+    expect(useSpace.value).toBe(false);
+  });
+
+  it("should be toggle value", () => {
+    const { useSpace, toggleUseSpaceSubmitAnswer } = useSpaceSubmitAnswer();
+    useSpace.value = false
+    toggleUseSpaceSubmitAnswer();
+    expect(useSpace.value).toBe(true);
+  });
+});