fix: sync notification and shop dashboard state

app/(account)/notifications/page.tsx

@@ -1,11 +1,13 @@
+"use client"
+
 import { Bell, CheckCheck, MessageSquare, ShoppingBag } from "lucide-react"
 import Link from "next/link"
 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 { mockNotifications } from "@/lib/mock"
 import type { Notification } from "@/lib/types"
+import { useNotificationStore } from "@/store/notifications"
 
 const typeIcons: Record<Notification["type"], typeof Bell> = {
   order: ShoppingBag,
@@ -46,10 +48,12 @@ function NotificationItem({ notification }: { notification: Notification }) {
 }
 
 export default function NotificationsPage() {
-  const unreadCount = mockNotifications.filter((n) => !n.read).length
-  const orderNotifs = mockNotifications.filter((n) => n.type === "order")
-  const communityNotifs = mockNotifications.filter((n) => n.type === "community")
-  const systemNotifs = mockNotifications.filter((n) => n.type === "system")
+  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")
 
   return (
     <div className="max-w-2xl space-y-6">
@@ -58,7 +62,7 @@ export default function NotificationsPage() {
           <h1 className="text-2xl font-bold">通知中心</h1>
           {unreadCount > 0 && <Badge>{unreadCount} 条未读</Badge>}
         </div>
-        <Button variant="outline" size="sm">
+        <Button variant="outline" size="sm" onClick={markAllAsRead}>
           <CheckCheck className="mr-1 h-4 w-4" />
           全部已读
         </Button>
@@ -73,8 +77,8 @@ export default function NotificationsPage() {
         </TabsList>
 
         <TabsContent value="all" className="space-y-2 mt-4">
-          {mockNotifications.map((n) => (
-            <NotificationItem key={n.id} notification={n} />
+          {notifications.map((notification) => (
+            <NotificationItem key={notification.id} notification={notification} />
           ))}
         </TabsContent>