Revert "feat: support paginated notifications"

This reverts commit a64fd71bbe.
2026-03-03 02:20:49 +08:00 · 2025-08-19 19:01:54 +08:00
parent 3258a42b44
commit 3f2829cd37
7 changed files with 185 additions and 254 deletions
--- a/frontend_nuxt/pages/message.vue
+++ b/frontend_nuxt/pages/message.vue
@@ -53,13 +53,13 @@
      </div>

      <BasePlaceholder
-        v-else-if="notifications.length === 0"
+        v-else-if="filteredNotifications.length === 0"
        text="暂时没有消息 :)"
        icon="fas fa-inbox"
      />

-      <div class="timeline-container" v-if="notifications.length > 0">
-        <BaseTimeline :items="notifications">
+      <div class="timeline-container" v-if="filteredNotifications.length > 0">
+        <BaseTimeline :items="filteredNotifications">
          <template #item="{ item }">
            <div class="notif-content" :class="{ read: item.read }">
              <span v-if="!item.read" class="unread-dot"></span>
@@ -505,17 +505,15 @@
            </div>
          </template>
        </BaseTimeline>
-        <InfiniteLoadMore :key="selectedTab" :on-load="fetchMore" :pause="isLoadingMessage" />
      </div>
    </template>
  </div>
 </template>

 <script setup>
-import { ref, watch, onActivated } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import BasePlaceholder from '~/components/BasePlaceholder.vue'
 import BaseTimeline from '~/components/BaseTimeline.vue'
-import InfiniteLoadMore from '~/components/InfiniteLoadMore.vue'
 import NotificationContainer from '~/components/NotificationContainer.vue'
 import { toast } from '~/main'
 import { authState, getToken } from '~/utils/auth'
@@ -527,8 +525,6 @@ import {
  markRead,
  notifications,
  markAllRead,
-  fetchNotificationPreferences,
-  updateNotificationPreference,
 } from '~/utils/notification'
 import TimeManager from '~/utils/time'

@@ -539,16 +535,9 @@ const selectedTab = ref(
  ['all', 'unread', 'control'].includes(route.query.tab) ? route.query.tab : 'unread',
 )
 const notificationPrefs = ref([])
-
-const fetchMore = () => fetchNotifications()
-
-const loadInitial = async () => {
-  await fetchNotifications({ reset: true, read: selectedTab.value === 'unread' ? false : null })
-}
-
-watch(selectedTab, async (t) => {
-  await fetchNotifications({ reset: true, read: t === 'unread' ? false : null })
-})
+const filteredNotifications = computed(() =>
+  selectedTab.value === 'all' ? notifications.value : notifications.value.filter((n) => !n.read),
+)

 const fetchPrefs = async () => {
  notificationPrefs.value = await fetchNotificationPreferences()
@@ -558,7 +547,7 @@ const togglePref = async (pref) => {
  const ok = await updateNotificationPreference(pref.type, !pref.enabled)
  if (ok) {
    pref.enabled = !pref.enabled
-    await fetchNotifications({ reset: true, read: selectedTab.value === 'unread' ? false : null })
+    await fetchNotifications()
    await fetchUnreadCount()
  } else {
    toast.error('操作失败')
@@ -639,7 +628,7 @@ const formatType = (t) => {
 }

 onActivated(() => {
-  loadInitial()
+  fetchNotifications()
  fetchPrefs()
 })
 </script>
--- a/frontend_nuxt/utils/notification.js
+++ b/frontend_nuxt/utils/notification.js
@@ -118,189 +118,175 @@ export async function updateNotificationPreference(type, enabled) {
 function createFetchNotifications() {
  const notifications = ref([])
  const isLoadingMessage = ref(false)
-  const page = ref(0)
-  const pageSize = 30
-  const readFilter = ref(null)
-  const fetchNotifications = async ({ reset = false, read = null } = {}) => {
+  const fetchNotifications = async () => {
    const config = useRuntimeConfig()
    const API_BASE_URL = config.public.apiBaseUrl
-    if (isLoadingMessage.value) return false
-    try {
-      const token = getToken()
-      if (!token) {
-        toast.error('请先登录')
-        return true
-      }
-      if (reset) {
-        notifications.value = []
-        page.value = 0
-        readFilter.value = read
-      }
-      isLoadingMessage.value = true
-      let url = `${API_BASE_URL}/api/notifications`
-      if (readFilter.value === false) url += '/unread'
-      url += `?page=${page.value}&size=${pageSize}`
-      const res = await fetch(url, {
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-      })
-      isLoadingMessage.value = false
-      if (!res.ok) {
-        toast.error('获取通知失败')
-        return true
-      }
-      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],
-          })
+    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 done = data.length < pageSize
-      if (!done) page.value++
-      return done
-    } catch (e) {
-      console.error(e)
-      isLoadingMessage.value = false
-      return true
    }
  }

@@ -349,6 +335,7 @@ function createFetchNotifications() {
    markRead,
    notifications,
    isLoadingMessage,
+    markRead,
    markAllRead,
  }
 }