feat(notifications): migrate to backend API

app/(account)/notifications/page.tsx

@@ -4,10 +4,14 @@ import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent } from "@/components/ui/card"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { requestWithAuth } from "@/lib/api/client"
+import { listNotifications, markAllNotificationsAsRead } from "@/lib/api/notifications"
+import { toApiError } from "@/lib/errors"
+import { notifyInfo } from "@/lib/toast"
 import type { Notification } from "@/lib/types"
-import { useNotificationStore } from "@/store/notifications"
 import { Bell, CheckCheck, MessageSquare, ShoppingBag } from "lucide-react"
 import Link from "next/link"
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 
 const typeIcons: Record<Notification["type"], typeof Bell> = {
   order: ShoppingBag,
@@ -55,12 +59,129 @@ function NotificationItem({ notification }: { notification: Notification }) {
 }
 
 export default function NotificationsPage() {
-  const notifications = useNotificationStore((state) => state.notifications)
-  const markAllAsRead = useNotificationStore((state) => state.markAllAsRead)
-  const unreadCount = notifications.filter((notification) => !notification.read).length
-  const orderNotifs = notifications.filter((notification) => notification.type === "order")
-  const communityNotifs = notifications.filter((notification) => notification.type === "community")
-  const systemNotifs = notifications.filter((notification) => notification.type === "system")
+  const mountedRef = useRef(true)
+  const markAllPendingRef = useRef(false)
+
+  const [notifications, setNotifications] = useState<Notification[]>([])
+  const [loading, setLoading] = useState(true)
+  const [loadingError, setLoadingError] = useState<string | null>(null)
+  const [markingAll, setMarkingAll] = useState(false)
+
+  const loadNotifications = useCallback(async () => {
+    setLoading(true)
+    setLoadingError(null)
+
+    try {
+      const res = await requestWithAuth(() => listNotifications({ offset: 0, limit: 50 }), {
+        onUnauthorized: () => loadNotifications(),
+      })
+
+      if (!mountedRef.current) return
+
+      if (res === null) {
+        setLoading(false)
+        return
+      }
+
+      setNotifications(res)
+      setLoading(false)
+    } catch (err: unknown) {
+      if (!mountedRef.current) return
+      setLoading(false)
+      setLoadingError(toApiError(err).msg)
+    }
+  }, [])
+
+  useEffect(() => {
+    mountedRef.current = true
+    void loadNotifications()
+    return () => {
+      mountedRef.current = false
+    }
+  }, [loadNotifications])
+
+  const markAllAsRead = useCallback(async () => {
+    if (markAllPendingRef.current) return
+
+    markAllPendingRef.current = true
+    setMarkingAll(true)
+
+    try {
+      const res = await requestWithAuth(() => markAllNotificationsAsRead(), {
+        onUnauthorized: () => markAllAsRead(),
+      })
+
+      if (!mountedRef.current) return
+
+      if (res === null) {
+        return
+      }
+
+      setNotifications((prev) => prev.map((n) => (n.read ? n : { ...n, read: true })))
+    } catch (err: unknown) {
+      if (!mountedRef.current) return
+      notifyInfo(toApiError(err).msg)
+    } finally {
+      markAllPendingRef.current = false
+      if (mountedRef.current) setMarkingAll(false)
+    }
+  }, [])
+
+  const unreadCount = useMemo(
+    () => notifications.filter((notification) => !notification.read).length,
+    [notifications],
+  )
+  const orderNotifs = useMemo(
+    () => notifications.filter((notification) => notification.type === "order"),
+    [notifications],
+  )
+  const communityNotifs = useMemo(
+    () => notifications.filter((notification) => notification.type === "community"),
+    [notifications],
+  )
+  const systemNotifs = useMemo(
+    () => notifications.filter((notification) => notification.type === "system"),
+    [notifications],
+  )
+
+  const renderTab = useCallback(
+    (items: Notification[], emptyText: string) => {
+      if (loading) {
+        return (
+          <Card>
+            <CardContent className="py-8 text-center text-sm text-muted-foreground">
+              加载中...
+            </CardContent>
+          </Card>
+        )
+      }
+
+      if (loadingError) {
+        return (
+          <Card>
+            <CardContent className="py-8 text-center text-sm text-muted-foreground">
+              {loadingError}
+            </CardContent>
+          </Card>
+        )
+      }
+
+      if (items.length === 0) {
+        return (
+          <Card>
+            <CardContent className="py-8 text-center text-sm text-muted-foreground">
+              {emptyText}
+            </CardContent>
+          </Card>
+        )
+      }
+
+      return items.map((notification) => (
+        <NotificationItem key={notification.id} notification={notification} />
+      ))
+    },
+    [loading, loadingError],
+  )
 
   return (
     <div className="container mx-auto max-w-2xl px-4 py-8 space-y-6">
@@ -69,7 +190,7 @@ export default function NotificationsPage() {
           <h1 className="text-2xl font-bold">通知中心</h1>
           {unreadCount > 0 && <Badge>{unreadCount} 条未读</Badge>}
         </div>
-        <Button variant="outline" size="sm" onClick={markAllAsRead}>
+        <Button variant="outline" size="sm" onClick={markAllAsRead} disabled={markingAll}>
           <CheckCheck className="mr-1 h-4 w-4" />
           全部已读
         </Button>
@@ -84,53 +205,19 @@ export default function NotificationsPage() {
         </TabsList>
 
         <TabsContent value="all" className="flex flex-col gap-3 mt-4">
-          {notifications.length === 0 ? (
-            <Card>
-              <CardContent className="py-8 text-center text-sm text-muted-foreground">
-                暂无通知
-              </CardContent>
-            </Card>
-          ) : (
-            notifications.map((notification) => (
-              <NotificationItem key={notification.id} notification={notification} />
-            ))
-          )}
+          {renderTab(notifications, "暂无通知")}
         </TabsContent>
 
         <TabsContent value="order" className="flex flex-col gap-3 mt-4">
-          {orderNotifs.length === 0 ? (
-            <Card>
-              <CardContent className="py-8 text-center text-sm text-muted-foreground">
-                暂无订单通知
-              </CardContent>
-            </Card>
-          ) : (
-            orderNotifs.map((n) => <NotificationItem key={n.id} notification={n} />)
-          )}
+          {renderTab(orderNotifs, "暂无订单通知")}
         </TabsContent>
 
         <TabsContent value="community" className="flex flex-col gap-3 mt-4">
-          {communityNotifs.length === 0 ? (
-            <Card>
-              <CardContent className="py-8 text-center text-sm text-muted-foreground">
-                暂无社区通知
-              </CardContent>
-            </Card>
-          ) : (
-            communityNotifs.map((n) => <NotificationItem key={n.id} notification={n} />)
-          )}
+          {renderTab(communityNotifs, "暂无社区通知")}
         </TabsContent>
 
         <TabsContent value="system" className="flex flex-col gap-3 mt-4">
-          {systemNotifs.length === 0 ? (
-            <Card>
-              <CardContent className="py-8 text-center text-sm text-muted-foreground">
-                暂无系统通知
-              </CardContent>
-            </Card>
-          ) : (
-            systemNotifs.map((n) => <NotificationItem key={n.id} notification={n} />)
-          )}
+          {renderTab(systemNotifs, "暂无系统通知")}
         </TabsContent>
       </Tabs>
     </div>