From 35bcd2cdc225f3be45b666f0408096c90dc02b56 Mon Sep 17 00:00:00 2001
From: tim <nagisa12164@163.com>
Date: Tue, 19 Aug 2025 16:52:34 +0800
Subject: [PATCH 01/16] =?UTF-8?q?fix:=20=E6=94=AF=E6=8C=81=E5=88=86?=
 =?UTF-8?q?=E9=A1=B5=E5=8A=A0=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend_nuxt/components/InfiniteLoadMore.vue | 102 ++++++++++++++++
 frontend_nuxt/pages/index.vue                 | 113 ++++++++----------
 frontend_nuxt/utils/loadMore.js               |  38 ------
 3 files changed, 151 insertions(+), 102 deletions(-)
 create mode 100644 frontend_nuxt/components/InfiniteLoadMore.vue
 delete mode 100644 frontend_nuxt/utils/loadMore.js

diff --git a/frontend_nuxt/components/InfiniteLoadMore.vue b/frontend_nuxt/components/InfiniteLoadMore.vue
new file mode 100644
index 000000000..441c0ecf4
--- /dev/null
+++ b/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>
diff --git a/frontend_nuxt/pages/index.vue b/frontend_nuxt/pages/index.vue
index f324116d6..6be93f47c 100644
--- a/frontend_nuxt/pages/index.vue
+++ b/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;
 }
diff --git a/frontend_nuxt/utils/loadMore.js b/frontend_nuxt/utils/loadMore.js
deleted file mode 100644
index d7d6813aa..000000000
--- a/frontend_nuxt/utils/loadMore.js
+++ /dev/null
@@ -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 }
-}

From df7ca776520ccf2198c76fe5da3af19cb8fb04b5 Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Tue, 19 Aug 2025 17:07:27 +0800
Subject: [PATCH 02/16] feat: add paginated notification API and frontend
 support

---
 .../controller/NotificationController.java    |  12 +-
 .../repository/NotificationRepository.java    |   5 +
 .../openisle/service/NotificationService.java |  15 +-
 .../NotificationControllerTest.java           |  19 +-
 .../service/NotificationServiceTest.java      |   7 +-
 frontend_nuxt/pages/message.vue               |  31 +-
 frontend_nuxt/utils/notification.js           | 352 +++++++++---------
 7 files changed, 256 insertions(+), 185 deletions(-)

diff --git a/backend/src/main/java/com/openisle/controller/NotificationController.java b/backend/src/main/java/com/openisle/controller/NotificationController.java
index d25d2a808..1149bff37 100644
--- a/backend/src/main/java/com/openisle/controller/NotificationController.java
+++ b/backend/src/main/java/com/openisle/controller/NotificationController.java
@@ -23,9 +23,17 @@ public class NotificationController {
     private final NotificationMapper notificationMapper;
 
     @GetMapping
-    public List<NotificationDto> list(@RequestParam(value = "read", required = false) Boolean read,
+    public List<NotificationDto> list(@RequestParam(value = "page", defaultValue = "0") int page,
                                       Authentication auth) {
-        return notificationService.listNotifications(auth.getName(), read).stream()
+        return notificationService.listNotifications(auth.getName(), null, page).stream()
+                .map(notificationMapper::toDto)
+                .collect(Collectors.toList());
+    }
+
+    @GetMapping("/unread")
+    public List<NotificationDto> listUnread(@RequestParam(value = "page", defaultValue = "0") int page,
+                                            Authentication auth) {
+        return notificationService.listNotifications(auth.getName(), false, page).stream()
                 .map(notificationMapper::toDto)
                 .collect(Collectors.toList());
     }
diff --git a/backend/src/main/java/com/openisle/repository/NotificationRepository.java b/backend/src/main/java/com/openisle/repository/NotificationRepository.java
index 1e897b3a0..04a2b944f 100644
--- a/backend/src/main/java/com/openisle/repository/NotificationRepository.java
+++ b/backend/src/main/java/com/openisle/repository/NotificationRepository.java
@@ -5,6 +5,8 @@ import com.openisle.model.User;
 import com.openisle.model.Post;
 import com.openisle.model.Comment;
 import com.openisle.model.NotificationType;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
 import org.springframework.data.jpa.repository.JpaRepository;
 
 import java.util.List;
@@ -13,6 +15,9 @@ 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);
diff --git a/backend/src/main/java/com/openisle/service/NotificationService.java b/backend/src/main/java/com/openisle/service/NotificationService.java
index 6ecf571e8..d8d39594f 100644
--- a/backend/src/main/java/com/openisle/service/NotificationService.java
+++ b/backend/src/main/java/com/openisle/service/NotificationService.java
@@ -24,6 +24,8 @@ import java.util.List;
 import java.util.ArrayList;
 import java.util.concurrent.Executor;
 import java.util.stream.Collectors;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
 
 /** Service for creating and retrieving notifications. */
 @Service
@@ -181,16 +183,21 @@ public class NotificationService {
     }
 
     public List<Notification> listNotifications(String username, Boolean read) {
+        return listNotifications(username, read, 0);
+    }
+
+    public List<Notification> listNotifications(String username, Boolean read, int page) {
         User user = userRepository.findByUsername(username)
                 .orElseThrow(() -> new com.openisle.exception.NotFoundException("User not found"));
         Set<NotificationType> disabled = user.getDisabledNotificationTypes();
-        List<Notification> list;
+        Page<Notification> p;
+        Pageable pageable = org.springframework.data.domain.PageRequest.of(page, 50);
         if (read == null) {
-            list = notificationRepository.findByUserOrderByCreatedAtDesc(user);
+            p = notificationRepository.findByUserOrderByCreatedAtDesc(user, pageable);
         } else {
-            list = notificationRepository.findByUserAndReadOrderByCreatedAtDesc(user, read);
+            p = notificationRepository.findByUserAndReadOrderByCreatedAtDesc(user, read, pageable);
         }
-        return list.stream().filter(n -> !disabled.contains(n.getType())).collect(Collectors.toList());
+        return p.getContent().stream().filter(n -> !disabled.contains(n.getType())).collect(Collectors.toList());
     }
 
     public void markRead(String username, List<Long> ids) {
diff --git a/backend/src/test/java/com/openisle/controller/NotificationControllerTest.java b/backend/src/test/java/com/openisle/controller/NotificationControllerTest.java
index 6b74440a1..1702f26d3 100644
--- a/backend/src/test/java/com/openisle/controller/NotificationControllerTest.java
+++ b/backend/src/test/java/com/openisle/controller/NotificationControllerTest.java
@@ -45,7 +45,7 @@ class NotificationControllerTest {
         p.setId(2L);
         n.setPost(p);
         n.setCreatedAt(LocalDateTime.now());
-        when(notificationService.listNotifications("alice", null))
+        when(notificationService.listNotifications("alice", null, 0))
                 .thenReturn(List.of(n));
 
         NotificationDto dto = new NotificationDto();
@@ -62,6 +62,23 @@ class NotificationControllerTest {
                 .andExpect(jsonPath("$[0].post.id").value(2));
     }
 
+    @Test
+    void listUnreadNotifications() throws Exception {
+        Notification n = new Notification();
+        n.setId(3L);
+        n.setType(NotificationType.POST_VIEWED);
+        when(notificationService.listNotifications("alice", false, 0)).thenReturn(List.of(n));
+
+        NotificationDto dto = new NotificationDto();
+        dto.setId(3L);
+        when(notificationMapper.toDto(n)).thenReturn(dto);
+
+        mockMvc.perform(get("/api/notifications/unread")
+                        .principal(new UsernamePasswordAuthenticationToken("alice", "p")))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$[0].id").value(3));
+    }
+
     @Test
     void markReadEndpoint() throws Exception {
         mockMvc.perform(post("/api/notifications/read")
diff --git a/backend/src/test/java/com/openisle/service/NotificationServiceTest.java b/backend/src/test/java/com/openisle/service/NotificationServiceTest.java
index a01d3c95b..0e7048a17 100644
--- a/backend/src/test/java/com/openisle/service/NotificationServiceTest.java
+++ b/backend/src/test/java/com/openisle/service/NotificationServiceTest.java
@@ -65,12 +65,15 @@ class NotificationServiceTest {
         when(uRepo.findByUsername("bob")).thenReturn(Optional.of(user));
 
         Notification n = new Notification();
-        when(nRepo.findByUserOrderByCreatedAtDesc(user)).thenReturn(List.of(n));
+        org.springframework.data.domain.Page<Notification> page =
+                new org.springframework.data.domain.PageImpl<>(List.of(n));
+        when(nRepo.findByUserOrderByCreatedAtDesc(eq(user), any(org.springframework.data.domain.Pageable.class)))
+                .thenReturn(page);
 
         List<Notification> list = service.listNotifications("bob", null);
 
         assertEquals(1, list.size());
-        verify(nRepo).findByUserOrderByCreatedAtDesc(user);
+        verify(nRepo).findByUserOrderByCreatedAtDesc(eq(user), any(org.springframework.data.domain.Pageable.class));
     }
 
     @Test
diff --git a/frontend_nuxt/pages/message.vue b/frontend_nuxt/pages/message.vue
index 461d8f4bb..fcc8f379b 100644
--- a/frontend_nuxt/pages/message.vue
+++ b/frontend_nuxt/pages/message.vue
@@ -53,13 +53,13 @@
       </div>
 
       <BasePlaceholder
-        v-else-if="filteredNotifications.length === 0"
+        v-else-if="notifications.length === 0"
         text="暂时没有消息 :)"
         icon="fas fa-inbox"
       />
 
-      <div class="timeline-container" v-if="filteredNotifications.length > 0">
-        <BaseTimeline :items="filteredNotifications">
+      <div class="timeline-container" v-if="notifications.length > 0">
+        <BaseTimeline :items="notifications">
           <template #item="{ item }">
             <div class="notif-content" :class="{ read: item.read }">
               <span v-if="!item.read" class="unread-dot"></span>
@@ -505,16 +505,18 @@
             </div>
           </template>
         </BaseTimeline>
+        <InfiniteLoadMore :key="ioKey" :on-load="fetchNextPage" :pause="isLoadingMessage" />
       </div>
     </template>
   </div>
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from 'vue'
+import { onActivated, ref, watch } from 'vue'
 import BasePlaceholder from '~/components/BasePlaceholder.vue'
 import BaseTimeline from '~/components/BaseTimeline.vue'
 import NotificationContainer from '~/components/NotificationContainer.vue'
+import InfiniteLoadMore from '~/components/InfiniteLoadMore.vue'
 import { toast } from '~/main'
 import { authState, getToken } from '~/utils/auth'
 import { stripMarkdownLength } from '~/utils/markdown'
@@ -525,6 +527,8 @@ import {
   markRead,
   notifications,
   markAllRead,
+  fetchNotificationPreferences,
+  updateNotificationPreference,
 } from '~/utils/notification'
 import TimeManager from '~/utils/time'
 
@@ -535,9 +539,7 @@ const selectedTab = ref(
   ['all', 'unread', 'control'].includes(route.query.tab) ? route.query.tab : 'unread',
 )
 const notificationPrefs = ref([])
-const filteredNotifications = computed(() =>
-  selectedTab.value === 'all' ? notifications.value : notifications.value.filter((n) => !n.read),
-)
+const ioKey = ref(0)
 
 const fetchPrefs = async () => {
   notificationPrefs.value = await fetchNotificationPreferences()
@@ -547,7 +549,7 @@ const togglePref = async (pref) => {
   const ok = await updateNotificationPreference(pref.type, !pref.enabled)
   if (ok) {
     pref.enabled = !pref.enabled
-    await fetchNotifications()
+    await fetchNotifications(selectedTab.value, true)
     await fetchUnreadCount()
   } else {
     toast.error('操作失败')
@@ -628,9 +630,20 @@ const formatType = (t) => {
 }
 
 onActivated(() => {
-  fetchNotifications()
+  fetchNotifications(selectedTab.value, true)
   fetchPrefs()
 })
+
+watch(selectedTab, (tab) => {
+  if (tab !== 'control') {
+    fetchNotifications(tab, true)
+  } else {
+    fetchPrefs()
+  }
+  ioKey.value++
+})
+
+const fetchNextPage = () => fetchNotifications(selectedTab.value)
 </script>
 
 <style scoped>
diff --git a/frontend_nuxt/utils/notification.js b/frontend_nuxt/utils/notification.js
index 7c0245b94..520c06eec 100644
--- a/frontend_nuxt/utils/notification.js
+++ b/frontend_nuxt/utils/notification.js
@@ -118,175 +118,194 @@ export async function updateNotificationPreference(type, enabled) {
 function createFetchNotifications() {
   const notifications = ref([])
   const isLoadingMessage = ref(false)
-  const fetchNotifications = async () => {
+  const page = ref(0)
+  const finished = ref(false)
+  const currentTab = ref('all')
+
+  const fetchNotifications = async (tab = 'all', reset = false) => {
     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)
+    try {
+      const token = getToken()
+      if (!token) {
+        toast.error('请先登录')
+        return true
       }
+      if (reset || tab !== currentTab.value) {
+        notifications.value = []
+        page.value = 0
+        finished.value = false
+        currentTab.value = tab
+      }
+      if (finished.value) return true
+      isLoadingMessage.value = true
+      let url = `${API_BASE_URL}/api/notifications`
+      if (currentTab.value === 'unread') url += '/unread'
+      url += `?page=${page.value}`
+      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)
+                navigateTo(`/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)
+                navigateTo(`/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],
+          })
+        }
+      }
+      const done = data.length < 50
+      if (!done) {
+        page.value++
+      } else {
+        finished.value = true
+      }
+      return done
+    } catch (e) {
+      console.error(e)
+      isLoadingMessage.value = false
+      return true
     }
   }
 
@@ -335,7 +354,6 @@ function createFetchNotifications() {
     markRead,
     notifications,
     isLoadingMessage,
-    markRead,
     markAllRead,
   }
 }

From df49b21620d1d86ef91c21f6234138a87cc899b9 Mon Sep 17 00:00:00 2001
From: tim <nagisa12164@163.com>
Date: Tue, 19 Aug 2025 17:23:36 +0800
Subject: [PATCH 03/16] Revert "feat: add paginated notification API and
 frontend support"

This reverts commit df7ca776520ccf2198c76fe5da3af19cb8fb04b5.
---
 .../controller/NotificationController.java    |  12 +-
 .../repository/NotificationRepository.java    |   5 -
 .../openisle/service/NotificationService.java |  15 +-
 .../NotificationControllerTest.java           |  19 +-
 .../service/NotificationServiceTest.java      |   7 +-
 frontend_nuxt/pages/message.vue               |  31 +-
 frontend_nuxt/utils/notification.js           | 350 +++++++++---------
 7 files changed, 184 insertions(+), 255 deletions(-)

diff --git a/backend/src/main/java/com/openisle/controller/NotificationController.java b/backend/src/main/java/com/openisle/controller/NotificationController.java
index 1149bff37..d25d2a808 100644
--- a/backend/src/main/java/com/openisle/controller/NotificationController.java
+++ b/backend/src/main/java/com/openisle/controller/NotificationController.java
@@ -23,17 +23,9 @@ public class NotificationController {
     private final NotificationMapper notificationMapper;
 
     @GetMapping
-    public List<NotificationDto> list(@RequestParam(value = "page", defaultValue = "0") int page,
+    public List<NotificationDto> list(@RequestParam(value = "read", required = false) Boolean read,
                                       Authentication auth) {
-        return notificationService.listNotifications(auth.getName(), null, page).stream()
-                .map(notificationMapper::toDto)
-                .collect(Collectors.toList());
-    }
-
-    @GetMapping("/unread")
-    public List<NotificationDto> listUnread(@RequestParam(value = "page", defaultValue = "0") int page,
-                                            Authentication auth) {
-        return notificationService.listNotifications(auth.getName(), false, page).stream()
+        return notificationService.listNotifications(auth.getName(), read).stream()
                 .map(notificationMapper::toDto)
                 .collect(Collectors.toList());
     }
diff --git a/backend/src/main/java/com/openisle/repository/NotificationRepository.java b/backend/src/main/java/com/openisle/repository/NotificationRepository.java
index 04a2b944f..1e897b3a0 100644
--- a/backend/src/main/java/com/openisle/repository/NotificationRepository.java
+++ b/backend/src/main/java/com/openisle/repository/NotificationRepository.java
@@ -5,8 +5,6 @@ import com.openisle.model.User;
 import com.openisle.model.Post;
 import com.openisle.model.Comment;
 import com.openisle.model.NotificationType;
-import org.springframework.data.domain.Page;
-import org.springframework.data.domain.Pageable;
 import org.springframework.data.jpa.repository.JpaRepository;
 
 import java.util.List;
@@ -15,9 +13,6 @@ 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);
diff --git a/backend/src/main/java/com/openisle/service/NotificationService.java b/backend/src/main/java/com/openisle/service/NotificationService.java
index d8d39594f..6ecf571e8 100644
--- a/backend/src/main/java/com/openisle/service/NotificationService.java
+++ b/backend/src/main/java/com/openisle/service/NotificationService.java
@@ -24,8 +24,6 @@ import java.util.List;
 import java.util.ArrayList;
 import java.util.concurrent.Executor;
 import java.util.stream.Collectors;
-import org.springframework.data.domain.Page;
-import org.springframework.data.domain.Pageable;
 
 /** Service for creating and retrieving notifications. */
 @Service
@@ -183,21 +181,16 @@ public class NotificationService {
     }
 
     public List<Notification> listNotifications(String username, Boolean read) {
-        return listNotifications(username, read, 0);
-    }
-
-    public List<Notification> listNotifications(String username, Boolean read, int page) {
         User user = userRepository.findByUsername(username)
                 .orElseThrow(() -> new com.openisle.exception.NotFoundException("User not found"));
         Set<NotificationType> disabled = user.getDisabledNotificationTypes();
-        Page<Notification> p;
-        Pageable pageable = org.springframework.data.domain.PageRequest.of(page, 50);
+        List<Notification> list;
         if (read == null) {
-            p = notificationRepository.findByUserOrderByCreatedAtDesc(user, pageable);
+            list = notificationRepository.findByUserOrderByCreatedAtDesc(user);
         } else {
-            p = notificationRepository.findByUserAndReadOrderByCreatedAtDesc(user, read, pageable);
+            list = notificationRepository.findByUserAndReadOrderByCreatedAtDesc(user, read);
         }
-        return p.getContent().stream().filter(n -> !disabled.contains(n.getType())).collect(Collectors.toList());
+        return list.stream().filter(n -> !disabled.contains(n.getType())).collect(Collectors.toList());
     }
 
     public void markRead(String username, List<Long> ids) {
diff --git a/backend/src/test/java/com/openisle/controller/NotificationControllerTest.java b/backend/src/test/java/com/openisle/controller/NotificationControllerTest.java
index 1702f26d3..6b74440a1 100644
--- a/backend/src/test/java/com/openisle/controller/NotificationControllerTest.java
+++ b/backend/src/test/java/com/openisle/controller/NotificationControllerTest.java
@@ -45,7 +45,7 @@ class NotificationControllerTest {
         p.setId(2L);
         n.setPost(p);
         n.setCreatedAt(LocalDateTime.now());
-        when(notificationService.listNotifications("alice", null, 0))
+        when(notificationService.listNotifications("alice", null))
                 .thenReturn(List.of(n));
 
         NotificationDto dto = new NotificationDto();
@@ -62,23 +62,6 @@ class NotificationControllerTest {
                 .andExpect(jsonPath("$[0].post.id").value(2));
     }
 
-    @Test
-    void listUnreadNotifications() throws Exception {
-        Notification n = new Notification();
-        n.setId(3L);
-        n.setType(NotificationType.POST_VIEWED);
-        when(notificationService.listNotifications("alice", false, 0)).thenReturn(List.of(n));
-
-        NotificationDto dto = new NotificationDto();
-        dto.setId(3L);
-        when(notificationMapper.toDto(n)).thenReturn(dto);
-
-        mockMvc.perform(get("/api/notifications/unread")
-                        .principal(new UsernamePasswordAuthenticationToken("alice", "p")))
-                .andExpect(status().isOk())
-                .andExpect(jsonPath("$[0].id").value(3));
-    }
-
     @Test
     void markReadEndpoint() throws Exception {
         mockMvc.perform(post("/api/notifications/read")
diff --git a/backend/src/test/java/com/openisle/service/NotificationServiceTest.java b/backend/src/test/java/com/openisle/service/NotificationServiceTest.java
index 0e7048a17..a01d3c95b 100644
--- a/backend/src/test/java/com/openisle/service/NotificationServiceTest.java
+++ b/backend/src/test/java/com/openisle/service/NotificationServiceTest.java
@@ -65,15 +65,12 @@ class NotificationServiceTest {
         when(uRepo.findByUsername("bob")).thenReturn(Optional.of(user));
 
         Notification n = new Notification();
-        org.springframework.data.domain.Page<Notification> page =
-                new org.springframework.data.domain.PageImpl<>(List.of(n));
-        when(nRepo.findByUserOrderByCreatedAtDesc(eq(user), any(org.springframework.data.domain.Pageable.class)))
-                .thenReturn(page);
+        when(nRepo.findByUserOrderByCreatedAtDesc(user)).thenReturn(List.of(n));
 
         List<Notification> list = service.listNotifications("bob", null);
 
         assertEquals(1, list.size());
-        verify(nRepo).findByUserOrderByCreatedAtDesc(eq(user), any(org.springframework.data.domain.Pageable.class));
+        verify(nRepo).findByUserOrderByCreatedAtDesc(user);
     }
 
     @Test
diff --git a/frontend_nuxt/pages/message.vue b/frontend_nuxt/pages/message.vue
index fcc8f379b..461d8f4bb 100644
--- 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,18 +505,16 @@
             </div>
           </template>
         </BaseTimeline>
-        <InfiniteLoadMore :key="ioKey" :on-load="fetchNextPage" :pause="isLoadingMessage" />
       </div>
     </template>
   </div>
 </template>
 
 <script setup>
-import { onActivated, ref, watch } from '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 InfiniteLoadMore from '~/components/InfiniteLoadMore.vue'
 import { toast } from '~/main'
 import { authState, getToken } from '~/utils/auth'
 import { stripMarkdownLength } from '~/utils/markdown'
@@ -527,8 +525,6 @@ import {
   markRead,
   notifications,
   markAllRead,
-  fetchNotificationPreferences,
-  updateNotificationPreference,
 } from '~/utils/notification'
 import TimeManager from '~/utils/time'
 
@@ -539,7 +535,9 @@ const selectedTab = ref(
   ['all', 'unread', 'control'].includes(route.query.tab) ? route.query.tab : 'unread',
 )
 const notificationPrefs = ref([])
-const ioKey = ref(0)
+const filteredNotifications = computed(() =>
+  selectedTab.value === 'all' ? notifications.value : notifications.value.filter((n) => !n.read),
+)
 
 const fetchPrefs = async () => {
   notificationPrefs.value = await fetchNotificationPreferences()
@@ -549,7 +547,7 @@ const togglePref = async (pref) => {
   const ok = await updateNotificationPreference(pref.type, !pref.enabled)
   if (ok) {
     pref.enabled = !pref.enabled
-    await fetchNotifications(selectedTab.value, true)
+    await fetchNotifications()
     await fetchUnreadCount()
   } else {
     toast.error('操作失败')
@@ -630,20 +628,9 @@ const formatType = (t) => {
 }
 
 onActivated(() => {
-  fetchNotifications(selectedTab.value, true)
+  fetchNotifications()
   fetchPrefs()
 })
-
-watch(selectedTab, (tab) => {
-  if (tab !== 'control') {
-    fetchNotifications(tab, true)
-  } else {
-    fetchPrefs()
-  }
-  ioKey.value++
-})
-
-const fetchNextPage = () => fetchNotifications(selectedTab.value)
 </script>
 
 <style scoped>
diff --git a/frontend_nuxt/utils/notification.js b/frontend_nuxt/utils/notification.js
index 520c06eec..7c0245b94 100644
--- a/frontend_nuxt/utils/notification.js
+++ b/frontend_nuxt/utils/notification.js
@@ -118,194 +118,175 @@ export async function updateNotificationPreference(type, enabled) {
 function createFetchNotifications() {
   const notifications = ref([])
   const isLoadingMessage = ref(false)
-  const page = ref(0)
-  const finished = ref(false)
-  const currentTab = ref('all')
-
-  const fetchNotifications = async (tab = 'all', reset = false) => {
+  const fetchNotifications = async () => {
     const config = useRuntimeConfig()
     const API_BASE_URL = config.public.apiBaseUrl
-    try {
-      const token = getToken()
-      if (!token) {
-        toast.error('请先登录')
-        return true
-      }
-      if (reset || tab !== currentTab.value) {
-        notifications.value = []
-        page.value = 0
-        finished.value = false
-        currentTab.value = tab
-      }
-      if (finished.value) return true
-      isLoadingMessage.value = true
-      let url = `${API_BASE_URL}/api/notifications`
-      if (currentTab.value === 'unread') url += '/unread'
-      url += `?page=${page.value}`
-      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)
-                navigateTo(`/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)
-                navigateTo(`/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 < 50
-      if (!done) {
-        page.value++
-      } else {
-        finished.value = true
-      }
-      return done
-    } catch (e) {
-      console.error(e)
-      isLoadingMessage.value = false
-      return true
     }
   }
 
@@ -354,6 +335,7 @@ function createFetchNotifications() {
     markRead,
     notifications,
     isLoadingMessage,
+    markRead,
     markAllRead,
   }
 }

From 77856ff9afae2a81ec546b3d46e22cd07fda65e8 Mon Sep 17 00:00:00 2001
From: tim <nagisa12164@163.com>
Date: Tue, 19 Aug 2025 17:23:50 +0800
Subject: [PATCH 04/16] fix: make full page

---
 frontend_nuxt/pages/message.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend_nuxt/pages/message.vue b/frontend_nuxt/pages/message.vue
index 461d8f4bb..061eedd37 100644
--- a/frontend_nuxt/pages/message.vue
+++ b/frontend_nuxt/pages/message.vue
@@ -644,8 +644,6 @@ onActivated(() => {
 .message-page {
   background-color: var(--background-color);
   overflow-x: hidden;
-  height: calc(100vh - var(--header-height));
-  overflow-y: auto;
 }
 
 .message-page-header {

From 73168c1859b0ee9e68046676925ee71a134d0fe5 Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Tue, 19 Aug 2025 18:20:26 +0800
Subject: [PATCH 05/16] feat: add paginated notifications and unread endpoint

---
 .../controller/NotificationController.java    | 11 ++++++-
 .../repository/NotificationRepository.java    |  4 +++
 .../openisle/service/NotificationService.java | 16 +++++++---
 .../NotificationControllerTest.java           | 30 ++++++++++++++++--
 .../service/NotificationServiceTest.java      |  6 ++--
 frontend_nuxt/pages/message.vue               | 31 +++++++++++++------
 frontend_nuxt/utils/notification.js           | 24 ++++++++++----
 7 files changed, 96 insertions(+), 26 deletions(-)

diff --git a/backend/src/main/java/com/openisle/controller/NotificationController.java b/backend/src/main/java/com/openisle/controller/NotificationController.java
index d25d2a808..f732043ff 100644
--- a/backend/src/main/java/com/openisle/controller/NotificationController.java
+++ b/backend/src/main/java/com/openisle/controller/NotificationController.java
@@ -24,8 +24,17 @@ public class NotificationController {
 
     @GetMapping
     public List<NotificationDto> list(@RequestParam(value = "read", required = false) Boolean read,
+                                      @RequestParam(value = "page", defaultValue = "0") int page,
                                       Authentication auth) {
-        return notificationService.listNotifications(auth.getName(), read).stream()
+        return notificationService.listNotifications(auth.getName(), read, page, 50).stream()
+                .map(notificationMapper::toDto)
+                .collect(Collectors.toList());
+    }
+
+    @GetMapping("/unread")
+    public List<NotificationDto> listUnread(@RequestParam(value = "page", defaultValue = "0") int page,
+                                            Authentication auth) {
+        return notificationService.listNotifications(auth.getName(), false, page, 50).stream()
                 .map(notificationMapper::toDto)
                 .collect(Collectors.toList());
     }
diff --git a/backend/src/main/java/com/openisle/repository/NotificationRepository.java b/backend/src/main/java/com/openisle/repository/NotificationRepository.java
index 1e897b3a0..df2fae2d7 100644
--- a/backend/src/main/java/com/openisle/repository/NotificationRepository.java
+++ b/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> findByUser(User user, Pageable pageable);
+    Page<Notification> findByUserAndRead(User user, boolean read, Pageable pageable);
     long countByUserAndRead(User user, boolean read);
     List<Notification> findByPost(Post post);
     List<Notification> findByComment(Comment comment);
diff --git a/backend/src/main/java/com/openisle/service/NotificationService.java b/backend/src/main/java/com/openisle/service/NotificationService.java
index 6ecf571e8..26761902f 100644
--- a/backend/src/main/java/com/openisle/service/NotificationService.java
+++ b/backend/src/main/java/com/openisle/service/NotificationService.java
@@ -24,6 +24,10 @@ import java.util.List;
 import java.util.ArrayList;
 import java.util.concurrent.Executor;
 import java.util.stream.Collectors;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
+import org.springframework.data.domain.PageRequest;
+import org.springframework.data.domain.Sort;
 
 /** Service for creating and retrieving notifications. */
 @Service
@@ -180,17 +184,19 @@ 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();
-        List<Notification> list;
+        Pageable pageable = PageRequest.of(page, size,
+                Sort.by(Sort.Direction.DESC, "createdAt"));
+        Page<Notification> pg;
         if (read == null) {
-            list = notificationRepository.findByUserOrderByCreatedAtDesc(user);
+            pg = notificationRepository.findByUser(user, pageable);
         } else {
-            list = notificationRepository.findByUserAndReadOrderByCreatedAtDesc(user, read);
+            pg = notificationRepository.findByUserAndRead(user, read, pageable);
         }
-        return list.stream().filter(n -> !disabled.contains(n.getType())).collect(Collectors.toList());
+        return pg.stream().filter(n -> !disabled.contains(n.getType())).collect(Collectors.toList());
     }
 
     public void markRead(String username, List<Long> ids) {
diff --git a/backend/src/test/java/com/openisle/controller/NotificationControllerTest.java b/backend/src/test/java/com/openisle/controller/NotificationControllerTest.java
index 6b74440a1..e9a69ef3d 100644
--- a/backend/src/test/java/com/openisle/controller/NotificationControllerTest.java
+++ b/backend/src/test/java/com/openisle/controller/NotificationControllerTest.java
@@ -45,7 +45,7 @@ class NotificationControllerTest {
         p.setId(2L);
         n.setPost(p);
         n.setCreatedAt(LocalDateTime.now());
-        when(notificationService.listNotifications("alice", null))
+        when(notificationService.listNotifications("alice", null, 0, 50))
                 .thenReturn(List.of(n));
 
         NotificationDto dto = new NotificationDto();
@@ -55,7 +55,33 @@ class NotificationControllerTest {
         dto.setPost(ps);
         when(notificationMapper.toDto(n)).thenReturn(dto);
 
-        mockMvc.perform(get("/api/notifications")
+        mockMvc.perform(get("/api/notifications?page=0")
+                        .principal(new UsernamePasswordAuthenticationToken("alice","p")))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$[0].id").value(1))
+                .andExpect(jsonPath("$[0].post.id").value(2));
+    }
+
+    @Test
+    void listUnreadNotifications() throws Exception {
+        Notification n = new Notification();
+        n.setId(1L);
+        n.setType(NotificationType.POST_VIEWED);
+        Post p = new Post();
+        p.setId(2L);
+        n.setPost(p);
+        n.setCreatedAt(LocalDateTime.now());
+        when(notificationService.listNotifications("alice", false, 0, 50))
+                .thenReturn(List.of(n));
+
+        NotificationDto dto = new NotificationDto();
+        dto.setId(1L);
+        PostSummaryDto ps = new PostSummaryDto();
+        ps.setId(2L);
+        dto.setPost(ps);
+        when(notificationMapper.toDto(n)).thenReturn(dto);
+
+        mockMvc.perform(get("/api/notifications/unread?page=0")
                         .principal(new UsernamePasswordAuthenticationToken("alice","p")))
                 .andExpect(status().isOk())
                 .andExpect(jsonPath("$[0].id").value(1))
diff --git a/backend/src/test/java/com/openisle/service/NotificationServiceTest.java b/backend/src/test/java/com/openisle/service/NotificationServiceTest.java
index a01d3c95b..2b1d7e512 100644
--- a/backend/src/test/java/com/openisle/service/NotificationServiceTest.java
+++ b/backend/src/test/java/com/openisle/service/NotificationServiceTest.java
@@ -65,12 +65,12 @@ class NotificationServiceTest {
         when(uRepo.findByUsername("bob")).thenReturn(Optional.of(user));
 
         Notification n = new Notification();
-        when(nRepo.findByUserOrderByCreatedAtDesc(user)).thenReturn(List.of(n));
+        when(nRepo.findByUser(eq(user), any())).thenReturn(new org.springframework.data.domain.PageImpl<>(List.of(n)));
 
-        List<Notification> list = service.listNotifications("bob", null);
+        List<Notification> list = service.listNotifications("bob", null, 0, 50);
 
         assertEquals(1, list.size());
-        verify(nRepo).findByUserOrderByCreatedAtDesc(user);
+        verify(nRepo).findByUser(eq(user), any());
     }
 
     @Test
diff --git a/frontend_nuxt/pages/message.vue b/frontend_nuxt/pages/message.vue
index 061eedd37..58d9953bb 100644
--- a/frontend_nuxt/pages/message.vue
+++ b/frontend_nuxt/pages/message.vue
@@ -53,13 +53,13 @@
       </div>
 
       <BasePlaceholder
-        v-else-if="filteredNotifications.length === 0"
+        v-else-if="notifications.length === 0"
         text="暂时没有消息 :)"
         icon="fas fa-inbox"
       />
 
-      <div class="timeline-container" v-if="filteredNotifications.length > 0">
-        <BaseTimeline :items="filteredNotifications">
+      <div class="timeline-container" v-if="notifications.length > 0">
+        <BaseTimeline :items="notifications">
           <template #item="{ item }">
             <div class="notif-content" :class="{ read: item.read }">
               <span v-if="!item.read" class="unread-dot"></span>
@@ -505,16 +505,23 @@
             </div>
           </template>
         </BaseTimeline>
+        <InfiniteLoadMore
+          :key="ioKey"
+          :on-load="fetchNextPage"
+          :pause="isLoadingMessage"
+          root-margin="200px 0px"
+        />
       </div>
     </template>
   </div>
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from 'vue'
+import { computed, onActivated, ref, watch } from 'vue'
 import BasePlaceholder from '~/components/BasePlaceholder.vue'
 import BaseTimeline from '~/components/BaseTimeline.vue'
 import NotificationContainer from '~/components/NotificationContainer.vue'
+import InfiniteLoadMore from '~/components/InfiniteLoadMore.vue'
 import { toast } from '~/main'
 import { authState, getToken } from '~/utils/auth'
 import { stripMarkdownLength } from '~/utils/markdown'
@@ -535,9 +542,11 @@ const selectedTab = ref(
   ['all', 'unread', 'control'].includes(route.query.tab) ? route.query.tab : 'unread',
 )
 const notificationPrefs = ref([])
-const filteredNotifications = computed(() =>
-  selectedTab.value === 'all' ? notifications.value : notifications.value.filter((n) => !n.read),
-)
+const ioKey = computed(() => selectedTab.value)
+const loadFirstPage = async () => {
+  await fetchNotifications({ unread: selectedTab.value === 'unread', reset: true })
+}
+const fetchNextPage = async () => fetchNotifications()
 
 const fetchPrefs = async () => {
   notificationPrefs.value = await fetchNotificationPreferences()
@@ -547,7 +556,7 @@ const togglePref = async (pref) => {
   const ok = await updateNotificationPreference(pref.type, !pref.enabled)
   if (ok) {
     pref.enabled = !pref.enabled
-    await fetchNotifications()
+    await fetchNotifications({ unread: selectedTab.value === 'unread', reset: true })
     await fetchUnreadCount()
   } else {
     toast.error('操作失败')
@@ -627,8 +636,12 @@ const formatType = (t) => {
   }
 }
 
+watch(selectedTab, (val) => {
+  if (val !== 'control') loadFirstPage()
+})
+
 onActivated(() => {
-  fetchNotifications()
+  if (selectedTab.value !== 'control') loadFirstPage()
   fetchPrefs()
 })
 </script>
diff --git a/frontend_nuxt/utils/notification.js b/frontend_nuxt/utils/notification.js
index 7c0245b94..8ce55f111 100644
--- a/frontend_nuxt/utils/notification.js
+++ b/frontend_nuxt/utils/notification.js
@@ -118,7 +118,9 @@ export async function updateNotificationPreference(type, enabled) {
 function createFetchNotifications() {
   const notifications = ref([])
   const isLoadingMessage = ref(false)
-  const fetchNotifications = async () => {
+  const page = ref(0)
+  const currentUnread = ref(false)
+  const fetchNotifications = async ({ unread = false, reset = false } = {}) => {
     const config = useRuntimeConfig()
     const API_BASE_URL = config.public.apiBaseUrl
     if (isLoadingMessage && notifications && markRead) {
@@ -126,11 +128,18 @@ function createFetchNotifications() {
         const token = getToken()
         if (!token) {
           toast.error('请先登录')
-          return
+          return false
+        }
+        if (reset) {
+          notifications.value = []
+          page.value = 0
+          currentUnread.value = unread
         }
         isLoadingMessage.value = true
-        notifications.value = []
-        const res = await fetch(`${API_BASE_URL}/api/notifications`, {
+        const endpoint = currentUnread.value
+          ? `/api/notifications/unread?page=${page.value}`
+          : `/api/notifications?page=${page.value}`
+        const res = await fetch(`${API_BASE_URL}${endpoint}`, {
           headers: {
             Authorization: `Bearer ${token}`,
           },
@@ -138,7 +147,7 @@ function createFetchNotifications() {
         isLoadingMessage.value = false
         if (!res.ok) {
           toast.error('获取通知失败')
-          return
+          return true
         }
         const data = await res.json()
 
@@ -284,10 +293,14 @@ function createFetchNotifications() {
             })
           }
         }
+        page.value++
+        return data.length < 50
       } catch (e) {
         console.error(e)
+        return true
       }
     }
+    return true
   }
 
   const markRead = async (id) => {
@@ -335,7 +348,6 @@ function createFetchNotifications() {
     markRead,
     notifications,
     isLoadingMessage,
-    markRead,
     markAllRead,
   }
 }

From 7dd1f1b3d02c764912d79fc0a963c4fa41dedbb2 Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Tue, 19 Aug 2025 18:24:27 +0800
Subject: [PATCH 06/16] feat: add paginated notification APIs and frontend

---
 .../controller/NotificationController.java    |  12 +-
 .../repository/NotificationRepository.java    |   4 +
 .../openisle/service/NotificationService.java |   7 +-
 frontend_nuxt/pages/message.vue               |  58 ++-
 frontend_nuxt/utils/notification.js           | 439 ++++++++++--------
 5 files changed, 312 insertions(+), 208 deletions(-)

diff --git a/backend/src/main/java/com/openisle/controller/NotificationController.java b/backend/src/main/java/com/openisle/controller/NotificationController.java
index d25d2a808..1149bff37 100644
--- a/backend/src/main/java/com/openisle/controller/NotificationController.java
+++ b/backend/src/main/java/com/openisle/controller/NotificationController.java
@@ -23,9 +23,17 @@ public class NotificationController {
     private final NotificationMapper notificationMapper;
 
     @GetMapping
-    public List<NotificationDto> list(@RequestParam(value = "read", required = false) Boolean read,
+    public List<NotificationDto> list(@RequestParam(value = "page", defaultValue = "0") int page,
                                       Authentication auth) {
-        return notificationService.listNotifications(auth.getName(), read).stream()
+        return notificationService.listNotifications(auth.getName(), null, page).stream()
+                .map(notificationMapper::toDto)
+                .collect(Collectors.toList());
+    }
+
+    @GetMapping("/unread")
+    public List<NotificationDto> listUnread(@RequestParam(value = "page", defaultValue = "0") int page,
+                                            Authentication auth) {
+        return notificationService.listNotifications(auth.getName(), false, page).stream()
                 .map(notificationMapper::toDto)
                 .collect(Collectors.toList());
     }
diff --git a/backend/src/main/java/com/openisle/repository/NotificationRepository.java b/backend/src/main/java/com/openisle/repository/NotificationRepository.java
index 1e897b3a0..65fddca4c 100644
--- a/backend/src/main/java/com/openisle/repository/NotificationRepository.java
+++ b/backend/src/main/java/com/openisle/repository/NotificationRepository.java
@@ -5,6 +5,8 @@ import com.openisle.model.User;
 import com.openisle.model.Post;
 import com.openisle.model.Comment;
 import com.openisle.model.NotificationType;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
 import org.springframework.data.jpa.repository.JpaRepository;
 
 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);
diff --git a/backend/src/main/java/com/openisle/service/NotificationService.java b/backend/src/main/java/com/openisle/service/NotificationService.java
index 6ecf571e8..088d0f61a 100644
--- a/backend/src/main/java/com/openisle/service/NotificationService.java
+++ b/backend/src/main/java/com/openisle/service/NotificationService.java
@@ -180,15 +180,16 @@ public class NotificationService {
         userRepository.save(user);
     }
 
-    public List<Notification> listNotifications(String username, Boolean read) {
+    public List<Notification> listNotifications(String username, Boolean read, int page) {
         User user = userRepository.findByUsername(username)
                 .orElseThrow(() -> new com.openisle.exception.NotFoundException("User not found"));
         Set<NotificationType> disabled = user.getDisabledNotificationTypes();
         List<Notification> list;
+        var pageable = org.springframework.data.domain.PageRequest.of(page, 50);
         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());
     }
diff --git a/frontend_nuxt/pages/message.vue b/frontend_nuxt/pages/message.vue
index 061eedd37..30eed2239 100644
--- a/frontend_nuxt/pages/message.vue
+++ b/frontend_nuxt/pages/message.vue
@@ -53,13 +53,13 @@
       </div>
 
       <BasePlaceholder
-        v-else-if="filteredNotifications.length === 0"
+        v-else-if="displayNotifications.length === 0"
         text="暂时没有消息 :)"
         icon="fas fa-inbox"
       />
 
-      <div class="timeline-container" v-if="filteredNotifications.length > 0">
-        <BaseTimeline :items="filteredNotifications">
+      <div class="timeline-container" v-if="displayNotifications.length > 0">
+        <BaseTimeline :items="displayNotifications">
           <template #item="{ item }">
             <div class="notif-content" :class="{ read: item.read }">
               <span v-if="!item.read" class="unread-dot"></span>
@@ -506,25 +506,39 @@
           </template>
         </BaseTimeline>
       </div>
+
+      <InfiniteLoadMore
+        v-if="displayNotifications.length > 0"
+        :key="ioKey"
+        :on-load="fetchNextPage"
+        :pause="isLoadingMessage"
+        root-margin="200px 0px"
+      />
     </template>
   </div>
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from 'vue'
+import { computed, onActivated, ref, watch } from 'vue'
 import BasePlaceholder from '~/components/BasePlaceholder.vue'
 import BaseTimeline from '~/components/BaseTimeline.vue'
 import NotificationContainer from '~/components/NotificationContainer.vue'
 import { toast } from '~/main'
 import { authState, getToken } from '~/utils/auth'
 import { stripMarkdownLength } from '~/utils/markdown'
+import InfiniteLoadMore from '~/components/InfiniteLoadMore.vue'
 import {
-  fetchNotifications,
+  fetchAllNotifications,
+  fetchUnreadNotifications,
   fetchUnreadCount,
-  isLoadingMessage,
+  isLoadingAll,
+  isLoadingUnread,
   markRead,
-  notifications,
+  allNotifications,
+  unreadNotifications,
   markAllRead,
+  resetAll,
+  resetUnread,
 } from '~/utils/notification'
 import TimeManager from '~/utils/time'
 
@@ -535,9 +549,24 @@ const selectedTab = ref(
   ['all', 'unread', 'control'].includes(route.query.tab) ? route.query.tab : 'unread',
 )
 const notificationPrefs = ref([])
-const filteredNotifications = computed(() =>
-  selectedTab.value === 'all' ? notifications.value : notifications.value.filter((n) => !n.read),
+const displayNotifications = computed(() =>
+  selectedTab.value === 'all' ? allNotifications.value : unreadNotifications.value,
 )
+const isLoadingMessage = computed(() =>
+  selectedTab.value === 'all' ? isLoadingAll.value : isLoadingUnread.value,
+)
+const ioKey = ref(0)
+
+const fetchNextPage = () =>
+  selectedTab.value === 'all' ? fetchAllNotifications() : fetchUnreadNotifications()
+
+const loadInitial = async () => {
+  if (selectedTab.value === 'all') {
+    if (allNotifications.value.length === 0) await fetchAllNotifications()
+  } else if (selectedTab.value === 'unread') {
+    if (unreadNotifications.value.length === 0) await fetchUnreadNotifications()
+  }
+}
 
 const fetchPrefs = async () => {
   notificationPrefs.value = await fetchNotificationPreferences()
@@ -547,7 +576,9 @@ const togglePref = async (pref) => {
   const ok = await updateNotificationPreference(pref.type, !pref.enabled)
   if (ok) {
     pref.enabled = !pref.enabled
-    await fetchNotifications()
+    resetAll()
+    resetUnread()
+    await loadInitial()
     await fetchUnreadCount()
   } else {
     toast.error('操作失败')
@@ -627,8 +658,13 @@ const formatType = (t) => {
   }
 }
 
+watch(selectedTab, async () => {
+  await loadInitial()
+  ioKey.value++
+})
+
 onActivated(() => {
-  fetchNotifications()
+  loadInitial()
   fetchPrefs()
 })
 </script>
diff --git a/frontend_nuxt/utils/notification.js b/frontend_nuxt/utils/notification.js
index 7c0245b94..28403331e 100644
--- a/frontend_nuxt/utils/notification.js
+++ b/frontend_nuxt/utils/notification.js
@@ -4,9 +4,7 @@ import { toast } from '~/composables/useToast'
 import { authState, getToken } from '~/utils/auth'
 import { reactionEmojiMap } from '~/utils/reactions'
 
-export const notificationState = reactive({
-  unreadCount: 0,
-})
+export const notificationState = reactive({ unreadCount: 0 })
 
 const iconMap = {
   POST_VIEWED: 'fas fa-eye',
@@ -57,7 +55,6 @@ export async function markNotificationsRead(ids) {
   try {
     const config = useRuntimeConfig()
     const API_BASE_URL = config.public.apiBaseUrl
-
     const token = getToken()
     if (!token || !ids || ids.length === 0) return false
     const res = await fetch(`${API_BASE_URL}/api/notifications/read`, {
@@ -78,7 +75,6 @@ export async function fetchNotificationPreferences() {
   try {
     const config = useRuntimeConfig()
     const API_BASE_URL = config.public.apiBaseUrl
-
     const token = getToken()
     if (!token) return []
     const res = await fetch(`${API_BASE_URL}/api/notifications/prefs`, {
@@ -112,193 +108,219 @@ 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}`,
+  const allNotifications = ref([])
+  const unreadNotifications = ref([])
+  const pageAll = ref(0)
+  const pageUnread = ref(0)
+  const isLoadingAll = ref(false)
+  const isLoadingUnread = ref(false)
+
+  const processAndPush = (data, target) => {
+    for (const n of data) {
+      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 })
           },
         })
-        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)
+      } 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 })
+            }
+          },
+        })
+      } 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)
+              navigateTo(`/posts/${n.post.id}`, { replace: true })
+            }
+          },
+        })
+      } else if (n.type === 'LOTTERY_DRAW') {
+        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_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 fetchAllNotifications = async () => {
+    const config = useRuntimeConfig()
+    const API_BASE_URL = config.public.apiBaseUrl
+    const token = getToken()
+    if (!token) {
+      toast.error('请先登录')
+      return { done: true }
+    }
+    isLoadingAll.value = true
+    const res = await fetch(`${API_BASE_URL}/api/notifications?page=${pageAll.value}`, {
+      headers: { Authorization: `Bearer ${token}` },
+    })
+    isLoadingAll.value = false
+    if (!res.ok) {
+      toast.error('获取通知失败')
+      return { done: true }
+    }
+    const data = await res.json()
+    processAndPush(data, allNotifications.value)
+    pageAll.value++
+    return { done: data.length < 50 }
+  }
+
+  const fetchUnreadNotifications = async () => {
+    const config = useRuntimeConfig()
+    const API_BASE_URL = config.public.apiBaseUrl
+    const token = getToken()
+    if (!token) {
+      toast.error('请先登录')
+      return { done: true }
+    }
+    isLoadingUnread.value = true
+    const res = await fetch(`${API_BASE_URL}/api/notifications/unread?page=${pageUnread.value}`, {
+      headers: { Authorization: `Bearer ${token}` },
+    })
+    isLoadingUnread.value = false
+    if (!res.ok) {
+      toast.error('获取通知失败')
+      return { done: true }
+    }
+    const data = await res.json()
+    processAndPush(data, unreadNotifications.value)
+    pageUnread.value++
+    return { done: data.length < 50 }
+  }
+
   const markRead = async (id) => {
     if (!id) return
-    const n = notifications.value.find((n) => n.id === id)
-    if (!n || n.read) return
-    n.read = true
+    const nAll = allNotifications.value.find((n) => n.id === id)
+    const idxUnread = unreadNotifications.value.findIndex((n) => n.id === id)
+    const unreadItem = idxUnread !== -1 ? unreadNotifications.value[idxUnread] : null
+    if (nAll) nAll.read = true
+    if (idxUnread !== -1) unreadNotifications.value.splice(idxUnread, 1)
     if (notificationState.unreadCount > 0) notificationState.unreadCount--
     const ok = await markNotificationsRead([id])
     if (!ok) {
-      n.read = false
+      if (nAll) nAll.read = false
+      if (idxUnread !== -1 && unreadItem) unreadNotifications.value.splice(idxUnread, 0, unreadItem)
       notificationState.unreadCount++
     } else {
       fetchUnreadCount()
@@ -306,20 +328,28 @@ function createFetchNotifications() {
   }
 
   const markAllRead = async () => {
-    // 除了 REGISTER_REQUEST 类型消息
-    const idsToMark = notifications.value
-      .filter((n) => n.type !== 'REGISTER_REQUEST' && !n.read)
-      .map((n) => n.id)
+    const idsToMark = [
+      ...new Set(
+        [...allNotifications.value, ...unreadNotifications.value]
+          .filter((n) => n.type !== 'REGISTER_REQUEST' && !n.read)
+          .map((n) => n.id),
+      ),
+    ]
     if (idsToMark.length === 0) return
-    notifications.value.forEach((n) => {
+    allNotifications.value.forEach((n) => {
       if (n.type !== 'REGISTER_REQUEST') n.read = true
     })
-    notificationState.unreadCount = notifications.value.filter((n) => !n.read).length
+    const prevUnread = [...unreadNotifications.value]
+    unreadNotifications.value = unreadNotifications.value.filter(
+      (n) => n.type === 'REGISTER_REQUEST',
+    )
+    notificationState.unreadCount = unreadNotifications.value.length
     const ok = await markNotificationsRead(idsToMark)
     if (!ok) {
-      notifications.value.forEach((n) => {
+      allNotifications.value.forEach((n) => {
         if (idsToMark.includes(n.id)) n.read = false
       })
+      unreadNotifications.value = prevUnread
       await fetchUnreadCount()
       return
     }
@@ -330,15 +360,40 @@ function createFetchNotifications() {
       toast.success('已读所有消息')
     }
   }
+
+  const resetAll = () => {
+    pageAll.value = 0
+    allNotifications.value = []
+  }
+
+  const resetUnread = () => {
+    pageUnread.value = 0
+    unreadNotifications.value = []
+  }
+
   return {
-    fetchNotifications,
-    markRead,
-    notifications,
-    isLoadingMessage,
+    fetchAllNotifications,
+    fetchUnreadNotifications,
     markRead,
     markAllRead,
+    allNotifications,
+    unreadNotifications,
+    isLoadingAll,
+    isLoadingUnread,
+    resetAll,
+    resetUnread,
   }
 }
 
-export const { fetchNotifications, markRead, notifications, isLoadingMessage, markAllRead } =
-  createFetchNotifications()
+export const {
+  fetchAllNotifications,
+  fetchUnreadNotifications,
+  markRead,
+  markAllRead,
+  allNotifications,
+  unreadNotifications,
+  isLoadingAll,
+  isLoadingUnread,
+  resetAll,
+  resetUnread,
+} = createFetchNotifications()

From 10b6fdd1cbedf5485b1a8d078fc953030b8261ec Mon Sep 17 00:00:00 2001
From: tim <nagisa12164@163.com>
Date: Tue, 19 Aug 2025 18:24:49 +0800
Subject: [PATCH 07/16] Revert "feat: add paginated notifications and unread
 endpoint"

This reverts commit 73168c1859b0ee9e68046676925ee71a134d0fe5.
---
 .../controller/NotificationController.java    | 11 +------
 .../repository/NotificationRepository.java    |  4 ---
 .../openisle/service/NotificationService.java | 16 +++-------
 .../NotificationControllerTest.java           | 30 ++----------------
 .../service/NotificationServiceTest.java      |  6 ++--
 frontend_nuxt/pages/message.vue               | 31 ++++++-------------
 frontend_nuxt/utils/notification.js           | 24 ++++----------
 7 files changed, 26 insertions(+), 96 deletions(-)

diff --git a/backend/src/main/java/com/openisle/controller/NotificationController.java b/backend/src/main/java/com/openisle/controller/NotificationController.java
index f732043ff..d25d2a808 100644
--- a/backend/src/main/java/com/openisle/controller/NotificationController.java
+++ b/backend/src/main/java/com/openisle/controller/NotificationController.java
@@ -24,17 +24,8 @@ public class NotificationController {
 
     @GetMapping
     public List<NotificationDto> list(@RequestParam(value = "read", required = false) Boolean read,
-                                      @RequestParam(value = "page", defaultValue = "0") int page,
                                       Authentication auth) {
-        return notificationService.listNotifications(auth.getName(), read, page, 50).stream()
-                .map(notificationMapper::toDto)
-                .collect(Collectors.toList());
-    }
-
-    @GetMapping("/unread")
-    public List<NotificationDto> listUnread(@RequestParam(value = "page", defaultValue = "0") int page,
-                                            Authentication auth) {
-        return notificationService.listNotifications(auth.getName(), false, page, 50).stream()
+        return notificationService.listNotifications(auth.getName(), read).stream()
                 .map(notificationMapper::toDto)
                 .collect(Collectors.toList());
     }
diff --git a/backend/src/main/java/com/openisle/repository/NotificationRepository.java b/backend/src/main/java/com/openisle/repository/NotificationRepository.java
index df2fae2d7..1e897b3a0 100644
--- a/backend/src/main/java/com/openisle/repository/NotificationRepository.java
+++ b/backend/src/main/java/com/openisle/repository/NotificationRepository.java
@@ -6,8 +6,6 @@ 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;
 
@@ -15,8 +13,6 @@ 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> findByUser(User user, Pageable pageable);
-    Page<Notification> findByUserAndRead(User user, boolean read, Pageable pageable);
     long countByUserAndRead(User user, boolean read);
     List<Notification> findByPost(Post post);
     List<Notification> findByComment(Comment comment);
diff --git a/backend/src/main/java/com/openisle/service/NotificationService.java b/backend/src/main/java/com/openisle/service/NotificationService.java
index 26761902f..6ecf571e8 100644
--- a/backend/src/main/java/com/openisle/service/NotificationService.java
+++ b/backend/src/main/java/com/openisle/service/NotificationService.java
@@ -24,10 +24,6 @@ import java.util.List;
 import java.util.ArrayList;
 import java.util.concurrent.Executor;
 import java.util.stream.Collectors;
-import org.springframework.data.domain.Page;
-import org.springframework.data.domain.Pageable;
-import org.springframework.data.domain.PageRequest;
-import org.springframework.data.domain.Sort;
 
 /** Service for creating and retrieving notifications. */
 @Service
@@ -184,19 +180,17 @@ public class NotificationService {
         userRepository.save(user);
     }
 
-    public List<Notification> listNotifications(String username, Boolean read, int page, int size) {
+    public List<Notification> listNotifications(String username, Boolean read) {
         User user = userRepository.findByUsername(username)
                 .orElseThrow(() -> new com.openisle.exception.NotFoundException("User not found"));
         Set<NotificationType> disabled = user.getDisabledNotificationTypes();
-        Pageable pageable = PageRequest.of(page, size,
-                Sort.by(Sort.Direction.DESC, "createdAt"));
-        Page<Notification> pg;
+        List<Notification> list;
         if (read == null) {
-            pg = notificationRepository.findByUser(user, pageable);
+            list = notificationRepository.findByUserOrderByCreatedAtDesc(user);
         } else {
-            pg = notificationRepository.findByUserAndRead(user, read, pageable);
+            list = notificationRepository.findByUserAndReadOrderByCreatedAtDesc(user, read);
         }
-        return pg.stream().filter(n -> !disabled.contains(n.getType())).collect(Collectors.toList());
+        return list.stream().filter(n -> !disabled.contains(n.getType())).collect(Collectors.toList());
     }
 
     public void markRead(String username, List<Long> ids) {
diff --git a/backend/src/test/java/com/openisle/controller/NotificationControllerTest.java b/backend/src/test/java/com/openisle/controller/NotificationControllerTest.java
index e9a69ef3d..6b74440a1 100644
--- a/backend/src/test/java/com/openisle/controller/NotificationControllerTest.java
+++ b/backend/src/test/java/com/openisle/controller/NotificationControllerTest.java
@@ -45,7 +45,7 @@ class NotificationControllerTest {
         p.setId(2L);
         n.setPost(p);
         n.setCreatedAt(LocalDateTime.now());
-        when(notificationService.listNotifications("alice", null, 0, 50))
+        when(notificationService.listNotifications("alice", null))
                 .thenReturn(List.of(n));
 
         NotificationDto dto = new NotificationDto();
@@ -55,33 +55,7 @@ class NotificationControllerTest {
         dto.setPost(ps);
         when(notificationMapper.toDto(n)).thenReturn(dto);
 
-        mockMvc.perform(get("/api/notifications?page=0")
-                        .principal(new UsernamePasswordAuthenticationToken("alice","p")))
-                .andExpect(status().isOk())
-                .andExpect(jsonPath("$[0].id").value(1))
-                .andExpect(jsonPath("$[0].post.id").value(2));
-    }
-
-    @Test
-    void listUnreadNotifications() throws Exception {
-        Notification n = new Notification();
-        n.setId(1L);
-        n.setType(NotificationType.POST_VIEWED);
-        Post p = new Post();
-        p.setId(2L);
-        n.setPost(p);
-        n.setCreatedAt(LocalDateTime.now());
-        when(notificationService.listNotifications("alice", false, 0, 50))
-                .thenReturn(List.of(n));
-
-        NotificationDto dto = new NotificationDto();
-        dto.setId(1L);
-        PostSummaryDto ps = new PostSummaryDto();
-        ps.setId(2L);
-        dto.setPost(ps);
-        when(notificationMapper.toDto(n)).thenReturn(dto);
-
-        mockMvc.perform(get("/api/notifications/unread?page=0")
+        mockMvc.perform(get("/api/notifications")
                         .principal(new UsernamePasswordAuthenticationToken("alice","p")))
                 .andExpect(status().isOk())
                 .andExpect(jsonPath("$[0].id").value(1))
diff --git a/backend/src/test/java/com/openisle/service/NotificationServiceTest.java b/backend/src/test/java/com/openisle/service/NotificationServiceTest.java
index 2b1d7e512..a01d3c95b 100644
--- a/backend/src/test/java/com/openisle/service/NotificationServiceTest.java
+++ b/backend/src/test/java/com/openisle/service/NotificationServiceTest.java
@@ -65,12 +65,12 @@ class NotificationServiceTest {
         when(uRepo.findByUsername("bob")).thenReturn(Optional.of(user));
 
         Notification n = new Notification();
-        when(nRepo.findByUser(eq(user), any())).thenReturn(new org.springframework.data.domain.PageImpl<>(List.of(n)));
+        when(nRepo.findByUserOrderByCreatedAtDesc(user)).thenReturn(List.of(n));
 
-        List<Notification> list = service.listNotifications("bob", null, 0, 50);
+        List<Notification> list = service.listNotifications("bob", null);
 
         assertEquals(1, list.size());
-        verify(nRepo).findByUser(eq(user), any());
+        verify(nRepo).findByUserOrderByCreatedAtDesc(user);
     }
 
     @Test
diff --git a/frontend_nuxt/pages/message.vue b/frontend_nuxt/pages/message.vue
index 58d9953bb..061eedd37 100644
--- 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,23 +505,16 @@
             </div>
           </template>
         </BaseTimeline>
-        <InfiniteLoadMore
-          :key="ioKey"
-          :on-load="fetchNextPage"
-          :pause="isLoadingMessage"
-          root-margin="200px 0px"
-        />
       </div>
     </template>
   </div>
 </template>
 
 <script setup>
-import { computed, onActivated, ref, watch } from '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 InfiniteLoadMore from '~/components/InfiniteLoadMore.vue'
 import { toast } from '~/main'
 import { authState, getToken } from '~/utils/auth'
 import { stripMarkdownLength } from '~/utils/markdown'
@@ -542,11 +535,9 @@ const selectedTab = ref(
   ['all', 'unread', 'control'].includes(route.query.tab) ? route.query.tab : 'unread',
 )
 const notificationPrefs = ref([])
-const ioKey = computed(() => selectedTab.value)
-const loadFirstPage = async () => {
-  await fetchNotifications({ unread: selectedTab.value === 'unread', reset: true })
-}
-const fetchNextPage = async () => fetchNotifications()
+const filteredNotifications = computed(() =>
+  selectedTab.value === 'all' ? notifications.value : notifications.value.filter((n) => !n.read),
+)
 
 const fetchPrefs = async () => {
   notificationPrefs.value = await fetchNotificationPreferences()
@@ -556,7 +547,7 @@ const togglePref = async (pref) => {
   const ok = await updateNotificationPreference(pref.type, !pref.enabled)
   if (ok) {
     pref.enabled = !pref.enabled
-    await fetchNotifications({ unread: selectedTab.value === 'unread', reset: true })
+    await fetchNotifications()
     await fetchUnreadCount()
   } else {
     toast.error('操作失败')
@@ -636,12 +627,8 @@ const formatType = (t) => {
   }
 }
 
-watch(selectedTab, (val) => {
-  if (val !== 'control') loadFirstPage()
-})
-
 onActivated(() => {
-  if (selectedTab.value !== 'control') loadFirstPage()
+  fetchNotifications()
   fetchPrefs()
 })
 </script>
diff --git a/frontend_nuxt/utils/notification.js b/frontend_nuxt/utils/notification.js
index 8ce55f111..7c0245b94 100644
--- a/frontend_nuxt/utils/notification.js
+++ b/frontend_nuxt/utils/notification.js
@@ -118,9 +118,7 @@ export async function updateNotificationPreference(type, enabled) {
 function createFetchNotifications() {
   const notifications = ref([])
   const isLoadingMessage = ref(false)
-  const page = ref(0)
-  const currentUnread = ref(false)
-  const fetchNotifications = async ({ unread = false, reset = false } = {}) => {
+  const fetchNotifications = async () => {
     const config = useRuntimeConfig()
     const API_BASE_URL = config.public.apiBaseUrl
     if (isLoadingMessage && notifications && markRead) {
@@ -128,18 +126,11 @@ function createFetchNotifications() {
         const token = getToken()
         if (!token) {
           toast.error('请先登录')
-          return false
-        }
-        if (reset) {
-          notifications.value = []
-          page.value = 0
-          currentUnread.value = unread
+          return
         }
         isLoadingMessage.value = true
-        const endpoint = currentUnread.value
-          ? `/api/notifications/unread?page=${page.value}`
-          : `/api/notifications?page=${page.value}`
-        const res = await fetch(`${API_BASE_URL}${endpoint}`, {
+        notifications.value = []
+        const res = await fetch(`${API_BASE_URL}/api/notifications`, {
           headers: {
             Authorization: `Bearer ${token}`,
           },
@@ -147,7 +138,7 @@ function createFetchNotifications() {
         isLoadingMessage.value = false
         if (!res.ok) {
           toast.error('获取通知失败')
-          return true
+          return
         }
         const data = await res.json()
 
@@ -293,14 +284,10 @@ function createFetchNotifications() {
             })
           }
         }
-        page.value++
-        return data.length < 50
       } catch (e) {
         console.error(e)
-        return true
       }
     }
-    return true
   }
 
   const markRead = async (id) => {
@@ -348,6 +335,7 @@ function createFetchNotifications() {
     markRead,
     notifications,
     isLoadingMessage,
+    markRead,
     markAllRead,
   }
 }

From 1a12bec7b11dd863f689d4a135f678f491431a63 Mon Sep 17 00:00:00 2001
From: tim <nagisa12164@163.com>
Date: Tue, 19 Aug 2025 18:26:55 +0800
Subject: [PATCH 08/16] Revert "feat: add paginated notification APIs and
 frontend"

This reverts commit 7dd1f1b3d02c764912d79fc0a963c4fa41dedbb2.
---
 .../controller/NotificationController.java    |  12 +-
 .../repository/NotificationRepository.java    |   4 -
 .../openisle/service/NotificationService.java |   7 +-
 frontend_nuxt/pages/message.vue               |  58 +--
 frontend_nuxt/utils/notification.js           | 441 ++++++++----------
 5 files changed, 209 insertions(+), 313 deletions(-)

diff --git a/backend/src/main/java/com/openisle/controller/NotificationController.java b/backend/src/main/java/com/openisle/controller/NotificationController.java
index 1149bff37..d25d2a808 100644
--- a/backend/src/main/java/com/openisle/controller/NotificationController.java
+++ b/backend/src/main/java/com/openisle/controller/NotificationController.java
@@ -23,17 +23,9 @@ public class NotificationController {
     private final NotificationMapper notificationMapper;
 
     @GetMapping
-    public List<NotificationDto> list(@RequestParam(value = "page", defaultValue = "0") int page,
+    public List<NotificationDto> list(@RequestParam(value = "read", required = false) Boolean read,
                                       Authentication auth) {
-        return notificationService.listNotifications(auth.getName(), null, page).stream()
-                .map(notificationMapper::toDto)
-                .collect(Collectors.toList());
-    }
-
-    @GetMapping("/unread")
-    public List<NotificationDto> listUnread(@RequestParam(value = "page", defaultValue = "0") int page,
-                                            Authentication auth) {
-        return notificationService.listNotifications(auth.getName(), false, page).stream()
+        return notificationService.listNotifications(auth.getName(), read).stream()
                 .map(notificationMapper::toDto)
                 .collect(Collectors.toList());
     }
diff --git a/backend/src/main/java/com/openisle/repository/NotificationRepository.java b/backend/src/main/java/com/openisle/repository/NotificationRepository.java
index 65fddca4c..1e897b3a0 100644
--- a/backend/src/main/java/com/openisle/repository/NotificationRepository.java
+++ b/backend/src/main/java/com/openisle/repository/NotificationRepository.java
@@ -5,8 +5,6 @@ import com.openisle.model.User;
 import com.openisle.model.Post;
 import com.openisle.model.Comment;
 import com.openisle.model.NotificationType;
-import org.springframework.data.domain.Page;
-import org.springframework.data.domain.Pageable;
 import org.springframework.data.jpa.repository.JpaRepository;
 
 import java.util.List;
@@ -15,8 +13,6 @@ 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);
diff --git a/backend/src/main/java/com/openisle/service/NotificationService.java b/backend/src/main/java/com/openisle/service/NotificationService.java
index 088d0f61a..6ecf571e8 100644
--- a/backend/src/main/java/com/openisle/service/NotificationService.java
+++ b/backend/src/main/java/com/openisle/service/NotificationService.java
@@ -180,16 +180,15 @@ public class NotificationService {
         userRepository.save(user);
     }
 
-    public List<Notification> listNotifications(String username, Boolean read, int page) {
+    public List<Notification> listNotifications(String username, Boolean read) {
         User user = userRepository.findByUsername(username)
                 .orElseThrow(() -> new com.openisle.exception.NotFoundException("User not found"));
         Set<NotificationType> disabled = user.getDisabledNotificationTypes();
         List<Notification> list;
-        var pageable = org.springframework.data.domain.PageRequest.of(page, 50);
         if (read == null) {
-            list = notificationRepository.findByUserOrderByCreatedAtDesc(user, pageable).getContent();
+            list = notificationRepository.findByUserOrderByCreatedAtDesc(user);
         } else {
-            list = notificationRepository.findByUserAndReadOrderByCreatedAtDesc(user, read, pageable).getContent();
+            list = notificationRepository.findByUserAndReadOrderByCreatedAtDesc(user, read);
         }
         return list.stream().filter(n -> !disabled.contains(n.getType())).collect(Collectors.toList());
     }
diff --git a/frontend_nuxt/pages/message.vue b/frontend_nuxt/pages/message.vue
index 30eed2239..061eedd37 100644
--- a/frontend_nuxt/pages/message.vue
+++ b/frontend_nuxt/pages/message.vue
@@ -53,13 +53,13 @@
       </div>
 
       <BasePlaceholder
-        v-else-if="displayNotifications.length === 0"
+        v-else-if="filteredNotifications.length === 0"
         text="暂时没有消息 :)"
         icon="fas fa-inbox"
       />
 
-      <div class="timeline-container" v-if="displayNotifications.length > 0">
-        <BaseTimeline :items="displayNotifications">
+      <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>
@@ -506,39 +506,25 @@
           </template>
         </BaseTimeline>
       </div>
-
-      <InfiniteLoadMore
-        v-if="displayNotifications.length > 0"
-        :key="ioKey"
-        :on-load="fetchNextPage"
-        :pause="isLoadingMessage"
-        root-margin="200px 0px"
-      />
     </template>
   </div>
 </template>
 
 <script setup>
-import { computed, onActivated, ref, watch } from '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 { toast } from '~/main'
 import { authState, getToken } from '~/utils/auth'
 import { stripMarkdownLength } from '~/utils/markdown'
-import InfiniteLoadMore from '~/components/InfiniteLoadMore.vue'
 import {
-  fetchAllNotifications,
-  fetchUnreadNotifications,
+  fetchNotifications,
   fetchUnreadCount,
-  isLoadingAll,
-  isLoadingUnread,
+  isLoadingMessage,
   markRead,
-  allNotifications,
-  unreadNotifications,
+  notifications,
   markAllRead,
-  resetAll,
-  resetUnread,
 } from '~/utils/notification'
 import TimeManager from '~/utils/time'
 
@@ -549,24 +535,9 @@ const selectedTab = ref(
   ['all', 'unread', 'control'].includes(route.query.tab) ? route.query.tab : 'unread',
 )
 const notificationPrefs = ref([])
-const displayNotifications = computed(() =>
-  selectedTab.value === 'all' ? allNotifications.value : unreadNotifications.value,
+const filteredNotifications = computed(() =>
+  selectedTab.value === 'all' ? notifications.value : notifications.value.filter((n) => !n.read),
 )
-const isLoadingMessage = computed(() =>
-  selectedTab.value === 'all' ? isLoadingAll.value : isLoadingUnread.value,
-)
-const ioKey = ref(0)
-
-const fetchNextPage = () =>
-  selectedTab.value === 'all' ? fetchAllNotifications() : fetchUnreadNotifications()
-
-const loadInitial = async () => {
-  if (selectedTab.value === 'all') {
-    if (allNotifications.value.length === 0) await fetchAllNotifications()
-  } else if (selectedTab.value === 'unread') {
-    if (unreadNotifications.value.length === 0) await fetchUnreadNotifications()
-  }
-}
 
 const fetchPrefs = async () => {
   notificationPrefs.value = await fetchNotificationPreferences()
@@ -576,9 +547,7 @@ const togglePref = async (pref) => {
   const ok = await updateNotificationPreference(pref.type, !pref.enabled)
   if (ok) {
     pref.enabled = !pref.enabled
-    resetAll()
-    resetUnread()
-    await loadInitial()
+    await fetchNotifications()
     await fetchUnreadCount()
   } else {
     toast.error('操作失败')
@@ -658,13 +627,8 @@ const formatType = (t) => {
   }
 }
 
-watch(selectedTab, async () => {
-  await loadInitial()
-  ioKey.value++
-})
-
 onActivated(() => {
-  loadInitial()
+  fetchNotifications()
   fetchPrefs()
 })
 </script>
diff --git a/frontend_nuxt/utils/notification.js b/frontend_nuxt/utils/notification.js
index 28403331e..7c0245b94 100644
--- a/frontend_nuxt/utils/notification.js
+++ b/frontend_nuxt/utils/notification.js
@@ -4,7 +4,9 @@ import { toast } from '~/composables/useToast'
 import { authState, getToken } from '~/utils/auth'
 import { reactionEmojiMap } from '~/utils/reactions'
 
-export const notificationState = reactive({ unreadCount: 0 })
+export const notificationState = reactive({
+  unreadCount: 0,
+})
 
 const iconMap = {
   POST_VIEWED: 'fas fa-eye',
@@ -55,6 +57,7 @@ export async function markNotificationsRead(ids) {
   try {
     const config = useRuntimeConfig()
     const API_BASE_URL = config.public.apiBaseUrl
+
     const token = getToken()
     if (!token || !ids || ids.length === 0) return false
     const res = await fetch(`${API_BASE_URL}/api/notifications/read`, {
@@ -75,6 +78,7 @@ export async function fetchNotificationPreferences() {
   try {
     const config = useRuntimeConfig()
     const API_BASE_URL = config.public.apiBaseUrl
+
     const token = getToken()
     if (!token) return []
     const res = await fetch(`${API_BASE_URL}/api/notifications/prefs`, {
@@ -108,219 +112,193 @@ export async function updateNotificationPreference(type, enabled) {
 }
 
 /**
- * 提供通知列表的分页获取与状态管理
+ * 处理信息的高阶函数
+ * @returns
  */
 function createFetchNotifications() {
-  const allNotifications = ref([])
-  const unreadNotifications = ref([])
-  const pageAll = ref(0)
-  const pageUnread = ref(0)
-  const isLoadingAll = ref(false)
-  const isLoadingUnread = ref(false)
+  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 processAndPush = (data, target) => {
-    for (const n of data) {
-      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 })
-            }
-          },
-        })
-      } 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)
-              navigateTo(`/posts/${n.post.id}`, { replace: true })
-            }
-          },
-        })
-      } else if (n.type === 'LOTTERY_DRAW') {
-        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_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],
-        })
+        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 fetchAllNotifications = async () => {
-    const config = useRuntimeConfig()
-    const API_BASE_URL = config.public.apiBaseUrl
-    const token = getToken()
-    if (!token) {
-      toast.error('请先登录')
-      return { done: true }
-    }
-    isLoadingAll.value = true
-    const res = await fetch(`${API_BASE_URL}/api/notifications?page=${pageAll.value}`, {
-      headers: { Authorization: `Bearer ${token}` },
-    })
-    isLoadingAll.value = false
-    if (!res.ok) {
-      toast.error('获取通知失败')
-      return { done: true }
-    }
-    const data = await res.json()
-    processAndPush(data, allNotifications.value)
-    pageAll.value++
-    return { done: data.length < 50 }
-  }
-
-  const fetchUnreadNotifications = async () => {
-    const config = useRuntimeConfig()
-    const API_BASE_URL = config.public.apiBaseUrl
-    const token = getToken()
-    if (!token) {
-      toast.error('请先登录')
-      return { done: true }
-    }
-    isLoadingUnread.value = true
-    const res = await fetch(`${API_BASE_URL}/api/notifications/unread?page=${pageUnread.value}`, {
-      headers: { Authorization: `Bearer ${token}` },
-    })
-    isLoadingUnread.value = false
-    if (!res.ok) {
-      toast.error('获取通知失败')
-      return { done: true }
-    }
-    const data = await res.json()
-    processAndPush(data, unreadNotifications.value)
-    pageUnread.value++
-    return { done: data.length < 50 }
-  }
-
   const markRead = async (id) => {
     if (!id) return
-    const nAll = allNotifications.value.find((n) => n.id === id)
-    const idxUnread = unreadNotifications.value.findIndex((n) => n.id === id)
-    const unreadItem = idxUnread !== -1 ? unreadNotifications.value[idxUnread] : null
-    if (nAll) nAll.read = true
-    if (idxUnread !== -1) unreadNotifications.value.splice(idxUnread, 1)
+    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) {
-      if (nAll) nAll.read = false
-      if (idxUnread !== -1 && unreadItem) unreadNotifications.value.splice(idxUnread, 0, unreadItem)
+      n.read = false
       notificationState.unreadCount++
     } else {
       fetchUnreadCount()
@@ -328,28 +306,20 @@ function createFetchNotifications() {
   }
 
   const markAllRead = async () => {
-    const idsToMark = [
-      ...new Set(
-        [...allNotifications.value, ...unreadNotifications.value]
-          .filter((n) => n.type !== 'REGISTER_REQUEST' && !n.read)
-          .map((n) => n.id),
-      ),
-    ]
+    // 除了 REGISTER_REQUEST 类型消息
+    const idsToMark = notifications.value
+      .filter((n) => n.type !== 'REGISTER_REQUEST' && !n.read)
+      .map((n) => n.id)
     if (idsToMark.length === 0) return
-    allNotifications.value.forEach((n) => {
+    notifications.value.forEach((n) => {
       if (n.type !== 'REGISTER_REQUEST') n.read = true
     })
-    const prevUnread = [...unreadNotifications.value]
-    unreadNotifications.value = unreadNotifications.value.filter(
-      (n) => n.type === 'REGISTER_REQUEST',
-    )
-    notificationState.unreadCount = unreadNotifications.value.length
+    notificationState.unreadCount = notifications.value.filter((n) => !n.read).length
     const ok = await markNotificationsRead(idsToMark)
     if (!ok) {
-      allNotifications.value.forEach((n) => {
+      notifications.value.forEach((n) => {
         if (idsToMark.includes(n.id)) n.read = false
       })
-      unreadNotifications.value = prevUnread
       await fetchUnreadCount()
       return
     }
@@ -360,40 +330,15 @@ function createFetchNotifications() {
       toast.success('已读所有消息')
     }
   }
-
-  const resetAll = () => {
-    pageAll.value = 0
-    allNotifications.value = []
-  }
-
-  const resetUnread = () => {
-    pageUnread.value = 0
-    unreadNotifications.value = []
-  }
-
   return {
-    fetchAllNotifications,
-    fetchUnreadNotifications,
+    fetchNotifications,
+    markRead,
+    notifications,
+    isLoadingMessage,
     markRead,
     markAllRead,
-    allNotifications,
-    unreadNotifications,
-    isLoadingAll,
-    isLoadingUnread,
-    resetAll,
-    resetUnread,
   }
 }
 
-export const {
-  fetchAllNotifications,
-  fetchUnreadNotifications,
-  markRead,
-  markAllRead,
-  allNotifications,
-  unreadNotifications,
-  isLoadingAll,
-  isLoadingUnread,
-  resetAll,
-  resetUnread,
-} = createFetchNotifications()
+export const { fetchNotifications, markRead, notifications, isLoadingMessage, markAllRead } =
+  createFetchNotifications()

From a64fd71bbe108358c2d93c3d017d5b298b2ea9ab Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Tue, 19 Aug 2025 18:45:56 +0800
Subject: [PATCH 09/16] feat: support paginated notifications

---
 .../controller/NotificationController.java    |  14 +-
 .../repository/NotificationRepository.java    |   4 +
 .../openisle/service/NotificationService.java |  21 +-
 .../NotificationControllerTest.java           |  19 +-
 .../service/NotificationServiceTest.java      |   7 +-
 frontend_nuxt/pages/message.vue               |  29 +-
 frontend_nuxt/utils/notification.js           | 347 +++++++++---------
 7 files changed, 255 insertions(+), 186 deletions(-)

diff --git a/backend/src/main/java/com/openisle/controller/NotificationController.java b/backend/src/main/java/com/openisle/controller/NotificationController.java
index d25d2a808..d5813304c 100644
--- a/backend/src/main/java/com/openisle/controller/NotificationController.java
+++ b/backend/src/main/java/com/openisle/controller/NotificationController.java
@@ -23,9 +23,19 @@ public class NotificationController {
     private final NotificationMapper notificationMapper;
 
     @GetMapping
-    public List<NotificationDto> list(@RequestParam(value = "read", required = false) Boolean read,
+    public List<NotificationDto> list(@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(), 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.listUnreadNotifications(auth.getName(), page, size).stream()
                 .map(notificationMapper::toDto)
                 .collect(Collectors.toList());
     }
diff --git a/backend/src/main/java/com/openisle/repository/NotificationRepository.java b/backend/src/main/java/com/openisle/repository/NotificationRepository.java
index 1e897b3a0..3434c083f 100644
--- a/backend/src/main/java/com/openisle/repository/NotificationRepository.java
+++ b/backend/src/main/java/com/openisle/repository/NotificationRepository.java
@@ -5,6 +5,8 @@ import com.openisle.model.User;
 import com.openisle.model.Post;
 import com.openisle.model.Comment;
 import com.openisle.model.NotificationType;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
 import org.springframework.data.jpa.repository.JpaRepository;
 
 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> findByUser(User user, Pageable pageable);
+    Page<Notification> findByUserAndRead(User user, boolean read, Pageable pageable);
     long countByUserAndRead(User user, boolean read);
     List<Notification> findByPost(Post post);
     List<Notification> findByComment(Comment comment);
diff --git a/backend/src/main/java/com/openisle/service/NotificationService.java b/backend/src/main/java/com/openisle/service/NotificationService.java
index 6ecf571e8..a43a1c1c4 100644
--- a/backend/src/main/java/com/openisle/service/NotificationService.java
+++ b/backend/src/main/java/com/openisle/service/NotificationService.java
@@ -24,6 +24,10 @@ import java.util.List;
 import java.util.ArrayList;
 import java.util.concurrent.Executor;
 import java.util.stream.Collectors;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.PageRequest;
+import org.springframework.data.domain.Pageable;
+import org.springframework.data.domain.Sort;
 
 /** Service for creating and retrieving notifications. */
 @Service
@@ -180,15 +184,24 @@ public class NotificationService {
         userRepository.save(user);
     }
 
-    public List<Notification> listNotifications(String username, Boolean read) {
+    public List<Notification> listNotifications(String username, int page, int size) {
+        return listNotifications(username, null, page, size);
+    }
+
+    public List<Notification> listUnreadNotifications(String username, int page, int size) {
+        return listNotifications(username, false, page, size);
+    }
+
+    private 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();
-        List<Notification> list;
+        Pageable pageable = PageRequest.of(page, size, Sort.by(Sort.Direction.DESC, "createdAt"));
+        Page<Notification> list;
         if (read == null) {
-            list = notificationRepository.findByUserOrderByCreatedAtDesc(user);
+            list = notificationRepository.findByUser(user, pageable);
         } else {
-            list = notificationRepository.findByUserAndReadOrderByCreatedAtDesc(user, read);
+            list = notificationRepository.findByUserAndRead(user, read, pageable);
         }
         return list.stream().filter(n -> !disabled.contains(n.getType())).collect(Collectors.toList());
     }
diff --git a/backend/src/test/java/com/openisle/controller/NotificationControllerTest.java b/backend/src/test/java/com/openisle/controller/NotificationControllerTest.java
index 6b74440a1..89d28d892 100644
--- a/backend/src/test/java/com/openisle/controller/NotificationControllerTest.java
+++ b/backend/src/test/java/com/openisle/controller/NotificationControllerTest.java
@@ -45,7 +45,7 @@ class NotificationControllerTest {
         p.setId(2L);
         n.setPost(p);
         n.setCreatedAt(LocalDateTime.now());
-        when(notificationService.listNotifications("alice", null))
+        when(notificationService.listNotifications("alice", 0, 30))
                 .thenReturn(List.of(n));
 
         NotificationDto dto = new NotificationDto();
@@ -62,6 +62,23 @@ class NotificationControllerTest {
                 .andExpect(jsonPath("$[0].post.id").value(2));
     }
 
+    @Test
+    void listUnreadNotifications() throws Exception {
+        Notification n = new Notification();
+        n.setId(1L);
+        when(notificationService.listUnreadNotifications("alice", 0, 30))
+                .thenReturn(List.of(n));
+
+        NotificationDto dto = new NotificationDto();
+        dto.setId(1L);
+        when(notificationMapper.toDto(n)).thenReturn(dto);
+
+        mockMvc.perform(get("/api/notifications/unread")
+                        .principal(new UsernamePasswordAuthenticationToken("alice","p")))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$[0].id").value(1));
+    }
+
     @Test
     void markReadEndpoint() throws Exception {
         mockMvc.perform(post("/api/notifications/read")
diff --git a/backend/src/test/java/com/openisle/service/NotificationServiceTest.java b/backend/src/test/java/com/openisle/service/NotificationServiceTest.java
index a01d3c95b..2f8292e0e 100644
--- a/backend/src/test/java/com/openisle/service/NotificationServiceTest.java
+++ b/backend/src/test/java/com/openisle/service/NotificationServiceTest.java
@@ -11,6 +11,7 @@ import org.mockito.Mockito;
 
 import java.util.List;
 import java.util.Optional;
+import org.springframework.data.domain.Pageable;
 
 import static org.junit.jupiter.api.Assertions.*;
 import static org.mockito.Mockito.*;
@@ -65,12 +66,12 @@ class NotificationServiceTest {
         when(uRepo.findByUsername("bob")).thenReturn(Optional.of(user));
 
         Notification n = new Notification();
-        when(nRepo.findByUserOrderByCreatedAtDesc(user)).thenReturn(List.of(n));
+        when(nRepo.findByUser(eq(user), any(Pageable.class))).thenReturn(new org.springframework.data.domain.PageImpl<>(List.of(n)));
 
-        List<Notification> list = service.listNotifications("bob", null);
+        List<Notification> list = service.listNotifications("bob", 0, 30);
 
         assertEquals(1, list.size());
-        verify(nRepo).findByUserOrderByCreatedAtDesc(user);
+        verify(nRepo).findByUser(eq(user), any(Pageable.class));
     }
 
     @Test
diff --git a/frontend_nuxt/pages/message.vue b/frontend_nuxt/pages/message.vue
index 061eedd37..bdc05a19d 100644
--- a/frontend_nuxt/pages/message.vue
+++ b/frontend_nuxt/pages/message.vue
@@ -53,13 +53,13 @@
       </div>
 
       <BasePlaceholder
-        v-else-if="filteredNotifications.length === 0"
+        v-else-if="notifications.length === 0"
         text="暂时没有消息 :)"
         icon="fas fa-inbox"
       />
 
-      <div class="timeline-container" v-if="filteredNotifications.length > 0">
-        <BaseTimeline :items="filteredNotifications">
+      <div class="timeline-container" v-if="notifications.length > 0">
+        <BaseTimeline :items="notifications">
           <template #item="{ item }">
             <div class="notif-content" :class="{ read: item.read }">
               <span v-if="!item.read" class="unread-dot"></span>
@@ -505,15 +505,17 @@
             </div>
           </template>
         </BaseTimeline>
+        <InfiniteLoadMore :key="selectedTab" :on-load="fetchMore" :pause="isLoadingMessage" />
       </div>
     </template>
   </div>
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from 'vue'
+import { ref, watch, onActivated } 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'
@@ -525,6 +527,8 @@ import {
   markRead,
   notifications,
   markAllRead,
+  fetchNotificationPreferences,
+  updateNotificationPreference,
 } from '~/utils/notification'
 import TimeManager from '~/utils/time'
 
@@ -535,9 +539,16 @@ const selectedTab = ref(
   ['all', 'unread', 'control'].includes(route.query.tab) ? route.query.tab : 'unread',
 )
 const notificationPrefs = ref([])
-const filteredNotifications = computed(() =>
-  selectedTab.value === 'all' ? notifications.value : notifications.value.filter((n) => !n.read),
-)
+
+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 fetchPrefs = async () => {
   notificationPrefs.value = await fetchNotificationPreferences()
@@ -547,7 +558,7 @@ const togglePref = async (pref) => {
   const ok = await updateNotificationPreference(pref.type, !pref.enabled)
   if (ok) {
     pref.enabled = !pref.enabled
-    await fetchNotifications()
+    await fetchNotifications({ reset: true, read: selectedTab.value === 'unread' ? false : null })
     await fetchUnreadCount()
   } else {
     toast.error('操作失败')
@@ -628,7 +639,7 @@ const formatType = (t) => {
 }
 
 onActivated(() => {
-  fetchNotifications()
+  loadInitial()
   fetchPrefs()
 })
 </script>
diff --git a/frontend_nuxt/utils/notification.js b/frontend_nuxt/utils/notification.js
index 7c0245b94..c31ba4d81 100644
--- a/frontend_nuxt/utils/notification.js
+++ b/frontend_nuxt/utils/notification.js
@@ -118,175 +118,189 @@ export async function updateNotificationPreference(type, enabled) {
 function createFetchNotifications() {
   const notifications = ref([])
   const isLoadingMessage = ref(false)
-  const fetchNotifications = async () => {
+  const page = ref(0)
+  const pageSize = 30
+  const readFilter = ref(null)
+  const fetchNotifications = async ({ reset = false, read = null } = {}) => {
     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)
+    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],
+          })
+        }
+      }
+      const done = data.length < pageSize
+      if (!done) page.value++
+      return done
+    } catch (e) {
+      console.error(e)
+      isLoadingMessage.value = false
+      return true
     }
   }
 
@@ -335,7 +349,6 @@ function createFetchNotifications() {
     markRead,
     notifications,
     isLoadingMessage,
-    markRead,
     markAllRead,
   }
 }

From 3f2829cd37e30814dbd125d15906efa05fd3d5a1 Mon Sep 17 00:00:00 2001
From: tim <nagisa12164@163.com>
Date: Tue, 19 Aug 2025 19:01:54 +0800
Subject: [PATCH 10/16] Revert "feat: support paginated notifications"

This reverts commit a64fd71bbe108358c2d93c3d017d5b298b2ea9ab.
---
 .../controller/NotificationController.java    |  14 +-
 .../repository/NotificationRepository.java    |   4 -
 .../openisle/service/NotificationService.java |  21 +-
 .../NotificationControllerTest.java           |  19 +-
 .../service/NotificationServiceTest.java      |   7 +-
 frontend_nuxt/pages/message.vue               |  29 +-
 frontend_nuxt/utils/notification.js           | 345 +++++++++---------
 7 files changed, 185 insertions(+), 254 deletions(-)

diff --git a/backend/src/main/java/com/openisle/controller/NotificationController.java b/backend/src/main/java/com/openisle/controller/NotificationController.java
index d5813304c..d25d2a808 100644
--- a/backend/src/main/java/com/openisle/controller/NotificationController.java
+++ b/backend/src/main/java/com/openisle/controller/NotificationController.java
@@ -23,19 +23,9 @@ public class NotificationController {
     private final NotificationMapper notificationMapper;
 
     @GetMapping
-    public List<NotificationDto> list(@RequestParam(value = "page", defaultValue = "0") int page,
-                                      @RequestParam(value = "size", defaultValue = "30") int size,
+    public List<NotificationDto> list(@RequestParam(value = "read", required = false) Boolean read,
                                       Authentication auth) {
-        return notificationService.listNotifications(auth.getName(), 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.listUnreadNotifications(auth.getName(), page, size).stream()
+        return notificationService.listNotifications(auth.getName(), read).stream()
                 .map(notificationMapper::toDto)
                 .collect(Collectors.toList());
     }
diff --git a/backend/src/main/java/com/openisle/repository/NotificationRepository.java b/backend/src/main/java/com/openisle/repository/NotificationRepository.java
index 3434c083f..1e897b3a0 100644
--- a/backend/src/main/java/com/openisle/repository/NotificationRepository.java
+++ b/backend/src/main/java/com/openisle/repository/NotificationRepository.java
@@ -5,8 +5,6 @@ import com.openisle.model.User;
 import com.openisle.model.Post;
 import com.openisle.model.Comment;
 import com.openisle.model.NotificationType;
-import org.springframework.data.domain.Page;
-import org.springframework.data.domain.Pageable;
 import org.springframework.data.jpa.repository.JpaRepository;
 
 import java.util.List;
@@ -15,8 +13,6 @@ 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> findByUser(User user, Pageable pageable);
-    Page<Notification> findByUserAndRead(User user, boolean read, Pageable pageable);
     long countByUserAndRead(User user, boolean read);
     List<Notification> findByPost(Post post);
     List<Notification> findByComment(Comment comment);
diff --git a/backend/src/main/java/com/openisle/service/NotificationService.java b/backend/src/main/java/com/openisle/service/NotificationService.java
index a43a1c1c4..6ecf571e8 100644
--- a/backend/src/main/java/com/openisle/service/NotificationService.java
+++ b/backend/src/main/java/com/openisle/service/NotificationService.java
@@ -24,10 +24,6 @@ import java.util.List;
 import java.util.ArrayList;
 import java.util.concurrent.Executor;
 import java.util.stream.Collectors;
-import org.springframework.data.domain.Page;
-import org.springframework.data.domain.PageRequest;
-import org.springframework.data.domain.Pageable;
-import org.springframework.data.domain.Sort;
 
 /** Service for creating and retrieving notifications. */
 @Service
@@ -184,24 +180,15 @@ public class NotificationService {
         userRepository.save(user);
     }
 
-    public List<Notification> listNotifications(String username, int page, int size) {
-        return listNotifications(username, null, page, size);
-    }
-
-    public List<Notification> listUnreadNotifications(String username, int page, int size) {
-        return listNotifications(username, false, page, size);
-    }
-
-    private List<Notification> listNotifications(String username, Boolean read, int page, int size) {
+    public List<Notification> listNotifications(String username, Boolean read) {
         User user = userRepository.findByUsername(username)
                 .orElseThrow(() -> new com.openisle.exception.NotFoundException("User not found"));
         Set<NotificationType> disabled = user.getDisabledNotificationTypes();
-        Pageable pageable = PageRequest.of(page, size, Sort.by(Sort.Direction.DESC, "createdAt"));
-        Page<Notification> list;
+        List<Notification> list;
         if (read == null) {
-            list = notificationRepository.findByUser(user, pageable);
+            list = notificationRepository.findByUserOrderByCreatedAtDesc(user);
         } else {
-            list = notificationRepository.findByUserAndRead(user, read, pageable);
+            list = notificationRepository.findByUserAndReadOrderByCreatedAtDesc(user, read);
         }
         return list.stream().filter(n -> !disabled.contains(n.getType())).collect(Collectors.toList());
     }
diff --git a/backend/src/test/java/com/openisle/controller/NotificationControllerTest.java b/backend/src/test/java/com/openisle/controller/NotificationControllerTest.java
index 89d28d892..6b74440a1 100644
--- a/backend/src/test/java/com/openisle/controller/NotificationControllerTest.java
+++ b/backend/src/test/java/com/openisle/controller/NotificationControllerTest.java
@@ -45,7 +45,7 @@ class NotificationControllerTest {
         p.setId(2L);
         n.setPost(p);
         n.setCreatedAt(LocalDateTime.now());
-        when(notificationService.listNotifications("alice", 0, 30))
+        when(notificationService.listNotifications("alice", null))
                 .thenReturn(List.of(n));
 
         NotificationDto dto = new NotificationDto();
@@ -62,23 +62,6 @@ class NotificationControllerTest {
                 .andExpect(jsonPath("$[0].post.id").value(2));
     }
 
-    @Test
-    void listUnreadNotifications() throws Exception {
-        Notification n = new Notification();
-        n.setId(1L);
-        when(notificationService.listUnreadNotifications("alice", 0, 30))
-                .thenReturn(List.of(n));
-
-        NotificationDto dto = new NotificationDto();
-        dto.setId(1L);
-        when(notificationMapper.toDto(n)).thenReturn(dto);
-
-        mockMvc.perform(get("/api/notifications/unread")
-                        .principal(new UsernamePasswordAuthenticationToken("alice","p")))
-                .andExpect(status().isOk())
-                .andExpect(jsonPath("$[0].id").value(1));
-    }
-
     @Test
     void markReadEndpoint() throws Exception {
         mockMvc.perform(post("/api/notifications/read")
diff --git a/backend/src/test/java/com/openisle/service/NotificationServiceTest.java b/backend/src/test/java/com/openisle/service/NotificationServiceTest.java
index 2f8292e0e..a01d3c95b 100644
--- a/backend/src/test/java/com/openisle/service/NotificationServiceTest.java
+++ b/backend/src/test/java/com/openisle/service/NotificationServiceTest.java
@@ -11,7 +11,6 @@ import org.mockito.Mockito;
 
 import java.util.List;
 import java.util.Optional;
-import org.springframework.data.domain.Pageable;
 
 import static org.junit.jupiter.api.Assertions.*;
 import static org.mockito.Mockito.*;
@@ -66,12 +65,12 @@ class NotificationServiceTest {
         when(uRepo.findByUsername("bob")).thenReturn(Optional.of(user));
 
         Notification n = new Notification();
-        when(nRepo.findByUser(eq(user), any(Pageable.class))).thenReturn(new org.springframework.data.domain.PageImpl<>(List.of(n)));
+        when(nRepo.findByUserOrderByCreatedAtDesc(user)).thenReturn(List.of(n));
 
-        List<Notification> list = service.listNotifications("bob", 0, 30);
+        List<Notification> list = service.listNotifications("bob", null);
 
         assertEquals(1, list.size());
-        verify(nRepo).findByUser(eq(user), any(Pageable.class));
+        verify(nRepo).findByUserOrderByCreatedAtDesc(user);
     }
 
     @Test
diff --git a/frontend_nuxt/pages/message.vue b/frontend_nuxt/pages/message.vue
index bdc05a19d..061eedd37 100644
--- 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>
diff --git a/frontend_nuxt/utils/notification.js b/frontend_nuxt/utils/notification.js
index c31ba4d81..7c0245b94 100644
--- 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,
   }
 }

From cc525c1c27498822e545fae208c0a4f187f2c415 Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Tue, 19 Aug 2025 19:27:07 +0800
Subject: [PATCH 11/16] feat: add paginated notification endpoints

---
 .../controller/NotificationController.java    |  14 +-
 .../repository/NotificationRepository.java    |   4 +
 .../openisle/service/NotificationService.java |  11 +-
 .../NotificationControllerTest.java           |  20 +-
 .../service/NotificationServiceTest.java      |   9 +-
 frontend_nuxt/pages/message.vue               |  46 ++-
 frontend_nuxt/utils/notification.js           | 325 +++++++++---------
 7 files changed, 242 insertions(+), 187 deletions(-)

diff --git a/backend/src/main/java/com/openisle/controller/NotificationController.java b/backend/src/main/java/com/openisle/controller/NotificationController.java
index d25d2a808..b9cb282ba 100644
--- a/backend/src/main/java/com/openisle/controller/NotificationController.java
+++ b/backend/src/main/java/com/openisle/controller/NotificationController.java
@@ -23,9 +23,19 @@ public class NotificationController {
     private final NotificationMapper notificationMapper;
 
     @GetMapping
-    public List<NotificationDto> list(@RequestParam(value = "read", required = false) Boolean read,
+    public List<NotificationDto> list(@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(), null, 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());
     }
diff --git a/backend/src/main/java/com/openisle/repository/NotificationRepository.java b/backend/src/main/java/com/openisle/repository/NotificationRepository.java
index 1e897b3a0..90c5d9463 100644
--- a/backend/src/main/java/com/openisle/repository/NotificationRepository.java
+++ b/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);
diff --git a/backend/src/main/java/com/openisle/service/NotificationService.java b/backend/src/main/java/com/openisle/service/NotificationService.java
index 6ecf571e8..ffd2078e8 100644
--- a/backend/src/main/java/com/openisle/service/NotificationService.java
+++ b/backend/src/main/java/com/openisle/service/NotificationService.java
@@ -180,17 +180,18 @@ 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();
-        List<Notification> list;
+        org.springframework.data.domain.Pageable pageable = org.springframework.data.domain.PageRequest.of(page, size);
+        org.springframework.data.domain.Page<Notification> result;
         if (read == null) {
-            list = notificationRepository.findByUserOrderByCreatedAtDesc(user);
+            result = notificationRepository.findByUserOrderByCreatedAtDesc(user, pageable);
         } else {
-            list = notificationRepository.findByUserAndReadOrderByCreatedAtDesc(user, read);
+            result = notificationRepository.findByUserAndReadOrderByCreatedAtDesc(user, read, pageable);
         }
-        return list.stream().filter(n -> !disabled.contains(n.getType())).collect(Collectors.toList());
+        return result.stream().filter(n -> !disabled.contains(n.getType())).collect(Collectors.toList());
     }
 
     public void markRead(String username, List<Long> ids) {
diff --git a/backend/src/test/java/com/openisle/controller/NotificationControllerTest.java b/backend/src/test/java/com/openisle/controller/NotificationControllerTest.java
index 6b74440a1..c3cea2d30 100644
--- a/backend/src/test/java/com/openisle/controller/NotificationControllerTest.java
+++ b/backend/src/test/java/com/openisle/controller/NotificationControllerTest.java
@@ -45,7 +45,7 @@ class NotificationControllerTest {
         p.setId(2L);
         n.setPost(p);
         n.setCreatedAt(LocalDateTime.now());
-        when(notificationService.listNotifications("alice", null))
+        when(notificationService.listNotifications("alice", null, 0, 30))
                 .thenReturn(List.of(n));
 
         NotificationDto dto = new NotificationDto();
@@ -62,6 +62,24 @@ class NotificationControllerTest {
                 .andExpect(jsonPath("$[0].post.id").value(2));
     }
 
+    @Test
+    void listUnreadNotifications() throws Exception {
+        Notification n = new Notification();
+        n.setId(5L);
+        n.setType(NotificationType.POST_VIEWED);
+        when(notificationService.listNotifications("alice", false, 0, 30))
+                .thenReturn(List.of(n));
+
+        NotificationDto dto = new NotificationDto();
+        dto.setId(5L);
+        when(notificationMapper.toDto(n)).thenReturn(dto);
+
+        mockMvc.perform(get("/api/notifications/unread")
+                        .principal(new UsernamePasswordAuthenticationToken("alice","p")))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$[0].id").value(5));
+    }
+
     @Test
     void markReadEndpoint() throws Exception {
         mockMvc.perform(post("/api/notifications/read")
diff --git a/backend/src/test/java/com/openisle/service/NotificationServiceTest.java b/backend/src/test/java/com/openisle/service/NotificationServiceTest.java
index a01d3c95b..4e632920e 100644
--- a/backend/src/test/java/com/openisle/service/NotificationServiceTest.java
+++ b/backend/src/test/java/com/openisle/service/NotificationServiceTest.java
@@ -11,6 +11,8 @@ import org.mockito.Mockito;
 
 import java.util.List;
 import java.util.Optional;
+import org.springframework.data.domain.PageImpl;
+import org.springframework.data.domain.Pageable;
 
 import static org.junit.jupiter.api.Assertions.*;
 import static org.mockito.Mockito.*;
@@ -65,12 +67,13 @@ class NotificationServiceTest {
         when(uRepo.findByUsername("bob")).thenReturn(Optional.of(user));
 
         Notification n = new Notification();
-        when(nRepo.findByUserOrderByCreatedAtDesc(user)).thenReturn(List.of(n));
+        when(nRepo.findByUserOrderByCreatedAtDesc(eq(user), any(Pageable.class)))
+                .thenReturn(new PageImpl<>(List.of(n)));
 
-        List<Notification> list = service.listNotifications("bob", null);
+        List<Notification> list = service.listNotifications("bob", null, 0, 10);
 
         assertEquals(1, list.size());
-        verify(nRepo).findByUserOrderByCreatedAtDesc(user);
+        verify(nRepo).findByUserOrderByCreatedAtDesc(eq(user), any(Pageable.class));
     }
 
     @Test
diff --git a/frontend_nuxt/pages/message.vue b/frontend_nuxt/pages/message.vue
index 061eedd37..4b89b6ec5 100644
--- a/frontend_nuxt/pages/message.vue
+++ b/frontend_nuxt/pages/message.vue
@@ -53,13 +53,13 @@
       </div>
 
       <BasePlaceholder
-        v-else-if="filteredNotifications.length === 0"
+        v-else-if="notifications.length === 0"
         text="暂时没有消息 :)"
         icon="fas fa-inbox"
       />
 
-      <div class="timeline-container" v-if="filteredNotifications.length > 0">
-        <BaseTimeline :items="filteredNotifications">
+      <div class="timeline-container" v-if="notifications.length > 0">
+        <BaseTimeline :items="notifications">
           <template #item="{ item }">
             <div class="notif-content" :class="{ read: item.read }">
               <span v-if="!item.read" class="unread-dot"></span>
@@ -505,16 +505,18 @@
             </div>
           </template>
         </BaseTimeline>
+        <InfiniteLoadMore :key="selectedTab" :on-load="loadMore" :pause="isLoadingMessage" />
       </div>
     </template>
   </div>
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from 'vue'
+import { ref, watch, onActivated } from 'vue'
 import BasePlaceholder from '~/components/BasePlaceholder.vue'
 import BaseTimeline from '~/components/BaseTimeline.vue'
 import NotificationContainer from '~/components/NotificationContainer.vue'
+import InfiniteLoadMore from '~/components/InfiniteLoadMore.vue'
 import { toast } from '~/main'
 import { authState, getToken } from '~/utils/auth'
 import { stripMarkdownLength } from '~/utils/markdown'
@@ -525,6 +527,9 @@ import {
   markRead,
   notifications,
   markAllRead,
+  hasMore,
+  fetchNotificationPreferences,
+  updateNotificationPreference,
 } from '~/utils/notification'
 import TimeManager from '~/utils/time'
 
@@ -535,9 +540,25 @@ const selectedTab = ref(
   ['all', 'unread', 'control'].includes(route.query.tab) ? route.query.tab : 'unread',
 )
 const notificationPrefs = ref([])
-const filteredNotifications = computed(() =>
-  selectedTab.value === 'all' ? notifications.value : notifications.value.filter((n) => !n.read),
-)
+const page = ref(0)
+const pageSize = 30
+
+const loadMore = async () => {
+  if (!hasMore.value) return true
+  page.value++
+  await fetchNotifications({
+    page: page.value,
+    size: pageSize,
+    unread: selectedTab.value === 'unread',
+    append: true,
+  })
+  return !hasMore.value
+}
+
+watch(selectedTab, async (tab) => {
+  page.value = 0
+  await fetchNotifications({ page: 0, size: pageSize, unread: tab === 'unread' })
+})
 
 const fetchPrefs = async () => {
   notificationPrefs.value = await fetchNotificationPreferences()
@@ -547,7 +568,11 @@ const togglePref = async (pref) => {
   const ok = await updateNotificationPreference(pref.type, !pref.enabled)
   if (ok) {
     pref.enabled = !pref.enabled
-    await fetchNotifications()
+    await fetchNotifications({
+      page: page.value,
+      size: pageSize,
+      unread: selectedTab.value === 'unread',
+    })
     await fetchUnreadCount()
   } else {
     toast.error('操作失败')
@@ -627,8 +652,9 @@ const formatType = (t) => {
   }
 }
 
-onActivated(() => {
-  fetchNotifications()
+onActivated(async () => {
+  page.value = 0
+  await fetchNotifications({ page: 0, size: pageSize, unread: selectedTab.value === 'unread' })
   fetchPrefs()
 })
 </script>
diff --git a/frontend_nuxt/utils/notification.js b/frontend_nuxt/utils/notification.js
index 7c0245b94..512b4267a 100644
--- a/frontend_nuxt/utils/notification.js
+++ b/frontend_nuxt/utils/notification.js
@@ -118,175 +118,162 @@ export async function updateNotificationPreference(type, enabled) {
 function createFetchNotifications() {
   const notifications = ref([])
   const isLoadingMessage = ref(false)
-  const fetchNotifications = async () => {
+  const hasMore = ref(true)
+
+  const fetchNotifications = async ({
+    page = 0,
+    size = 30,
+    unread = false,
+    append = false,
+  } = {}) => {
     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`, {
+    try {
+      const token = getToken()
+      if (!token) {
+        toast.error('请先登录')
+        return
+      }
+      if (!append) notifications.value = []
+      isLoadingMessage.value = true
+      const res = await fetch(
+        `${API_BASE_URL}/api/notifications${unread ? '/unread' : ''}?page=${page}&size=${size}`,
+        {
           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)
+        },
+      )
+      isLoadingMessage.value = false
+      if (!res.ok) {
+        toast.error('获取通知失败')
+        return
       }
+      const data = await res.json()
+      const arr = []
+
+      for (const n of data) {
+        if (n.type === 'COMMENT_REPLY') {
+          arr.push({
+            ...n,
+            src: n.comment.author.avatar,
+            iconClick: () => {
+              markRead(n.id)
+              navigateTo(`/users/${n.comment.author.id}`, { replace: true })
+            },
+          })
+        } else if (n.type === 'REACTION') {
+          arr.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') {
+          arr.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' || n.type === 'LOTTERY_DRAW') {
+          arr.push({
+            ...n,
+            icon: iconMap[n.type],
+            iconClick: () => {
+              if (n.post) {
+                markRead(n.id)
+                navigateTo(`/posts/${n.post.id}`)
+              }
+            },
+          })
+        } else if (n.type === 'POST_UPDATED' || n.type === 'USER_ACTIVITY') {
+          arr.push({
+            ...n,
+            src: n.comment.author.avatar,
+            iconClick: () => {
+              markRead(n.id)
+              navigateTo(`/users/${n.comment.author.id}`, { replace: true })
+            },
+          })
+        } else if (n.type === 'MENTION') {
+          arr.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') {
+          arr.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' ||
+          n.type === 'POST_SUBSCRIBED' ||
+          n.type === 'POST_UNSUBSCRIBED'
+        ) {
+          arr.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') {
+          arr.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') {
+          arr.push({
+            ...n,
+            icon: iconMap[n.type],
+            iconClick: () => {},
+          })
+        } else {
+          arr.push({
+            ...n,
+            icon: iconMap[n.type],
+          })
+        }
+      }
+
+      if (append) notifications.value.push(...arr)
+      else notifications.value = arr
+      hasMore.value = data.length === size
+    } catch (e) {
+      console.error(e)
+      isLoadingMessage.value = false
     }
   }
 
@@ -335,10 +322,16 @@ function createFetchNotifications() {
     markRead,
     notifications,
     isLoadingMessage,
-    markRead,
     markAllRead,
+    hasMore,
   }
 }
 
-export const { fetchNotifications, markRead, notifications, isLoadingMessage, markAllRead } =
-  createFetchNotifications()
+export const {
+  fetchNotifications,
+  markRead,
+  notifications,
+  isLoadingMessage,
+  markAllRead,
+  hasMore,
+} = createFetchNotifications()

From e7a1e1d15903b627d02a813a0694c1f23459af8f Mon Sep 17 00:00:00 2001
From: tim <nagisa12164@163.com>
Date: Tue, 19 Aug 2025 19:33:13 +0800
Subject: [PATCH 12/16] Revert "feat: add paginated notification endpoints"

This reverts commit cc525c1c27498822e545fae208c0a4f187f2c415.
---
 .../controller/NotificationController.java    |  14 +-
 .../repository/NotificationRepository.java    |   4 -
 .../openisle/service/NotificationService.java |  11 +-
 .../NotificationControllerTest.java           |  20 +-
 .../service/NotificationServiceTest.java      |   9 +-
 frontend_nuxt/pages/message.vue               |  46 +--
 frontend_nuxt/utils/notification.js           | 323 +++++++++---------
 7 files changed, 186 insertions(+), 241 deletions(-)

diff --git a/backend/src/main/java/com/openisle/controller/NotificationController.java b/backend/src/main/java/com/openisle/controller/NotificationController.java
index b9cb282ba..d25d2a808 100644
--- a/backend/src/main/java/com/openisle/controller/NotificationController.java
+++ b/backend/src/main/java/com/openisle/controller/NotificationController.java
@@ -23,19 +23,9 @@ public class NotificationController {
     private final NotificationMapper notificationMapper;
 
     @GetMapping
-    public List<NotificationDto> list(@RequestParam(value = "page", defaultValue = "0") int page,
-                                      @RequestParam(value = "size", defaultValue = "30") int size,
+    public List<NotificationDto> list(@RequestParam(value = "read", required = false) Boolean read,
                                       Authentication auth) {
-        return notificationService.listNotifications(auth.getName(), null, 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()
+        return notificationService.listNotifications(auth.getName(), read).stream()
                 .map(notificationMapper::toDto)
                 .collect(Collectors.toList());
     }
diff --git a/backend/src/main/java/com/openisle/repository/NotificationRepository.java b/backend/src/main/java/com/openisle/repository/NotificationRepository.java
index 90c5d9463..1e897b3a0 100644
--- a/backend/src/main/java/com/openisle/repository/NotificationRepository.java
+++ b/backend/src/main/java/com/openisle/repository/NotificationRepository.java
@@ -6,8 +6,6 @@ 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;
 
@@ -15,8 +13,6 @@ 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);
diff --git a/backend/src/main/java/com/openisle/service/NotificationService.java b/backend/src/main/java/com/openisle/service/NotificationService.java
index ffd2078e8..6ecf571e8 100644
--- a/backend/src/main/java/com/openisle/service/NotificationService.java
+++ b/backend/src/main/java/com/openisle/service/NotificationService.java
@@ -180,18 +180,17 @@ public class NotificationService {
         userRepository.save(user);
     }
 
-    public List<Notification> listNotifications(String username, Boolean read, int page, int size) {
+    public List<Notification> listNotifications(String username, Boolean read) {
         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);
-        org.springframework.data.domain.Page<Notification> result;
+        List<Notification> list;
         if (read == null) {
-            result = notificationRepository.findByUserOrderByCreatedAtDesc(user, pageable);
+            list = notificationRepository.findByUserOrderByCreatedAtDesc(user);
         } else {
-            result = notificationRepository.findByUserAndReadOrderByCreatedAtDesc(user, read, pageable);
+            list = notificationRepository.findByUserAndReadOrderByCreatedAtDesc(user, read);
         }
-        return result.stream().filter(n -> !disabled.contains(n.getType())).collect(Collectors.toList());
+        return list.stream().filter(n -> !disabled.contains(n.getType())).collect(Collectors.toList());
     }
 
     public void markRead(String username, List<Long> ids) {
diff --git a/backend/src/test/java/com/openisle/controller/NotificationControllerTest.java b/backend/src/test/java/com/openisle/controller/NotificationControllerTest.java
index c3cea2d30..6b74440a1 100644
--- a/backend/src/test/java/com/openisle/controller/NotificationControllerTest.java
+++ b/backend/src/test/java/com/openisle/controller/NotificationControllerTest.java
@@ -45,7 +45,7 @@ class NotificationControllerTest {
         p.setId(2L);
         n.setPost(p);
         n.setCreatedAt(LocalDateTime.now());
-        when(notificationService.listNotifications("alice", null, 0, 30))
+        when(notificationService.listNotifications("alice", null))
                 .thenReturn(List.of(n));
 
         NotificationDto dto = new NotificationDto();
@@ -62,24 +62,6 @@ class NotificationControllerTest {
                 .andExpect(jsonPath("$[0].post.id").value(2));
     }
 
-    @Test
-    void listUnreadNotifications() throws Exception {
-        Notification n = new Notification();
-        n.setId(5L);
-        n.setType(NotificationType.POST_VIEWED);
-        when(notificationService.listNotifications("alice", false, 0, 30))
-                .thenReturn(List.of(n));
-
-        NotificationDto dto = new NotificationDto();
-        dto.setId(5L);
-        when(notificationMapper.toDto(n)).thenReturn(dto);
-
-        mockMvc.perform(get("/api/notifications/unread")
-                        .principal(new UsernamePasswordAuthenticationToken("alice","p")))
-                .andExpect(status().isOk())
-                .andExpect(jsonPath("$[0].id").value(5));
-    }
-
     @Test
     void markReadEndpoint() throws Exception {
         mockMvc.perform(post("/api/notifications/read")
diff --git a/backend/src/test/java/com/openisle/service/NotificationServiceTest.java b/backend/src/test/java/com/openisle/service/NotificationServiceTest.java
index 4e632920e..a01d3c95b 100644
--- a/backend/src/test/java/com/openisle/service/NotificationServiceTest.java
+++ b/backend/src/test/java/com/openisle/service/NotificationServiceTest.java
@@ -11,8 +11,6 @@ import org.mockito.Mockito;
 
 import java.util.List;
 import java.util.Optional;
-import org.springframework.data.domain.PageImpl;
-import org.springframework.data.domain.Pageable;
 
 import static org.junit.jupiter.api.Assertions.*;
 import static org.mockito.Mockito.*;
@@ -67,13 +65,12 @@ class NotificationServiceTest {
         when(uRepo.findByUsername("bob")).thenReturn(Optional.of(user));
 
         Notification n = new Notification();
-        when(nRepo.findByUserOrderByCreatedAtDesc(eq(user), any(Pageable.class)))
-                .thenReturn(new PageImpl<>(List.of(n)));
+        when(nRepo.findByUserOrderByCreatedAtDesc(user)).thenReturn(List.of(n));
 
-        List<Notification> list = service.listNotifications("bob", null, 0, 10);
+        List<Notification> list = service.listNotifications("bob", null);
 
         assertEquals(1, list.size());
-        verify(nRepo).findByUserOrderByCreatedAtDesc(eq(user), any(Pageable.class));
+        verify(nRepo).findByUserOrderByCreatedAtDesc(user);
     }
 
     @Test
diff --git a/frontend_nuxt/pages/message.vue b/frontend_nuxt/pages/message.vue
index 4b89b6ec5..061eedd37 100644
--- 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,18 +505,16 @@
             </div>
           </template>
         </BaseTimeline>
-        <InfiniteLoadMore :key="selectedTab" :on-load="loadMore" :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 NotificationContainer from '~/components/NotificationContainer.vue'
-import InfiniteLoadMore from '~/components/InfiniteLoadMore.vue'
 import { toast } from '~/main'
 import { authState, getToken } from '~/utils/auth'
 import { stripMarkdownLength } from '~/utils/markdown'
@@ -527,9 +525,6 @@ import {
   markRead,
   notifications,
   markAllRead,
-  hasMore,
-  fetchNotificationPreferences,
-  updateNotificationPreference,
 } from '~/utils/notification'
 import TimeManager from '~/utils/time'
 
@@ -540,25 +535,9 @@ const selectedTab = ref(
   ['all', 'unread', 'control'].includes(route.query.tab) ? route.query.tab : 'unread',
 )
 const notificationPrefs = ref([])
-const page = ref(0)
-const pageSize = 30
-
-const loadMore = async () => {
-  if (!hasMore.value) return true
-  page.value++
-  await fetchNotifications({
-    page: page.value,
-    size: pageSize,
-    unread: selectedTab.value === 'unread',
-    append: true,
-  })
-  return !hasMore.value
-}
-
-watch(selectedTab, async (tab) => {
-  page.value = 0
-  await fetchNotifications({ page: 0, size: pageSize, unread: tab === 'unread' })
-})
+const filteredNotifications = computed(() =>
+  selectedTab.value === 'all' ? notifications.value : notifications.value.filter((n) => !n.read),
+)
 
 const fetchPrefs = async () => {
   notificationPrefs.value = await fetchNotificationPreferences()
@@ -568,11 +547,7 @@ const togglePref = async (pref) => {
   const ok = await updateNotificationPreference(pref.type, !pref.enabled)
   if (ok) {
     pref.enabled = !pref.enabled
-    await fetchNotifications({
-      page: page.value,
-      size: pageSize,
-      unread: selectedTab.value === 'unread',
-    })
+    await fetchNotifications()
     await fetchUnreadCount()
   } else {
     toast.error('操作失败')
@@ -652,9 +627,8 @@ const formatType = (t) => {
   }
 }
 
-onActivated(async () => {
-  page.value = 0
-  await fetchNotifications({ page: 0, size: pageSize, unread: selectedTab.value === 'unread' })
+onActivated(() => {
+  fetchNotifications()
   fetchPrefs()
 })
 </script>
diff --git a/frontend_nuxt/utils/notification.js b/frontend_nuxt/utils/notification.js
index 512b4267a..7c0245b94 100644
--- a/frontend_nuxt/utils/notification.js
+++ b/frontend_nuxt/utils/notification.js
@@ -118,162 +118,175 @@ export async function updateNotificationPreference(type, enabled) {
 function createFetchNotifications() {
   const notifications = ref([])
   const isLoadingMessage = ref(false)
-  const hasMore = ref(true)
-
-  const fetchNotifications = async ({
-    page = 0,
-    size = 30,
-    unread = false,
-    append = false,
-  } = {}) => {
+  const fetchNotifications = async () => {
     const config = useRuntimeConfig()
     const API_BASE_URL = config.public.apiBaseUrl
-    try {
-      const token = getToken()
-      if (!token) {
-        toast.error('请先登录')
-        return
-      }
-      if (!append) notifications.value = []
-      isLoadingMessage.value = true
-      const res = await fetch(
-        `${API_BASE_URL}/api/notifications${unread ? '/unread' : ''}?page=${page}&size=${size}`,
-        {
+    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 arr = []
-
-      for (const n of data) {
-        if (n.type === 'COMMENT_REPLY') {
-          arr.push({
-            ...n,
-            src: n.comment.author.avatar,
-            iconClick: () => {
-              markRead(n.id)
-              navigateTo(`/users/${n.comment.author.id}`, { replace: true })
-            },
-          })
-        } else if (n.type === 'REACTION') {
-          arr.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') {
-          arr.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' || n.type === 'LOTTERY_DRAW') {
-          arr.push({
-            ...n,
-            icon: iconMap[n.type],
-            iconClick: () => {
-              if (n.post) {
-                markRead(n.id)
-                navigateTo(`/posts/${n.post.id}`)
-              }
-            },
-          })
-        } else if (n.type === 'POST_UPDATED' || n.type === 'USER_ACTIVITY') {
-          arr.push({
-            ...n,
-            src: n.comment.author.avatar,
-            iconClick: () => {
-              markRead(n.id)
-              navigateTo(`/users/${n.comment.author.id}`, { replace: true })
-            },
-          })
-        } else if (n.type === 'MENTION') {
-          arr.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') {
-          arr.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' ||
-          n.type === 'POST_SUBSCRIBED' ||
-          n.type === 'POST_UNSUBSCRIBED'
-        ) {
-          arr.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') {
-          arr.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') {
-          arr.push({
-            ...n,
-            icon: iconMap[n.type],
-            iconClick: () => {},
-          })
-        } else {
-          arr.push({
-            ...n,
-            icon: iconMap[n.type],
-          })
+        })
+        isLoadingMessage.value = false
+        if (!res.ok) {
+          toast.error('获取通知失败')
+          return
         }
-      }
+        const data = await res.json()
 
-      if (append) notifications.value.push(...arr)
-      else notifications.value = arr
-      hasMore.value = data.length === size
-    } catch (e) {
-      console.error(e)
-      isLoadingMessage.value = false
+        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)
+      }
     }
   }
 
@@ -322,16 +335,10 @@ function createFetchNotifications() {
     markRead,
     notifications,
     isLoadingMessage,
+    markRead,
     markAllRead,
-    hasMore,
   }
 }
 
-export const {
-  fetchNotifications,
-  markRead,
-  notifications,
-  isLoadingMessage,
-  markAllRead,
-  hasMore,
-} = createFetchNotifications()
+export const { fetchNotifications, markRead, notifications, isLoadingMessage, markAllRead } =
+  createFetchNotifications()

From c344b5b4aea53ba22abc1da5b12d928ea2d6d753 Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Tue, 19 Aug 2025 19:34:13 +0800
Subject: [PATCH 13/16] feat: add paginated notification APIs and frontend
 support

---
 .../controller/NotificationController.java    |  13 +-
 .../repository/NotificationRepository.java    |   4 +
 .../openisle/service/NotificationService.java |  12 +-
 frontend_nuxt/pages/message.vue               |  81 +++-
 frontend_nuxt/utils/notification.js           | 436 ++++++++++--------
 5 files changed, 341 insertions(+), 205 deletions(-)

diff --git a/backend/src/main/java/com/openisle/controller/NotificationController.java b/backend/src/main/java/com/openisle/controller/NotificationController.java
index d25d2a808..e007690a5 100644
--- a/backend/src/main/java/com/openisle/controller/NotificationController.java
+++ b/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());
     }
diff --git a/backend/src/main/java/com/openisle/repository/NotificationRepository.java b/backend/src/main/java/com/openisle/repository/NotificationRepository.java
index 1e897b3a0..90c5d9463 100644
--- a/backend/src/main/java/com/openisle/repository/NotificationRepository.java
+++ b/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);
diff --git a/backend/src/main/java/com/openisle/service/NotificationService.java b/backend/src/main/java/com/openisle/service/NotificationService.java
index 6ecf571e8..638ffa35a 100644
--- a/backend/src/main/java/com/openisle/service/NotificationService.java
+++ b/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());
     }
diff --git a/frontend_nuxt/pages/message.vue b/frontend_nuxt/pages/message.vue
index 061eedd37..ace41178d 100644
--- a/frontend_nuxt/pages/message.vue
+++ b/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>
 
@@ -691,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;
diff --git a/frontend_nuxt/utils/notification.js b/frontend_nuxt/utils/notification.js
index 7c0245b94..882c9249d 100644
--- a/frontend_nuxt/utils/notification.js
+++ b/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()

From 02be045f55484d643232ac32b80944ac5aeded8f Mon Sep 17 00:00:00 2001
From: tim <nagisa12164@163.com>
Date: Tue, 19 Aug 2025 19:37:59 +0800
Subject: [PATCH 14/16] Revert "feat: add paginated notification APIs and
 frontend support"

This reverts commit c344b5b4aea53ba22abc1da5b12d928ea2d6d753.
---
 .../controller/NotificationController.java    |  13 +-
 .../repository/NotificationRepository.java    |   4 -
 .../openisle/service/NotificationService.java |  12 +-
 frontend_nuxt/pages/message.vue               |  81 +---
 frontend_nuxt/utils/notification.js           | 434 ++++++++----------
 5 files changed, 204 insertions(+), 340 deletions(-)

diff --git a/backend/src/main/java/com/openisle/controller/NotificationController.java b/backend/src/main/java/com/openisle/controller/NotificationController.java
index e007690a5..d25d2a808 100644
--- a/backend/src/main/java/com/openisle/controller/NotificationController.java
+++ b/backend/src/main/java/com/openisle/controller/NotificationController.java
@@ -24,19 +24,8 @@ 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, 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()
+        return notificationService.listNotifications(auth.getName(), read).stream()
                 .map(notificationMapper::toDto)
                 .collect(Collectors.toList());
     }
diff --git a/backend/src/main/java/com/openisle/repository/NotificationRepository.java b/backend/src/main/java/com/openisle/repository/NotificationRepository.java
index 90c5d9463..1e897b3a0 100644
--- a/backend/src/main/java/com/openisle/repository/NotificationRepository.java
+++ b/backend/src/main/java/com/openisle/repository/NotificationRepository.java
@@ -6,8 +6,6 @@ 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;
 
@@ -15,8 +13,6 @@ 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);
diff --git a/backend/src/main/java/com/openisle/service/NotificationService.java b/backend/src/main/java/com/openisle/service/NotificationService.java
index 638ffa35a..6ecf571e8 100644
--- a/backend/src/main/java/com/openisle/service/NotificationService.java
+++ b/backend/src/main/java/com/openisle/service/NotificationService.java
@@ -180,21 +180,15 @@ public class NotificationService {
         userRepository.save(user);
     }
 
-    public List<Notification> listNotifications(String username, Boolean read, int page, int size) {
+    public List<Notification> listNotifications(String username, Boolean read) {
         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, pageable)
-                    .getContent();
+            list = notificationRepository.findByUserOrderByCreatedAtDesc(user);
         } else {
-            list = notificationRepository
-                    .findByUserAndReadOrderByCreatedAtDesc(user, read, pageable)
-                    .getContent();
+            list = notificationRepository.findByUserAndReadOrderByCreatedAtDesc(user, read);
         }
         return list.stream().filter(n -> !disabled.contains(n.getType())).collect(Collectors.toList());
     }
diff --git a/frontend_nuxt/pages/message.vue b/frontend_nuxt/pages/message.vue
index ace41178d..061eedd37 100644
--- a/frontend_nuxt/pages/message.vue
+++ b/frontend_nuxt/pages/message.vue
@@ -505,16 +505,13 @@
             </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, watch } from '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'
@@ -522,17 +519,12 @@ import { toast } from '~/main'
 import { authState, getToken } from '~/utils/auth'
 import { stripMarkdownLength } from '~/utils/markdown'
 import {
-  fetchAllNotifications,
-  fetchUnreadNotifications,
+  fetchNotifications,
   fetchUnreadCount,
-  isLoadingAll,
-  isLoadingUnread,
+  isLoadingMessage,
   markRead,
-  notificationsAll,
-  notificationsUnread,
+  notifications,
   markAllRead,
-  fetchNotificationPreferences,
-  updateNotificationPreference,
 } from '~/utils/notification'
 import TimeManager from '~/utils/time'
 
@@ -543,18 +535,8 @@ 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' ? notificationsAll.value : notificationsUnread.value,
-)
-const isLoadingMessage = computed(() =>
-  selectedTab.value === 'all' ? isLoadingAll.value : isLoadingUnread.value,
-)
-const hasMore = computed(() =>
-  selectedTab.value === 'all' ? hasMoreAll.value : hasMoreUnread.value,
+  selectedTab.value === 'all' ? notifications.value : notifications.value.filter((n) => !n.read),
 )
 
 const fetchPrefs = async () => {
@@ -565,14 +547,7 @@ const togglePref = async (pref) => {
   const ok = await updateNotificationPreference(pref.type, !pref.enabled)
   if (ok) {
     pref.enabled = !pref.enabled
-    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 fetchNotifications()
     await fetchUnreadCount()
   } else {
     toast.error('操作失败')
@@ -652,34 +627,9 @@ const formatType = (t) => {
   }
 }
 
-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()
-  }
+onActivated(() => {
+  fetchNotifications()
+  fetchPrefs()
 })
 </script>
 
@@ -741,19 +691,6 @@ watch(selectedTab, async (tab) => {
   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;
diff --git a/frontend_nuxt/utils/notification.js b/frontend_nuxt/utils/notification.js
index 882c9249d..7c0245b94 100644
--- a/frontend_nuxt/utils/notification.js
+++ b/frontend_nuxt/utils/notification.js
@@ -116,251 +116,210 @@ export async function updateNotificationPreference(type, enabled) {
  * @returns
  */
 function createFetchNotifications() {
-  const notificationsAll = ref([])
-  const notificationsUnread = ref([])
-  const isLoadingAll = ref(false)
-  const isLoadingUnread = ref(false)
-  const pageSize = 30
-
-  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 })
-          }
-        },
-      })
-    } 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],
-      })
-    }
-  }
-
-  async function fetchAllNotifications(page = 0) {
+  const notifications = ref([])
+  const isLoadingMessage = ref(false)
+  const fetchNotifications = async () => {
     const config = useRuntimeConfig()
     const API_BASE_URL = config.public.apiBaseUrl
-    try {
-      const token = getToken()
-      if (!token) {
-        toast.error('请先登录')
-        return
+    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)
       }
-      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) {
+  const markRead = async (id) => {
     if (!id) return
-    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)
+    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) {
-      target.read = false
-      if (nUnreadIndex !== -1) notificationsUnread.value.splice(nUnreadIndex, 0, target)
+      n.read = false
       notificationState.unreadCount++
     } else {
       fetchUnreadCount()
     }
   }
 
-  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) => {
+  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
     })
-    notificationsUnread.value = []
-    notificationState.unreadCount = 0
-    const ok = await markNotificationsRead(ids)
+    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
     }
@@ -371,26 +330,15 @@ function createFetchNotifications() {
       toast.success('已读所有消息')
     }
   }
-
   return {
-    fetchAllNotifications,
-    fetchUnreadNotifications,
+    fetchNotifications,
+    markRead,
+    notifications,
+    isLoadingMessage,
     markRead,
-    notificationsAll,
-    notificationsUnread,
-    isLoadingAll,
-    isLoadingUnread,
     markAllRead,
   }
 }
 
-export const {
-  fetchAllNotifications,
-  fetchUnreadNotifications,
-  markRead,
-  notificationsAll,
-  notificationsUnread,
-  isLoadingAll,
-  isLoadingUnread,
-  markAllRead,
-} = createFetchNotifications()
+export const { fetchNotifications, markRead, notifications, isLoadingMessage, markAllRead } =
+  createFetchNotifications()

From 805a8df7d39fba2b5a17c26400fc849fa76f77f3 Mon Sep 17 00:00:00 2001
From: tim <nagisa12164@163.com>
Date: Tue, 19 Aug 2025 19:38:04 +0800
Subject: [PATCH 15/16] Reapply "feat: add paginated notification endpoints"

This reverts commit e7a1e1d15903b627d02a813a0694c1f23459af8f.
---
 .../controller/NotificationController.java    |  14 +-
 .../repository/NotificationRepository.java    |   4 +
 .../openisle/service/NotificationService.java |  11 +-
 .../NotificationControllerTest.java           |  20 +-
 .../service/NotificationServiceTest.java      |   9 +-
 frontend_nuxt/pages/message.vue               |  46 ++-
 frontend_nuxt/utils/notification.js           | 325 +++++++++---------
 7 files changed, 242 insertions(+), 187 deletions(-)

diff --git a/backend/src/main/java/com/openisle/controller/NotificationController.java b/backend/src/main/java/com/openisle/controller/NotificationController.java
index d25d2a808..b9cb282ba 100644
--- a/backend/src/main/java/com/openisle/controller/NotificationController.java
+++ b/backend/src/main/java/com/openisle/controller/NotificationController.java
@@ -23,9 +23,19 @@ public class NotificationController {
     private final NotificationMapper notificationMapper;
 
     @GetMapping
-    public List<NotificationDto> list(@RequestParam(value = "read", required = false) Boolean read,
+    public List<NotificationDto> list(@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(), null, 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());
     }
diff --git a/backend/src/main/java/com/openisle/repository/NotificationRepository.java b/backend/src/main/java/com/openisle/repository/NotificationRepository.java
index 1e897b3a0..90c5d9463 100644
--- a/backend/src/main/java/com/openisle/repository/NotificationRepository.java
+++ b/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);
diff --git a/backend/src/main/java/com/openisle/service/NotificationService.java b/backend/src/main/java/com/openisle/service/NotificationService.java
index 6ecf571e8..ffd2078e8 100644
--- a/backend/src/main/java/com/openisle/service/NotificationService.java
+++ b/backend/src/main/java/com/openisle/service/NotificationService.java
@@ -180,17 +180,18 @@ 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();
-        List<Notification> list;
+        org.springframework.data.domain.Pageable pageable = org.springframework.data.domain.PageRequest.of(page, size);
+        org.springframework.data.domain.Page<Notification> result;
         if (read == null) {
-            list = notificationRepository.findByUserOrderByCreatedAtDesc(user);
+            result = notificationRepository.findByUserOrderByCreatedAtDesc(user, pageable);
         } else {
-            list = notificationRepository.findByUserAndReadOrderByCreatedAtDesc(user, read);
+            result = notificationRepository.findByUserAndReadOrderByCreatedAtDesc(user, read, pageable);
         }
-        return list.stream().filter(n -> !disabled.contains(n.getType())).collect(Collectors.toList());
+        return result.stream().filter(n -> !disabled.contains(n.getType())).collect(Collectors.toList());
     }
 
     public void markRead(String username, List<Long> ids) {
diff --git a/backend/src/test/java/com/openisle/controller/NotificationControllerTest.java b/backend/src/test/java/com/openisle/controller/NotificationControllerTest.java
index 6b74440a1..c3cea2d30 100644
--- a/backend/src/test/java/com/openisle/controller/NotificationControllerTest.java
+++ b/backend/src/test/java/com/openisle/controller/NotificationControllerTest.java
@@ -45,7 +45,7 @@ class NotificationControllerTest {
         p.setId(2L);
         n.setPost(p);
         n.setCreatedAt(LocalDateTime.now());
-        when(notificationService.listNotifications("alice", null))
+        when(notificationService.listNotifications("alice", null, 0, 30))
                 .thenReturn(List.of(n));
 
         NotificationDto dto = new NotificationDto();
@@ -62,6 +62,24 @@ class NotificationControllerTest {
                 .andExpect(jsonPath("$[0].post.id").value(2));
     }
 
+    @Test
+    void listUnreadNotifications() throws Exception {
+        Notification n = new Notification();
+        n.setId(5L);
+        n.setType(NotificationType.POST_VIEWED);
+        when(notificationService.listNotifications("alice", false, 0, 30))
+                .thenReturn(List.of(n));
+
+        NotificationDto dto = new NotificationDto();
+        dto.setId(5L);
+        when(notificationMapper.toDto(n)).thenReturn(dto);
+
+        mockMvc.perform(get("/api/notifications/unread")
+                        .principal(new UsernamePasswordAuthenticationToken("alice","p")))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$[0].id").value(5));
+    }
+
     @Test
     void markReadEndpoint() throws Exception {
         mockMvc.perform(post("/api/notifications/read")
diff --git a/backend/src/test/java/com/openisle/service/NotificationServiceTest.java b/backend/src/test/java/com/openisle/service/NotificationServiceTest.java
index a01d3c95b..4e632920e 100644
--- a/backend/src/test/java/com/openisle/service/NotificationServiceTest.java
+++ b/backend/src/test/java/com/openisle/service/NotificationServiceTest.java
@@ -11,6 +11,8 @@ import org.mockito.Mockito;
 
 import java.util.List;
 import java.util.Optional;
+import org.springframework.data.domain.PageImpl;
+import org.springframework.data.domain.Pageable;
 
 import static org.junit.jupiter.api.Assertions.*;
 import static org.mockito.Mockito.*;
@@ -65,12 +67,13 @@ class NotificationServiceTest {
         when(uRepo.findByUsername("bob")).thenReturn(Optional.of(user));
 
         Notification n = new Notification();
-        when(nRepo.findByUserOrderByCreatedAtDesc(user)).thenReturn(List.of(n));
+        when(nRepo.findByUserOrderByCreatedAtDesc(eq(user), any(Pageable.class)))
+                .thenReturn(new PageImpl<>(List.of(n)));
 
-        List<Notification> list = service.listNotifications("bob", null);
+        List<Notification> list = service.listNotifications("bob", null, 0, 10);
 
         assertEquals(1, list.size());
-        verify(nRepo).findByUserOrderByCreatedAtDesc(user);
+        verify(nRepo).findByUserOrderByCreatedAtDesc(eq(user), any(Pageable.class));
     }
 
     @Test
diff --git a/frontend_nuxt/pages/message.vue b/frontend_nuxt/pages/message.vue
index 061eedd37..4b89b6ec5 100644
--- a/frontend_nuxt/pages/message.vue
+++ b/frontend_nuxt/pages/message.vue
@@ -53,13 +53,13 @@
       </div>
 
       <BasePlaceholder
-        v-else-if="filteredNotifications.length === 0"
+        v-else-if="notifications.length === 0"
         text="暂时没有消息 :)"
         icon="fas fa-inbox"
       />
 
-      <div class="timeline-container" v-if="filteredNotifications.length > 0">
-        <BaseTimeline :items="filteredNotifications">
+      <div class="timeline-container" v-if="notifications.length > 0">
+        <BaseTimeline :items="notifications">
           <template #item="{ item }">
             <div class="notif-content" :class="{ read: item.read }">
               <span v-if="!item.read" class="unread-dot"></span>
@@ -505,16 +505,18 @@
             </div>
           </template>
         </BaseTimeline>
+        <InfiniteLoadMore :key="selectedTab" :on-load="loadMore" :pause="isLoadingMessage" />
       </div>
     </template>
   </div>
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from 'vue'
+import { ref, watch, onActivated } from 'vue'
 import BasePlaceholder from '~/components/BasePlaceholder.vue'
 import BaseTimeline from '~/components/BaseTimeline.vue'
 import NotificationContainer from '~/components/NotificationContainer.vue'
+import InfiniteLoadMore from '~/components/InfiniteLoadMore.vue'
 import { toast } from '~/main'
 import { authState, getToken } from '~/utils/auth'
 import { stripMarkdownLength } from '~/utils/markdown'
@@ -525,6 +527,9 @@ import {
   markRead,
   notifications,
   markAllRead,
+  hasMore,
+  fetchNotificationPreferences,
+  updateNotificationPreference,
 } from '~/utils/notification'
 import TimeManager from '~/utils/time'
 
@@ -535,9 +540,25 @@ const selectedTab = ref(
   ['all', 'unread', 'control'].includes(route.query.tab) ? route.query.tab : 'unread',
 )
 const notificationPrefs = ref([])
-const filteredNotifications = computed(() =>
-  selectedTab.value === 'all' ? notifications.value : notifications.value.filter((n) => !n.read),
-)
+const page = ref(0)
+const pageSize = 30
+
+const loadMore = async () => {
+  if (!hasMore.value) return true
+  page.value++
+  await fetchNotifications({
+    page: page.value,
+    size: pageSize,
+    unread: selectedTab.value === 'unread',
+    append: true,
+  })
+  return !hasMore.value
+}
+
+watch(selectedTab, async (tab) => {
+  page.value = 0
+  await fetchNotifications({ page: 0, size: pageSize, unread: tab === 'unread' })
+})
 
 const fetchPrefs = async () => {
   notificationPrefs.value = await fetchNotificationPreferences()
@@ -547,7 +568,11 @@ const togglePref = async (pref) => {
   const ok = await updateNotificationPreference(pref.type, !pref.enabled)
   if (ok) {
     pref.enabled = !pref.enabled
-    await fetchNotifications()
+    await fetchNotifications({
+      page: page.value,
+      size: pageSize,
+      unread: selectedTab.value === 'unread',
+    })
     await fetchUnreadCount()
   } else {
     toast.error('操作失败')
@@ -627,8 +652,9 @@ const formatType = (t) => {
   }
 }
 
-onActivated(() => {
-  fetchNotifications()
+onActivated(async () => {
+  page.value = 0
+  await fetchNotifications({ page: 0, size: pageSize, unread: selectedTab.value === 'unread' })
   fetchPrefs()
 })
 </script>
diff --git a/frontend_nuxt/utils/notification.js b/frontend_nuxt/utils/notification.js
index 7c0245b94..512b4267a 100644
--- a/frontend_nuxt/utils/notification.js
+++ b/frontend_nuxt/utils/notification.js
@@ -118,175 +118,162 @@ export async function updateNotificationPreference(type, enabled) {
 function createFetchNotifications() {
   const notifications = ref([])
   const isLoadingMessage = ref(false)
-  const fetchNotifications = async () => {
+  const hasMore = ref(true)
+
+  const fetchNotifications = async ({
+    page = 0,
+    size = 30,
+    unread = false,
+    append = false,
+  } = {}) => {
     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`, {
+    try {
+      const token = getToken()
+      if (!token) {
+        toast.error('请先登录')
+        return
+      }
+      if (!append) notifications.value = []
+      isLoadingMessage.value = true
+      const res = await fetch(
+        `${API_BASE_URL}/api/notifications${unread ? '/unread' : ''}?page=${page}&size=${size}`,
+        {
           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)
+        },
+      )
+      isLoadingMessage.value = false
+      if (!res.ok) {
+        toast.error('获取通知失败')
+        return
       }
+      const data = await res.json()
+      const arr = []
+
+      for (const n of data) {
+        if (n.type === 'COMMENT_REPLY') {
+          arr.push({
+            ...n,
+            src: n.comment.author.avatar,
+            iconClick: () => {
+              markRead(n.id)
+              navigateTo(`/users/${n.comment.author.id}`, { replace: true })
+            },
+          })
+        } else if (n.type === 'REACTION') {
+          arr.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') {
+          arr.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' || n.type === 'LOTTERY_DRAW') {
+          arr.push({
+            ...n,
+            icon: iconMap[n.type],
+            iconClick: () => {
+              if (n.post) {
+                markRead(n.id)
+                navigateTo(`/posts/${n.post.id}`)
+              }
+            },
+          })
+        } else if (n.type === 'POST_UPDATED' || n.type === 'USER_ACTIVITY') {
+          arr.push({
+            ...n,
+            src: n.comment.author.avatar,
+            iconClick: () => {
+              markRead(n.id)
+              navigateTo(`/users/${n.comment.author.id}`, { replace: true })
+            },
+          })
+        } else if (n.type === 'MENTION') {
+          arr.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') {
+          arr.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' ||
+          n.type === 'POST_SUBSCRIBED' ||
+          n.type === 'POST_UNSUBSCRIBED'
+        ) {
+          arr.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') {
+          arr.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') {
+          arr.push({
+            ...n,
+            icon: iconMap[n.type],
+            iconClick: () => {},
+          })
+        } else {
+          arr.push({
+            ...n,
+            icon: iconMap[n.type],
+          })
+        }
+      }
+
+      if (append) notifications.value.push(...arr)
+      else notifications.value = arr
+      hasMore.value = data.length === size
+    } catch (e) {
+      console.error(e)
+      isLoadingMessage.value = false
     }
   }
 
@@ -335,10 +322,16 @@ function createFetchNotifications() {
     markRead,
     notifications,
     isLoadingMessage,
-    markRead,
     markAllRead,
+    hasMore,
   }
 }
 
-export const { fetchNotifications, markRead, notifications, isLoadingMessage, markAllRead } =
-  createFetchNotifications()
+export const {
+  fetchNotifications,
+  markRead,
+  notifications,
+  isLoadingMessage,
+  markAllRead,
+  hasMore,
+} = createFetchNotifications()

From a3b28eafe4c1a31bef80ff2fc5ed948ed3edfec5 Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Tue, 19 Aug 2025 19:48:41 +0800
Subject: [PATCH 16/16] Fix notification pagination after filtering disabled
 types

---
 .../repository/NotificationRepository.java    |  3 ++
 .../openisle/service/NotificationService.java | 21 +++++---
 .../service/NotificationServiceTest.java      | 53 +++++++++++++++++++
 3 files changed, 71 insertions(+), 6 deletions(-)

diff --git a/backend/src/main/java/com/openisle/repository/NotificationRepository.java b/backend/src/main/java/com/openisle/repository/NotificationRepository.java
index 90c5d9463..d0a68ca68 100644
--- a/backend/src/main/java/com/openisle/repository/NotificationRepository.java
+++ b/backend/src/main/java/com/openisle/repository/NotificationRepository.java
@@ -17,7 +17,10 @@ public interface NotificationRepository extends JpaRepository<Notification, Long
     List<Notification> findByUserAndReadOrderByCreatedAtDesc(User user, boolean read);
     Page<Notification> findByUserOrderByCreatedAtDesc(User user, Pageable pageable);
     Page<Notification> findByUserAndReadOrderByCreatedAtDesc(User user, boolean read, Pageable pageable);
+    Page<Notification> findByUserAndTypeNotInOrderByCreatedAtDesc(User user, java.util.Collection<NotificationType> types, Pageable pageable);
+    Page<Notification> findByUserAndReadAndTypeNotInOrderByCreatedAtDesc(User user, boolean read, java.util.Collection<NotificationType> types, Pageable pageable);
     long countByUserAndRead(User user, boolean read);
+    long countByUserAndReadAndTypeNotIn(User user, boolean read, java.util.Collection<NotificationType> types);
     List<Notification> findByPost(Post post);
     List<Notification> findByComment(Comment comment);
 
diff --git a/backend/src/main/java/com/openisle/service/NotificationService.java b/backend/src/main/java/com/openisle/service/NotificationService.java
index ffd2078e8..91b9847d3 100644
--- a/backend/src/main/java/com/openisle/service/NotificationService.java
+++ b/backend/src/main/java/com/openisle/service/NotificationService.java
@@ -23,7 +23,6 @@ import java.util.HashSet;
 import java.util.List;
 import java.util.ArrayList;
 import java.util.concurrent.Executor;
-import java.util.stream.Collectors;
 
 /** Service for creating and retrieving notifications. */
 @Service
@@ -187,11 +186,19 @@ public class NotificationService {
         org.springframework.data.domain.Pageable pageable = org.springframework.data.domain.PageRequest.of(page, size);
         org.springframework.data.domain.Page<Notification> result;
         if (read == null) {
-            result = notificationRepository.findByUserOrderByCreatedAtDesc(user, pageable);
+            if (disabled.isEmpty()) {
+                result = notificationRepository.findByUserOrderByCreatedAtDesc(user, pageable);
+            } else {
+                result = notificationRepository.findByUserAndTypeNotInOrderByCreatedAtDesc(user, disabled, pageable);
+            }
         } else {
-            result = notificationRepository.findByUserAndReadOrderByCreatedAtDesc(user, read, pageable);
+            if (disabled.isEmpty()) {
+                result = notificationRepository.findByUserAndReadOrderByCreatedAtDesc(user, read, pageable);
+            } else {
+                result = notificationRepository.findByUserAndReadAndTypeNotInOrderByCreatedAtDesc(user, read, disabled, pageable);
+            }
         }
-        return result.stream().filter(n -> !disabled.contains(n.getType())).collect(Collectors.toList());
+        return result.getContent();
     }
 
     public void markRead(String username, List<Long> ids) {
@@ -210,8 +217,10 @@ public class NotificationService {
         User user = userRepository.findByUsername(username)
                 .orElseThrow(() -> new com.openisle.exception.NotFoundException("User not found"));
         Set<NotificationType> disabled = user.getDisabledNotificationTypes();
-        return notificationRepository.findByUserAndReadOrderByCreatedAtDesc(user, false).stream()
-                .filter(n -> !disabled.contains(n.getType())).count();
+        if (disabled.isEmpty()) {
+            return notificationRepository.countByUserAndRead(user, false);
+        }
+        return notificationRepository.countByUserAndReadAndTypeNotIn(user, false, disabled);
     }
 
     public void notifyMentions(String content, User fromUser, Post post, Comment comment) {
diff --git a/backend/src/test/java/com/openisle/service/NotificationServiceTest.java b/backend/src/test/java/com/openisle/service/NotificationServiceTest.java
index 4e632920e..e6be00fea 100644
--- a/backend/src/test/java/com/openisle/service/NotificationServiceTest.java
+++ b/backend/src/test/java/com/openisle/service/NotificationServiceTest.java
@@ -11,6 +11,7 @@ import org.mockito.Mockito;
 
 import java.util.List;
 import java.util.Optional;
+import java.util.HashSet;
 import org.springframework.data.domain.PageImpl;
 import org.springframework.data.domain.Pageable;
 
@@ -64,6 +65,7 @@ class NotificationServiceTest {
         User user = new User();
         user.setId(2L);
         user.setUsername("bob");
+        user.setDisabledNotificationTypes(new HashSet<>());
         when(uRepo.findByUsername("bob")).thenReturn(Optional.of(user));
 
         Notification n = new Notification();
@@ -90,6 +92,7 @@ class NotificationServiceTest {
         User user = new User();
         user.setId(3L);
         user.setUsername("carl");
+        user.setDisabledNotificationTypes(new HashSet<>());
         when(uRepo.findByUsername("carl")).thenReturn(Optional.of(user));
         when(nRepo.countByUserAndRead(user, false)).thenReturn(5L);
 
@@ -99,6 +102,56 @@ class NotificationServiceTest {
         verify(nRepo).countByUserAndRead(user, false);
     }
 
+    @Test
+    void listNotificationsFiltersDisabledTypes() {
+        NotificationRepository nRepo = mock(NotificationRepository.class);
+        UserRepository uRepo = mock(UserRepository.class);
+        ReactionRepository rRepo = mock(ReactionRepository.class);
+        EmailSender email = mock(EmailSender.class);
+        PushNotificationService push = mock(PushNotificationService.class);
+        Executor executor = Runnable::run;
+        NotificationService service = new NotificationService(nRepo, uRepo, email, push, rRepo, executor);
+        org.springframework.test.util.ReflectionTestUtils.setField(service, "websiteUrl", "https://ex.com");
+
+        User user = new User();
+        user.setId(4L);
+        user.setUsername("dana");
+        when(uRepo.findByUsername("dana")).thenReturn(Optional.of(user));
+
+        Notification n = new Notification();
+        when(nRepo.findByUserAndTypeNotInOrderByCreatedAtDesc(eq(user), eq(user.getDisabledNotificationTypes()), any(Pageable.class)))
+                .thenReturn(new PageImpl<>(List.of(n)));
+
+        List<Notification> list = service.listNotifications("dana", null, 0, 10);
+
+        assertEquals(1, list.size());
+        verify(nRepo).findByUserAndTypeNotInOrderByCreatedAtDesc(eq(user), eq(user.getDisabledNotificationTypes()), any(Pageable.class));
+    }
+
+    @Test
+    void countUnreadFiltersDisabledTypes() {
+        NotificationRepository nRepo = mock(NotificationRepository.class);
+        UserRepository uRepo = mock(UserRepository.class);
+        ReactionRepository rRepo = mock(ReactionRepository.class);
+        EmailSender email = mock(EmailSender.class);
+        PushNotificationService push = mock(PushNotificationService.class);
+        Executor executor = Runnable::run;
+        NotificationService service = new NotificationService(nRepo, uRepo, email, push, rRepo, executor);
+        org.springframework.test.util.ReflectionTestUtils.setField(service, "websiteUrl", "https://ex.com");
+
+        User user = new User();
+        user.setId(5L);
+        user.setUsername("erin");
+        when(uRepo.findByUsername("erin")).thenReturn(Optional.of(user));
+        when(nRepo.countByUserAndReadAndTypeNotIn(eq(user), eq(false), eq(user.getDisabledNotificationTypes())))
+                .thenReturn(2L);
+
+        long count = service.countUnread("erin");
+
+        assertEquals(2L, count);
+        verify(nRepo).countByUserAndReadAndTypeNotIn(eq(user), eq(false), eq(user.getDisabledNotificationTypes()));
+    }
+
     @Test
     void createRegisterRequestNotificationsDeletesOldOnes() {
         NotificationRepository nRepo = mock(NotificationRepository.class);