refactor: universal Modal component

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);
 

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>

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}%` }"

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">

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(() => {

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>