feat: add paginated notifications with infinite scroll

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

@@ -23,19 +23,11 @@ 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,
-                                      @RequestParam(value = "size", defaultValue = "30") int size,
+                                      @RequestParam(value = "page", defaultValue = "0") int page,
+                                      @RequestParam(value = "pageSize", defaultValue = "50") int pageSize,
                                       Authentication auth) {
-        return notificationService.listNotifications(auth.getName(), null, page, size).stream()
+        return notificationService.listNotifications(auth.getName(), read, page, pageSize).stream()
-                .map(notificationMapper::toDto)
-                .collect(Collectors.toList());
-    }
-
-    @GetMapping("/unread")
-    public List<NotificationDto> listUnread(@RequestParam(value = "page", defaultValue = "0") int page,
-                                            @RequestParam(value = "size", defaultValue = "30") int size,
-                                            Authentication auth) {
-        return notificationService.listNotifications(auth.getName(), false, page, size).stream()
                 .map(notificationMapper::toDto)
                 .collect(Collectors.toList());
     }

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

@@ -5,9 +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.jpa.repository.JpaRepository;
-import org.springframework.data.domain.Page;
 import org.springframework.data.domain.Pageable;
+import org.springframework.data.jpa.repository.JpaRepository;
 
 import java.util.List;
 
@@ -15,12 +14,10 @@ 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);
+    List<Notification> findByUserOrderByCreatedAtDesc(User user, Pageable pageable);
-    Page<Notification> findByUserAndTypeNotInOrderByCreatedAtDesc(User user, java.util.Collection<NotificationType> types, Pageable pageable);
+    List<Notification> findByUserAndReadOrderByCreatedAtDesc(User user, boolean read, 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);
 

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

@@ -8,6 +8,8 @@ import com.openisle.repository.UserRepository;
 import lombok.RequiredArgsConstructor;
 import com.openisle.service.EmailSender;
 import org.springframework.beans.factory.annotation.Value;
+import org.springframework.data.domain.PageRequest;
+import org.springframework.data.domain.Pageable;
 import org.springframework.stereotype.Service;
 import com.fasterxml.jackson.databind.ObjectMapper;
 import org.springframework.transaction.annotation.Transactional;
@@ -23,6 +25,7 @@ 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
@@ -179,26 +182,18 @@ 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, int page, int pageSize) {
         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);
+        Pageable pageable = PageRequest.of(page, pageSize);
-        org.springframework.data.domain.Page<Notification> result;
+        List<Notification> list;
         if (read == null) {
-            if (disabled.isEmpty()) {
+            list = notificationRepository.findByUserOrderByCreatedAtDesc(user, pageable);
-                result = notificationRepository.findByUserOrderByCreatedAtDesc(user, pageable);
-            } else {
-                result = notificationRepository.findByUserAndTypeNotInOrderByCreatedAtDesc(user, disabled, pageable);
-            }
         } else {
-            if (disabled.isEmpty()) {
+            list = notificationRepository.findByUserAndReadOrderByCreatedAtDesc(user, read, pageable);
-                result = notificationRepository.findByUserAndReadOrderByCreatedAtDesc(user, read, pageable);
-            } else {
-                result = notificationRepository.findByUserAndReadAndTypeNotInOrderByCreatedAtDesc(user, read, disabled, pageable);
-            }
         }
-        return result.getContent();
+        return list.stream().filter(n -> !disabled.contains(n.getType())).collect(Collectors.toList());
     }
 
     public void markRead(String username, List<Long> ids) {
@@ -217,10 +212,8 @@ public class NotificationService {
         User user = userRepository.findByUsername(username)
                 .orElseThrow(() -> new com.openisle.exception.NotFoundException("User not found"));
         Set<NotificationType> disabled = user.getDisabledNotificationTypes();
-        if (disabled.isEmpty()) {
+        return notificationRepository.findByUserAndReadOrderByCreatedAtDesc(user, false).stream()
-            return notificationRepository.countByUserAndRead(user, false);
+                .filter(n -> !disabled.contains(n.getType())).count();
-        }
-        return notificationRepository.countByUserAndReadAndTypeNotIn(user, false, disabled);
     }
 
     public void notifyMentions(String content, User fromUser, Post post, Comment comment) {

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")

backend/src/test/java/com/openisle/service/NotificationServiceTest.java

@@ -11,9 +11,6 @@ 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;
 
 import static org.junit.jupiter.api.Assertions.*;
 import static org.mockito.Mockito.*;
@@ -65,17 +62,15 @@ 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();
-        when(nRepo.findByUserOrderByCreatedAtDesc(eq(user), any(Pageable.class)))
+        when(nRepo.findByUserOrderByCreatedAtDesc(user)).thenReturn(List.of(n));
-                .thenReturn(new PageImpl<>(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
@@ -92,7 +87,6 @@ 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);
 
@@ -102,56 +96,6 @@ 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);

frontend_nuxt/components/InfiniteLoadMore.vue

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

frontend_nuxt/pages/index.vue

@@ -102,33 +102,25 @@
           </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">
-      <!-- ✅ 通用“底部加载更多”组件（自管 loading/observer/并发） -->
+        <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
-      <InfiniteLoadMore
+      </div>
-        v-if="articles.length > 0"
-        :key="ioKey"
-        :on-load="fetchNextPage"
-        :pause="pendingFirst"
-        root-margin="200px 0px"
-      />
     </div>
   </div>
 </template>
-
 <script setup>
-import { computed, onMounted, onBeforeUnmount, nextTick, ref, watch } from 'vue'
+import { computed, onMounted, 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'
@@ -152,6 +144,8 @@ const route = useRoute()
 const tagOptions = ref([])
 const categoryOptions = ref([])
 
+const isLoadingMore = ref(false)
+
 const topics = ref(['最新回复', '最新', '排行榜' /*, '热门', '类别'*/])
 const selectedTopicCookie = useCookie('homeTab')
 const selectedTopic = ref(
@@ -168,6 +162,7 @@ const articles = ref([])
 const page = ref(0)
 const pageSize = 10
 const isMobile = useIsMobile()
+const allLoaded = ref(false)
 
 /** URL 参数 -> 本地筛选值 **/
 const selectedCategorySet = (category) => {
@@ -291,54 +286,80 @@ const {
   },
 )
 
-/** 首屏/筛选变更：重置分页并灌入 firstPage（InfiniteLoadMore 会凭 key 重建状态） **/
+/** 首屏/筛选变更：重置分页并灌入 firstPage **/
 watch(
   firstPage,
   (data) => {
     page.value = 0
     articles.value = [...(data || [])]
+    allLoaded.value = (data?.length || 0) < pageSize
   },
   { immediate: true },
 )
 
-/** —— 提供给 InfiniteLoadMore 的加载函数 —— **/
+/** —— 滚动加载更多 —— **/
+let inflight = null
 const fetchNextPage = async () => {
-  // 若首屏仍在 pending，由组件 pause 控制，这里兜底返回“未完成”
+  if (allLoaded.value || pendingFirst.value || inflight) return
-  if (pendingFirst.value) return false
-
   const nextPage = page.value + 1
-  const res = await $fetch(buildUrl({ pageNo: nextPage }), { headers: tokenHeader.value })
+  isLoadingMore.value = true
-  const data = Array.isArray(res) ? res : []
+  inflight = $fetch(buildUrl({ pageNo: nextPage }), { headers: tokenHeader.value })
-  const mapped = data.map((p) => ({
+    .then((res) => {
-    id: p.id,
+      const data = Array.isArray(res) ? res : []
-    title: p.title,
+      const mapped = data.map((p) => ({
-    description: p.content,
+        id: p.id,
-    category: p.category,
+        title: p.title,
-    tags: p.tags || [],
+        description: p.content,
-    members: (p.participants || []).map((m) => ({ id: m.id, avatar: m.avatar })),
+        category: p.category,
-    comments: p.commentCount,
+        tags: p.tags || [],
-    views: p.views,
+        members: (p.participants || []).map((m) => ({ id: m.id, avatar: m.avatar })),
-    time: TimeManager.format(
+        comments: p.commentCount,
-      selectedTopic.value === '最新回复' ? p.lastReplyAt || p.createdAt : p.createdAt,
+        views: p.views,
-    ),
+        time: TimeManager.format(
-    pinned: Boolean(p.pinned ?? p.pinnedAt ?? p.pinned_at),
+          selectedTopic.value === '最新回复' ? p.lastReplyAt || p.createdAt : p.createdAt,
-    type: p.type,
+        ),
-  }))
+        pinned: Boolean(p.pinned ?? p.pinnedAt ?? p.pinned_at),
-  articles.value.push(...mapped)
+        type: p.type,
-
+      }))
-  const done = data.length < pageSize
+      articles.value.push(...mapped)
-  if (!done) page.value = nextPage
+      if (data.length < pageSize) {
-  return done // ✅ 返回给组件，决定是否停止观察
+        allLoaded.value = true
+      } else {
+        page.value = nextPage
+      }
+    })
+    .finally(() => {
+      inflight = null
+      isLoadingMore.value = false
+    })
 }
 
-/** 选项首屏加载与状态持久 **/
+/** 绑定滚动加载（避免挂载瞬间触发） **/
+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)
+  }
 })
 
 /** 选项首屏加载：服务端执行一次；客户端兜底 **/
@@ -347,14 +368,9 @@ 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)
@@ -391,7 +407,6 @@ const sanitizeDescription = (text) => stripMarkdown(text)
   height: 200px;
 }
 
-/* 这里的 bottom-loading 可保留给首屏 loading 使用；InfiniteLoadMore 自带同名样式也兼容 */
 .bottom-loading {
   height: 100px;
 }

frontend_nuxt/pages/message.vue

@@ -48,18 +48,18 @@
     </div>
 
     <template v-else>
-      <div v-if="isLoadingMessage" class="loading-message">
+      <div v-if="isLoadingMessage && filteredNotifications.length === 0" class="loading-message">
         <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
       </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">
+      <div v-else class="timeline-container">
-        <BaseTimeline :items="notifications">
+        <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,20 @@
             </div>
           </template>
         </BaseTimeline>
-        <InfiniteLoadMore :key="selectedTab" :on-load="loadMore" :pause="isLoadingMessage" />
+        <div v-if="isLoadingMessage" class="loading-message">
+          <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
+        </div>
       </div>
     </template>
   </div>
 </template>
 
 <script setup>
-import { ref, watch, onActivated } from 'vue'
+import { computed, onActivated, ref } from 'vue'
+import { useScrollLoadMore } from '~/utils/loadMore'
 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,7 +529,7 @@ import {
   markRead,
   notifications,
   markAllRead,
-  hasMore,
+  allLoaded,
   fetchNotificationPreferences,
   updateNotificationPreference,
 } from '~/utils/notification'
@@ -540,25 +542,9 @@ const selectedTab = ref(
   ['all', 'unread', 'control'].includes(route.query.tab) ? route.query.tab : 'unread',
 )
 const notificationPrefs = ref([])
-const page = ref(0)
+const filteredNotifications = computed(() =>
-const pageSize = 30
+  selectedTab.value === 'all' ? notifications.value : notifications.value.filter((n) => !n.read),
-
+)
-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()
@@ -568,11 +554,7 @@ const togglePref = async (pref) => {
   const ok = await updateNotificationPreference(pref.type, !pref.enabled)
   if (ok) {
     pref.enabled = !pref.enabled
-    await fetchNotifications({
+    await fetchNotifications(true)
-      page: page.value,
-      size: pageSize,
-      unread: selectedTab.value === 'unread',
-    })
     await fetchUnreadCount()
   } else {
     toast.error('操作失败')
@@ -652,9 +634,14 @@ const formatType = (t) => {
   }
 }
 
-onActivated(async () => {
+const loadMore = async () => {
-  page.value = 0
+  if (allLoaded.value) return
-  await fetchNotifications({ page: 0, size: pageSize, unread: selectedTab.value === 'unread' })
+  await fetchNotifications()
+}
+useScrollLoadMore(loadMore)
+
+onActivated(() => {
+  fetchNotifications(true)
   fetchPrefs()
 })
 </script>
@@ -670,6 +657,8 @@ onActivated(async () => {
 .message-page {
   background-color: var(--background-color);
   overflow-x: hidden;
+  height: calc(100vh - var(--header-height));
+  overflow-y: auto;
 }
 
 .message-page-header {

frontend_nuxt/utils/loadMore.js

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

frontend_nuxt/utils/notification.js

@@ -118,26 +118,27 @@ export async function updateNotificationPreference(type, enabled) {
 function createFetchNotifications() {
   const notifications = ref([])
   const isLoadingMessage = ref(false)
-  const hasMore = ref(true)
+  const page = ref(0)
-
+  const pageSize = 50
-  const fetchNotifications = async ({
+  const allLoaded = ref(false)
-    page = 0,
+  const fetchNotifications = async (reset = false) => {
-    size = 30,
-    unread = false,
-    append = false,
-  } = {}) => {
     const config = useRuntimeConfig()
     const API_BASE_URL = config.public.apiBaseUrl
+    if (isLoadingMessage.value || (allLoaded.value && !reset)) return
     try {
       const token = getToken()
       if (!token) {
         toast.error('请先登录')
         return
       }
-      if (!append) notifications.value = []
+      if (reset) {
+        notifications.value = []
+        page.value = 0
+        allLoaded.value = false
+      }
       isLoadingMessage.value = true
       const res = await fetch(
-        `${API_BASE_URL}/api/notifications${unread ? '/unread' : ''}?page=${page}&size=${size}`,
+        `${API_BASE_URL}/api/notifications?page=${page.value}&pageSize=${pageSize}`,
         {
           headers: {
             Authorization: `Bearer ${token}`,
@@ -150,11 +151,10 @@ function createFetchNotifications() {
         return
       }
       const data = await res.json()
-      const arr = []
 
       for (const n of data) {
         if (n.type === 'COMMENT_REPLY') {
-          arr.push({
+          notifications.value.push({
             ...n,
             src: n.comment.author.avatar,
             iconClick: () => {
@@ -163,7 +163,7 @@ function createFetchNotifications() {
             },
           })
         } else if (n.type === 'REACTION') {
-          arr.push({
+          notifications.value.push({
             ...n,
             emoji: reactionEmojiMap[n.reactionType],
             iconClick: () => {
@@ -174,7 +174,7 @@ function createFetchNotifications() {
             },
           })
         } else if (n.type === 'POST_VIEWED') {
-          arr.push({
+          notifications.value.push({
             ...n,
             src: n.fromUser ? n.fromUser.avatar : null,
             icon: n.fromUser ? undefined : iconMap[n.type],
@@ -185,19 +185,39 @@ function createFetchNotifications() {
               }
             },
           })
-        } else if (n.type === 'LOTTERY_WIN' || n.type === 'LOTTERY_DRAW') {
+        } else if (n.type === 'LOTTERY_WIN') {
-          arr.push({
+          notifications.value.push({
             ...n,
             icon: iconMap[n.type],
             iconClick: () => {
               if (n.post) {
                 markRead(n.id)
-                navigateTo(`/posts/${n.post.id}`)
+                router.push(`/posts/${n.post.id}`)
               }
             },
           })
-        } else if (n.type === 'POST_UPDATED' || n.type === 'USER_ACTIVITY') {
+        } else if (n.type === 'LOTTERY_DRAW') {
-          arr.push({
+          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: () => {
@@ -206,7 +226,7 @@ function createFetchNotifications() {
             },
           })
         } else if (n.type === 'MENTION') {
-          arr.push({
+          notifications.value.push({
             ...n,
             icon: iconMap[n.type],
             iconClick: () => {
@@ -217,7 +237,7 @@ function createFetchNotifications() {
             },
           })
         } else if (n.type === 'USER_FOLLOWED' || n.type === 'USER_UNFOLLOWED') {
-          arr.push({
+          notifications.value.push({
             ...n,
             icon: iconMap[n.type],
             iconClick: () => {
@@ -227,12 +247,19 @@ function createFetchNotifications() {
               }
             },
           })
-        } else if (
+        } else if (n.type === 'FOLLOWED_POST') {
-          n.type === 'FOLLOWED_POST' ||
+          notifications.value.push({
-          n.type === 'POST_SUBSCRIBED' ||
+            ...n,
-          n.type === 'POST_UNSUBSCRIBED'
+            icon: iconMap[n.type],
-        ) {
+            iconClick: () => {
-          arr.push({
+              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: () => {
@@ -243,7 +270,7 @@ function createFetchNotifications() {
             },
           })
         } else if (n.type === 'POST_REVIEW_REQUEST') {
-          arr.push({
+          notifications.value.push({
             ...n,
             src: n.fromUser ? n.fromUser.avatar : null,
             icon: n.fromUser ? undefined : iconMap[n.type],
@@ -255,25 +282,26 @@ function createFetchNotifications() {
             },
           })
         } else if (n.type === 'REGISTER_REQUEST') {
-          arr.push({
+          notifications.value.push({
             ...n,
             icon: iconMap[n.type],
             iconClick: () => {},
           })
         } else {
-          arr.push({
+          notifications.value.push({
             ...n,
             icon: iconMap[n.type],
           })
         }
       }
 
-      if (append) notifications.value.push(...arr)
+      if (data.length < pageSize) {
-      else notifications.value = arr
+        allLoaded.value = true
-      hasMore.value = data.length === size
+      } else {
+        page.value++
+      }
     } catch (e) {
       console.error(e)
-      isLoadingMessage.value = false
     }
   }
 
@@ -323,7 +351,7 @@ function createFetchNotifications() {
     notifications,
     isLoadingMessage,
     markAllRead,
-    hasMore,
+    allLoaded,
   }
 }
 
@@ -333,5 +361,5 @@ export const {
   notifications,
   isLoadingMessage,
   markAllRead,
-  hasMore,
+  allLoaded,
 } = createFetchNotifications()