feat: toast 问题修改

frontend_nuxt/components/HeaderComponent.vue

@@ -241,12 +241,16 @@ export default {
 }
 
 .header-content-item-main {
+  background-color: var(--primary-color);
+  color: white;
   padding: 8px 16px;
   border-radius: 10px;
   cursor: pointer;
 }
 
+
 .header-content-item-main:hover {
+  background-color: var(--primary-color-hover);
 }
 
 .header-content-item-secondary {

frontend_nuxt/main.js

@@ -4,4 +4,29 @@ export const GOOGLE_CLIENT_ID = '777830451304-nt8afkkap18gui4f9entcha99unal744.a
 export const GITHUB_CLIENT_ID = 'Ov23liVkO1NPAX5JyWxJ'
 export const DISCORD_CLIENT_ID = '1394985417044000779'
 export const TWITTER_CLIENT_ID = 'ZTRTU05KSk9KTTJrTTdrVC1tc1E6MTpjaQ'
-export const toast = { success: () => {}, error: () => {} }
+
+// 导入真实的 toast 功能
+import { useToast } from 'vue-toastification'
+
+// 创建一个全局的 toast 实例
+let toastInstance = null
+
+// 初始化 toast 实例的函数
+export const initToast = () => {
+  if (!toastInstance) {
+    toastInstance = useToast()
+  }
+  return toastInstance
+}
+
+// 导出 toast 对象，提供 success 和 error 方法
+export const toast = {
+  success: (message) => {
+    const toast = initToast()
+    toast.success(message)
+  },
+  error: (message) => {
+    const toast = initToast()
+    toast.error(message)
+  }
+}

frontend_nuxt/nuxt.config.ts

@@ -2,7 +2,7 @@ import { defineNuxtConfig } from 'nuxt/config'
 
 export default defineNuxtConfig({
   ssr: true,
-  css: ['~/assets/global.css', '~/assets/toast.css'],
+  css: ['~/assets/global.css'],
   app: {
     head: {
       link: [

frontend_nuxt/package-lock.json

@@ -14,7 +14,8 @@
         "nuxt": "latest",
         "vditor": "^3.11.1",
         "vue-easy-lightbox": "^1.19.0",
-        "vue-echarts": "^7.0.3"
+        "vue-echarts": "^7.0.3",
+        "vue-toastification": "^2.0.0-rc.5"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -10232,6 +10233,15 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue-toastification": {
+      "version": "2.0.0-rc.5",
+      "resolved": "https://registry.npmjs.org/vue-toastification/-/vue-toastification-2.0.0-rc.5.tgz",
+      "integrity": "sha512-q73e5jy6gucEO/U+P48hqX+/qyXDozAGmaGgLFm5tXX4wJBcVsnGp4e/iJqlm9xzHETYOilUuwOUje2Qg1JdwA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": "^3.0.2"
+      }
+    },
     "node_modules/web-streams-polyfill": {
       "version": "3.3.3",
       "license": "MIT",

frontend_nuxt/package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "dev": "nuxt dev",
     "build": "nuxt build",
-    "start": "nuxt start"
+    "start": "nuxt start",
+    "generate": "nuxt generate"
   },
   "dependencies": {
     "cropperjs": "^1.6.2",
@@ -16,6 +17,7 @@
     "nuxt": "latest",
     "vditor": "^3.11.1",
     "vue-easy-lightbox": "^1.19.0",
-    "vue-echarts": "^7.0.3"
+    "vue-echarts": "^7.0.3",
+    "vue-toastification": "^2.0.0-rc.5"
   }
 }

frontend_nuxt/pages/about/stats.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="site-stats-page">
-    <VChart v-if="option" :option="option" :autoresize="true" style="height:400px" />
+    <ClientOnly>
+      <VChart v-if="option" :option="option" :autoresize="true" style="height:400px" />
+    </ClientOnly>
   </div>
 </template>
 

frontend_nuxt/plugins/toastification.client.ts

@@ -0,0 +1,13 @@
+import { defineNuxtPlugin } from '#app'
+import Toast, { POSITION } from 'vue-toastification'
+import 'vue-toastification/dist/index.css'
+import '~/assets/toast.css'
+
+export default defineNuxtPlugin(nuxtApp => {
+  nuxtApp.vueApp.use(Toast, {
+    position: POSITION.TOP_RIGHT,
+    containerClassName: 'open-isle-toast-style-v1',
+    transition: 'Vue-Toastification__fade',
+    timeout: 2000,
+  })
+})