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] 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,
   }
 }