From f983abc95b309abecf2a1b6e25de9768a5471510 Mon Sep 17 00:00:00 2001
From: cuixiaorui <cui_xiaorui@126.com>
Date: Wed, 14 Aug 2024 12:33:59 +0800
Subject: [PATCH] refactor: use UModal replace modal

---
 apps/client/components/common/Dialog.vue      |   2 +-
 apps/client/components/common/Modal.vue       | 113 ------------------
 apps/client/components/main/AuthRequired.vue  |  40 -------
 apps/client/components/main/Game.vue          |   1 -
 apps/client/components/main/Share.vue         | 100 ++++++++--------
 apps/client/components/main/Summary.vue       |  49 +++++---
 apps/client/components/main/Tool.vue          |   2 +-
 apps/client/components/rank/RankingBoard.vue  |  92 ++++++++++++++
 apps/client/components/rank/RankingList.vue   |  83 -------------
 apps/client/components/rank/RankingTip.vue    |   2 +-
 apps/client/composables/main/authRequire.ts   |  19 ---
 .../composables/main/shareImage/share.ts      |   4 +-
 apps/client/pages/callback.vue                |  63 ++++++++--
 13 files changed, 235 insertions(+), 335 deletions(-)
 delete mode 100644 apps/client/components/common/Modal.vue
 delete mode 100644 apps/client/components/main/AuthRequired.vue
 create mode 100644 apps/client/components/rank/RankingBoard.vue
 delete mode 100644 apps/client/components/rank/RankingList.vue
 delete mode 100644 apps/client/composables/main/authRequire.ts

diff --git a/apps/client/components/common/Dialog.vue b/apps/client/components/common/Dialog.vue
index 30166e10e..584b80e7e 100644
--- a/apps/client/components/common/Dialog.vue
+++ b/apps/client/components/common/Dialog.vue
@@ -45,7 +45,7 @@ async function onConfirm() {
   <UModal :ui="{ width: 'w-full sm:max-w-lg' }">
     <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">
+      <p class="mb-8 text-base text-gray-700 dark:text-gray-300">
         {{ content }}
       </p>
       <div class="flex w-full justify-end space-x-4">
diff --git a/apps/client/components/common/Modal.vue b/apps/client/components/common/Modal.vue
deleted file mode 100644
index 491514adf..000000000
--- a/apps/client/components/common/Modal.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<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/main/AuthRequired.vue b/apps/client/components/main/AuthRequired.vue
deleted file mode 100644
index 34206fe30..000000000
--- a/apps/client/components/main/AuthRequired.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-  <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>
-      <div className="modal-action">
-        <button
-          class="btn"
-          @click="hideAuthRequireModal"
-        >
-          取消
-        </button>
-        <button
-          class="btn"
-          @click="handleSignup"
-        >
-          去注册
-        </button>
-      </div>
-    </div>
-  </CommonModal>
-</template>
-
-<script setup lang="ts">
-import { useAuthRequire } from "~/composables/main/authRequire";
-import { useGameMode } from "~/composables/main/game";
-import { signIn } from "~/services/auth";
-import { useCourseStore } from "~/store/course";
-
-const { authRequireModalState, hideAuthRequireModal } = useAuthRequire();
-const { showQuestion } = useGameMode();
-const courseStore = useCourseStore();
-
-function handleSignup() {
-  hideAuthRequireModal();
-  courseStore.resetStatementIndex();
-  showQuestion();
-  signIn();
-}
-</script>
diff --git a/apps/client/components/main/Game.vue b/apps/client/components/main/Game.vue
index 621cb25c6..f99a7b4f9 100644
--- a/apps/client/components/main/Game.vue
+++ b/apps/client/components/main/Game.vue
@@ -10,7 +10,6 @@
   <MainTips />
   <MainSummary />
   <MainShare />
-  <MainAuthRequired />
   <GamePauseModal v-if="isAuthenticated()"></GamePauseModal>
 </template>
 
diff --git a/apps/client/components/main/Share.vue b/apps/client/components/main/Share.vue
index 44555ea53..c00e96ed0 100644
--- a/apps/client/components/main/Share.vue
+++ b/apps/client/components/main/Share.vue
@@ -1,59 +1,63 @@
 <template>
-  <CommonModal
-    :show-modal="shareModalVisible"
-    :modal="true"
-    tw-class="flex w-[27rem] flex-col items-center overflow-hidden"
+  <UModal
+    v-model="shareModalVisible"
+    prevent-close
   >
-    <div class="flex">
-      <div class="gallery mr-2 py-2">
+    <UCard
+      :ui="{ base: 'w-full sm:w-[400px] md:w-[448px] lg:w-[496px] flex flex-col items-center' }"
+    >
+      <div class="flex flex-col sm:flex-row">
+        <div class="gallery mr-2 flex py-2 sm:flex-col">
+          <div
+            v-for="(imgItem, index) in galleryImgs"
+            :key="imgItem.src"
+            :class="[
+              'gallery-item sm:h-18 sm:w-18 mb-2 mr-2 h-14 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}`"
+              class="h-full w-full object-cover"
+            />
+          </div>
+        </div>
         <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)"
+          :class="['mt-4 flex-1 sm:mt-0', { skeleton: !shareImageSrc }]"
+          ref="imageContainer"
         >
           <img
-            v-show="imgItem.src"
-            :src="imgItem.src"
-            :alt="`Card ${index}`"
+            v-show="shareImageSrc"
+            :src="shareImageSrc"
+            alt="Selected Share Image"
+            class="h-auto max-h-[600px] w-full rounded-md"
           />
         </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>
-  </CommonModal>
+      <template #footer>
+        <div class="mt-4 space-x-4">
+          <button
+            class="btn btn-primary"
+            @click="copyAndClose"
+          >
+            复制并关闭
+          </button>
+          <button
+            class="btn"
+            @click="hideShareModal"
+          >
+            关闭
+          </button>
+        </div>
+      </template>
+    </UCard>
+  </UModal>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/client/components/main/Summary.vue b/apps/client/components/main/Summary.vue
index f12d59199..93211c2fd 100644
--- a/apps/client/components/main/Summary.vue
+++ b/apps/client/components/main/Summary.vue
@@ -3,9 +3,9 @@
     v-model="showModal"
     prevent-close
   >
-    <UCard :ui="{ base: 'w-full sm:w-[640px] md:w-[768px]' }">
+    <UCard :ui="{ base: 'sm:w-[640px] md:w-[680px] max-w-full' }">
       <div class="flex justify-between">
-        <h3 className="font-bold text-lg mb-4">🎉 Congratulations!</h3>
+        <h3 className="font-bold text-lg mb-4">🎉 恭喜!</h3>
         <button
           tabindex="0"
           class="btn btn-ghost btn-sm mx-1 h-7 w-7 rounded-md p-0"
@@ -20,22 +20,22 @@
 
       <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">
+          <span class="text-4xl font-bold sm:text-6xl">"</span>
+          <div class="flex-1 text-center text-base leading-loose sm:text-xl">
             {{ enSentence }}
           </div>
-          <span class="invisible text-6xl font-bold">"</span>
+          <span class="invisible text-4xl font-bold sm:text-6xl">"</span>
         </div>
 
         <div class="flex">
-          <span class="invisible text-6xl font-bold">"</span>
-          <div class="flex-1 text-center text-xl leading-loose">
+          <span class="invisible text-4xl font-bold sm:text-6xl">"</span>
+          <div class="flex-1 text-center text-base leading-loose sm:text-xl">
             {{ zhSentence }}
           </div>
-          <span class="text-6xl font-bold">"</span>
+          <span class="text-4xl font-bold sm:text-6xl">"</span>
         </div>
-        <p class="text-3 text-right text-gray-200">—— 金山词霸「每日一句」</p>
-        <p class="pl-14 text-base leading-loose text-gray-600">
+        <p class="text-right text-xs text-gray-200 sm:text-sm">—— 金山词霸「每日一句」</p>
+        <p class="pl-4 text-sm leading-loose text-gray-600 sm:pl-14 sm:text-base">
           {{
             `恭喜您一共完成 ${courseTimer.totalRecordNumber()} 道题，用时 ${formatSecondsToTime(
               courseTimer.calculateTotalTime(),
@@ -44,7 +44,7 @@
         </p>
         <p
           v-if="isAuthenticated()"
-          class="pl-14 text-base leading-loose text-gray-400"
+          class="pl-4 text-sm leading-loose text-gray-400 sm:pl-14 sm:text-base"
         >
           今天一共学习 <span class="text-purple-500">{{ formattedMinutes }}分钟</span> 啦！
           <span v-if="totalMinutes >= 30">太强了，给自己来点掌声 😄</span>
@@ -89,12 +89,13 @@
 </template>
 
 <script setup lang="ts">
+import { useModal } from "#imports";
 import { computed, ref, watch } from "vue";
 import { toast } from "vue-sonner";
 
+import Dialog from "~/components/common/Dialog.vue";
 import { useActiveCourseMap } from "~/composables/courses/activeCourse";
 import { courseTimer } from "~/composables/courses/courseTimer";
-import { useAuthRequire } from "~/composables/main/authRequire";
 import { useConfetti } from "~/composables/main/confetti/useConfetti";
 import { readOneSentencePerDayAloud } from "~/composables/main/englishSound";
 import { useGameMode } from "~/composables/main/game";
@@ -102,7 +103,7 @@ import { useLearningTimeTracker } from "~/composables/main/learningTimeTracker";
 import { useShareModal } from "~/composables/main/shareImage/share";
 import { useDailySentence, useSummary } from "~/composables/main/summary";
 import { useNavigation } from "~/composables/useNavigation";
-import { isAuthenticated } from "~/services/auth";
+import { isAuthenticated, signIn } from "~/services/auth";
 import { useCourseStore } from "~/store/course";
 import { useCoursePackStore } from "~/store/coursePack";
 import { useGameStore } from "~/store/game";
@@ -113,6 +114,7 @@ import { cancelShortcut, registerShortcut } from "~/utils/keyboardShortcuts";
 const courseStore = useCourseStore();
 const coursePackStore = useCoursePackStore();
 const { gotoCourseList, gotoGame } = useNavigation();
+const { showQuestion } = useGameMode();
 const { handleGoToCourseList, goToNextCourse, completeCourse } = useCourse();
 const { handleDoAgain } = useDoAgain();
 const { showModal, hideSummary } = useSummary();
@@ -121,7 +123,9 @@ const { confettiCanvasRef, playConfetti } = useConfetti();
 const { showShareModal } = useShareModal();
 const { updateActiveCourseMap } = useActiveCourseMap();
 const { totalMinutes, formattedMinutes } = useTotalLearningTime();
+
 const gameStore = useGameStore();
+const modal = useModal();
 
 watch(showModal, (val) => {
   if (val) {
@@ -163,8 +167,6 @@ function useTotalLearningTime() {
 }
 
 function useDoAgain() {
-  const { showQuestion } = useGameMode();
-
   async function handleDoAgain() {
     // 看看是不是没有全部掌握了
     // 如果是全部掌握了 那么给个提示 然后挑战到课程列表
@@ -202,11 +204,22 @@ function useCourse() {
   });
 
   async function goToNextCourse() {
-    const { showAuthRequireModal } = useAuthRequire();
-
     if (!isAuthenticated()) {
       // 去注册
-      showAuthRequireModal();
+      modal.open(Dialog, {
+        title: "✨ 解锁更多学习体验",
+        content: "注册后可以进行下一课学习 记录每日学习数据 开启更多功能哦",
+        showCancel: true,
+        showConfirm: true,
+        cancelText: "稍后再说",
+        confirmText: "立即注册",
+        async onConfirm() {
+          courseStore.resetStatementIndex();
+          showQuestion();
+          signIn();
+        },
+      });
+
       return;
     }
 
diff --git a/apps/client/components/main/Tool.vue b/apps/client/components/main/Tool.vue
index f1d4d42b7..b42035a1f 100644
--- a/apps/client/components/main/Tool.vue
+++ b/apps/client/components/main/Tool.vue
@@ -65,7 +65,7 @@
     class="h-6 p-[2px]"
     :percentage="currentPercentage"
   />
-  <RankRankingList />
+  <RankRankingBoard />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/client/components/rank/RankingBoard.vue b/apps/client/components/rank/RankingBoard.vue
new file mode 100644
index 000000000..2d50e099e
--- /dev/null
+++ b/apps/client/components/rank/RankingBoard.vue
@@ -0,0 +1,92 @@
+<template>
+  <UModal v-model="rankingStore.rankModal">
+    <UCard
+      :ui="{
+        base: 'h-[90vh] w-[90vw] max-w-[450px] max-h-[570px]',
+        body: {
+          base: 'h-full flex flex-col',
+        },
+      }"
+    >
+      <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>
+
+      <div class="flex-grow">
+        <!-- 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>
+        <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>
+      </div>
+
+      <!-- tip -->
+      <RankRankingTip
+        :isLoading="rankingStore.isLoading"
+        :rankingSelf="rankingStore.rankingSelf"
+      />
+    </UCard>
+  </UModal>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted } from "vue";
+
+import { useRanking } from "~/composables/rank/rankingList";
+import { registerShortcut } from "~/utils/keyboardShortcuts";
+import { cancelShortcut } from "../../utils/keyboardShortcuts";
+
+const rankingStore = useRanking();
+
+onMounted(() => {
+  registerShortcut("Escape", rankingStore.hideRankModal);
+});
+
+onUnmounted(() => {
+  cancelShortcut("Escape", rankingStore.hideRankModal);
+});
+</script>
diff --git a/apps/client/components/rank/RankingList.vue b/apps/client/components/rank/RankingList.vue
deleted file mode 100644
index 063747475..000000000
--- a/apps/client/components/rank/RankingList.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<template>
-  <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"
-  >
-    <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>
-
-    <!-- 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>
-
-    <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"
-    />
-  </CommonModal>
-</template>
-
-<script setup lang="ts">
-import { onMounted, onUnmounted } from "vue";
-
-import { useRanking } from "~/composables/rank/rankingList";
-import { registerShortcut } from "~/utils/keyboardShortcuts";
-import { cancelShortcut } from "../../utils/keyboardShortcuts";
-
-const rankingStore = useRanking();
-
-onMounted(() => {
-  registerShortcut("Escape", rankingStore.hideRankModal);
-});
-
-onUnmounted(() => {
-  cancelShortcut("Escape", rankingStore.hideRankModal);
-});
-</script>
diff --git a/apps/client/components/rank/RankingTip.vue b/apps/client/components/rank/RankingTip.vue
index 7e5498713..96cc4790c 100644
--- a/apps/client/components/rank/RankingTip.vue
+++ b/apps/client/components/rank/RankingTip.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="absolute bottom-0 left-0 flex h-12 w-full flex-col items-center justify-center border-t border-gray-200 dark:border-gray-600"
+    class="flex h-12 w-full flex-col items-center justify-center border-t border-gray-200 dark:border-gray-600"
   >
     <div class="flex items-center text-sm">
       <span class="font-bold">我的排名：</span>
diff --git a/apps/client/composables/main/authRequire.ts b/apps/client/composables/main/authRequire.ts
deleted file mode 100644
index f0271fc08..000000000
--- a/apps/client/composables/main/authRequire.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { ref } from "vue";
-
-const authRequireModalState = ref(false);
-
-export function useAuthRequire() {
-  function showAuthRequireModal() {
-    authRequireModalState.value = true;
-  }
-
-  function hideAuthRequireModal() {
-    authRequireModalState.value = false;
-  }
-
-  return {
-    showAuthRequireModal,
-    hideAuthRequireModal,
-    authRequireModalState,
-  };
-}
diff --git a/apps/client/composables/main/shareImage/share.ts b/apps/client/composables/main/shareImage/share.ts
index 352591c3b..3e9fe2be5 100644
--- a/apps/client/composables/main/shareImage/share.ts
+++ b/apps/client/composables/main/shareImage/share.ts
@@ -159,7 +159,9 @@ export function useGenerateShareImage() {
     });
 
     // currImageSrc.value = await convertSVGtoImg(svg, canvasEl, fullFormat);
-    galleryImgs.value[index].src = await convertSVGtoImg(svg, canvasEl, fullFormat);
+    if (galleryImgs.value[index]) {
+      galleryImgs.value[index].src = await convertSVGtoImg(svg, canvasEl, fullFormat);
+    }
 
     if (index === 0) {
       currImageSrc.value = galleryImgs.value[index].src;
diff --git a/apps/client/pages/callback.vue b/apps/client/pages/callback.vue
index bf276fd13..3d53ca08a 100644
--- a/apps/client/pages/callback.vue
+++ b/apps/client/pages/callback.vue
@@ -2,7 +2,7 @@
 <script setup lang="ts">
 import { useHandleSignInCallback } from "@logto/vue";
 import { navigateTo } from "nuxt/app";
-import { ref } from "vue";
+import { onMounted, onUnmounted, ref, watch } from "vue";
 import { toast } from "vue-sonner";
 
 import { fetchCurrentUser } from "~/api/user";
@@ -13,7 +13,28 @@ const userStore = useUserStore();
 const { username, isLoadingFetchUserSetup, isShowSettingUsernameModal, handleChangeUsername } =
   useUsername();
 
-const { isLoading } = useHandleSignInCallback(async () => {
+const useAutoRedirect = (delay: number) => {
+  const redirectTimer = ref<NodeJS.Timeout | null>(null);
+  const startAutoRedirect = () => {
+    redirectTimer.value = setTimeout(() => {
+      navigateTo("/");
+    }, delay);
+  };
+
+  const stopAutoRedirect = () => {
+    if (redirectTimer.value) {
+      clearTimeout(redirectTimer.value);
+      redirectTimer.value = null;
+    }
+  };
+
+  return { startAutoRedirect, stopAutoRedirect };
+};
+
+const { startAutoRedirect, stopAutoRedirect } = useAutoRedirect(3000);
+
+const { isLoading, error } = useHandleSignInCallback(async () => {
+  stopAutoRedirect();
   const res = await fetchCurrentUser();
   userStore.initUser(res);
 
@@ -25,6 +46,27 @@ const { isLoading } = useHandleSignInCallback(async () => {
   }
 });
 
+onMounted(() => {
+  startAutoRedirect();
+});
+
+onUnmounted(() => {
+  stopAutoRedirect();
+});
+
+// 如果登录失败，则跳转到首页
+watch(error, (newError) => {
+  if (newError) {
+    toast.error(`登录失败`, {
+      description: `请清空缓存后重新尝试 报错信息: ${newError}`,
+      duration: 4000,
+      onAutoClose: () => {
+        navigateTo("/");
+      },
+    });
+  }
+});
+
 function useUsername() {
   const username = ref("");
   const isShowSettingUsernameModal = ref(false);
@@ -86,8 +128,12 @@ function useUsername() {
     <template v-if="isLoading && !isShowSettingUsernameModal">
       <Loading></Loading>
     </template>
-    <template v-else-if="isShowSettingUsernameModal">
-      <CommonModal :show-modal="true">
+    <UModal
+      v-model="isShowSettingUsernameModal"
+      :ui="{ width: 'w-full sm:max-w-lg' }"
+      prevent-close
+    >
+      <UCard>
         <h3 class="mb-4 text-lg font-bold">设置用户名</h3>
         <input
           v-model="username"
@@ -98,8 +144,7 @@ function useUsername() {
           @keydown.enter="handleChangeUsername"
         />
         <div class="modal-action">
-          <button
-            class="btn btn-primary"
+          <UButton
             type="submit"
             @click="handleChangeUsername"
           >
@@ -108,9 +153,9 @@ function useUsername() {
               v-if="isLoadingFetchUserSetup"
               class="loading loading-spinner loading-lg"
             ></span>
-          </button>
+          </UButton>
         </div>
-      </CommonModal>
-    </template>
+      </UCard>
+    </UModal>
   </div>
 </template>