feat(ui): refine order detail pages

app/(order)/order/[id]/page.tsx

@@ -1,9 +1,10 @@
 "use client"
 
 import OrderActions from "@/components/order-actions"
-import { Badge } from "@/components/ui/badge"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { EmptyState } from "@/components/ui/empty-state"
 import { Separator } from "@/components/ui/separator"
+import { StatusBadge } from "@/components/ui/status-badge"
 import { getOrderById, listChatSessions, listReviewsByOrder } from "@/lib/api"
 import { ORDER_ACCEPT_TIMEOUT_MS, ORDER_CLOSE_TIMEOUT_MS } from "@/lib/config/demo-timers"
 import { statusLabels } from "@/lib/constants"
@@ -31,6 +32,19 @@ const disputedStatusSteps: OrderStatus[] = [
 
 const cancelledStatusSteps: OrderStatus[] = ["pending_payment", "pending_accept", "cancelled"]
 
+type OrderStatusBadgeVariant = "success" | "warning" | "info" | "neutral" | "destructive"
+
+const statusVariants: Record<OrderStatus, OrderStatusBadgeVariant> = {
+  pending_payment: "warning",
+  pending_accept: "info",
+  in_progress: "success",
+  pending_close: "info",
+  pending_review: "info",
+  disputed: "destructive",
+  completed: "success",
+  cancelled: "neutral",
+}
+
 export default function OrderDetailPage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = use(params)
   const [sessions, setSessions] = useState<Awaited<ReturnType<typeof listChatSessions>>>([])
@@ -114,14 +128,16 @@ export default function OrderDetailPage({ params }: { params: Promise<{ id: stri
 
   if (loading) {
     return (
-      <div className="container mx-auto py-8 px-4 text-center text-muted-foreground">加载中...</div>
+      <div className="container mx-auto max-w-2xl px-4 py-8">
+        <EmptyState title="加载中" description="正在读取订单详情..." icon={Clock} />
+      </div>
     )
   }
 
   if (!order) {
     return (
-      <div className="container mx-auto py-8 px-4 text-center text-muted-foreground">
+      <div className="container mx-auto max-w-2xl px-4 py-8">
-        订单不存在
+        <EmptyState title="订单不存在" description="该订单可能已被删除或暂不可访问。" />
       </div>
     )
   }
@@ -162,10 +178,12 @@ export default function OrderDetailPage({ params }: { params: Promise<{ id: stri
 
       <div className="flex items-center justify-between mb-6">
         <h1 className="text-2xl font-bold">订单详情</h1>
-        <Badge variant="outline">{statusLabels[order.status]}</Badge>
+        <StatusBadge status={statusVariants[order.status]}>
+          {statusLabels[order.status]}
+        </StatusBadge>
       </div>
 
-      <Card className="mb-6">
+      <Card className="mb-6 border-border/80 shadow-sm">
         <CardContent className="pt-6">
           <div className="flex items-center justify-between">
             {statusSteps.map((step, i) => {
@@ -176,10 +194,10 @@ export default function OrderDetailPage({ params }: { params: Promise<{ id: stri
                   <div
                     className={`h-8 w-8 rounded-full flex items-center justify-center text-xs font-medium ${
                       isCurrent
-                        ? "bg-primary text-primary-foreground shadow-sm"
+                        ? "bg-primary text-primary-foreground"
                         : isActive
-                          ? "bg-primary/20 text-primary"
+                          ? "border border-primary/30 bg-primary/10 text-primary"
-                          : "bg-muted text-muted-foreground"
+                          : "border border-border/60 bg-muted/50 text-muted-foreground"
                     }`}
                   >
                     {isActive ? <CheckCircle className="h-4 w-4" /> : i + 1}
@@ -195,12 +213,12 @@ export default function OrderDetailPage({ params }: { params: Promise<{ id: stri
       </Card>
 
       {timeoutHint && (
-        <Card className="mb-6">
+        <Card className="mb-6 border-border/80 shadow-sm">
           <CardContent className="py-3 text-sm text-muted-foreground">{timeoutHint}</CardContent>
         </Card>
       )}
 
-      <Card className="mb-6">
+      <Card className="mb-6 border-border/80 shadow-sm">
         <CardHeader>
           <CardTitle className="text-base">服务信息</CardTitle>
         </CardHeader>
@@ -240,7 +258,7 @@ export default function OrderDetailPage({ params }: { params: Promise<{ id: stri
         </CardContent>
       </Card>
 
-      <Card className="mb-6">
+      <Card className="mb-6 border-border/80 shadow-sm">
         <CardHeader>
           <CardTitle className="text-base">时间线</CardTitle>
         </CardHeader>
@@ -252,14 +270,14 @@ export default function OrderDetailPage({ params }: { params: Promise<{ id: stri
           </div>
           {order.acceptedAt && (
             <div className="flex items-center gap-2">
-              <CheckCircle className="h-3.5 w-3.5 text-green-500" />
+              <CheckCircle className="h-3.5 w-3.5 text-success" />
               <span className="text-muted-foreground">接单时间:</span>
               {new Date(order.acceptedAt).toLocaleString("zh-CN")}
             </div>
           )}
           {order.completedAt && (
             <div className="flex items-center gap-2">
-              <CheckCircle className="h-3.5 w-3.5 text-green-500" />
+              <CheckCircle className="h-3.5 w-3.5 text-success" />
               <span className="text-muted-foreground">完成时间:</span>
               {new Date(order.completedAt).toLocaleString("zh-CN")}
             </div>
@@ -268,7 +286,7 @@ export default function OrderDetailPage({ params }: { params: Promise<{ id: stri
       </Card>
 
       {reviews.length > 0 && (
-        <Card className="mb-6">
+        <Card className="mb-6 border-border/80 shadow-sm">
           <CardHeader>
             <CardTitle className="text-base">评价</CardTitle>
           </CardHeader>
@@ -281,7 +299,7 @@ export default function OrderDetailPage({ params }: { params: Promise<{ id: stri
                     {[1, 2, 3, 4, 5].map((star) => (
                       <Star
                         key={`star-${star}`}
-                        className={`h-3.5 w-3.5 ${star <= review.rating ? "fill-yellow-400 text-yellow-400" : "text-muted"}`}
+                        className={`h-3.5 w-3.5 ${star <= review.rating ? "fill-warning text-warning" : "text-muted stroke-muted-foreground"}`}
                       />
                     ))}
                   </div>

app/(order)/order/new/page.tsx

@@ -3,6 +3,7 @@
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { EmptyState } from "@/components/ui/empty-state"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Separator } from "@/components/ui/separator"
@@ -94,14 +95,16 @@ export default function NewOrderPage() {
 
   if (loading) {
     return (
-      <div className="container mx-auto py-8 px-4 text-center text-muted-foreground">加载中...</div>
+      <div className="container mx-auto max-w-lg px-4 py-8">
+        <EmptyState title="加载中" description="正在读取服务信息..." icon={CreditCard} />
+      </div>
     )
   }
 
   if (!service || !player) {
     return (
-      <div className="container mx-auto py-8 px-4 text-center text-muted-foreground">
+      <div className="container mx-auto max-w-lg px-4 py-8">
-        服务不存在
+        <EmptyState title="服务不存在" description="该服务可能已下架或暂不可访问。" />
       </div>
     )
   }
@@ -110,12 +113,13 @@ export default function NewOrderPage() {
 
   if (submitted) {
     return (
-      <div className="container mx-auto py-8 px-4 max-w-lg text-center space-y-4">
+      <div className="container mx-auto max-w-lg px-4 py-8">
-        <CheckCircle className="h-12 w-12 mx-auto text-green-500" />
+        <EmptyState
-        <h2 className="text-xl font-bold">下单成功</h2>
+          title="下单成功"
-        <p className="text-sm text-muted-foreground">
+          description="订单已创建，等待打手接单。你可以在订单列表中查看进度。"
-          订单已创建，等待打手接单。你可以在订单列表中查看进度。
+          icon={CheckCircle}
-        </p>
+          className="[&>div>svg]:text-success"
+          action={
             <div className="flex gap-2 justify-center">
               <Button asChild>
                 <Link href="/orders">查看订单</Link>
@@ -124,6 +128,8 @@ export default function NewOrderPage() {
                 <Link href={`/player/${player.id}`}>返回打手主页</Link>
               </Button>
             </div>
+          }
+        />
       </div>
     )
   }
@@ -141,7 +147,7 @@ export default function NewOrderPage() {
       <h1 className="text-2xl font-bold mb-6">确认下单</h1>
 
       <div className="space-y-6">
-        <Card>
+        <Card className="border-border/80 shadow-sm">
           <CardHeader>
             <CardTitle className="text-base">服务信息</CardTitle>
           </CardHeader>
@@ -181,7 +187,7 @@ export default function NewOrderPage() {
           </CardContent>
         </Card>
 
-        <Card>
+        <Card className="border-border/80 shadow-sm">
           <CardHeader>
             <CardTitle className="text-base">订单信息</CardTitle>
           </CardHeader>
@@ -211,7 +217,7 @@ export default function NewOrderPage() {
           </CardContent>
         </Card>
 
-        <Card>
+        <Card className="border-border/80 shadow-sm">
           <CardHeader>
             <CardTitle className="text-base">支付信息</CardTitle>
           </CardHeader>

app/(order)/review/[id]/page.tsx

@@ -2,6 +2,7 @@
 
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { EmptyState } from "@/components/ui/empty-state"
 import { Label } from "@/components/ui/label"
 import { Textarea } from "@/components/ui/textarea"
 import { getOrderById, listReviewsByOrder } from "@/lib/api"
@@ -54,14 +55,16 @@ export default function ReviewPage({ params }: { params: Promise<{ id: string }>
 
   if (loading) {
     return (
-      <div className="container mx-auto py-8 px-4 text-center text-muted-foreground">加载中...</div>
+      <div className="container mx-auto max-w-lg px-4 py-8">
+        <EmptyState title="加载中" description="正在读取评价信息..." icon={Star} />
+      </div>
     )
   }
 
   if (!order) {
     return (
-      <div className="container mx-auto py-8 px-4 text-center text-muted-foreground">
+      <div className="container mx-auto max-w-lg px-4 py-8">
-        订单不存在
+        <EmptyState title="订单不存在" description="该订单可能已被删除或暂不可访问。" />
       </div>
     )
   }
@@ -71,38 +74,51 @@ export default function ReviewPage({ params }: { params: Promise<{ id: string }>
 
   if (order.status !== "pending_review") {
     return (
-      <div className="container mx-auto py-8 px-4 max-w-lg text-center space-y-4">
+      <div className="container mx-auto max-w-lg px-4 py-8">
-        <h2 className="text-xl font-bold">当前阶段不可评价</h2>
+        <EmptyState
-        <p className="text-sm text-muted-foreground">仅待评价状态的订单可以提交评价。</p>
+          title="当前阶段不可评价"
-        <Link href={`/order/${id}`} className="text-sm text-primary hover:underline">
+          description="仅待评价状态的订单可以提交评价。"
-          返回订单详情
+          icon={Star}
-        </Link>
+          action={
+            <Button variant="outline" asChild>
+              <Link href={`/order/${id}`}>返回订单详情</Link>
+            </Button>
+          }
+        />
       </div>
     )
   }
 
   if (hasSubmitted && !isRevealed) {
     return (
-      <div className="container mx-auto py-8 px-4 max-w-lg text-center space-y-4">
+      <div className="container mx-auto max-w-lg px-4 py-8">
-        <Lock className="h-12 w-12 mx-auto text-muted-foreground" />
+        <EmptyState
-        <h2 className="text-xl font-bold">评价已提交</h2>
+          title="评价已提交"
-        <p className="text-sm text-muted-foreground">等待对方提交评价中</p>
+          description="等待对方提交评价，双方都提交后将同时揭晓。"
-        <p className="text-sm text-muted-foreground">双方都提交评价后将同时揭晓</p>
+          icon={Lock}
-        <Link href={`/order/${id}`} className="text-sm text-primary hover:underline">
+          action={
-          返回订单详情
+            <Button variant="outline" asChild>
-        </Link>
+              <Link href={`/order/${id}`}>返回订单详情</Link>
+            </Button>
+          }
+        />
       </div>
     )
   }
 
   if (hasSubmitted && isRevealed) {
     return (
-      <div className="container mx-auto py-8 px-4 max-w-lg text-center space-y-4">
+      <div className="container mx-auto max-w-lg px-4 py-8">
-        <h2 className="text-xl font-bold">评价已揭晓</h2>
+        <EmptyState
-        <p className="text-sm text-muted-foreground">双方评价已同步公开，可在订单详情查看。</p>
+          title="评价已揭晓"
-        <Link href={`/order/${id}`} className="text-sm text-primary hover:underline">
+          description="双方评价已同步公开，可在订单详情查看。"
-          返回订单详情
+          icon={Star}
-        </Link>
+          action={
+            <Button variant="outline" asChild>
+              <Link href={`/order/${id}`}>返回订单详情</Link>
+            </Button>
+          }
+        />
       </div>
     )
   }
@@ -117,7 +133,7 @@ export default function ReviewPage({ params }: { params: Promise<{ id: string }>
         返回订单
       </Link>
 
-      <Card className="hover:shadow-card-hover">
+      <Card className="border-border/80 shadow-sm">
         <CardHeader>
           <CardTitle>评价服务</CardTitle>
           <p className="text-sm text-muted-foreground">{order.service.title}</p>
@@ -138,8 +154,8 @@ export default function ReviewPage({ params }: { params: Promise<{ id: string }>
                   <Star
                     className={`h-8 w-8 transition-colors ${
                       star <= (hoverRating || rating)
-                        ? "fill-yellow-400 text-yellow-400"
+                        ? "fill-warning text-warning"
-                        : "text-muted"
+                        : "text-muted stroke-muted-foreground"
                     }`}
                   />
                 </button>
@@ -158,7 +174,7 @@ export default function ReviewPage({ params }: { params: Promise<{ id: string }>
             />
           </div>
 
-          <div className="rounded-md bg-muted/50 p-3 text-xs text-muted-foreground flex items-start gap-2">
+          <div className="rounded-lg border border-border/60 bg-muted/30 p-3 text-xs text-muted-foreground flex items-start gap-2">
             <Lock className="h-4 w-4 shrink-0 mt-0.5" />
             <span>评价采用密封机制：你的评价将在双方都提交后同时揭晓。</span>
           </div>