add toast-notification

package.json

@@ -37,6 +37,7 @@
     "vue-i18n": "^9.2.2",
     "vue-prism-component": "^2.0.0",
     "vue-router": "^4.2.0",
+    "vue-toast-notification": "^3",
     "vue3-apexcharts": "^1.4.1",
     "vue3-perfect-scrollbar": "^1.6.0",
     "vuetify": "3.3.5",

src/components/cards/MediaCard.vue

@@ -2,6 +2,7 @@
 import api from "@/api";
 import { doneNProgress, startNProgress } from "@/api/nprogress";
 import { MediaInfo, Subscribe } from "@/api/types";
+import { useToast } from "vue-toast-notification";
 
 // 输入参数
 const props = defineProps({
@@ -10,6 +11,9 @@ const props = defineProps({
   height: String,
 });
 
+// 提示框
+const $toast = useToast();
+
 // 图片加载状态
 const isImageLoaded = ref(false);
 
@@ -44,7 +48,7 @@ const addSubscribe = async () => {
       // 订阅成功
       isSubscribed.value = true;
     } else {
-      // TODO 弹出错误提示
+      $toast.error(`${props.media?.title} 添加订阅失败：${result.message}！`);
     }
   } catch (error) {
     console.error(error);

src/main.ts

@@ -10,6 +10,8 @@ import '@core/scss/template/index.scss'
 import '@layouts/styles/index.scss'
 import '@styles/styles.scss'
 import { createApp } from 'vue'
+import ToastPlugin from 'vue-toast-notification'
+import 'vue-toast-notification/dist/theme-default.css'
 loadFonts()
 
 // Nprogress
@@ -23,6 +25,7 @@ app
 .use(vuetify)
 .use(router)
 .use(store)
+.use(ToastPlugin)
 .mount('#app')
 
 

yarn.lock

@@ -7200,6 +7200,11 @@ vue-template-compiler@^2.7.14:
     de-indent "^1.0.2"
     he "^1.2.0"
 
+vue-toast-notification@^3:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/vue-toast-notification/-/vue-toast-notification-3.1.1.tgz#334e9e71996c884a58c70a0fa011424f767d87bb"
+  integrity sha512-DXEE38NxXFCNinKI+MyZBMWsaqE9Lwxg9GkMVkzKXY1ACCeNztBXuUiSvKMe36dnnYd1qnlP+cWNSvHlkt5xNA==
+
 vue-tsc@^1.6.5:
   version "1.6.5"
   resolved "https://registry.yarnpkg.com/vue-tsc/-/vue-tsc-1.6.5.tgz#cd18804b12087c300b6c9ee2a1da41a63f11103e"