From 676e959d4bc19d4c000c8564406f645101dd9473 Mon Sep 17 00:00:00 2001
From: Tim <nagisa12164@163.com>
Date: Thu, 7 Aug 2025 22:20:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20toast=20=E9=97=AE=E9=A2=98=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend_nuxt/components/HeaderComponent.vue  |  4 +++
 frontend_nuxt/main.js                         | 27 ++++++++++++++++++-
 frontend_nuxt/nuxt.config.ts                  |  2 +-
 frontend_nuxt/package-lock.json               | 12 ++++++++-
 frontend_nuxt/package.json                    |  6 +++--
 frontend_nuxt/pages/about/stats.vue           |  4 ++-
 .../plugins/toastification.client.ts          | 13 +++++++++
 7 files changed, 62 insertions(+), 6 deletions(-)
 create mode 100644 frontend_nuxt/plugins/toastification.client.ts

diff --git a/frontend_nuxt/components/HeaderComponent.vue b/frontend_nuxt/components/HeaderComponent.vue
index 44516ea15..7bce6c142 100644
--- a/frontend_nuxt/components/HeaderComponent.vue
+++ b/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 {
diff --git a/frontend_nuxt/main.js b/frontend_nuxt/main.js
index fc4dc6be4..d69b82425 100644
--- a/frontend_nuxt/main.js
+++ b/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)
+  }
+}
\ No newline at end of file
diff --git a/frontend_nuxt/nuxt.config.ts b/frontend_nuxt/nuxt.config.ts
index b7098ecfa..8ed37a55f 100644
--- a/frontend_nuxt/nuxt.config.ts
+++ b/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: [
diff --git a/frontend_nuxt/package-lock.json b/frontend_nuxt/package-lock.json
index 6e645df4b..e65f0126e 100644
--- a/frontend_nuxt/package-lock.json
+++ b/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",
diff --git a/frontend_nuxt/package.json b/frontend_nuxt/package.json
index 0ea54c774..193879b9c 100644
--- a/frontend_nuxt/package.json
+++ b/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"
   }
 }
diff --git a/frontend_nuxt/pages/about/stats.vue b/frontend_nuxt/pages/about/stats.vue
index f0c1904b1..992b17d70 100644
--- a/frontend_nuxt/pages/about/stats.vue
+++ b/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>
 
diff --git a/frontend_nuxt/plugins/toastification.client.ts b/frontend_nuxt/plugins/toastification.client.ts
new file mode 100644
index 000000000..cd951c7dd
--- /dev/null
+++ b/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,
+  })
+})