diff --git a/apps/client/components/Navbar.vue b/apps/client/components/Navbar.vue
index 0dac85618..c5c6a8afd 100644
--- a/apps/client/components/Navbar.vue
+++ b/apps/client/components/Navbar.vue
@@ -78,17 +78,17 @@
       </div>
     </div>
   </header>
-  <MainMessageBox
-    v-model:isShowModal="isShowModal"
-    title="提示"
-    content="是否确认退出登录？"
-    @confirm="signOut()"
-  />
+
   <UserMenu
     v-model:open="isOpenUserMenu"
     @logout="handleLogout"
-  >
-  </UserMenu>
+  />
+  <MainMessageBox
+    v-model:show-modal="isShowModal"
+    content="是否确认退出登录？"
+    confirm-btn-text="确认"
+    @confirm="signOut"
+  />
 </template>
 
 <script setup lang="ts">
@@ -117,6 +117,7 @@ const HEADER_OPTIONS = [
   { name: "联系我们", href: "#contact" },
 ];
 
+// TODO: 设置需要固定导航栏的页面
 const isStickyNavBar = computed(() => ["index", "User-Setting"].includes(route.name as string));
 const isScrolled = computed(() => y.value >= SCROLL_THRESHOLD);
 
diff --git a/apps/client/components/common/Modal.vue b/apps/client/components/common/Modal.vue
new file mode 100644
index 000000000..491514adf
--- /dev/null
+++ b/apps/client/components/common/Modal.vue
@@ -0,0 +1,113 @@
+<script lang="ts" setup>
+import { ref, watchEffect } from "vue";
+
+defineOptions({ name: "Modal" });
+
+/**
+ * @param {boolean} showModal          - 必传，是否显示弹窗，默认不显示
+ * @param {boolean} modal              - 可选，是否显示遮罩层，默认不显示
+ * @param {string}  modalColor         - 可选，设置遮罩层背景色，默认 30% 黑色透明
+ * @param {string}  offsetTop          - 可选，距离顶部的偏移量，默认 -8vh，因为默认使用 modal-middle 只能往上走来调整
+ * @param {string}  twClass            - 可选，给 modal-box 补充一些 Tailwind CSS
+ * @param {boolean} closeOnClickModal  - 可选，是否允许点击遮罩层关闭弹窗，默认不允许
+ */
+const props = withDefaults(
+  defineProps<{
+    showModal: boolean;
+    modal?: boolean;
+    modalColor?: string;
+    offsetTop?: string;
+    twClass?: string;
+    closeOnClickModal?: boolean;
+  }>(),
+  {
+    showModal: false,
+    modal: false,
+    modalColor: "rgba(0, 0, 0, 0.3)",
+    offsetTop: "-8vh",
+    twClass: "",
+    closeOnClickModal: false,
+  },
+);
+
+const emits = defineEmits(["close"]);
+
+const modalRef = ref<HTMLDialogElement | null>(null);
+
+// 检查 modalRef 是否存在
+function checkModalRef() {
+  return !!modalRef.value;
+}
+
+function show() {
+  modalRef.value?.show();
+}
+
+function close() {
+  modalRef.value?.close();
+}
+
+function showModal() {
+  modalRef.value?.showModal();
+}
+
+function handleClick(e: MouseEvent) {
+  if (!checkModalRef()) return;
+
+  if (props.closeOnClickModal && e.target === modalRef.value) {
+    handleClose();
+  }
+}
+
+function handleOpen() {
+  if (!checkModalRef()) return;
+
+  props.modal ? showModal() : show();
+}
+
+function handleClose() {
+  if (!checkModalRef()) return;
+
+  close();
+  emits("close");
+}
+
+watchEffect(() => {
+  if (!checkModalRef()) return;
+
+  // 处理外层传入的 showModal 改变时，控制弹框的显示/隐藏
+  if (props.showModal) {
+    props.modal ? showModal() : show();
+  } else {
+    close();
+  }
+});
+
+// 外部可以设置 ref 后调用 open/close 方法控制弹框
+defineExpose({
+  open: handleOpen,
+  close: handleClose,
+});
+</script>
+
+<template>
+  <dialog
+    ref="modalRef"
+    class="modal"
+    @click="handleClick"
+  >
+    <div
+      class="modal-box bg-white dark:bg-gray-800"
+      :class="twClass"
+      :style="{ marginTop: offsetTop }"
+    >
+      <slot />
+    </div>
+  </dialog>
+</template>
+
+<style scoped>
+dialog::backdrop {
+  background-color: v-bind(modalColor);
+}
+</style>
diff --git a/apps/client/components/common/ProgressBar.vue b/apps/client/components/common/ProgressBar.vue
index 62aab6054..b6f46dafa 100644
--- a/apps/client/components/common/ProgressBar.vue
+++ b/apps/client/components/common/ProgressBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-lg border dark:border-slate-400">
+  <div class="rounded-lg border border-gray-300 dark:border-gray-600">
     <div
       class="h-full rounded-lg bg-gradient-to-r from-emerald-200 to-emerald-400 transition-all dark:from-emerald-300 dark:to-emerald-500"
       :style="{ width: `${percentage}%` }"
diff --git a/apps/client/components/main/AuthRequired.vue b/apps/client/components/main/AuthRequired.vue
index eb0a15d11..34206fe30 100644
--- a/apps/client/components/main/AuthRequired.vue
+++ b/apps/client/components/main/AuthRequired.vue
@@ -1,8 +1,5 @@
 <template>
-  <dialog
-    className="modal top-[-8vh]"
-    :open="authRequireModalState"
-  >
+  <CommonModal :show-modal="authRequireModalState">
     <div className="modal-box">
       <h3 className="font-bold text-lg mb-4">✨ 友情提示</h3>
       <p class="py-4 text-center text-xl">注册以进行下一课的学习哦~ 😊</p>
@@ -21,7 +18,7 @@
         </button>
       </div>
     </div>
-  </dialog>
+  </CommonModal>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/client/components/main/Game.vue b/apps/client/components/main/Game.vue
index beb750f4c..42bfdfdf8 100644
--- a/apps/client/components/main/Game.vue
+++ b/apps/client/components/main/Game.vue
@@ -10,23 +10,22 @@
   <MainSummary />
   <MainShare />
   <MainAuthRequired />
-  <MessageBox
-    :content="messageContent"
-    v-model:isShowModal="isMessageShow"
+  <!-- TODO: 暂时先不提示（有些用户正在移动端的场景下使用）-->
+  <!-- <MainMessageBox
+    v-model:show-modal="isMessageShow"
     cancel-btn-text="确定"
-    confirmBtnText=""
-  ></MessageBox>
+    :content="messageContent"
+  /> -->
 </template>
 
 <script setup lang="ts">
 import { onMounted } from "vue";
 
 import { courseTimer } from "~/composables/courses/courseTimer";
-import { useDeviceTip } from "~/composables/main/game";
+// import { useDeviceTip } from "~/composables/main/game";
 import { GameMode, useGameMode } from "~/composables/user/gameMode";
-import MessageBox from "./MessageBox/MessageBox.vue";
 
-const { isMessageShow, messageContent } = useDeviceTip();
+// const { isMessageShow, messageContent } = useDeviceTip();
 const { currentGameMode } = useGameMode();
 
 onMounted(() => {
diff --git a/apps/client/components/main/MessageBox.vue b/apps/client/components/main/MessageBox.vue
new file mode 100644
index 000000000..e0dbfa0c8
--- /dev/null
+++ b/apps/client/components/main/MessageBox.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { useVModel } from "@vueuse/core";
+
+const props = withDefaults(
+  defineProps<{
+    showModal: boolean;
+    modal?: boolean;
+    title?: string;
+    content?: string;
+    cancelBtnText?: string;
+    confirmBtnText?: string;
+  }>(),
+  {
+    showModal: false,
+    modal: true,
+    title: "提示",
+    content: "你确定吗?",
+    cancelBtnText: "取消",
+    confirmBtnText: "",
+  },
+);
+const emits = defineEmits(["confirm", "update:showModal"]);
+
+// 可以在这个地方直接更新外层 showModal
+const isShowModal = useVModel(props, "showModal", emits);
+
+function handleCancel() {
+  isShowModal.value = false;
+}
+
+function handleConfirm() {
+  emits("confirm");
+  handleCancel();
+}
+</script>
+
+<template>
+  <CommonModal
+    :show-modal="isShowModal"
+    :modal="modal"
+    :close-on-click-modal="true"
+    @close="handleCancel"
+  >
+    <h3 class="text-lg font-bold">{{ title }}</h3>
+    <p class="py-4">{{ content }}</p>
+    <div class="modal-action">
+      <button
+        class="btn mr-2"
+        @click="handleCancel"
+      >
+        {{ cancelBtnText }}
+      </button>
+      <!-- TODO: 后续看看有没有更好的方案 -->
+      <button
+        v-if="confirmBtnText"
+        class="btn"
+        @click="handleConfirm"
+      >
+        {{ confirmBtnText }}
+      </button>
+    </div>
+  </CommonModal>
+</template>
diff --git a/apps/client/components/main/MessageBox/MessageBox.vue b/apps/client/components/main/MessageBox/MessageBox.vue
deleted file mode 100644
index f7ec60f79..000000000
--- a/apps/client/components/main/MessageBox/MessageBox.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-  <dialog
-    :open="isShow"
-    class="modal invisible"
-  >
-    <div
-      ref="dialogBoxRef"
-      class="modal-box"
-    >
-      <h3 class="text-lg font-bold">{{ title }}</h3>
-      <p class="py-4">{{ content }}</p>
-      <div class="modal-action">
-        <form method="dialog">
-          <button
-            @click="handleCancel"
-            class="cancel btn"
-          >
-            {{ cancelBtnText }}
-          </button>
-        </form>
-        <button
-          v-if="confirmBtnText"
-          class="confirm btn"
-          @click="handleConfirm"
-        >
-          {{ confirmBtnText }}
-        </button>
-      </div>
-    </div>
-  </dialog>
-</template>
-
-<script setup lang="ts">
-import type { EmitsType, IMessageBoxProps } from "~/composables/messageBox/modal";
-import { useMessageBoxModal } from "~/composables/messageBox/modal";
-
-const props = withDefaults(defineProps<IMessageBoxProps>(), {
-  isShowModal: false,
-  title: "提示",
-  content: "你确定吗?",
-  confirmBtnText: "确定",
-  cancelBtnText: "取消",
-});
-
-const emits = defineEmits<EmitsType>();
-
-const { dialogBoxRef, isShow, handleConfirm, handleCancel } = useMessageBoxModal(props, emits);
-</script>
diff --git a/apps/client/components/main/MessageBox/tests/message-box.spec.ts b/apps/client/components/main/MessageBox/tests/message-box.spec.ts
deleted file mode 100644
index 9bfa4767a..000000000
--- a/apps/client/components/main/MessageBox/tests/message-box.spec.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { flushPromises } from "@vue/test-utils";
-import { afterEach, describe, expect, test } from "vitest";
-
-import MessageBox from "../useMessageBox";
-
-const selector = ".modal";
-
-describe("MessageBox", () => {
-  afterEach(async () => {
-    MessageBox.close();
-    document.body.innerHTML = "";
-    await flushPromises();
-  });
-
-  test("create messageBox", async () => {
-    MessageBox("这是一段内容", "消息");
-    let msgbox: any = document.querySelector(selector);
-
-    expect(msgbox).toBeDefined();
-    expect(msgbox.querySelector(".font-bold").textContent).toEqual("消息");
-    expect(msgbox.querySelector(".py-4").textContent).toEqual("这是一段内容");
-  });
-
-  test("close messageBox", async () => {
-    MessageBox("这是一段内容", "消息");
-
-    MessageBox.close();
-    let msgbox: any = document.querySelector(selector);
-    expect(msgbox).toBe(null);
-  });
-
-  describe("promise", () => {
-    test("confirm", async () => {
-      let msgAction = "";
-      MessageBox("此操作将永久删除该文件, 是否继续?", "提示").then((action) => {
-        msgAction = action;
-      });
-      await flushPromises();
-      const btn = document.querySelector(selector)!.querySelector(".confirm") as HTMLButtonElement;
-      btn.click();
-      await flushPromises();
-
-      expect(msgAction).toEqual("confirm");
-    });
-
-    test("cancel", async () => {
-      let msgAction = "";
-      MessageBox("此操作将永久删除该文件, 是否继续?", "提示").catch((action) => {
-        msgAction = action;
-      });
-      await flushPromises();
-      const btn = document.querySelector(selector)!.querySelector(".cancel") as HTMLButtonElement;
-      btn.click();
-      await flushPromises();
-
-      expect(msgAction).toEqual("cancel");
-    });
-  });
-});
diff --git a/apps/client/components/main/MessageBox/useMessageBox.ts b/apps/client/components/main/MessageBox/useMessageBox.ts
deleted file mode 100644
index ae2822cb5..000000000
--- a/apps/client/components/main/MessageBox/useMessageBox.ts
+++ /dev/null
@@ -1,128 +0,0 @@
-import type { ComponentPublicInstance } from "vue";
-
-import { createVNode, render } from "vue";
-
-import type { IMessageBoxProps } from "~/composables/messageBox/modal";
-import MessageBoxConstructor from "./MessageBox.vue";
-
-interface MessageBoxOptions {
-  /** Text content of confirm button */
-  confirmBtnText: string;
-  /** Text content of cancel button */
-  cancelBtnText: string;
-  /** Custom element to append the message box to */
-  appendTo?: HTMLElement | string;
-}
-
-type Action = "confirm" | "cancel";
-
-interface MessageBoxProps extends IMessageBoxProps {
-  container: HTMLElement;
-}
-
-const messageInstance = new Map<
-  ComponentPublicInstance<MessageBoxProps>,
-  {
-    options: any;
-    reject: (res: any) => void;
-    resolve: (reson?: any) => void;
-  }
->();
-
-const genContainer = () => {
-  return document.createElement("div");
-};
-
-const getAppendToElement = (props: any): HTMLElement => {
-  let appendTo: HTMLElement | null = document.body;
-  if (props.appendTo) {
-    if (typeof props.appendTo === "string") {
-      appendTo = document.querySelector<HTMLElement>(props.appendTo);
-    }
-    if (props.appendTo instanceof Element) {
-      appendTo = props.appendTo;
-    }
-    if (!(appendTo instanceof Element)) {
-      appendTo = document.body;
-    }
-  }
-  return appendTo;
-};
-
-const teardown = (vm: ComponentPublicInstance<MessageBoxProps>, container: HTMLElement) => {
-  render(null, container);
-  messageInstance.delete(vm);
-};
-
-const initInstance = (props: any, container: HTMLElement) => {
-  const vnode = createVNode(MessageBoxConstructor, props);
-  render(vnode, container);
-  getAppendToElement(props).appendChild(container.firstElementChild!);
-  return vnode.component;
-};
-
-const showMessage = (options: any) => {
-  const container = genContainer();
-
-  options.onConfirm = () => {
-    const currentMsg = messageInstance.get(vm)!;
-    currentMsg.resolve("confirm");
-
-    teardown(vm, container);
-  };
-
-  options.onCancel = () => {
-    const currentMsg = messageInstance.get(vm)!;
-    currentMsg.reject("cancel");
-
-    teardown(vm, container);
-  };
-
-  const instance = initInstance(options, container)!;
-
-  const vm = instance.proxy as ComponentPublicInstance<MessageBoxProps>;
-
-  vm.container = container;
-
-  for (const prop in options) {
-    if (Object.hasOwn(options, prop) && !Object.hasOwn(vm.$props, prop)) {
-      vm[prop as keyof ComponentPublicInstance] = options[prop];
-    }
-  }
-
-  return vm;
-};
-
-function MessageBox(
-  content: string = "Are you sure?",
-  title: string = "Tips",
-  options?: MessageBoxOptions,
-): Promise<Action> {
-  return new Promise((resolve, reject) => {
-    const vm = showMessage(
-      Object.assign(
-        {
-          content,
-          title,
-          isShowModal: true,
-          confirmBtnText: "Confirm",
-          cancelBtnText: "Cancel",
-        },
-        options,
-      ),
-    );
-    messageInstance.set(vm, {
-      options,
-      resolve,
-      reject,
-    });
-  });
-}
-
-MessageBox.close = () => {
-  messageInstance.forEach((_, vm) => {
-    teardown(vm, vm.container);
-  });
-};
-
-export default MessageBox;
diff --git a/apps/client/components/main/Share.vue b/apps/client/components/main/Share.vue
index bc1bb4658..43b7cfc9e 100644
--- a/apps/client/components/main/Share.vue
+++ b/apps/client/components/main/Share.vue
@@ -1,65 +1,59 @@
 <template>
-  <div>
-    <dialog
-      class="modal mt-[-8vh]"
-      :open="shareModalVisible"
-    >
+  <CommonModal
+    :show-modal="shareModalVisible"
+    :modal="true"
+    tw-class="flex w-[27rem] flex-col items-center overflow-hidden"
+  >
+    <div class="flex">
+      <div class="gallery mr-2 py-2">
+        <div
+          v-for="(imgItem, index) in galleryImgs"
+          :key="imgItem.src"
+          :class="[
+            'gallery-item h-18 mb-2 mr-2 w-14 cursor-pointer overflow-hidden rounded-sm border-2 border-transparent',
+            {
+              '!border-primary': currImageIndex === index,
+              skeleton: !imgItem.src,
+            },
+          ]"
+          @click="handleSelectImage(index)"
+        >
+          <img
+            v-show="imgItem.src"
+            :src="imgItem.src"
+            :alt="`Card ${index}`"
+          />
+        </div>
+      </div>
       <div
-        ref="dialogBoxRef"
-        class="modal-box flex w-[27rem] flex-col items-center overflow-hidden"
+        :class="['h-[27rem] w-[19rem]', { skeleton: !shareImageSrc }]"
+        ref="imageContainer"
       >
-        <div class="flex">
-          <div class="gallery mr-2 py-2">
-            <div
-              v-for="(imgItem, index) in galleryImgs"
-              :key="imgItem.src"
-              :class="[
-                'gallery-item h-18 mb-2 mr-2 w-14 cursor-pointer overflow-hidden rounded-sm border-2 border-transparent',
-                {
-                  '!border-primary': currImageIndex === index,
-                  skeleton: !imgItem.src,
-                },
-              ]"
-              @click="handleSelectImage(index)"
-            >
-              <img
-                v-show="imgItem.src"
-                :src="imgItem.src"
-                :alt="`Card ${index}`"
-              />
-            </div>
-          </div>
-          <div
-            :class="['h-[27rem] w-[19rem]', { skeleton: !shareImageSrc }]"
-            ref="imageContainer"
-          >
-            <img
-              v-show="shareImageSrc"
-              :src="shareImageSrc"
-              alt="Selected Share Image"
-              width="400"
-              height="600"
-              class="rounded-md"
-            />
-          </div>
-        </div>
-        <div class="modal-action">
-          <button
-            class="btn btn-primary"
-            @click="copyAndClose"
-          >
-            复制并关闭
-          </button>
-          <button
-            class="btn"
-            @click="hideShareModal"
-          >
-            关闭
-          </button>
-        </div>
+        <img
+          v-show="shareImageSrc"
+          :src="shareImageSrc"
+          alt="Selected Share Image"
+          width="400"
+          height="600"
+          class="rounded-md"
+        />
       </div>
-    </dialog>
-  </div>
+    </div>
+    <div class="modal-action">
+      <button
+        class="btn btn-primary"
+        @click="copyAndClose"
+      >
+        复制并关闭
+      </button>
+      <button
+        class="btn"
+        @click="hideShareModal"
+      >
+        关闭
+      </button>
+    </div>
+  </CommonModal>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/client/components/main/Summary.vue b/apps/client/components/main/Summary.vue
index de0920fb5..538d4853f 100644
--- a/apps/client/components/main/Summary.vue
+++ b/apps/client/components/main/Summary.vue
@@ -1,75 +1,72 @@
 <template>
-  <div>
-    <dialog
-      className="modal mt-[-8vh]"
-      :open="showModal"
-    >
-      <div className="modal-box max-w-[48rem]">
-        <div class="relative">
-          <h3 className="font-bold text-lg mb-4">🎉 Congratulations!</h3>
-          <button
-            tabindex="0"
-            class="btn btn-ghost btn-sm absolute right-0 top-0 mx-1 h-7 w-7 rounded-md p-0"
-            @click="soundSentence"
-          >
-            <span class="i-ph-speaker-simple-high h-full w-full"></span>
-          </button>
+  <CommonModal
+    :show-modal="showModal"
+    tw-class="max-w-[48rem]"
+  >
+    <div class="relative">
+      <h3 className="font-bold text-lg mb-4">🎉 Congratulations!</h3>
+      <button
+        tabindex="0"
+        class="btn btn-ghost btn-sm absolute right-0 top-0 mx-1 h-7 w-7 rounded-md p-0"
+        @click="soundSentence"
+      >
+        <span class="i-ph-speaker-simple-high h-full w-full"></span>
+      </button>
+    </div>
+
+    <div class="flex flex-col">
+      <div class="flex">
+        <span class="text-6xl font-bold">"</span>
+        <div class="flex-1 text-center text-xl leading-loose">
+          {{ enSentence }}
         </div>
+        <span class="invisible text-6xl font-bold">"</span>
+      </div>
 
-        <div class="flex flex-col">
-          <div class="flex">
-            <span class="text-6xl font-bold">"</span>
-            <div class="flex-1 text-center text-xl leading-loose">
-              {{ enSentence }}
-            </div>
-            <span class="invisible text-6xl font-bold">"</span>
-          </div>
-
-          <div class="flex">
-            <span class="invisible text-6xl font-bold">"</span>
-            <div class="flex-1 text-center text-xl leading-loose">
-              {{ zhSentence }}
-            </div>
-            <span class="text-6xl font-bold">"</span>
-          </div>
-          <p class="text-3 text-right text-gray-200">—— 金山词霸「每日一句」</p>
-          <p class="pl-14 text-base leading-loose text-gray-600">
-            {{
-              `恭喜您一共完成 ${courseTimer.totalRecordNumber()} 道题，用时 ${formatSecondsToTime(
-                courseTimer.calculateTotalTime(),
-              )} `
-            }}
-          </p>
-        </div>
-        <div className="modal-action">
-          <button
-            class="btn btn-primary"
-            @click="toShare"
-          >
-            生成打卡图
-          </button>
-          <button
-            class="btn"
-            @click="handleDoAgain"
-          >
-            再来一次
-          </button>
-
-          <button
-            class="btn"
-            @click="goToNextCourse"
-          >
-            {{ haveNextCourse || !isAuthenticated() ? "开始下一课" : "返回课程列表" }}
-            <kbd class="kbd"> ↵ </kbd>
-          </button>
+      <div class="flex">
+        <span class="invisible text-6xl font-bold">"</span>
+        <div class="flex-1 text-center text-xl leading-loose">
+          {{ zhSentence }}
         </div>
+        <span class="text-6xl font-bold">"</span>
       </div>
-      <canvas
-        ref="confettiCanvasRef"
-        class="pointer-events-none absolute left-0 top-0 h-full w-full"
-      ></canvas>
-    </dialog>
-  </div>
+      <p class="text-3 text-right text-gray-200">—— 金山词霸「每日一句」</p>
+      <p class="pl-14 text-base leading-loose text-gray-600">
+        {{
+          `恭喜您一共完成 ${courseTimer.totalRecordNumber()} 道题，用时 ${formatSecondsToTime(
+            courseTimer.calculateTotalTime(),
+          )} `
+        }}
+      </p>
+    </div>
+    <div className="modal-action">
+      <button
+        class="btn btn-primary"
+        @click="toShare"
+      >
+        生成打卡图
+      </button>
+      <button
+        class="btn"
+        @click="handleDoAgain"
+      >
+        再来一次
+      </button>
+
+      <button
+        class="btn"
+        @click="goToNextCourse"
+      >
+        {{ haveNextCourse || !isAuthenticated() ? "开始下一课" : "返回课程列表" }}
+        <kbd class="kbd"> ↵ </kbd>
+      </button>
+    </div>
+
+    <canvas
+      ref="confettiCanvasRef"
+      class="pointer-events-none absolute left-0 top-0 h-full w-full"
+    ></canvas>
+  </CommonModal>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/client/components/main/Tool.vue b/apps/client/components/main/Tool.vue
index 5b3b2b36d..3f83dc0ff 100644
--- a/apps/client/components/main/Tool.vue
+++ b/apps/client/components/main/Tool.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="relative flex items-center justify-between border-t border-solid border-slate-200 py-3 text-base dark:border-slate-500"
+    class="relative flex items-center justify-between border-t border-solid border-gray-300 pb-3 pt-4 text-base dark:border-gray-600"
   >
     <!-- 左侧 -->
     <div class="flex items-center">
@@ -27,9 +27,8 @@
     </div>
 
     <!-- 右侧 -->
-    <div class="flex items-center">
+    <div class="flex items-center gap-4">
       <div
-        class="mr-4"
         data-tippy-content="重置当前课程进度"
         @click="handleDoAgain"
         @mouseenter="$lazyTippy"
@@ -37,7 +36,6 @@
         <span class="clickable-item icon-item i-ph-arrow-counter-clockwise"></span>
       </div>
       <div
-        class="tooltip mr-1"
         data-tippy-content="排行榜"
         @click="rankingStore.showRankModal"
         @mouseenter="$lazyTippy"
@@ -55,9 +53,9 @@
   />
   <RankRankingList />
   <MainMessageBox
-    class="mt-[-4vh]"
-    v-model:isShowModal="showTipModal"
+    v-model:show-modal="showTipModal"
     content="是否确认重置当前课程进度？"
+    confirm-btn-text="确认"
     @confirm="handleTipConfirm"
   />
 </template>
@@ -71,7 +69,6 @@ import { useGameMode } from "~/composables/main/game";
 import { clearQuestionInput } from "~/composables/main/question";
 import { useRanking } from "~/composables/rank/rankingList";
 import { useCourseStore } from "~/store/course";
-import { useCoursePackStore } from "~/store/coursePack";
 import { useContent } from "./Contents/useContents";
 
 const rankingStore = useRanking();
diff --git a/apps/client/components/rank/RankingList.vue b/apps/client/components/rank/RankingList.vue
index 6a9dd4672..063747475 100644
--- a/apps/client/components/rank/RankingList.vue
+++ b/apps/client/components/rank/RankingList.vue
@@ -1,79 +1,67 @@
 <template>
-  <dialog
-    id="rank-list"
-    class="modal"
-    :open="rankingStore.rankModal"
+  <CommonModal
+    :show-modal="rankingStore.rankModal"
+    :close-on-click-modal="true"
+    tw-class="flex h-[570px] w-[450px] flex-col overflow-hidden px-4 pb-12"
+    @close="rankingStore.hideRankModal"
   >
-    <div class="modal-box flex h-[568px] w-[420px] flex-col overflow-hidden px-4 pb-12">
-      <!-- close button -->
-      <form method="dialog">
-        <button
-          class="btn btn-circle btn-ghost btn-sm absolute right-2 top-2"
-          @click="rankingStore.hideRankModal"
-        >
-          ✕
-        </button>
-      </form>
+    <button
+      class="btn btn-circle btn-ghost btn-sm absolute right-2 top-2"
+      @click="rankingStore.hideRankModal"
+    >
+      ✕
+    </button>
+
+    <!-- title -->
+    <h2 class="mb-4 text-center text-xl font-bold">排行榜</h2>
 
-      <!-- title -->
-      <h2 class="mb-4 text-center text-xl font-bold">排行榜</h2>
+    <!-- tab -->
+    <div
+      role="tablist"
+      class="tabs tabs-lifted tabs-md"
+    >
+      <a
+        v-for="period in rankingStore.rankingPeriodList"
+        role="tab"
+        class="tab dark:[--tab-bg:gray-800] dark:[--tab-border-color:gray]"
+        @click="rankingStore.togglePeriod(period.value)"
+        :key="period.value"
+        :class="{
+          'tab-active text-orange-500': period.value === rankingStore.currentPeriod,
+        }"
+        >{{ period.label }}</a
+      >
+    </div>
 
-      <!-- tab -->
+    <Loading v-if="rankingStore.isLoading" />
+    <template v-else>
+      <!-- list -->
       <div
-        role="tablist"
-        class="tabs tabs-lifted tabs-md"
+        v-if="rankingStore.rankingList.length > 0"
+        class="my-1 flex-1 overflow-y-auto px-4 py-2"
       >
-        <a
-          v-for="period in rankingStore.rankingPeriodList"
-          role="tab"
-          class="tab dark:[--tab-border-color:gray]"
-          @click="rankingStore.togglePeriod(period.value)"
-          :key="period.value"
-          :class="{
-            'tab-active text-orange-500': period.value === rankingStore.currentPeriod,
-          }"
-          >{{ period.label }}</a
-        >
+        <RankRankingItem
+          v-for="({ username, count }, index) in rankingStore.rankingList"
+          :username="username"
+          :rank="index + 1"
+          :count="count"
+        />
       </div>
+      <!-- empty -->
+      <div
+        v-else
+        class="flex flex-1 items-center justify-center text-gray-500"
+      >
+        还没有小伙伴上榜哦，快来霸榜吧！🏆
+      </div>
+    </template>
 
-      <Loading v-if="rankingStore.isLoading" />
-      <template v-else>
-        <!-- list -->
-        <div
-          v-if="rankingStore.rankingList.length > 0"
-          class="my-1 flex-1 overflow-y-auto px-4 py-2"
-        >
-          <RankRankingItem
-            v-for="({ username, count }, index) in rankingStore.rankingList"
-            :username="username"
-            :rank="index + 1"
-            :count="count"
-          />
-        </div>
-        <!-- empty -->
-        <div
-          v-else
-          class="flex flex-1 items-center justify-center text-gray-500"
-        >
-          还没有小伙伴上榜哦，快来霸榜吧！🏆
-        </div>
-      </template>
-
-      <!-- tip -->
-      <RankRankingTip
-        :isLoading="rankingStore.isLoading"
-        :rankingSelf="rankingStore.rankingSelf"
-      />
-    </div>
-
-    <!-- click outside to close -->
-    <form
-      method="dialog"
-      class="modal-backdrop"
-    >
-      <button @click="rankingStore.hideRankModal"></button>
-    </form>
-  </dialog>
+    <!-- tip -->
+    <RankRankingTip
+      :isLoading="rankingStore.isLoading"
+      :rankingSelf="rankingStore.rankingSelf"
+    />
+  </CommonModal>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/client/composables/main/game.ts b/apps/client/composables/main/game.ts
index 00b77e004..a7785549a 100644
--- a/apps/client/composables/main/game.ts
+++ b/apps/client/composables/main/game.ts
@@ -42,9 +42,7 @@ export function useDeviceTip() {
   const { isLandscape } = useIsLandscape();
 
   watchEffect(() => {
-    // TODO 暂时先不提示（有些用户正在移动端的场景下使用
-    // isMessageShow.value = (isIpad.value && !isLandscape.value) || isMobile.value;
-    isMessageShow.value = false;
+    isMessageShow.value = (isIpad.value && !isLandscape.value) || isMobile.value;
 
     if (isMobile.value) {
       messageContent.value = "目前暂时不支持移动设备哦，请关注后续更新";
diff --git a/apps/client/composables/messageBox/modal.ts b/apps/client/composables/messageBox/modal.ts
deleted file mode 100644
index 4e2131965..000000000
--- a/apps/client/composables/messageBox/modal.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { computed, ref, watch } from "vue";
-
-export interface IMessageBoxProps {
-  isShowModal: boolean;
-  content?: string;
-  title?: string;
-  confirmBtnText?: string;
-  cancelBtnText?: string;
-}
-
-export interface EmitsType {
-  (event: "update:isShowModal", isShow: boolean): void;
-  (event: "confirm"): void;
-  (event: "cancel"): void;
-}
-
-export function useMessageBoxModal(props: IMessageBoxProps, emits: EmitsType) {
-  let dialogBoxRef = ref<HTMLElement | null>(null);
-
-  function handleConfirm() {
-    emits("confirm");
-    handleCancel();
-  }
-
-  function handleCancel() {
-    isShow.value = false;
-    emits("cancel");
-  }
-
-  const isShow = computed({
-    get() {
-      return props.isShowModal;
-    },
-    set(val) {
-      emits("update:isShowModal", val);
-    },
-  });
-
-  function pointDialogOutside(e: MouseEvent) {
-    if (!isShow.value) return;
-    if (!dialogBoxRef.value?.contains(e.target as Node)) {
-      isShow.value = false;
-    }
-  }
-
-  watch(isShow, (val) => {
-    if (val) {
-      document.addEventListener("mouseup", pointDialogOutside);
-    } else {
-      document.removeEventListener("mouseup", pointDialogOutside);
-    }
-  });
-
-  return {
-    dialogBoxRef,
-    isShow,
-    handleConfirm,
-    handleCancel,
-  };
-}
diff --git a/apps/client/pages/User/Setting.vue b/apps/client/pages/User/Setting.vue
index 82e58c0c7..4d8bbd578 100644
--- a/apps/client/pages/User/Setting.vue
+++ b/apps/client/pages/User/Setting.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="mx-auto my-8 w-full min-w-max max-w-screen-lg space-y-8 rounded-xl bg-base-100 px-6 py-8 shadow-even-xl dark:bg-gray-900 dark:shadow-purple-500/30 md:px-12"
+    class="mx-auto my-8 w-full min-w-max max-w-screen-lg space-y-8 rounded-lg bg-base-100 px-6 py-8 shadow-even-lg dark:bg-gray-900 dark:shadow-gray-700 md:px-12"
   >
     <section>
       <h2 class="text-xl font-medium">游戏模式</h2>
diff --git a/apps/client/pages/callback.vue b/apps/client/pages/callback.vue
index 1c55e0fa8..7d0729536 100644
--- a/apps/client/pages/callback.vue
+++ b/apps/client/pages/callback.vue
@@ -91,35 +91,30 @@ function useUsername() {
       <Loading></Loading>
     </template>
     <template v-else-if="isShowSettingUsernameModal">
-      <dialog
-        class="modal"
-        :open="true"
-      >
-        <div class="modal-box">
-          <h3 class="mb-4 text-lg font-bold">设置用户名</h3>
-          <input
-            v-model="username"
-            type="text"
-            placeholder="请输入用户名"
-            class="input input-bordered input-sm w-full"
-            maxlength="20"
-            @keydown.enter="handleChangeUsername"
-          />
-          <div class="modal-action">
-            <button
-              class="btn btn-primary"
-              type="submit"
-              @click="handleChangeUsername"
-            >
-              确定
-              <span
-                v-if="isLoadingFetchUserSetup"
-                class="loading loading-spinner loading-lg"
-              ></span>
-            </button>
-          </div>
+      <CommonModal :show-modal="true">
+        <h3 class="mb-4 text-lg font-bold">设置用户名</h3>
+        <input
+          v-model="username"
+          type="text"
+          placeholder="请输入用户名"
+          class="input input-bordered input-sm w-full"
+          maxlength="20"
+          @keydown.enter="handleChangeUsername"
+        />
+        <div class="modal-action">
+          <button
+            class="btn btn-primary"
+            type="submit"
+            @click="handleChangeUsername"
+          >
+            确定
+            <span
+              v-if="isLoadingFetchUserSetup"
+              class="loading loading-spinner loading-lg"
+            ></span>
+          </button>
         </div>
-      </dialog>
+      </CommonModal>
     </template>
   </div>
 </template>