feat: add mastered btn on answer

apps/client/components/main/Answer.vue

@@ -20,18 +20,25 @@
     <div class="my-6 text-xl text-gray-500">
       {{ courseStore.currentStatement?.chinese }}
     </div>
-    <button
-      class="btn btn-outline btn-sm"
-      @click="showQuestion"
-    >
-      再来一次
-    </button>
-    <button
-      class="btn btn-outline btn-sm ml-6"
-      @click="goToNextQuestion"
-    >
-      下一题
-    </button>
+    <div class="space-y-3">
+      <div>
+        <button
+          class="btn btn-outline btn-sm"
+          @click="showQuestion"
+        >
+          再来一次
+        </button>
+        <button
+          class="btn btn-outline btn-sm ml-6"
+          @click="goToNextQuestion"
+        >
+          下一题
+        </button>
+      </div>
+      <div class="md:hidden">
+        <MainMasteredBtn></MainMasteredBtn>
+      </div>
+    </div>
   </div>
 </template>
 

apps/client/components/main/MasteredBtn.vue

@@ -0,0 +1,36 @@
+<template>
+  <button
+    class="btn btn-outline btn-sm"
+    @click="handleMastered"
+  >
+    掌握
+  </button>
+</template>
+
+<script setup lang="ts">
+import { toast } from "vue-sonner";
+
+import { useMastered } from "~/composables/main/useMastered";
+import { isAuthenticated } from "~/services/auth";
+
+const { handleMastered } = useMasteredShortcut();
+
+function useMasteredShortcut() {
+  const { markStatementAsMastered } = useMastered();
+
+  function handleMastered() {
+    if (!isAuthenticated()) {
+      toast.warning("需要登录哦");
+      return;
+    }
+
+    markStatementAsMastered();
+  }
+
+  return {
+    handleMastered,
+  };
+}
+</script>
+
+<style scoped></style>

apps/client/components/main/QuestionInput/QuestionInput.vue

@@ -57,12 +57,7 @@
           播放声音
         </button>
       </div>
-      <button
-        class="btn btn-outline btn-sm"
-        @click="handleMastered"
-      >
-        掌握
-      </button>
+      <MainMasteredBtn></MainMasteredBtn>
     </div>
   </div>
 </template>
@@ -75,9 +70,7 @@ import { courseTimer } from "~/composables/courses/courseTimer";
 import { useAnswerTip } from "~/composables/main/answerTip";
 import { useCurrentStatementEnglishSound } from "~/composables/main/englishSound";
 import { isWord } from "~/composables/main/question";
-import { useMastered } from "~/composables/main/useMastered";
 import { useShowWordsWidth } from "~/composables/user/words";
-import { isAuthenticated } from "~/services/auth";
 import { useCourseStore } from "~/store/course";
 import { isWindows } from "~/utils/platform";
 import { getWordWidth, useQuestionInput } from "./questionInputHelper";
@@ -98,7 +91,6 @@ const {
 const { isShowWordsWidth } = useShowWordsWidth();
 const { toggleAnswerTip, isAnswerTip } = useAnswerTip();
 const { resetCloseTip } = useAnswerError();
-const { handleMastered } = useMasteredShortcut();
 initializeQuestionInput();
 focusInputWhenWIndowFocus();
 
@@ -137,23 +129,6 @@ function focusInputWhenWIndowFocus() {
   });
 }
 
-function useMasteredShortcut() {
-  const { markStatementAsMastered } = useMastered();
-
-  function handleMastered() {
-    if (!isAuthenticated()) {
-      toast.warning("需要登录哦");
-      return;
-    }
-
-    markStatementAsMastered();
-  }
-
-  return {
-    handleMastered,
-  };
-}
-
 const { playSound } = useCurrentStatementEnglishSound();
 function handlePlaySound(e: MouseEvent) {
   e.preventDefault();