refactor: use vue-sonner replace Message

Author: cuixiaorui

README.md

@@ -262,7 +262,7 @@ docker images
 
 2. Avoid including UI logic in composables.
 
-   - Such as `useMessage`
+   - Such as `toast.info()`
    - We categorize the router as UI logic, and for ease of testing, avoid including routerrelated logic in there
 
 ## 🚀 Star History

README.zh-CN.md

@@ -262,7 +262,7 @@ docker images
 
 2. composables 里面不要包含 UI 逻辑
 
-   - useMessage 之类的
+   - Such as `toast.info()`
    - router 相关的也不要放进去（不便于测试 我们把 router 划分为 UI 逻辑）
 
 ## 🚀 星路历程

apps/client/app.vue

@@ -12,18 +12,29 @@
       </NuxtLayout>
     </template>
     <UModals />
+    <Toaster
+      :theme="darkMode === Theme.DARK ? 'dark' : 'light'"
+      position="top-center"
+      :toastOptions="{
+        style: {
+          background: darkMode === Theme.DARK ? '#c084fc' : '#f3e8ff',
+          color: darkMode === Theme.DARK ? '#000' : '#6b21a8',
+        },
+      }"
+    />
   </HttpErrorProvider>
 </template>
 
 <script setup lang="ts">
 import { useAsyncData } from "#imports";
+import { Toaster } from "vue-sonner";
 
 import { fetchCurrentUser } from "~/api/user";
-import { useDarkMode } from "~/composables/darkMode";
+import { Theme, useDarkMode } from "~/composables/darkMode";
 import { isAuthenticated } from "~/services/auth";
 import { useUserStore } from "./store/user";
 
-const { initDarkMode } = useDarkMode();
+const { initDarkMode, darkMode } = useDarkMode();
 initDarkMode();
 
 const userStore = useUserStore();

apps/client/components/HttpErrorProvider.vue

@@ -3,8 +3,9 @@
 </template>
 
 <script setup lang="ts">
+import { toast } from "vue-sonner";
+
 import { injectHttpStatusErrorHandler } from "~/api/http.js";
-import Message from "~/components/main/Message/useMessage";
 import { signIn } from "~/services/auth";
 
 useHttpStatusError();
@@ -13,14 +14,15 @@ function useHttpStatusError() {
   injectHttpStatusErrorHandler(async (errMessage, statusCode) => {
     switch (statusCode) {
       case 401:
-        Message.error(errMessage, {
+        toast.error(errMessage, {
           duration: 2000,
-          onLeave() {
+          onAutoClose() {
             signIn(window.location.pathname);
           },
         });
+        break;
       default:
-        Message.error(errMessage);
+        toast.error(errMessage);
         break;
     }
   });

apps/client/components/Landing/PayCard.vue

@@ -108,10 +108,6 @@
 </template>
 
 <script setup>
-import { useRouter } from "vue-router";
-
-import Message from "~/components/main/Message/useMessage";
-
 const features = [
   {
     type: "免费",
@@ -138,8 +134,6 @@ const features = [
 async function handleUpgrade(type) {
   if (type === "免费") {
   } else {
-    // Upgrade now
-    Message.warning("Function is not open！");
   }
 }
 </script>

apps/client/components/main/Message/Message.vue

@@ -69,8 +69,8 @@
 
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref, watch } from "vue";
+import { toast } from "vue-sonner";
 
-import Message from "~/components/main/Message/useMessage";
 import { courseTimer } from "~/composables/courses/courseTimer";
 import { useAnswerTip } from "~/composables/main/answerTip";
 import { useCurrentStatementEnglishSound } from "~/composables/main/englishSound";
@@ -142,7 +142,7 @@ function useMasteredShortcut() {
 
   function handleMastered() {
     if (!isAuthenticated()) {
-      Message.warning("需要登录哦");
+      toast.warning("需要登录哦");
       return;
     }
 

apps/client/components/main/Message/useMessage.ts

@@ -84,10 +84,9 @@
 </template>
 
 <script setup lang="ts">
-import delay from "lodash-es/delay";
 import { computed, ref, watch } from "vue";
+import { toast } from "vue-sonner";
 
-import Message from "~/components/main/Message/useMessage";
 import { useActiveCourseMap } from "~/composables/courses/activeCourse";
 import { courseTimer } from "~/composables/courses/courseTimer";
 import { useAuthRequire } from "~/composables/main/authRequire";
@@ -165,8 +164,12 @@ function useDoAgain() {
     // 看看是不是没有全部掌握了
     // 如果是全部掌握了 那么给个提示 然后挑战到课程列表
     if (courseStore.isAllMastered()) {
-      Message.warning("你已经全部都掌握 自动帮你跳转到课程列表啦");
-      await delay(handleGoToCourseList, 1500);
+      toast.info("你已经全部都掌握 自动帮你跳转到课程列表啦", {
+        duration: 1500,
+        onAutoClose: () => {
+          handleGoToCourseList();
+        },
+      });
       return;
     }
     courseStore.doAgain();
@@ -205,8 +208,12 @@ function useCourse() {
     hideSummary();
 
     if (!haveNextCourse.value) {
-      Message.warning("已经是最后一课 自动帮你跳转到课程列表啦");
-      await delay(handleGoToCourseList, 1500);
+      toast.info("已经是最后一课 自动帮你跳转到课程列表啦", {
+        duration: 1500,
+        onAutoClose: () => {
+          handleGoToCourseList();
+        },
+      });
       return;
     }
 

apps/client/components/main/QuestionInput/QuestionInput.vue

@@ -23,9 +23,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from "vue";
+import { computed, onMounted, onUnmounted } from "vue";
+import { toast } from "vue-sonner";
 
-import Message from "~/components/main/Message/useMessage";
 import { useAnswerTip } from "~/composables/main/answerTip";
 import { useCurrentStatementEnglishSound } from "~/composables/main/englishSound";
 import { useGameMode } from "~/composables/main/game";
@@ -110,7 +110,7 @@ function useMasteredShortcut() {
 
   function handleMastered() {
     if (!isAuthenticated()) {
-      Message.warning("需要登录哦");
+      toast.warning("需要登录哦");
       return;
     }