-
-
+
+
)
}
diff --git a/web/app/dashboard/notifications/page.tsx b/web/app/dashboard/notifications/page.tsx
new file mode 100644
index 0000000..1ca754e
--- /dev/null
+++ b/web/app/dashboard/notifications/page.tsx
@@ -0,0 +1,187 @@
+"use client"
+
+import { useCallback, useEffect, useState } from "react"
+import { useRouter } from "next/navigation"
+import { BellIcon, CheckCheckIcon, RefreshCwIcon } from "lucide-react"
+import { toast } from "sonner"
+
+import { ListPagination } from "@/components/list-pagination"
+import { useNotifications } from "@/components/notification-provider"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+ fetchNotifications,
+ markAllNotificationsRead,
+ markNotificationRead,
+ type NotificationItem,
+ type NotificationReadStatus,
+} from "@/lib/api/notification"
+import type { PageResult } from "@/lib/api/admin"
+import { cn, formatDateTime } from "@/lib/utils"
+
+const readStatusOptions: Array<{ value: NotificationReadStatus; label: string }> = [
+ { value: "all", label: "全部" },
+ { value: "unread", label: "未读" },
+ { value: "read", label: "已读" },
+]
+
+export default function DashboardNotificationsPage() {
+ const router = useRouter()
+ const { refreshUnreadCount } = useNotifications()
+ const [readStatus, setReadStatus] = useState
("all")
+ const [page, setPage] = useState(1)
+ const [limit, setLimit] = useState(20)
+ const [loading, setLoading] = useState(true)
+ const [actionLoading, setActionLoading] = useState(false)
+ const [result, setResult] = useState>({
+ results: [],
+ page: { page: 1, limit: 20, total: 0 },
+ })
+
+ const loadData = useCallback(async () => {
+ setLoading(true)
+ try {
+ const data = await fetchNotifications({
+ page,
+ limit,
+ readStatus,
+ })
+ setResult(data)
+ } catch (error) {
+ toast.error(error instanceof Error ? error.message : "加载通知失败")
+ } finally {
+ setLoading(false)
+ }
+ }, [limit, page, readStatus])
+
+ useEffect(() => {
+ void loadData()
+ }, [loadData])
+
+ async function openNotification(item: NotificationItem) {
+ try {
+ if (!item.readAt) {
+ await markNotificationRead(item.id)
+ await refreshUnreadCount()
+ }
+ if (item.actionUrl) {
+ router.push(item.actionUrl)
+ }
+ } catch (error) {
+ toast.error(error instanceof Error ? error.message : "打开通知失败")
+ }
+ }
+
+ async function handleMarkAllRead() {
+ setActionLoading(true)
+ try {
+ await markAllNotificationsRead()
+ await refreshUnreadCount()
+ await loadData()
+ toast.success("已全部标记为已读")
+ } catch (error) {
+ toast.error(error instanceof Error ? error.message : "全部已读失败")
+ } finally {
+ setActionLoading(false)
+ }
+ }
+
+ function handleStatusChange(nextStatus: NotificationReadStatus) {
+ setReadStatus(nextStatus)
+ setPage(1)
+ }
+
+ function handlePageChange(nextPage: number) {
+ if (nextPage < 1 || nextPage === page) {
+ return
+ }
+ setPage(nextPage)
+ }
+
+ function handleLimitChange(nextLimit: number) {
+ setLimit(nextLimit)
+ setPage(1)
+ }
+
+ return (
+
+
+
+
通知中心
+
+ 查看工单、会话等业务流转提醒
+
+
+
+
+
+
+
+
+
+ {readStatusOptions.map((option) => (
+
+ ))}
+
+
+
+ {result.results.length > 0 ? (
+
+ {result.results.map((item) => {
+ const unread = !item.readAt
+ return (
+
+ )
+ })}
+
+ ) : (
+
+ {loading ? "正在加载通知" : "暂无通知"}
+
+ )}
+
+
+
+