feat(ui): refine order management pages

app/(dashboard)/dashboard/shop/orders/page.tsx

@@ -1,8 +1,9 @@
 "use client"
 
-import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { EmptyState } from "@/components/ui/empty-state"
+import { StatusBadge, type StatusBadgeProps } from "@/components/ui/status-badge"
 import {
   Table,
   TableBody,
@@ -21,6 +22,17 @@ import { AlertCircle, CheckCircle, Clock, ListOrdered } from "lucide-react"
 import Link from "next/link"
 import { useEffect, useMemo, useState } from "react"
 
+const orderStatusVariants: Record<string, StatusBadgeProps["status"]> = {
+  pending_payment: "warning",
+  pending_accept: "info",
+  in_progress: "success",
+  pending_close: "info",
+  pending_review: "info",
+  disputed: "destructive",
+  completed: "success",
+  cancelled: "neutral",
+}
+
 export default function ShopOrdersPage() {
   const { shop, loading, error } = useMyShop()
   const [orders, setOrders] = useState<Awaited<ReturnType<typeof listOrders>>>([])
@@ -56,15 +68,27 @@ export default function ShopOrdersPage() {
   )
 
   if (loading) {
-    return <div className="text-sm text-muted-foreground">加载中...</div>
+    return (
+      <div className="container mx-auto max-w-6xl px-4 py-8">
+        <EmptyState title="店铺信息加载中" icon={Clock} />
+      </div>
+    )
   }
 
   if (error) {
-    return <div className="text-sm text-muted-foreground">{error}</div>
+    return (
+      <div className="container mx-auto max-w-6xl px-4 py-8">
+        <EmptyState title="店铺信息加载失败" description={error} icon={AlertCircle} />
+      </div>
+    )
   }
 
   if (!shop) {
-    return <div className="text-sm text-muted-foreground">当前账号没有可管理的店铺</div>
+    return (
+      <div className="container mx-auto max-w-6xl px-4 py-8">
+        <EmptyState title="当前账号没有可管理的店铺" icon={ListOrdered} />
+      </div>
+    )
   }
 
   const totalOrders = shopOrders.length
@@ -79,7 +103,7 @@ export default function ShopOrdersPage() {
       </div>
 
       <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-        <Card className="hover:shadow-card-hover">
+        <Card className="border-border/80 shadow-sm">
           <CardHeader className="flex flex-row items-center justify-between pb-2">
             <CardTitle className="text-sm font-medium">总订单</CardTitle>
             <ListOrdered className="h-4 w-4 text-muted-foreground" />
@@ -88,7 +112,7 @@ export default function ShopOrdersPage() {
             <div className="text-2xl font-bold">{totalOrders}</div>
           </CardContent>
         </Card>
-        <Card className="hover:shadow-card-hover">
+        <Card className="border-border/80 shadow-sm">
           <CardHeader className="flex flex-row items-center justify-between pb-2">
             <CardTitle className="text-sm font-medium">进行中</CardTitle>
             <Clock className="h-4 w-4 text-muted-foreground" />
@@ -97,7 +121,7 @@ export default function ShopOrdersPage() {
             <div className="text-2xl font-bold">{activeOrders}</div>
           </CardContent>
         </Card>
-        <Card className="hover:shadow-card-hover">
+        <Card className="border-border/80 shadow-sm">
           <CardHeader className="flex flex-row items-center justify-between pb-2">
             <CardTitle className="text-sm font-medium">已完成</CardTitle>
             <CheckCircle className="h-4 w-4 text-muted-foreground" />
@@ -106,7 +130,7 @@ export default function ShopOrdersPage() {
             <div className="text-2xl font-bold">{completedOrders}</div>
           </CardContent>
         </Card>
-        <Card className="hover:shadow-card-hover">
+        <Card className="border-border/80 shadow-sm">
           <CardHeader className="flex flex-row items-center justify-between pb-2">
             <CardTitle className="text-sm font-medium">争议订单</CardTitle>
             <AlertCircle className="h-4 w-4 text-muted-foreground" />
@@ -117,7 +141,7 @@ export default function ShopOrdersPage() {
         </Card>
       </div>
 
-      <Card className="hover:shadow-card-hover">
+      <Card className="border-border/80 shadow-sm">
         <CardHeader>
           <CardTitle>订单列表</CardTitle>
         </CardHeader>
@@ -137,14 +161,19 @@ export default function ShopOrdersPage() {
             <TableBody>
               {ordersLoading ? (
                 <TableRow>
-                  <TableCell colSpan={7} className="text-center text-sm text-muted-foreground">
-                    加载中...
+                  <TableCell colSpan={7} className="py-6">
+                    <EmptyState title="订单加载中" icon={Clock} className="min-h-[180px]" />
                   </TableCell>
                 </TableRow>
               ) : shopOrders.length === 0 ? (
                 <TableRow>
-                  <TableCell colSpan={7} className="text-center text-sm text-muted-foreground">
-                    暂无订单
+                  <TableCell colSpan={7} className="py-6">
+                    <EmptyState
+                      title="暂无订单"
+                      description="店铺产生订单后会出现在这里。"
+                      icon={ListOrdered}
+                      className="min-h-[180px]"
+                    />
                   </TableCell>
                 </TableRow>
               ) : (
@@ -154,10 +183,14 @@ export default function ShopOrdersPage() {
                     <TableCell>{order.consumerId}</TableCell>
                     <TableCell>{order.playerId}</TableCell>
                     <TableCell>
-                      <Badge variant="outline">{statusLabels[order.status]}</Badge>
+                      <StatusBadge status={orderStatusVariants[order.status] ?? "neutral"}>
+                        {statusLabels[order.status]}
+                      </StatusBadge>
+                    </TableCell>
+                    <TableCell className="font-medium tabular-nums">¥{order.totalPrice}</TableCell>
+                    <TableCell className="text-muted-foreground">
+                      {new Date(order.createdAt).toLocaleDateString()}
                     </TableCell>
-                    <TableCell>¥{order.totalPrice}</TableCell>
-                    <TableCell>{new Date(order.createdAt).toLocaleDateString()}</TableCell>
                     <TableCell className="text-right">
                       <Button variant="ghost" size="sm" asChild>
                         <Link href={`/order/${order.id}`}>查看</Link>