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] 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 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 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 { List findByUserOrderByCreatedAtDesc(User user); List findByUserAndReadOrderByCreatedAtDesc(User user, boolean read); + Page findByUserOrderByCreatedAtDesc(User user, Pageable pageable); + Page findByUserAndReadOrderByCreatedAtDesc(User user, boolean read, Pageable pageable); long countByUserAndRead(User user, boolean read); List findByPost(Post post); List 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 listNotifications(String username, Boolean read) { + public List listNotifications(String username, Boolean read, int page, int size) { User user = userRepository.findByUsername(username) .orElseThrow(() -> new com.openisle.exception.NotFoundException("User not found")); Set disabled = user.getDisabledNotificationTypes(); + org.springframework.data.domain.Pageable pageable = + org.springframework.data.domain.PageRequest.of(page, size); List 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 @@ +
+ +
@@ -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()