refactor: game setting on Dictation mode

apps/client/components/common/ModalHeader.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="mb-4">
+    <h1 class="text-center text-2xl font-bold text-purple-800 dark:text-white">{{ title }}</h1>
+    <div class="absolute right-2 top-2">
+      <UButton
+        color="gray"
+        variant="ghost"
+        icon="i-heroicons-x-mark-20-solid"
+        @click="$emit('close')"
+        tabindex="-1"
+        :ui="{ color: { gray: { ghost: 'dark:hover:bg-gray-600' } } }"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+});
+</script>

apps/client/components/main/CourseContents.vue

@@ -6,19 +6,10 @@
         constrained: 'max-w-[880px] max-h-[880px]',
       }"
     >
-      <div class="mb-4">
-        <h1 class="text-center text-2xl font-bold text-purple-800 dark:text-white">课程目录</h1>
-        <div class="absolute right-2 top-2">
-          <UButton
-            color="gray"
-            variant="ghost"
-            icon="i-heroicons-x-mark-20-solid"
-            @click="hideCourseContents"
-            tabindex="-1"
-            :ui="{ color: { gray: { ghost: 'dark:hover:bg-gray-600' } } }"
-          />
-        </div>
-      </div>
+      <CommonModalHeader
+        title="课程目录"
+        @close="hideCourseContents"
+      />
       <!-- 添加选项菜单 -->
       <div class="mb-4 flex justify-end">
         <USelect

apps/client/components/main/Game.vue

@@ -1,8 +1,8 @@
 <template>
-  <template v-if="currentGameMode === GameMode.Dictation">
+  <template v-if="isDictationMode()">
     <ModeDictationMode />
   </template>
-  <template v-else-if="currentGameMode === GameMode.ChineseToEnglish">
+  <template v-else-if="isChineseToEnglishMode()">
     <ModeChineseToEnglishMode />
   </template>
 
@@ -11,18 +11,19 @@
   <MainSummary />
   <MainShare />
   <GamePauseModal v-if="isAuthenticated()"></GamePauseModal>
+  <MainGameSettingModal />
 </template>
 
 <script setup lang="ts">
 import { onMounted, onUnmounted } from "vue";
 
 import GamePauseModal from "~/components/main/GamePauseModal.vue";
 import { courseTimer } from "~/composables/courses/courseTimer";
-import { GameMode, useGameMode } from "~/composables/user/gameMode";
+import { useGamePlayMode } from "~/composables/user/gamePlayMode";
 import { isAuthenticated } from "~/services/auth";
 import { useGameStore } from "~/store/game";
 
-const { currentGameMode } = useGameMode();
+const { isChineseToEnglishMode, isDictationMode } = useGamePlayMode();
 const gameStore = useGameStore();
 
 onMounted(() => {

apps/client/components/mode/dictation/Toolbar.vue → apps/client/components/main/GameSettingModal.vue

@@ -1,45 +1,54 @@
 <template>
-  <div class="absolute right-0 top-0 mt-12 text-sm dark:text-gray-50">
-    <template
-      v-for="option in TOOLBAR_LIST"
-      :key="option.key"
+  <UModal v-model="showGameSettingModal">
+    <UContainer
+      :ui="{
+        base: 'w-[70vw] h-[50vh] flex flex-col',
+        constrained: 'max-w-[680px] max-h-[580px]',
+      }"
     >
-      <span class="mx-2">{{ option.label }}：</span>
-      <select
-        class="select select-ghost h-4 w-24 md:h-8 md:w-24"
-        v-model="toolBarData[option.key]"
-      >
-        <option
-          v-for="item in option.options"
-          :key="item.value"
-          :value="item.value"
-          class="h-2"
-        >
-          {{ item.label }}
-        </option>
-      </select>
-    </template>
-
-    <button
-      @click="handleReset"
-      class="btn btn-primary mx-3"
-    >
-      重置
-    </button>
-    <button
-      @click="handlePlay"
-      class="btn btn-secondary"
-    >
-      重新播放
-    </button>
-  </div>
+      <CommonModalHeader
+        title="游戏设置"
+        @close="closeGameSettingModal"
+      />
+      <div class="mt-6 px-4">
+        <div class="flex flex-col space-y-4">
+          <template
+            v-for="option in TOOLBAR_LIST"
+            :key="option.key"
+          >
+            <div class="flex items-center justify-between">
+              <span class="mr-2 text-sm font-medium dark:text-gray-200">{{ option.label }}：</span>
+              <USelect
+                v-model="toolBarData[option.key]"
+                :options="option.options"
+                size="sm"
+                class="w-32"
+              />
+            </div>
+          </template>
+        </div>
+        <div class="mt-6 flex justify-end">
+          <UButton
+            @click="handleReset"
+            color="primary"
+            variant="solid"
+          >
+            重置
+          </UButton>
+        </div>
+      </div>
+    </UContainer>
+  </UModal>
 </template>
 
 <script setup lang="ts">
 import { onMounted, watch } from "vue";
 
 import { useQuestionInput } from "~/components/main/QuestionInput/questionInputHelper";
-import { play, useToolbar } from "./dictation";
+import { play, useToolbar } from "~/composables/main/dictation";
+import { useGameSetting } from "~/composables/main/useGameSetting";
+
+const { showGameSettingModal, closeGameSettingModal } = useGameSetting();
 
 const { focusInput } = useQuestionInput();
 

apps/client/components/main/Tool.vue

@@ -25,6 +25,18 @@
 
     <!-- 右侧 -->
     <div class="flex items-center gap-4">
+      <div
+        @click="openGameSettingModal"
+        v-if="isDictationMode()"
+      >
+        <UTooltip text="游戏设置">
+          <UIcon
+            name="i-ph-gear"
+            class="clickable-item h-6 w-6"
+          />
+        </UTooltip>
+      </div>
+
       <div
         v-if="isAuthenticated()"
         @click="pauseGame"
@@ -79,18 +91,22 @@ import { useGameMode } from "~/composables/main/game";
 import { clearQuestionInput } from "~/composables/main/question";
 import { useCourseContents } from "~/composables/main/useCourseContents";
 import { useGamePause } from "~/composables/main/useGamePause";
+import { useGameSetting } from "~/composables/main/useGameSetting";
 import { useRanking } from "~/composables/rank/rankingList";
+import { useGamePlayMode } from "~/composables/user/gamePlayMode";
 import { parseShortcut, useShortcutKeyMode } from "~/composables/user/shortcutKey";
 import { isAuthenticated } from "~/services/auth";
 import { useCourseStore } from "~/store/course";
 
 const { shortcutKeys } = useShortcutKeyMode();
+const { isDictationMode } = useGamePlayMode();
 const rankingStore = useRanking();
 const courseStore = useCourseStore();
 const { focusInput } = useQuestionInput();
 const { openCourseContents } = useCourseContents();
 const { handleDoAgain } = useDoAgain();
 const { pauseGame } = useGamePause();
+const { openGameSettingModal } = useGameSetting();
 const modal = useModal();
 
 const currentCourseInfo = computed(() => {

apps/client/components/mode/dictation/DictationMode.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative flex h-full items-center justify-center">
+  <div class="flex h-full items-center justify-center">
     <div v-if="!isStart">
       <button
         class="btn"
@@ -11,7 +11,6 @@
       <p v-else>准备好了吗？(按任意键开启游戏)</p>
     </div>
     <div v-else>
-      <ModeDictationToolbar />
       <template v-if="isQuestion()">
         <ModeDictationQuestion />
         <MainAnswerTip v-show="isAnswerTip()" />

apps/client/components/mode/dictation/Question.vue

@@ -7,8 +7,8 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, watch } from "vue";
 
+import { play } from "~/composables/main/dictation";
 import { useCourseStore } from "~/store/course";
-import { play } from "./dictation";
 
 usePlayEnglishSound();
 

apps/client/components/rank/RankingBoard.vue

@@ -6,19 +6,10 @@
         constrained: 'max-w-[500px]',
       }"
     >
-      <div class="absolute right-2 top-2">
-        <UButton
-          color="gray"
-          variant="ghost"
-          icon="i-heroicons-x-mark-20-solid"
-          @click="rankingStore.hideRankModal"
-          tabindex="-1"
-          :ui="{ color: { gray: { ghost: 'dark:hover:bg-gray-600' } } }"
-        />
-      </div>
-
-      <!-- title -->
-      <h2 class="mb-4 text-center text-xl font-bold">排行榜</h2>
+      <CommonModalHeader
+        title="排行榜"
+        @close="rankingStore.hideRankModal"
+      />
 
       <div class="flex-grow">
         <!-- tab -->

apps/client/components/mode/dictation/dictation.ts → apps/client/composables/main/dictation.ts

@@ -1,7 +1,5 @@
 import { reactive } from "vue";
 
-import { useCurrentStatementEnglishSound } from "~/composables/main/englishSound";
-
 interface ToolBar {
   times: number;
   rate: number;
@@ -42,9 +40,3 @@ export function useToolbar() {
     resetToolBarData,
   };
 }
-
-export function play() {
-  const { times, rate, interval } = toolBarData;
-  const { playSound } = useCurrentStatementEnglishSound();
-  return playSound({ times, rate, interval });
-}

apps/client/composables/main/englishSound/index.ts

@@ -1,6 +1,8 @@
 import { watchEffect } from "vue";
 
 import type { PlayOptions } from "./audio";
+import { useToolbar } from "~/composables/main/dictation";
+import { useGamePlayMode } from "~/composables/user/gamePlayMode";
 import { usePronunciation } from "~/composables/user/pronunciation";
 import { useCourseStore } from "~/store/course";
 import { play, updateSource } from "./audio";
@@ -10,6 +12,8 @@ const { getPronunciationUrl } = usePronunciation();
 let lastPronunciationUrl = "";
 export function useCurrentStatementEnglishSound() {
   const courseStore = useCourseStore();
+  const { toolBarData } = useToolbar();
+  const { isDictationMode } = useGamePlayMode();
 
   watchEffect(() => {
     const word = courseStore.currentStatement?.english;
@@ -22,7 +26,12 @@ export function useCurrentStatementEnglishSound() {
 
   return {
     playSound: (options?: PlayOptions) => {
-      return play(options);
+      if (isDictationMode()) {
+        const { times, rate, interval } = toolBarData;
+        return play({ times, rate, interval });
+      } else {
+        return play(options);
+      }
     },
   };
 }

apps/client/composables/main/useGameSetting.ts

@@ -0,0 +1,24 @@
+import { ref } from "vue";
+
+const showGameSettingModal = ref(false);
+
+export const useGameSetting = () => {
+  const toggleGameSettingModal = () => {
+    showGameSettingModal.value = !showGameSettingModal.value;
+  };
+
+  const openGameSettingModal = () => {
+    showGameSettingModal.value = true;
+  };
+
+  const closeGameSettingModal = () => {
+    showGameSettingModal.value = false;
+  };
+
+  return {
+    showGameSettingModal,
+    toggleGameSettingModal,
+    openGameSettingModal,
+    closeGameSettingModal,
+  };
+};