feat: add next button

apps/client/components/main/Tips.vue

@@ -1,20 +1,39 @@
 <template>
-  <div class="absolute left-0 right-0 bottom-[16vh] flex flex-col items-center">
+  <div class="absolute left-0 right-0 bottom-[12vh] flex flex-col items-center">
     <div class="w-[210px] mb-4">
-      <button class="tip-btn" @click="playSound">
+      <button
+        class="tip-btn"
+        @click="playSound"
+      >
         ⌃ {{ shortcutKeys.sound }}
       </button>
       <span class="ml-2">play sound</span>
     </div>
     <div class="w-[210px] mb-4">
-      <button class="tip-btn" @click="toggleGameMode">
+      <button
+        class="tip-btn"
+        @click="toggleGameMode"
+      >
         ⌃ {{ shortcutKeys.answer }}
       </button>
       <span class="ml-2">{{ toggleTipText }}</span>
     </div>
-
+    <div class="w-[210px] mb-4">
+      <button
+        class="tip-btn mr-1"
+        @click="goToNextQuestion"
+      >
+        ⌃ {{ shortcutKeys.skip }}
+      </button>
+      <span class="ml-2">{{ "skip" }}</span>
+    </div>
     <div class="w-[210px]">
-      <button class="tip-btn" @click="toggleGameMode">Space</button>
+      <button
+        class="tip-btn"
+        @click="toggleGameMode"
+      >
+        Space
+      </button>
       <span class="ml-2">fix incorrect word</span>
     </div>
   </div>
@@ -26,11 +45,16 @@ import { useCurrentStatementEnglishSound } from "~/composables/main/englishSound
 import { useGameMode } from "~/composables/main/game";
 import { useSummary } from "~/composables/main/summary";
 import { useShortcutKeyMode } from "~/composables/user/shortcutKey";
+import { useCourseStore } from "~/store/course";
 import { cancelShortcut, registerShortcut } from "~/utils/keyboardShortcuts";
 
 const { shortcutKeys } = useShortcutKeyMode();
 const { playSound } = usePlaySound(shortcutKeys.value.sound);
 const { toggleGameMode } = useShowAnswer(shortcutKeys.value.answer);
+const { goToNextQuestion } = useSkipThisQuestion(shortcutKeys.value.skip);
+const { showQuestion } = useGameMode();
+const { showSummary } = useSummary();
+const courseStore = useCourseStore();
 
 const toggleTipText = computed(() => {
   const { isAnswer } = useGameMode();
@@ -93,6 +117,33 @@ function useShowAnswer(key: string) {
     toggleGameMode,
   };
 }
+function useSkipThisQuestion(key: string) {
+  function goToNextQuestion() {
+    if (courseStore.isAllDone()) {
+      showSummary();
+      return;
+    }
+
+    courseStore.toNextStatement();
+    showQuestion();
+  }
+
+  function handleShortcut() {
+    onMounted(() => {
+      registerShortcut(key, goToNextQuestion);
+    });
+
+    onUnmounted(() => {
+      cancelShortcut(key, goToNextQuestion);
+    });
+  }
+
+  handleShortcut()
+
+  return {
+    goToNextQuestion,
+  };
+}
 </script>
 
 <style scoped>

apps/client/components/user/Setting.vue

@@ -35,6 +35,18 @@
               </button>
             </td>
           </tr>
+          <tr class="hover">
+            <td class="label-text">跳过当前问题</td>
+            <td class="text-center">{{ shortcutKeys.skip }}</td>
+            <td class="text-center">
+              <button
+                class="btn btn-sm btn-outline btn-secondary"
+                @click="handleEdit('skip')"
+              >
+                编辑
+              </button>
+            </td>
+          </tr>
         </tbody>
       </table>
     </section>

apps/client/composables/user/shortcutKey.ts

@@ -4,6 +4,7 @@ export const SHORTCUT_KEYS = "shortcutKeys";
 export const DEFAULT_SHORTCUT_KEYS = {
   sound: "Ctrl+'",
   answer: "Ctrl+;",
+  next: "Ctrl+.",
 };
 export const KEYBOARD = {
   ESC: "Esc",