feat: add paginated notification APIs and frontend support

This reverts commit a64fd71bbe.

backend/src/main/java/com/openisle/controller/NotificationController.java

@@ -24,8 +24,19 @@ public class NotificationController {
 
     @GetMapping
     public List<NotificationDto> list(@RequestParam(value = "read", required = false) Boolean read,
+                                      @RequestParam(value = "page", defaultValue = "0") int page,
+                                      @RequestParam(value = "size", defaultValue = "30") int size,
                                       Authentication auth) {
-        return notificationService.listNotifications(auth.getName(), read).stream()
+        return notificationService.listNotifications(auth.getName(), read, page, size).stream()
+                .map(notificationMapper::toDto)
+                .collect(Collectors.toList());
+    }
+
+    @GetMapping("/unread")
+    public List<NotificationDto> listUnread(@RequestParam(value = "page", defaultValue = "0") int page,
+                                            @RequestParam(value = "size", defaultValue = "30") int size,
+                                            Authentication auth) {
+        return notificationService.listNotifications(auth.getName(), false, page, size).stream()
                 .map(notificationMapper::toDto)
                 .collect(Collectors.toList());
     }

backend/src/main/java/com/openisle/repository/NotificationRepository.java

@@ -6,6 +6,8 @@ import com.openisle.model.Post;
 import com.openisle.model.Comment;
 import com.openisle.model.NotificationType;
 import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
 
 import java.util.List;
 
@@ -13,6 +15,8 @@ import java.util.List;
 public interface NotificationRepository extends JpaRepository<Notification, Long> {
     List<Notification> findByUserOrderByCreatedAtDesc(User user);
     List<Notification> findByUserAndReadOrderByCreatedAtDesc(User user, boolean read);
+    Page<Notification> findByUserOrderByCreatedAtDesc(User user, Pageable pageable);
+    Page<Notification> findByUserAndReadOrderByCreatedAtDesc(User user, boolean read, Pageable pageable);
     long countByUserAndRead(User user, boolean read);
     List<Notification> findByPost(Post post);
     List<Notification> findByComment(Comment comment);

backend/src/main/java/com/openisle/service/NotificationService.java

@@ -180,15 +180,21 @@ public class NotificationService {
         userRepository.save(user);
     }
 
-    public List<Notification> listNotifications(String username, Boolean read) {
+    public List<Notification> listNotifications(String username, Boolean read, int page, int size) {
         User user = userRepository.findByUsername(username)
                 .orElseThrow(() -> new com.openisle.exception.NotFoundException("User not found"));
         Set<NotificationType> disabled = user.getDisabledNotificationTypes();
+        org.springframework.data.domain.Pageable pageable =
+                org.springframework.data.domain.PageRequest.of(page, size);
         List<Notification> list;
         if (read == null) {
-            list = notificationRepository.findByUserOrderByCreatedAtDesc(user);
+            list = notificationRepository
+                    .findByUserOrderByCreatedAtDesc(user, pageable)
+                    .getContent();
         } else {
-            list = notificationRepository.findByUserAndReadOrderByCreatedAtDesc(user, read);
+            list = notificationRepository
+                    .findByUserAndReadOrderByCreatedAtDesc(user, read, pageable)
+                    .getContent();
         }
         return list.stream().filter(n -> !disabled.contains(n.getType())).collect(Collectors.toList());
     }

frontend_nuxt/components/InfiniteLoadMore.vue

@@ -0,0 +1,102 @@
+<template>
+  <!-- 当 done 后整个容器自动隐藏，不再占位 -->
+  <div v-show="!done" class="infinite-loadmore">
+    <div v-show="isLoading" class="loading-container bottom-loading" aria-live="polite">
+      <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
+    </div>
+    <!-- 永久存在的底部触发器（由组件内部持有与观察） -->
+    <div ref="sentinel" class="load-more-trigger" aria-hidden="true"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
+
+const props = defineProps({
+  /** 父组件提供：执行“加载下一页”的函数
+   * 返回：
+   *  - boolean：true 表示“已经没有更多数据（done）”
+   *  - { done: boolean }：同上
+   */
+  onLoad: { type: Function, required: true },
+  /** pause=true 时暂停观察（例如首屏/筛选加载过程） */
+  pause: { type: Boolean, default: false },
+  /** 预取范围，默认 200px */
+  rootMargin: { type: String, default: '200px 0px' },
+  /** 触发阈值 */
+  threshold: { type: Number, default: 0 },
+})
+
+const isLoading = ref(false)
+const done = ref(false)
+const sentinel = ref(null)
+let io = null
+
+const stopObserver = () => {
+  if (io) {
+    io.disconnect()
+    io = null
+  }
+}
+
+const startObserver = () => {
+  if (!process.client || props.pause || done.value) return
+  stopObserver()
+  io = new IntersectionObserver(
+    async (entries) => {
+      const e = entries[0]
+      if (!e?.isIntersecting || isLoading.value || done.value) return
+      isLoading.value = true
+      try {
+        const res = await props.onLoad()
+        const finished = typeof res === 'boolean' ? res : !!(res && res.done)
+        if (finished) {
+          done.value = true
+          stopObserver()
+        }
+      } finally {
+        isLoading.value = false
+      }
+    },
+    { root: null, rootMargin: props.rootMargin, threshold: props.threshold },
+  )
+  if (sentinel.value) io.observe(sentinel.value)
+}
+
+onMounted(() => {
+  nextTick(startObserver)
+})
+onBeforeUnmount(stopObserver)
+
+watch(
+  () => props.pause,
+  (p) => {
+    if (p) stopObserver()
+    else nextTick(startObserver)
+  },
+)
+
+/** 父组件可选择性调用，用于外部强制重置（一般直接用 :key 重建更简单） */
+const reset = () => {
+  done.value = false
+  nextTick(startObserver)
+}
+defineExpose({ reset })
+</script>
+
+<style scoped>
+.infinite-loadmore {
+}
+
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100px; /* 与原样式匹配 */
+}
+
+.load-more-trigger {
+  width: 100%;
+  height: 1px;
+}
+</style>

frontend_nuxt/pages/index.vue

@@ -102,25 +102,33 @@
           </div>
         </div>
       </template>
+
       <div v-else-if="selectedTopic === '热门'" class="placeholder-container">
         热门帖子功能开发中，敬请期待。
       </div>
       <div v-else class="placeholder-container">分类浏览功能开发中，敬请期待。</div>
-      <div v-if="isLoadingMore && articles.length > 0" class="loading-container bottom-loading">
-        <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
-      </div>
+
+      <!-- ✅ 通用“底部加载更多”组件（自管 loading/observer/并发） -->
+      <InfiniteLoadMore
+        v-if="articles.length > 0"
+        :key="ioKey"
+        :on-load="fetchNextPage"
+        :pause="pendingFirst"
+        root-margin="200px 0px"
+      />
     </div>
   </div>
 </template>
+
 <script setup>
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, onBeforeUnmount, nextTick, ref, watch } from 'vue'
 import ArticleCategory from '~/components/ArticleCategory.vue'
 import ArticleTags from '~/components/ArticleTags.vue'
 import CategorySelect from '~/components/CategorySelect.vue'
 import SearchDropdown from '~/components/SearchDropdown.vue'
 import TagSelect from '~/components/TagSelect.vue'
+import InfiniteLoadMore from '~/components/InfiniteLoadMore.vue'
 import { getToken } from '~/utils/auth'
-import { useScrollLoadMore } from '~/utils/loadMore'
 import { stripMarkdown } from '~/utils/markdown'
 import { useIsMobile } from '~/utils/screen'
 import TimeManager from '~/utils/time'
@@ -144,8 +152,6 @@ const route = useRoute()
 const tagOptions = ref([])
 const categoryOptions = ref([])
 
-const isLoadingMore = ref(false)
-
 const topics = ref(['最新回复', '最新', '排行榜' /*, '热门', '类别'*/])
 const selectedTopicCookie = useCookie('homeTab')
 const selectedTopic = ref(
@@ -162,7 +168,6 @@ const articles = ref([])
 const page = ref(0)
 const pageSize = 10
 const isMobile = useIsMobile()
-const allLoaded = ref(false)
 
 /** URL 参数 -> 本地筛选值 **/
 const selectedCategorySet = (category) => {
@@ -286,80 +291,54 @@ const {
   },
 )
 
-/** 首屏/筛选变更：重置分页并灌入 firstPage **/
+/** 首屏/筛选变更：重置分页并灌入 firstPage（InfiniteLoadMore 会凭 key 重建状态） **/
 watch(
   firstPage,
   (data) => {
     page.value = 0
     articles.value = [...(data || [])]
-    allLoaded.value = (data?.length || 0) < pageSize
   },
   { immediate: true },
 )
 
-/** —— 滚动加载更多 —— **/
-let inflight = null
+/** —— 提供给 InfiniteLoadMore 的加载函数 —— **/
 const fetchNextPage = async () => {
-  if (allLoaded.value || pendingFirst.value || inflight) return
+  // 若首屏仍在 pending，由组件 pause 控制，这里兜底返回“未完成”
+  if (pendingFirst.value) return false
+
   const nextPage = page.value + 1
-  isLoadingMore.value = true
-  inflight = $fetch(buildUrl({ pageNo: nextPage }), { headers: tokenHeader.value })
-    .then((res) => {
-      const data = Array.isArray(res) ? res : []
-      const mapped = data.map((p) => ({
-        id: p.id,
-        title: p.title,
-        description: p.content,
-        category: p.category,
-        tags: p.tags || [],
-        members: (p.participants || []).map((m) => ({ id: m.id, avatar: m.avatar })),
-        comments: p.commentCount,
-        views: p.views,
-        time: TimeManager.format(
-          selectedTopic.value === '最新回复' ? p.lastReplyAt || p.createdAt : p.createdAt,
-        ),
-        pinned: Boolean(p.pinned ?? p.pinnedAt ?? p.pinned_at),
-        type: p.type,
-      }))
-      articles.value.push(...mapped)
-      if (data.length < pageSize) {
-        allLoaded.value = true
-      } else {
-        page.value = nextPage
-      }
-    })
-    .finally(() => {
-      inflight = null
-      isLoadingMore.value = false
-    })
+  const res = await $fetch(buildUrl({ pageNo: nextPage }), { headers: tokenHeader.value })
+  const data = Array.isArray(res) ? res : []
+  const mapped = data.map((p) => ({
+    id: p.id,
+    title: p.title,
+    description: p.content,
+    category: p.category,
+    tags: p.tags || [],
+    members: (p.participants || []).map((m) => ({ id: m.id, avatar: m.avatar })),
+    comments: p.commentCount,
+    views: p.views,
+    time: TimeManager.format(
+      selectedTopic.value === '最新回复' ? p.lastReplyAt || p.createdAt : p.createdAt,
+    ),
+    pinned: Boolean(p.pinned ?? p.pinnedAt ?? p.pinned_at),
+    type: p.type,
+  }))
+  articles.value.push(...mapped)
+
+  const done = data.length < pageSize
+  if (!done) page.value = nextPage
+  return done // ✅ 返回给组件，决定是否停止观察
 }
 
-/** 绑定滚动加载（避免挂载瞬间触发） **/
-let initialReady = false
-const loadMoreGuarded = async () => {
-  if (!initialReady) return
-  await fetchNextPage()
-}
-useScrollLoadMore(loadMoreGuarded)
-watch(
-  articles,
-  () => {
-    if (!initialReady && articles.value.length) initialReady = true
-  },
-  { immediate: true },
-)
-
-/** 切换分类/标签/Tab：useAsyncData 已 watch，这里只需确保 options 加载 **/
+/** 选项首屏加载与状态持久 **/
 watch([selectedCategory, selectedTags], () => {
   loadOptions()
 })
 watch(selectedTopic, (val) => {
-  // 仅当需要额外选项时加载
   loadOptions()
   selectedTopicCookie.value = val
-  if (process.client) {
-    localStorage.setItem('homeTab', val)
-  }
+  if (process.client) localStorage.setItem('homeTab', val)
 })
 
 /** 选项首屏加载：服务端执行一次；客户端兜底 **/
@@ -368,9 +347,14 @@ if (import.meta.server) {
 }
 onMounted(() => {
   if (categoryOptions.value.length === 0 && tagOptions.value.length === 0) loadOptions()
-
   window.addEventListener('refresh-home', refreshFirst)
 })
+onBeforeUnmount(() => {
+  window.removeEventListener('refresh-home', refreshFirst)
+})
+
+/** 供 InfiniteLoadMore 重建用的 key：筛选/Tab 改变即重建内部状态 */
+const ioKey = computed(() => asyncKey.value.join('::'))
 
 /** 其他工具函数 **/
 const sanitizeDescription = (text) => stripMarkdown(text)
@@ -407,6 +391,7 @@ const sanitizeDescription = (text) => stripMarkdown(text)
   height: 200px;
 }
 
+/* 这里的 bottom-loading 可保留给首屏 loading 使用；InfiniteLoadMore 自带同名样式也兼容 */
 .bottom-loading {
   height: 100px;
 }

frontend_nuxt/pages/login.vue

@@ -35,7 +35,7 @@
     </div>
 
     <div class="other-login-page-content">
-      <div class="login-page-button" @click="googleAuthorize">
+      <div class="login-page-button" @click="loginWithGoogle">
         <img class="login-page-button-icon" src="../assets/icons/google.svg" alt="Google Logo" />
         <div class="login-page-button-text">Google 登录</div>
       </div>
@@ -106,6 +106,9 @@ const submitLogin = async () => {
   }
 }
 
+const loginWithGoogle = () => {
+  googleAuthorize()
+}
 const loginWithGithub = () => {
   githubAuthorize()
 }

frontend_nuxt/pages/message.vue

@@ -505,13 +505,16 @@
             </div>
           </template>
         </BaseTimeline>
+        <div v-if="hasMore" class="load-more">
+          <button class="load-more-button" @click="loadMore">加载更多</button>
+        </div>
       </div>
     </template>
   </div>
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import BasePlaceholder from '~/components/BasePlaceholder.vue'
 import BaseTimeline from '~/components/BaseTimeline.vue'
 import NotificationContainer from '~/components/NotificationContainer.vue'
@@ -519,12 +522,17 @@ import { toast } from '~/main'
 import { authState, getToken } from '~/utils/auth'
 import { stripMarkdownLength } from '~/utils/markdown'
 import {
-  fetchNotifications,
+  fetchAllNotifications,
+  fetchUnreadNotifications,
   fetchUnreadCount,
-  isLoadingMessage,
+  isLoadingAll,
+  isLoadingUnread,
   markRead,
-  notifications,
+  notificationsAll,
+  notificationsUnread,
   markAllRead,
+  fetchNotificationPreferences,
+  updateNotificationPreference,
 } from '~/utils/notification'
 import TimeManager from '~/utils/time'
 
@@ -535,8 +543,18 @@ const selectedTab = ref(
   ['all', 'unread', 'control'].includes(route.query.tab) ? route.query.tab : 'unread',
 )
 const notificationPrefs = ref([])
+const pageAll = ref(0)
+const pageUnread = ref(0)
+const hasMoreAll = ref(true)
+const hasMoreUnread = ref(true)
 const filteredNotifications = computed(() =>
-  selectedTab.value === 'all' ? notifications.value : notifications.value.filter((n) => !n.read),
+  selectedTab.value === 'all' ? notificationsAll.value : notificationsUnread.value,
+)
+const isLoadingMessage = computed(() =>
+  selectedTab.value === 'all' ? isLoadingAll.value : isLoadingUnread.value,
+)
+const hasMore = computed(() =>
+  selectedTab.value === 'all' ? hasMoreAll.value : hasMoreUnread.value,
 )
 
 const fetchPrefs = async () => {
@@ -547,7 +565,14 @@ const togglePref = async (pref) => {
   const ok = await updateNotificationPreference(pref.type, !pref.enabled)
   if (ok) {
     pref.enabled = !pref.enabled
-    await fetchNotifications()
+    pageAll.value = 0
+    pageUnread.value = 0
+    const countAll = await fetchAllNotifications(0)
+    const countUnread = await fetchUnreadNotifications(0)
+    pageAll.value = 1
+    pageUnread.value = 1
+    hasMoreAll.value = countAll === 30
+    hasMoreUnread.value = countUnread === 30
     await fetchUnreadCount()
   } else {
     toast.error('操作失败')
@@ -627,9 +652,34 @@ const formatType = (t) => {
   }
 }
 
-onActivated(() => {
-  fetchNotifications()
-  fetchPrefs()
+const loadMore = async () => {
+  if (selectedTab.value === 'all') {
+    const c = await fetchAllNotifications(pageAll.value)
+    pageAll.value++
+    if (c < 30) hasMoreAll.value = false
+  } else {
+    const c = await fetchUnreadNotifications(pageUnread.value)
+    pageUnread.value++
+    if (c < 30) hasMoreUnread.value = false
+  }
+}
+
+onMounted(async () => {
+  await fetchPrefs()
+  await loadMore()
+  await fetchUnreadCount()
+})
+
+watch(selectedTab, async (tab) => {
+  if (tab === 'all' && notificationsAll.value.length === 0) {
+    pageAll.value = 0
+    hasMoreAll.value = true
+    await loadMore()
+  } else if (tab === 'unread' && notificationsUnread.value.length === 0) {
+    pageUnread.value = 0
+    hasMoreUnread.value = true
+    await loadMore()
+  }
 })
 </script>
 
@@ -644,8 +694,6 @@ onActivated(() => {
 .message-page {
   background-color: var(--background-color);
   overflow-x: hidden;
-  height: calc(100vh - var(--header-height));
-  overflow-y: auto;
 }
 
 .message-page-header {
@@ -693,6 +741,19 @@ onActivated(() => {
   height: 100%;
 }
 
+.load-more {
+  text-align: center;
+}
+
+.load-more-button {
+  margin: 10px auto;
+  padding: 6px 12px;
+  border: 1px solid var(--normal-border-color);
+  border-radius: 6px;
+  background: transparent;
+  cursor: pointer;
+}
+
 .notif-content {
   display: flex;
   flex-direction: column;

frontend_nuxt/utils/loadMore.js

@@ -1,38 +0,0 @@
-import { ref, onMounted, onUnmounted, onActivated, nextTick } from 'vue'
-
-export function useScrollLoadMore(loadMore, offset = 50) {
-  const savedScrollTop = ref(0)
-
-  const handleScroll = () => {
-    if (!process.client) return
-    const scrollTop = window.scrollY || document.documentElement.scrollTop
-    const scrollHeight = document.documentElement.scrollHeight
-    const windowHeight = window.innerHeight
-    savedScrollTop.value = scrollTop
-    if (scrollHeight - (scrollTop + windowHeight) <= offset) {
-      loadMore()
-    }
-  }
-
-  onMounted(() => {
-    if (process.client) {
-      window.addEventListener('scroll', handleScroll, { passive: true })
-    }
-  })
-
-  onUnmounted(() => {
-    if (process.client) {
-      window.removeEventListener('scroll', handleScroll)
-    }
-  })
-
-  onActivated(() => {
-    if (process.client) {
-      nextTick(() => {
-        window.scrollTo({ top: savedScrollTop.value })
-      })
-    }
-  })
-
-  return { savedScrollTop }
-}

frontend_nuxt/utils/notification.js

@@ -116,210 +116,251 @@ export async function updateNotificationPreference(type, enabled) {
  * @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()
+  const notificationsAll = ref([])
+  const notificationsUnread = ref([])
+  const isLoadingAll = ref(false)
+  const isLoadingUnread = ref(false)
+  const pageSize = 30
 
-        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],
-            })
+  function pushNotification(n, target) {
+    if (n.type === 'COMMENT_REPLY') {
+      target.push({
+        ...n,
+        src: n.comment.author.avatar,
+        iconClick: () => {
+          markRead(n.id)
+          navigateTo(`/users/${n.comment.author.id}`, { replace: true })
+        },
+      })
+    } else if (n.type === 'REACTION') {
+      target.push({
+        ...n,
+        emoji: reactionEmojiMap[n.reactionType],
+        iconClick: () => {
+          if (n.fromUser) {
+            markRead(n.id)
+            navigateTo(`/users/${n.fromUser.id}`, { replace: true })
           }
-        }
-      } catch (e) {
-        console.error(e)
-      }
+        },
+      })
+    } else if (n.type === 'POST_VIEWED') {
+      target.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') {
+      target.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') {
+      target.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') {
+      target.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') {
+      target.push({
+        ...n,
+        src: n.comment.author.avatar,
+        iconClick: () => {
+          markRead(n.id)
+          navigateTo(`/users/${n.comment.author.id}`, { replace: true })
+        },
+      })
+    } else if (n.type === 'MENTION') {
+      target.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') {
+      target.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') {
+      target.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') {
+      target.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') {
+      target.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') {
+      target.push({
+        ...n,
+        icon: iconMap[n.type],
+        iconClick: () => {},
+      })
+    } else {
+      target.push({
+        ...n,
+        icon: iconMap[n.type],
+      })
     }
   }
 
-  const markRead = async (id) => {
+  async function fetchAllNotifications(page = 0) {
+    const config = useRuntimeConfig()
+    const API_BASE_URL = config.public.apiBaseUrl
+    try {
+      const token = getToken()
+      if (!token) {
+        toast.error('请先登录')
+        return
+      }
+      isLoadingAll.value = true
+      const res = await fetch(`${API_BASE_URL}/api/notifications?page=${page}&size=${pageSize}`, {
+        headers: { Authorization: `Bearer ${token}` },
+      })
+      isLoadingAll.value = false
+      if (!res.ok) {
+        toast.error('获取通知失败')
+        return
+      }
+      const data = await res.json()
+      if (page === 0) notificationsAll.value = []
+      for (const n of data) {
+        pushNotification(n, notificationsAll.value)
+      }
+      return data.length
+    } catch (e) {
+      console.error(e)
+      return 0
+    }
+  }
+
+  async function fetchUnreadNotifications(page = 0) {
+    const config = useRuntimeConfig()
+    const API_BASE_URL = config.public.apiBaseUrl
+    try {
+      const token = getToken()
+      if (!token) {
+        toast.error('请先登录')
+        return
+      }
+      isLoadingUnread.value = true
+      const res = await fetch(
+        `${API_BASE_URL}/api/notifications/unread?page=${page}&size=${pageSize}`,
+        { headers: { Authorization: `Bearer ${token}` } },
+      )
+      isLoadingUnread.value = false
+      if (!res.ok) {
+        toast.error('获取通知失败')
+        return
+      }
+      const data = await res.json()
+      if (page === 0) notificationsUnread.value = []
+      for (const n of data) {
+        pushNotification(n, notificationsUnread.value)
+      }
+      return data.length
+    } catch (e) {
+      console.error(e)
+      return 0
+    }
+  }
+
+  async function markRead(id) {
     if (!id) return
-    const n = notifications.value.find((n) => n.id === id)
-    if (!n || n.read) return
-    n.read = true
+    const nAll = notificationsAll.value.find((n) => n.id === id)
+    const nUnreadIndex = notificationsUnread.value.findIndex((n) => n.id === id)
+    const target = nAll || notificationsUnread.value[nUnreadIndex]
+    if (!target || target.read) return
+    target.read = true
+    if (nUnreadIndex !== -1) notificationsUnread.value.splice(nUnreadIndex, 1)
     if (notificationState.unreadCount > 0) notificationState.unreadCount--
     const ok = await markNotificationsRead([id])
     if (!ok) {
-      n.read = false
+      target.read = false
+      if (nUnreadIndex !== -1) notificationsUnread.value.splice(nUnreadIndex, 0, target)
       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) => {
+  async function markAllRead() {
+    const ids = [
+      ...new Set(
+        [...notificationsAll.value, ...notificationsUnread.value]
+          .filter((n) => n.type !== 'REGISTER_REQUEST' && !n.read)
+          .map((n) => n.id),
+      ),
+    ]
+    if (ids.length === 0) return
+    notificationsAll.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)
+    notificationsUnread.value = []
+    notificationState.unreadCount = 0
+    const ok = await markNotificationsRead(ids)
     if (!ok) {
-      notifications.value.forEach((n) => {
-        if (idsToMark.includes(n.id)) n.read = false
-      })
       await fetchUnreadCount()
       return
     }
@@ -330,15 +371,26 @@ function createFetchNotifications() {
       toast.success('已读所有消息')
     }
   }
+
   return {
-    fetchNotifications,
-    markRead,
-    notifications,
-    isLoadingMessage,
+    fetchAllNotifications,
+    fetchUnreadNotifications,
     markRead,
+    notificationsAll,
+    notificationsUnread,
+    isLoadingAll,
+    isLoadingUnread,
     markAllRead,
   }
 }
 
-export const { fetchNotifications, markRead, notifications, isLoadingMessage, markAllRead } =
-  createFetchNotifications()
+export const {
+  fetchAllNotifications,
+  fetchUnreadNotifications,
+  markRead,
+  notificationsAll,
+  notificationsUnread,
+  isLoadingAll,
+  isLoadingUnread,
+  markAllRead,
+} = createFetchNotifications()