feat(ui): refine account pages

app/(account)/notifications/page.tsx

@@ -2,14 +2,15 @@
 
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
-import { Card, CardContent } from "@/components/ui/card"
+import { EmptyState } from "@/components/ui/empty-state"
 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 { Bell, CheckCheck, MessageSquare, ShoppingBag } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { Bell, CheckCheck, Loader2, MessageSquare, ShoppingBag } from "lucide-react"
 import Link from "next/link"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 
@@ -25,36 +26,69 @@ const typeLabels: Record<Notification["type"], string> = {
   system: "系统",
 }
 
+const typeVariants: Record<Notification["type"], "info" | "neutral" | "default" | "secondary"> = {
+  order: "info",
+  community: "neutral",
+  system: "neutral",
+}
+
 function NotificationItem({ notification }: { notification: Notification }) {
   const Icon = typeIcons[notification.type]
+
   const content = (
-    <Card className="p-0 hover:bg-muted/50 transition-colors">
-      <CardContent className="flex items-start gap-3 p-4">
-        <div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center shrink-0 mt-0.5">
-          <Icon className="h-4 w-4" />
+    <div
+      className={cn(
+        "flex items-start gap-4 p-4 transition-colors group relative",
+        notification.read ? "hover:bg-muted/10" : "bg-primary/5 hover:bg-primary/10",
+      )}
+    >
+      <div
+        className={cn(
+          "h-10 w-10 rounded-full border border-border/40 flex items-center justify-center shrink-0",
+          notification.read ? "bg-muted/40" : "bg-background",
+        )}
+      >
+        <Icon
+          className={cn("h-4 w-4", notification.read ? "text-muted-foreground" : "text-primary")}
+        />
+      </div>
+      <div className="flex-1 min-w-0 space-y-1">
+        <div className="flex items-center gap-2">
+          <span
+            className={cn(
+              "text-sm",
+              notification.read ? "text-foreground font-medium" : "text-foreground font-bold",
+            )}
+          >
+            {notification.title}
+          </span>
+          {!notification.read && (
+            <span className="h-1.5 w-1.5 rounded-full bg-primary shrink-0 ml-1" />
+          )}
         </div>
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2">
-            <span className="text-sm font-medium">{notification.title}</span>
-            {!notification.read && <span className="h-2 w-2 rounded-full bg-primary shrink-0" />}
-          </div>
-          <p className="text-sm text-muted-foreground mt-0.5">{notification.content}</p>
-          <p className="text-xs text-muted-foreground mt-1">
-            {new Date(notification.createdAt).toLocaleString("zh-CN")}
-          </p>
-        </div>
-        <Badge variant="outline" className="text-[10px] shrink-0">
-          {typeLabels[notification.type]}
-        </Badge>
-      </CardContent>
-    </Card>
+        <p className="text-sm text-muted-foreground leading-relaxed">{notification.content}</p>
+        <p className="text-xs text-muted-foreground/70">
+          {new Date(notification.createdAt).toLocaleString("zh-CN")}
+        </p>
+      </div>
+      <Badge
+        variant={typeVariants[notification.type] || "neutral"}
+        className="text-[10px] px-1.5 py-0 leading-tight shrink-0 mt-1"
+      >
+        {typeLabels[notification.type]}
+      </Badge>
+    </div>
   )
+
   return notification.link ? (
-    <Link className="block" href={notification.link}>
+    <Link
+      className="block border-b border-border/60 last:border-0 outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"
+      href={notification.link}
+    >
       {content}
     </Link>
   ) : (
-    content
+    <div className="border-b border-border/60 last:border-0">{content}</div>
   )
 }
 
@@ -148,75 +182,110 @@ export default function NotificationsPage() {
     (items: Notification[], emptyText: string) => {
       if (loading) {
         return (
-          <Card>
-            <CardContent className="py-8 text-center text-sm text-muted-foreground">
-              加载中...
-            </CardContent>
-          </Card>
+          <EmptyState
+            title="加载中"
+            description="正在获取您的通知记录..."
+            icon={Loader2}
+            className="[&>div>svg]:animate-spin my-4 border-dashed"
+          />
         )
       }
 
       if (loadingError) {
         return (
-          <Card>
-            <CardContent className="py-8 text-center text-sm text-muted-foreground">
-              {loadingError}
-            </CardContent>
-          </Card>
+          <EmptyState
+            title="加载失败"
+            description={loadingError}
+            className="my-4 border-destructive/20 bg-destructive/5"
+          />
         )
       }
 
       if (items.length === 0) {
         return (
-          <Card>
-            <CardContent className="py-8 text-center text-sm text-muted-foreground">
-              {emptyText}
-            </CardContent>
-          </Card>
+          <EmptyState
+            title={emptyText}
+            description="您的所有相关通知将显示在这里。"
+            className="my-4 border-dashed"
+          />
         )
       }
 
-      return items.map((notification) => (
-        <NotificationItem key={notification.id} notification={notification} />
-      ))
+      return (
+        <div className="rounded-xl border border-border/60 bg-card overflow-hidden my-4 shadow-sm">
+          {items.map((notification) => (
+            <NotificationItem key={notification.id} notification={notification} />
+          ))}
+        </div>
+      )
     },
     [loading, loadingError],
   )
 
   return (
     <div className="container mx-auto max-w-2xl px-4 py-8 space-y-6">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <h1 className="text-2xl font-bold">通知中心</h1>
-          {unreadCount > 0 && <Badge>{unreadCount} 条未读</Badge>}
+      <div className="flex items-center justify-between pb-2 border-b border-border/40">
+        <div className="flex items-center gap-3">
+          <h1 className="text-2xl font-bold tracking-tight">通知中心</h1>
+          {unreadCount > 0 && (
+            <Badge variant="default" className="rounded-full px-2 py-0 h-5">
+              {unreadCount}
+            </Badge>
+          )}
         </div>
-        <Button variant="outline" size="sm" onClick={markAllAsRead} disabled={markingAll}>
-          <CheckCheck className="mr-1 h-4 w-4" />
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={markAllAsRead}
+          disabled={markingAll || unreadCount === 0}
+          className="border-border/60"
+        >
+          <CheckCheck className="mr-1.5 h-4 w-4" />
           全部已读
         </Button>
       </div>
 
-      <Tabs defaultValue="all">
-        <TabsList>
-          <TabsTrigger value="all">全部</TabsTrigger>
-          <TabsTrigger value="order">订单</TabsTrigger>
-          <TabsTrigger value="community">社区</TabsTrigger>
-          <TabsTrigger value="system">系统</TabsTrigger>
+      <Tabs defaultValue="all" className="w-full">
+        <TabsList className="bg-transparent border-b border-border/40 w-full justify-start rounded-none p-0 h-10 space-x-6">
+          <TabsTrigger
+            value="all"
+            className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-0 h-10"
+          >
+            全部
+          </TabsTrigger>
+          <TabsTrigger
+            value="order"
+            className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-0 h-10"
+          >
+            订单
+          </TabsTrigger>
+          <TabsTrigger
+            value="community"
+            className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-0 h-10"
+          >
+            社区
+          </TabsTrigger>
+          <TabsTrigger
+            value="system"
+            className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-0 h-10"
+          >
+            系统
+          </TabsTrigger>
         </TabsList>
 
-        <TabsContent value="all" className="flex flex-col gap-3 mt-4">
+        <TabsContent value="all" className="outline-none">
           {renderTab(notifications, "暂无通知")}
         </TabsContent>
 
-        <TabsContent value="order" className="flex flex-col gap-3 mt-4">
+        <TabsContent value="order" className="outline-none">
           {renderTab(orderNotifs, "暂无订单通知")}
         </TabsContent>
 
-        <TabsContent value="community" className="flex flex-col gap-3 mt-4">
+        <TabsContent value="community" className="outline-none">
           {renderTab(communityNotifs, "暂无社区通知")}
         </TabsContent>
 
-        <TabsContent value="system" className="flex flex-col gap-3 mt-4">
+        <TabsContent value="system" className="outline-none">
           {renderTab(systemNotifs, "暂无系统通知")}
         </TabsContent>
       </Tabs>