refactor: integration nuxt-ui and refactor modal component

apps/client/app.config.ts

@@ -0,0 +1,8 @@
+import { defineAppConfig } from "#imports";
+
+export default defineAppConfig({
+  ui: {
+    primary: "purple",
+    gray: "cool",
+  },
+});

apps/client/app.vue

@@ -11,6 +11,7 @@
         <NuxtPage />
       </NuxtLayout>
     </template>
+    <UModals />
   </HttpErrorProvider>
 </template>
 

apps/client/components/Navbar.vue

@@ -82,20 +82,16 @@
     v-model:open="isOpenUserMenu"
     @logout="handleLogout"
   />
-  <MainMessageBox
-    v-model:show-modal="isShowModal"
-    content="是否确认退出登录？"
-    confirm-btn-text="确认"
-    @confirm="signOut"
-  />
 </template>
 
 <script setup lang="ts">
 import { useWindowScroll } from "@vueuse/core";
+import { useModal } from "#imports";
 import { useRuntimeConfig } from "nuxt/app";
 import { computed, ref } from "vue";
 import { useRoute } from "vue-router";
 
+import Dialog from "~/components/common/Dialog.vue";
 import { isAuthenticated, signIn, signOut } from "~/services/auth";
 import { useUserStore } from "~/store/user";
 
@@ -104,8 +100,8 @@ const runtimeConfig = useRuntimeConfig();
 const route = useRoute();
 const userStore = useUserStore();
 const { y } = useWindowScroll();
+const modal = useModal();
 
-const isShowModal = ref(false);
 const isOpenUserMenu = ref(false);
 
 const SCROLL_THRESHOLD = 8;
@@ -129,7 +125,15 @@ const isStickyNavBar = computed(() =>
 const isScrolled = computed(() => y.value >= SCROLL_THRESHOLD);
 
 function handleLogout() {
-  isShowModal.value = true;
+  modal.open(Dialog, {
+    title: "退出登录",
+    content: "是否确认退出登录？",
+    showCancel: true,
+    showConfirm: true,
+    async onConfirm() {
+      signOut();
+    },
+  });
 }
 
 function handleShowUserMenu() {

apps/client/components/common/Dialog.vue

@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+import { useModal } from "#imports";
+
+defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  content: {
+    type: String,
+    default: "",
+  },
+  showCancel: {
+    type: Boolean,
+    default: false,
+  },
+  cancelText: {
+    type: String,
+    default: "取消",
+  },
+  showConfirm: {
+    type: Boolean,
+    default: false,
+  },
+  confirmText: {
+    type: String,
+    default: "确认",
+  },
+});
+
+const modal = useModal();
+const emit = defineEmits(["cancel", "confirm"]);
+
+async function onCancel() {
+  await modal.close();
+  emit("cancel");
+}
+async function onConfirm() {
+  await modal.close();
+  emit("confirm");
+}
+</script>
+
+<template>
+  <UModal
+    :ui="{
+      container: 'items-center',
+      overlay: {
+        background: 'bg-black/75 dark:bg-black/75',
+      },
+      background: 'dark:bg-gray-800',
+    }"
+  >
+    <div class="flex h-52 flex-col justify-between p-6 text-gray-900 dark:text-white">
+      <h2 class="mb-8 text-2xl font-bold">{{ title }}</h2>
+      <p class="mb-8 max-w-sm text-base text-gray-700 dark:text-gray-300">
+        {{ content }}
+      </p>
+      <div class="flex w-full justify-end space-x-4">
+        <UButton
+          v-if="showCancel"
+          color="gray"
+          class="px-6"
+          @click="onCancel"
+        >
+          {{ cancelText || "取消" }}
+        </UButton>
+        <UButton
+          v-if="showConfirm"
+          class="px-6"
+          @click="onConfirm"
+        >
+          {{ confirmText || "确认" }}
+        </UButton>
+      </div>
+    </div>
+  </UModal>
+</template>

apps/client/components/courses/CoursePackCard.vue

@@ -9,7 +9,7 @@
         :placeholder="[288, 180]"
         width="288"
         height="180"
-        class="absolute inset-0 h-full w-full object-cover"
+        class="inset-0 h-full w-full object-cover"
       />
     </figure>
     <div class="card-body">

apps/client/components/main/Game.vue

@@ -11,11 +11,13 @@
   <MainSummary />
   <MainShare />
   <MainAuthRequired />
+  <GamePauseModal v-if="isAuthenticated()"></GamePauseModal>
 </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 { isAuthenticated } from "~/services/auth";

apps/client/components/main/GamePauseModal.vue

@@ -0,0 +1,89 @@
+<template>
+  <UModal
+    v-model="showGamePauseModal"
+    @close="handleClose"
+    :ui="{
+      container: 'items-center',
+      overlay: {
+        background: 'bg-black/75 dark:bg-black/75',
+      },
+      background: 'dark:bg-gray-800',
+    }"
+  >
+    <div class="flex h-52 flex-col justify-between p-6 text-gray-900 dark:text-white">
+      <h2 class="mb-8 text-2xl font-bold">游戏暂停</h2>
+      <p class="mb-8 max-w-sm text-base text-gray-700 dark:text-gray-300">
+        {{ randomMessage }}
+      </p>
+      <div class="flex w-full justify-end">
+        <UButton
+          class="px-6"
+          @click="handleClose"
+        >
+          继续游戏
+        </UButton>
+      </div>
+    </div>
+  </UModal>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, watch } from "vue";
+
+import { useQuestionInput } from "~/components/main/QuestionInput/questionInputHelper";
+import { useGamePause } from "~/composables/main/useGamePause";
+import { useShortcutKeyMode } from "~/composables/user/shortcutKey";
+import { useGameStore } from "~/store/game";
+import { cancelShortcut, registerShortcut } from "~/utils/keyboardShortcuts";
+
+const gameStore = useGameStore();
+const { showGamePauseModal, resumeGame, pauseGame } = useGamePause();
+const { shortcutKeys } = useShortcutKeyMode();
+const { focusInput } = useQuestionInput();
+
+const messages = [
+  "别忘了回来继续练习哦，我在等着你呢！",
+  "休息一下没关系，但别让我等太久！",
+  "快点回来吧，你的英语能力正在蓄势待发！",
+];
+
+const randomMessage = ref("");
+watch(
+  showGamePauseModal,
+  (newValue) => {
+    if (newValue) {
+      randomMessage.value = messages[Math.floor(Math.random() * messages.length)];
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+function handleClose() {
+  resumeGame();
+  setTimeout(() => {
+    focusInput();
+  }, 300);
+}
+
+function handleGamePause(e: KeyboardEvent) {
+  e.preventDefault();
+  if (gameStore.isGamePaused()) {
+    resumeGame();
+    setTimeout(() => {
+      focusInput();
+    }, 300);
+  } else {
+    pauseGame();
+  }
+}
+
+onMounted(() => {
+  registerShortcut(shortcutKeys.value.pause, handleGamePause);
+});
+
+onUnmounted(() => {
+  cancelShortcut(shortcutKeys.value.pause, handleGamePause);
+});
+</script>