feat(ui): refine order detail pages

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">
-        <h2 className="text-xl font-bold">当前阶段不可评价</h2>
-        <p className="text-sm text-muted-foreground">仅待评价状态的订单可以提交评价。</p>
-        <Link href={`/order/${id}`} className="text-sm text-primary hover:underline">
-          返回订单详情
-        </Link>
+      <div className="container mx-auto max-w-lg px-4 py-8">
+        <EmptyState
+          title="当前阶段不可评价"
+          description="仅待评价状态的订单可以提交评价。"
+          icon={Star}
+          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">
-        <Lock className="h-12 w-12 mx-auto text-muted-foreground" />
-        <h2 className="text-xl font-bold">评价已提交</h2>
-        <p className="text-sm text-muted-foreground">等待对方提交评价中</p>
-        <p className="text-sm text-muted-foreground">双方都提交评价后将同时揭晓</p>
-        <Link href={`/order/${id}`} className="text-sm text-primary hover:underline">
-          返回订单详情
-        </Link>
+      <div className="container mx-auto max-w-lg px-4 py-8">
+        <EmptyState
+          title="评价已提交"
+          description="等待对方提交评价，双方都提交后将同时揭晓。"
+          icon={Lock}
+          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">
-        <h2 className="text-xl font-bold">评价已揭晓</h2>
-        <p className="text-sm text-muted-foreground">双方评价已同步公开，可在订单详情查看。</p>
-        <Link href={`/order/${id}`} className="text-sm text-primary hover:underline">
-          返回订单详情
-        </Link>
+      <div className="container mx-auto max-w-lg px-4 py-8">
+        <EmptyState
+          title="评价已揭晓"
+          description="双方评价已同步公开，可在订单详情查看。"
+          icon={Star}
+          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"
-                        : "text-muted"
+                        ? "fill-warning text-warning"
+                        : "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>