feat(ui): refine order detail pages

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,20 +113,23 @@ export default function NewOrderPage() {
 
   if (submitted) {
     return (
-      <div className="container mx-auto py-8 px-4 max-w-lg text-center space-y-4">
-        <CheckCircle className="h-12 w-12 mx-auto text-green-500" />
-        <h2 className="text-xl font-bold">下单成功</h2>
-        <p className="text-sm text-muted-foreground">
-          订单已创建，等待打手接单。你可以在订单列表中查看进度。
-        </p>
-        <div className="flex gap-2 justify-center">
-          <Button asChild>
-            <Link href="/orders">查看订单</Link>
-          </Button>
-          <Button variant="outline" asChild>
-            <Link href={`/player/${player.id}`}>返回打手主页</Link>
-          </Button>
-        </div>
+      <div className="container mx-auto max-w-lg px-4 py-8">
+        <EmptyState
+          title="下单成功"
+          description="订单已创建，等待打手接单。你可以在订单列表中查看进度。"
+          icon={CheckCircle}
+          className="[&>div>svg]:text-success"
+          action={
+            <div className="flex gap-2 justify-center">
+              <Button asChild>
+                <Link href="/orders">查看订单</Link>
+              </Button>
+              <Button variant="outline" asChild>
+                <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>