From 974c7ba83e174daddd5689b775bb409a277e7819 Mon Sep 17 00:00:00 2001
From: AnNingUI <an3533581512@gmail.com>
Date: Fri, 15 Aug 2025 11:42:39 +0800
Subject: [PATCH] feat: Add Message Update

---
 frontend_nuxt/components/HeaderComponent.vue |   6 +-
 frontend_nuxt/components/MenuComponent.vue   |  12 +-
 frontend_nuxt/pages/message.vue              | 249 +------------------
 frontend_nuxt/utils/notification.js          | 230 ++++++++++++++++-
 4 files changed, 254 insertions(+), 243 deletions(-)

diff --git a/frontend_nuxt/components/HeaderComponent.vue b/frontend_nuxt/components/HeaderComponent.vue
index 10e6b1230..dc2edd040 100644
--- a/frontend_nuxt/components/HeaderComponent.vue
+++ b/frontend_nuxt/components/HeaderComponent.vue
@@ -8,7 +8,7 @@
           </button>
           <span v-if="isMobile && unreadCount > 0" class="menu-unread-dot"></span>
         </div>
-        <NuxtLink class="logo-container" :to="`/`">
+        <NuxtLink class="logo-container" :to="`/`" @click="refrechData">
           <img
             alt="OpenIsle"
             src="https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/image.png"
@@ -125,6 +125,10 @@ const goToNewPost = () => {
   navigateTo('/new-post', { replace: false })
 }
 
+const refrechData = async () => {
+  await fetchUnreadCount()
+}
+
 const headerMenuItems = computed(() => [
   { text: '设置', onClick: goToSettings },
   { text: '个人主页', onClick: goToProfile },
diff --git a/frontend_nuxt/components/MenuComponent.vue b/frontend_nuxt/components/MenuComponent.vue
index 4a3fc57bc..7a1411759 100644
--- a/frontend_nuxt/components/MenuComponent.vue
+++ b/frontend_nuxt/components/MenuComponent.vue
@@ -115,11 +115,15 @@
           </div>
         </div>
       </div>
-      <div class="menu-footer">
-        <div class="menu-footer-btn" @click="cycleTheme">
-          <i :class="iconClass"></i>
+
+      <!-- 解决动态样式的水合错误 -->
+      <ClientOnly>
+        <div class="menu-footer">
+          <div class="menu-footer-btn" @click="cycleTheme">
+            <i :class="iconClass"></i>
+          </div>
         </div>
-      </div>
+      </ClientOnly>
     </nav>
   </transition>
 </template>
diff --git a/frontend_nuxt/pages/message.vue b/frontend_nuxt/pages/message.vue
index 831c3238f..ef78a6050 100644
--- a/frontend_nuxt/pages/message.vue
+++ b/frontend_nuxt/pages/message.vue
@@ -505,21 +505,26 @@
 </template>
 
 <script setup>
-import { ref, onMounted, computed } from 'vue'
-import BaseTimeline from '~/components/BaseTimeline.vue'
+import { computed, onMounted, ref } from 'vue'
 import BasePlaceholder from '~/components/BasePlaceholder.vue'
+import BaseTimeline from '~/components/BaseTimeline.vue'
 import NotificationContainer from '~/components/NotificationContainer.vue'
-import { getToken, authState } from '~/utils/auth'
-import { markNotificationsRead, fetchUnreadCount, notificationState } from '~/utils/notification'
 import { toast } from '~/main'
+import { authState, getToken } from '~/utils/auth'
 import { stripMarkdownLength } from '~/utils/markdown'
+import {
+  fetchNotifications,
+  fetchUnreadCount,
+  isLoadingMessage,
+  markRead,
+  notifications,
+  markAllRead,
+} from '~/utils/notification'
 import TimeManager from '~/utils/time'
-import { reactionEmojiMap } from '~/utils/reactions'
+
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl
 const route = useRoute()
-const notifications = ref([])
-const isLoadingMessage = ref(false)
 const selectedTab = ref(
   ['all', 'unread', 'control'].includes(route.query.tab) ? route.query.tab : 'unread',
 )
@@ -528,234 +533,6 @@ const filteredNotifications = computed(() =>
   selectedTab.value === 'all' ? notifications.value : notifications.value.filter((n) => !n.read),
 )
 
-const markRead = async (id) => {
-  if (!id) return
-  const n = notifications.value.find((n) => n.id === id)
-  if (!n || n.read) return
-  n.read = true
-  if (notificationState.unreadCount > 0) notificationState.unreadCount--
-  const ok = await markNotificationsRead([id])
-  if (!ok) {
-    n.read = false
-    notificationState.unreadCount++
-  } else {
-    fetchUnreadCount()
-  }
-}
-
-const markAllRead = async () => {
-  // 除了 REGISTER_REQUEST 类型消息
-  const idsToMark = notifications.value
-    .filter((n) => n.type !== 'REGISTER_REQUEST' && !n.read)
-    .map((n) => n.id)
-  if (idsToMark.length === 0) return
-  notifications.value.forEach((n) => {
-    if (n.type !== 'REGISTER_REQUEST') n.read = true
-  })
-  notificationState.unreadCount = notifications.value.filter((n) => !n.read).length
-  const ok = await markNotificationsRead(idsToMark)
-  if (!ok) {
-    notifications.value.forEach((n) => {
-      if (idsToMark.includes(n.id)) n.read = false
-    })
-    await fetchUnreadCount()
-    return
-  }
-  fetchUnreadCount()
-  if (authState.role === 'ADMIN') {
-    toast.success('已读所有消息（注册请求除外）')
-  } else {
-    toast.success('已读所有消息')
-  }
-}
-
-const iconMap = {
-  POST_VIEWED: 'fas fa-eye',
-  COMMENT_REPLY: 'fas fa-reply',
-  POST_REVIEWED: 'fas fa-shield-alt',
-  POST_REVIEW_REQUEST: 'fas fa-gavel',
-  POST_UPDATED: 'fas fa-comment-dots',
-  USER_ACTIVITY: 'fas fa-user',
-  FOLLOWED_POST: 'fas fa-feather-alt',
-  USER_FOLLOWED: 'fas fa-user-plus',
-  USER_UNFOLLOWED: 'fas fa-user-minus',
-  POST_SUBSCRIBED: 'fas fa-bookmark',
-  POST_UNSUBSCRIBED: 'fas fa-bookmark',
-  REGISTER_REQUEST: 'fas fa-user-clock',
-  ACTIVITY_REDEEM: 'fas fa-coffee',
-  LOTTERY_WIN: 'fas fa-trophy',
-  LOTTERY_DRAW: 'fas fa-bullhorn',
-  MENTION: 'fas fa-at',
-}
-
-const fetchNotifications = async () => {
-  try {
-    const token = getToken()
-    if (!token) {
-      toast.error('请先登录')
-      return
-    }
-    isLoadingMessage.value = true
-    notifications.value = []
-    const res = await fetch(`${API_BASE_URL}/api/notifications`, {
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    })
-    isLoadingMessage.value = false
-    if (!res.ok) {
-      toast.error('获取通知失败')
-      return
-    }
-    const data = await res.json()
-
-    for (const n of data) {
-      if (n.type === 'COMMENT_REPLY') {
-        notifications.value.push({
-          ...n,
-          src: n.comment.author.avatar,
-          iconClick: () => {
-            markRead(n.id)
-            navigateTo(`/users/${n.comment.author.id}`, { replace: true })
-          },
-        })
-      } else if (n.type === 'REACTION') {
-        notifications.value.push({
-          ...n,
-          emoji: reactionEmojiMap[n.reactionType],
-          iconClick: () => {
-            if (n.fromUser) {
-              markRead(n.id)
-              navigateTo(`/users/${n.fromUser.id}`, { replace: true })
-            }
-          },
-        })
-      } else if (n.type === 'POST_VIEWED') {
-        notifications.value.push({
-          ...n,
-          src: n.fromUser ? n.fromUser.avatar : null,
-          icon: n.fromUser ? undefined : iconMap[n.type],
-          iconClick: () => {
-            if (n.fromUser) {
-              markRead(n.id)
-              navigateTo(`/users/${n.fromUser.id}`, { replace: true })
-            }
-          },
-        })
-      } else if (n.type === 'LOTTERY_WIN') {
-        notifications.value.push({
-          ...n,
-          icon: iconMap[n.type],
-          iconClick: () => {
-            if (n.post) {
-              markRead(n.id)
-              router.push(`/posts/${n.post.id}`)
-            }
-          },
-        })
-      } else if (n.type === 'LOTTERY_DRAW') {
-        notifications.value.push({
-          ...n,
-          icon: iconMap[n.type],
-          iconClick: () => {
-            if (n.post) {
-              markRead(n.id)
-              router.push(`/posts/${n.post.id}`)
-            }
-          },
-        })
-      } else if (n.type === 'POST_UPDATED') {
-        notifications.value.push({
-          ...n,
-          src: n.comment.author.avatar,
-          iconClick: () => {
-            markRead(n.id)
-            navigateTo(`/users/${n.comment.author.id}`, { replace: true })
-          },
-        })
-      } else if (n.type === 'USER_ACTIVITY') {
-        notifications.value.push({
-          ...n,
-          src: n.comment.author.avatar,
-          iconClick: () => {
-            markRead(n.id)
-            navigateTo(`/users/${n.comment.author.id}`, { replace: true })
-          },
-        })
-      } else if (n.type === 'MENTION') {
-        notifications.value.push({
-          ...n,
-          icon: iconMap[n.type],
-          iconClick: () => {
-            if (n.fromUser) {
-              markRead(n.id)
-              navigateTo(`/users/${n.fromUser.id}`, { replace: true })
-            }
-          },
-        })
-      } else if (n.type === 'USER_FOLLOWED' || n.type === 'USER_UNFOLLOWED') {
-        notifications.value.push({
-          ...n,
-          icon: iconMap[n.type],
-          iconClick: () => {
-            if (n.fromUser) {
-              markRead(n.id)
-              navigateTo(`/users/${n.fromUser.id}`, { replace: true })
-            }
-          },
-        })
-      } else if (n.type === 'FOLLOWED_POST') {
-        notifications.value.push({
-          ...n,
-          icon: iconMap[n.type],
-          iconClick: () => {
-            if (n.post) {
-              markRead(n.id)
-              navigateTo(`/posts/${n.post.id}`, { replace: true })
-            }
-          },
-        })
-      } else if (n.type === 'POST_SUBSCRIBED' || n.type === 'POST_UNSUBSCRIBED') {
-        notifications.value.push({
-          ...n,
-          icon: iconMap[n.type],
-          iconClick: () => {
-            if (n.post) {
-              markRead(n.id)
-              navigateTo(`/posts/${n.post.id}`, { replace: true })
-            }
-          },
-        })
-      } else if (n.type === 'POST_REVIEW_REQUEST') {
-        notifications.value.push({
-          ...n,
-          src: n.fromUser ? n.fromUser.avatar : null,
-          icon: n.fromUser ? undefined : iconMap[n.type],
-          iconClick: () => {
-            if (n.post) {
-              markRead(n.id)
-              navigateTo(`/posts/${n.post.id}`, { replace: true })
-            }
-          },
-        })
-      } else if (n.type === 'REGISTER_REQUEST') {
-        notifications.value.push({
-          ...n,
-          icon: iconMap[n.type],
-          iconClick: () => {},
-        })
-      } else {
-        notifications.value.push({
-          ...n,
-          icon: iconMap[n.type],
-        })
-      }
-    }
-  } catch (e) {
-    console.error(e)
-  }
-}
-
 const fetchPrefs = async () => {
   notificationPrefs.value = await fetchNotificationPreferences()
 }
@@ -842,7 +619,7 @@ const formatType = (t) => {
   }
 }
 
-onMounted(() => {
+onActivated(() => {
   fetchNotifications()
   fetchPrefs()
 })
diff --git a/frontend_nuxt/utils/notification.js b/frontend_nuxt/utils/notification.js
index b0715274b..723a5ea9a 100644
--- a/frontend_nuxt/utils/notification.js
+++ b/frontend_nuxt/utils/notification.js
@@ -1,10 +1,32 @@
-import { getToken } from './auth'
-import { reactive } from 'vue'
+import { navigateTo, useRuntimeConfig } from 'nuxt/app'
+import { reactive, ref } from 'vue'
+import { toast } from '~/composables/useToast'
+import { getToken } from '~/utils/auth'
+import { reactionEmojiMap } from '~/utils/reactions'
 
 export const notificationState = reactive({
   unreadCount: 0,
 })
 
+const iconMap = {
+  POST_VIEWED: 'fas fa-eye',
+  COMMENT_REPLY: 'fas fa-reply',
+  POST_REVIEWED: 'fas fa-shield-alt',
+  POST_REVIEW_REQUEST: 'fas fa-gavel',
+  POST_UPDATED: 'fas fa-comment-dots',
+  USER_ACTIVITY: 'fas fa-user',
+  FOLLOWED_POST: 'fas fa-feather-alt',
+  USER_FOLLOWED: 'fas fa-user-plus',
+  USER_UNFOLLOWED: 'fas fa-user-minus',
+  POST_SUBSCRIBED: 'fas fa-bookmark',
+  POST_UNSUBSCRIBED: 'fas fa-bookmark',
+  REGISTER_REQUEST: 'fas fa-user-clock',
+  ACTIVITY_REDEEM: 'fas fa-coffee',
+  LOTTERY_WIN: 'fas fa-trophy',
+  LOTTERY_DRAW: 'fas fa-bullhorn',
+  MENTION: 'fas fa-at',
+}
+
 export async function fetchUnreadCount() {
   const config = useRuntimeConfig()
   const API_BASE_URL = config.public.apiBaseUrl
@@ -87,3 +109,207 @@ export async function updateNotificationPreference(type, enabled) {
     return false
   }
 }
+
+/**
+ * 处理信息的高阶函数
+ * @returns
+ */
+function createFetchNotifications() {
+  const notifications = ref([])
+  const isLoadingMessage = ref(false)
+  const fetchNotifications = async () => {
+    const config = useRuntimeConfig()
+    const API_BASE_URL = config.public.apiBaseUrl
+    if (isLoadingMessage && notifications && markRead) {
+      try {
+        const token = getToken()
+        if (!token) {
+          toast.error('请先登录')
+          return
+        }
+        isLoadingMessage.value = true
+        notifications.value = []
+        const res = await fetch(`${API_BASE_URL}/api/notifications`, {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        })
+        isLoadingMessage.value = false
+        if (!res.ok) {
+          toast.error('获取通知失败')
+          return
+        }
+        const data = await res.json()
+
+        for (const n of data) {
+          if (n.type === 'COMMENT_REPLY') {
+            notifications.value.push({
+              ...n,
+              src: n.comment.author.avatar,
+              iconClick: () => {
+                markRead(n.id)
+                navigateTo(`/users/${n.comment.author.id}`, { replace: true })
+              },
+            })
+          } else if (n.type === 'REACTION') {
+            notifications.value.push({
+              ...n,
+              emoji: reactionEmojiMap[n.reactionType],
+              iconClick: () => {
+                if (n.fromUser) {
+                  markRead(n.id)
+                  navigateTo(`/users/${n.fromUser.id}`, { replace: true })
+                }
+              },
+            })
+          } else if (n.type === 'POST_VIEWED') {
+            notifications.value.push({
+              ...n,
+              src: n.fromUser ? n.fromUser.avatar : null,
+              icon: n.fromUser ? undefined : iconMap[n.type],
+              iconClick: () => {
+                if (n.fromUser) {
+                  markRead(n.id)
+                  navigateTo(`/users/${n.fromUser.id}`, { replace: true })
+                }
+              },
+            })
+          } else if (n.type === 'LOTTERY_WIN') {
+            notifications.value.push({
+              ...n,
+              icon: iconMap[n.type],
+              iconClick: () => {
+                if (n.post) {
+                  markRead(n.id)
+                  router.push(`/posts/${n.post.id}`)
+                }
+              },
+            })
+          } else if (n.type === 'LOTTERY_DRAW') {
+            notifications.value.push({
+              ...n,
+              icon: iconMap[n.type],
+              iconClick: () => {
+                if (n.post) {
+                  markRead(n.id)
+                  router.push(`/posts/${n.post.id}`)
+                }
+              },
+            })
+          } else if (n.type === 'POST_UPDATED') {
+            notifications.value.push({
+              ...n,
+              src: n.comment.author.avatar,
+              iconClick: () => {
+                markRead(n.id)
+                navigateTo(`/users/${n.comment.author.id}`, { replace: true })
+              },
+            })
+          } else if (n.type === 'USER_ACTIVITY') {
+            notifications.value.push({
+              ...n,
+              src: n.comment.author.avatar,
+              iconClick: () => {
+                markRead(n.id)
+                navigateTo(`/users/${n.comment.author.id}`, { replace: true })
+              },
+            })
+          } else if (n.type === 'MENTION') {
+            notifications.value.push({
+              ...n,
+              icon: iconMap[n.type],
+              iconClick: () => {
+                if (n.fromUser) {
+                  markRead(n.id)
+                  navigateTo(`/users/${n.fromUser.id}`, { replace: true })
+                }
+              },
+            })
+          } else if (n.type === 'USER_FOLLOWED' || n.type === 'USER_UNFOLLOWED') {
+            notifications.value.push({
+              ...n,
+              icon: iconMap[n.type],
+              iconClick: () => {
+                if (n.fromUser) {
+                  markRead(n.id)
+                  navigateTo(`/users/${n.fromUser.id}`, { replace: true })
+                }
+              },
+            })
+          } else if (n.type === 'FOLLOWED_POST') {
+            notifications.value.push({
+              ...n,
+              icon: iconMap[n.type],
+              iconClick: () => {
+                if (n.post) {
+                  markRead(n.id)
+                  navigateTo(`/posts/${n.post.id}`, { replace: true })
+                }
+              },
+            })
+          } else if (n.type === 'POST_SUBSCRIBED' || n.type === 'POST_UNSUBSCRIBED') {
+            notifications.value.push({
+              ...n,
+              icon: iconMap[n.type],
+              iconClick: () => {
+                if (n.post) {
+                  markRead(n.id)
+                  navigateTo(`/posts/${n.post.id}`, { replace: true })
+                }
+              },
+            })
+          } else if (n.type === 'POST_REVIEW_REQUEST') {
+            notifications.value.push({
+              ...n,
+              src: n.fromUser ? n.fromUser.avatar : null,
+              icon: n.fromUser ? undefined : iconMap[n.type],
+              iconClick: () => {
+                if (n.post) {
+                  markRead(n.id)
+                  navigateTo(`/posts/${n.post.id}`, { replace: true })
+                }
+              },
+            })
+          } else if (n.type === 'REGISTER_REQUEST') {
+            notifications.value.push({
+              ...n,
+              icon: iconMap[n.type],
+              iconClick: () => {},
+            })
+          } else {
+            notifications.value.push({
+              ...n,
+              icon: iconMap[n.type],
+            })
+          }
+        }
+      } catch (e) {
+        console.error(e)
+      }
+    }
+  }
+
+  const markRead = async (id) => {
+    if (!id) return
+    const n = notifications.value.find((n) => n.id === id)
+    if (!n || n.read) return
+    n.read = true
+    if (notificationState.unreadCount > 0) notificationState.unreadCount--
+    const ok = await markNotificationsRead([id])
+    if (!ok) {
+      n.read = false
+      notificationState.unreadCount++
+    } else {
+      fetchUnreadCount()
+    }
+  }
+  return {
+    fetchNotifications,
+    markRead,
+    notifications,
+    isLoadingMessage,
+  }
+}
+
+export const { fetchNotifications, markRead, notifications, isLoadingMessage } =
+  createFetchNotifications()