fix: optimize Modal related component

Author: fengstats

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

apps/client/components/common/Modal.vue

@@ -4,78 +4,105 @@ import { ref, watchEffect } from "vue";
 defineOptions({ name: "Modal" });
 
 /**
- * @param {boolean} showModal - 是否显示弹窗
- * @param {boolean} modal - 是否使用 showModal
- * @param {boolean} closeOnClickModal - 点击遮罩层是否关闭弹窗
- * @param {string} modalColor - 遮罩背景色
+ * @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;
-    closeOnClickModal?: boolean;
     modalColor?: string;
-    offset?: string;
+    offsetTop?: string;
+    twClass?: string;
+    closeOnClickModal?: boolean;
   }>(),
   {
     showModal: false,
     modal: false,
-    closeOnClickModal: false,
     modalColor: "rgba(0, 0, 0, 0.3)",
-    offset: "-8vh",
+    offsetTop: "-8vh",
+    twClass: "",
+    closeOnClickModal: false,
   },
 );
 
 const emits = defineEmits(["close"]);
 
 const modalRef = ref<HTMLDialogElement | null>(null);
 
-const onClick = (e: MouseEvent) => {
-  if (!modalRef.value) return;
+// 检查 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) {
-    onClose();
+    handleClose();
   }
-};
+}
 
-const onOpen = () => {
-  if (!modalRef.value) return;
+function handleOpen() {
+  if (!checkModalRef()) return;
 
-  props.modal ? modalRef.value.showModal() : modalRef.value.show();
-};
+  props.modal ? showModal() : show();
+}
 
-const onClose = () => {
-  if (!modalRef.value) return;
+function handleClose() {
+  if (!checkModalRef()) return;
 
-  modalRef.value?.close();
+  close();
   emits("close");
-};
+}
 
 watchEffect(() => {
-  if (!modalRef.value) return;
+  if (!checkModalRef()) return;
 
+  // 处理外层传入的 showModal 改变时，控制弹框的显示/隐藏
   if (props.showModal) {
-    props.modal ? modalRef.value.showModal() : modalRef.value.show();
+    props.modal ? showModal() : show();
   } else {
-    modalRef.value.close();
+    close();
   }
 });
 
+// 外部可以设置 ref 后调用 open/close 方法控制弹框
 defineExpose({
-  open: onOpen,
-  close: onClose,
+  open: handleOpen,
+  close: handleClose,
 });
 </script>
 
 <template>
   <dialog
     ref="modalRef"
     class="modal"
-    :style="{
-      marginTop: offset,
-    }"
-    @click="onClick"
+    @click="handleClick"
   >
-    <slot />
+    <div
+      class="modal-box bg-white dark:bg-gray-800"
+      :class="twClass"
+      :style="{ marginTop: offsetTop }"
+    >
+      <slot />
+    </div>
   </dialog>
 </template>
 

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