refactor: use vue-sonner replace Message

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/QuestionInput/QuestionInput.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/Summary.vue

@@ -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/Tips.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;
     }
 

apps/client/composables/rank/rankingList.ts

@@ -1,9 +1,9 @@
 import { defineStore } from "pinia";
 import { ref, watch } from "vue";
+import { toast } from "vue-sonner";
 
 import type { ProgressRank, RankingItem, RankingSelf } from "~/types";
 import { fetchProgressRank } from "~/api/rank";
-import Message from "~/components/main/Message/useMessage";
 
 let rankingCache: Record<string, ProgressRank> = {};
 export function cacheRanking() {
@@ -86,7 +86,7 @@ export const useRanking = defineStore("ranking", () => {
 
     // 加载中不允许切换
     if (isLoading.value) {
-      Message.warning("请等待当前排行榜加载完成", { duration: 1200 });
+      toast.warning("请等待当前排行榜加载完成", { duration: 1200 });
       return;
     }
 

apps/client/nuxt.config.ts

@@ -53,4 +53,7 @@ export default defineNuxtConfig({
       helpDocsURL: process.env.HELP_DOCS_URL || "",
     },
   },
+  build: {
+    transpile: ["vue-sonner"],
+  },
 });

apps/client/package.json

@@ -58,6 +58,7 @@
     "satori": "^0.10.13",
     "tippy.js": "^6.3.7",
     "vee-validate": "^4.12.5",
+    "vue-sonner": "^1.1.4",
     "yup": "^1.3.3"
   }
 }

apps/client/pages/User/Setting.vue

@@ -224,7 +224,6 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from "vue";
 
-import Message from "~/components/main/Message/useMessage";
 import { useAutoNextQuestion } from "~/composables/user/autoNext";
 import { useErrorTip } from "~/composables/user/errorTip";
 import { GameMode, useGameMode } from "~/composables/user/gameMode";