-
} onClick={() => window.location.assign(`${legacyBase}/notifications`)} />
+
+ } onClick={() => navigate('/notifications')} />
+
预览
{user?.displayName ?? '用户'}{user?.roles.join(' · ') || '正在读取权限'}
{user?.displayName?.slice(0, 1) ?? '明'}
diff --git a/web-react/src/pages/NotificationsPage.tsx b/web-react/src/pages/NotificationsPage.tsx
new file mode 100644
index 0000000..e093315
--- /dev/null
+++ b/web-react/src/pages/NotificationsPage.tsx
@@ -0,0 +1,159 @@
+import { useMemo, useState } from 'react'
+import {
+ BellOutlined,
+ CheckOutlined,
+ LeftOutlined,
+ MessageOutlined,
+ ReloadOutlined,
+ RightOutlined,
+ SearchOutlined,
+ SendOutlined,
+} from '@ant-design/icons'
+import { Alert, App, Button, Checkbox, Empty, Input, Modal, Select, Skeleton, Tag } from 'antd'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useNavigate } from 'react-router-dom'
+import http, { apiErrorMessage } from '../api/http'
+import PageHeader from '../components/PageHeader'
+import { useAuthStore } from '../stores/auth'
+import { openLegacy } from './dashboard/legacy'
+import './notifications.css'
+
+type Tab = 'inbox' | 'sent'
+interface NotificationItem {
+ id: string; title: string; content: string; category: string; isRead: boolean; linkUrl?: string
+ senderName: string; audienceName?: string; isManual: boolean; createdAt: string
+}
+interface SentItem { id: string; title: string; content: string; category: string; audienceName: string; recipientCount: number; createdAt: string }
+interface CursorResult
{ items: T[]; hasMore: boolean; nextCursor?: string; unreadCount?: number }
+
+const pageSize = 20
+const senderRoles = ['SuperAdmin', 'AcademicAdmin', 'CollegeAdmin', 'Counselor', 'Teacher']
+const categories: Record = {
+ General: { label: '一般通知', color: 'blue' }, Approval: { label: '审核待办', color: 'purple' },
+ Schedule: { label: '课程变动', color: 'cyan' }, Grade: { label: '成绩通知', color: 'green' },
+ Attendance: { label: '考勤消息', color: 'orange' }, CourseSelection: { label: '选课消息', color: 'geekblue' },
+ Warning: { label: '学业预警', color: 'red' },
+}
+
+function plainText(content: string) {
+ const holder = document.createElement('div')
+ holder.innerHTML = content
+ return (holder.textContent ?? '').replace(/\s+/g, ' ').trim()
+}
+
+function displayTime(value: string) {
+ const date = new Date(value)
+ if (Number.isNaN(date.getTime())) return value
+ const now = new Date()
+ const sameDay = date.toDateString() === now.toDateString()
+ return new Intl.DateTimeFormat('zh-CN', sameDay
+ ? { hour: '2-digit', minute: '2-digit', hour12: false }
+ : { month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit', hour12: false }).format(date)
+}
+
+export default function NotificationsPage() {
+ const { message } = App.useApp()
+ const navigate = useNavigate()
+ const queryClient = useQueryClient()
+ const roles = useAuthStore((state) => state.user?.roles ?? [])
+ const canSend = roles.some((role) => senderRoles.includes(role))
+ const [tab, setTab] = useState('inbox')
+ const [category, setCategory] = useState()
+ const [keywordInput, setKeywordInput] = useState('')
+ const [keyword, setKeyword] = useState('')
+ const [unreadOnly, setUnreadOnly] = useState(false)
+ const [inboxCursors, setInboxCursors] = useState([])
+ const [sentCursors, setSentCursors] = useState([])
+ const [selected, setSelected] = useState(null)
+
+ const inboxCursor = inboxCursors.at(-1)
+ const sentCursor = sentCursors.at(-1)
+ const inbox = useQuery({
+ queryKey: ['notifications', 'inbox', inboxCursor, category, keyword, unreadOnly],
+ queryFn: async () => (await http.get>('/notifications', { params: { cursor: inboxCursor, pageSize, category, keyword: keyword || undefined, unreadOnly: unreadOnly || undefined } })).data,
+ enabled: tab === 'inbox',
+ })
+ const sent = useQuery({
+ queryKey: ['notifications', 'sent', sentCursor],
+ queryFn: async () => (await http.get>('/notifications/sent', { params: { cursor: sentCursor, pageSize } })).data,
+ enabled: tab === 'sent' && canSend,
+ })
+
+ const activeQuery = tab === 'inbox' ? inbox : sent
+ const unreadCount = inbox.data?.unreadCount ?? 0
+ const groupedInbox = useMemo(() => inbox.data?.items ?? [], [inbox.data?.items])
+
+ const markRead = useMutation({
+ mutationFn: (id: string) => http.post(`/notifications/${id}/read`),
+ onSuccess: () => {
+ void queryClient.invalidateQueries({ queryKey: ['notifications', 'inbox'] })
+ void queryClient.invalidateQueries({ queryKey: ['notification-unread-count'] })
+ },
+ })
+ const markAll = useMutation({
+ mutationFn: () => http.post('/notifications/read-all'),
+ onSuccess: () => {
+ message.success('全部消息已标为已读')
+ void queryClient.invalidateQueries({ queryKey: ['notifications', 'inbox'] })
+ void queryClient.invalidateQueries({ queryKey: ['notification-unread-count'] })
+ },
+ onError: (error) => message.error(apiErrorMessage(error)),
+ })
+
+ function resetInbox() { setInboxCursors([]) }
+ function submitSearch() { setKeyword(keywordInput.trim()); resetInbox() }
+ async function openNotification(item: NotificationItem) {
+ if (!item.isRead) await markRead.mutateAsync(item.id).catch(() => undefined)
+ if (!item.linkUrl) { setSelected({ ...item, isRead: true }); return }
+ const migrated = ['/dashboard', '/account', '/users', '/notifications']
+ const path = item.linkUrl.startsWith('/next/') ? item.linkUrl.slice(5) : item.linkUrl
+ if (migrated.some((route) => path === route || path.startsWith(`${route}?`))) navigate(path)
+ else if (path.startsWith('/')) openLegacy(path)
+ else window.location.assign(path)
+ }
+
+ return (
+
+ UNREAD{unreadCount}条未读消息