From e9a1bb4dac53626bc5d5bea24b8e1952d0458e62 Mon Sep 17 00:00:00 2001
From: zetaloop <zetaloop@outlook.com>
Date: Sat, 25 Apr 2026 21:32:04 +0800
Subject: [PATCH] feat(ui): refine order management pages

---
 .../dashboard/shop/orders/page.tsx            | 65 ++++++++++----
 app/(order)/dispute/[id]/page.tsx             | 84 ++++++++++++-------
 2 files changed, 105 insertions(+), 44 deletions(-)

diff --git a/app/(dashboard)/dashboard/shop/orders/page.tsx b/app/(dashboard)/dashboard/shop/orders/page.tsx
index 457c499..2c302aa 100644
--- a/app/(dashboard)/dashboard/shop/orders/page.tsx
+++ b/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>
diff --git a/app/(order)/dispute/[id]/page.tsx b/app/(order)/dispute/[id]/page.tsx
index 02875fc..42dc48f 100644
--- a/app/(order)/dispute/[id]/page.tsx
+++ b/app/(order)/dispute/[id]/page.tsx
@@ -1,10 +1,11 @@
 "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 { Label } from "@/components/ui/label"
 import { Separator } from "@/components/ui/separator"
+import { StatusBadge, type StatusBadgeProps } from "@/components/ui/status-badge"
 import { Textarea } from "@/components/ui/textarea"
 import { getOrderById } from "@/lib/api"
 import {
@@ -37,6 +38,13 @@ const disputeStatusLabels: Record<string, string> = {
   appealed: "申诉中",
 }
 
+const disputeStatusVariants: Record<string, StatusBadgeProps["status"]> = {
+  open: "warning",
+  reviewing: "info",
+  resolved: "success",
+  appealed: "info",
+}
+
 function deriveMinimalTimeline<TCreatedAt>(dispute: {
   id: string
   status: string
@@ -189,14 +197,16 @@ export default function DisputePage({ 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="争议加载中" 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-lg px-4 py-8">
+        <EmptyState title="订单不存在" description="无法找到对应订单。" icon={FileText} />
       </div>
     )
   }
@@ -206,8 +216,12 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
   )
   if (!isParticipant) {
     return (
-      <div className="container mx-auto py-8 px-4 max-w-lg text-center text-muted-foreground">
-        仅该订单参与方可访问争议页面
+      <div className="container mx-auto max-w-lg px-4 py-8">
+        <EmptyState
+          title="无法访问争议页面"
+          description="仅该订单参与方可访问争议页面。"
+          icon={AlertTriangle}
+        />
       </div>
     )
   }
@@ -232,11 +246,13 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
           返回订单
         </Link>
 
-        <Card className="hover:shadow-card-hover">
+        <Card className="border-border/80 shadow-sm">
           <CardHeader>
             <div className="flex items-center justify-between">
               <CardTitle>争议详情</CardTitle>
-              <Badge variant="outline">{disputeStatusLabels[existingDispute.status]}</Badge>
+              <StatusBadge status={disputeStatusVariants[existingDispute.status] ?? "neutral"}>
+                {disputeStatusLabels[existingDispute.status]}
+              </StatusBadge>
             </div>
           </CardHeader>
           <CardContent className="space-y-5">
@@ -263,7 +279,7 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
                   {existingDispute.evidence.map((url) => (
                     <div
                       key={url}
-                      className="relative h-20 w-20 rounded border overflow-hidden bg-muted"
+                      className="relative h-20 w-20 overflow-hidden rounded-md border border-border/60 bg-muted/30"
                     >
                       <Image src={url} alt="发起方证据" fill unoptimized className="object-cover" />
                     </div>
@@ -284,7 +300,7 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
                       {existingDispute.respondentEvidence.map((url) => (
                         <div
                           key={url}
-                          className="relative h-20 w-20 rounded border overflow-hidden bg-muted"
+                          className="relative h-20 w-20 overflow-hidden rounded-md border border-border/60 bg-muted/30"
                         >
                           <Image
                             src={url}
@@ -323,7 +339,11 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
                     className="hidden"
                     onChange={(event) => handleFileSelect(event, setResponseFiles)}
                   />
-                  <Button variant="outline" onClick={() => responseFileInputRef.current?.click()}>
+                  <Button
+                    variant="outline"
+                    className="border-border/60"
+                    onClick={() => responseFileInputRef.current?.click()}
+                  >
                     <Upload className="mr-1 h-4 w-4" />
                     上传回应证据
                   </Button>
@@ -332,7 +352,7 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
                       {responseFiles.map((url, index) => (
                         <div
                           key={url}
-                          className="relative h-16 w-16 rounded border overflow-hidden bg-muted"
+                          className="relative h-16 w-16 overflow-hidden rounded-md border border-border/60 bg-muted/30"
                         >
                           <Image
                             src={url}
@@ -343,6 +363,7 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
                           />
                           <button
                             type="button"
+                            aria-label={`移除回应证据 ${index + 1}`}
                             className="absolute right-0 top-0 rounded-bl bg-background/90 p-0.5"
                             onClick={() => removeFile(index, responseFiles, setResponseFiles)}
                           >
@@ -405,6 +426,7 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
                   />
                   <Button
                     variant="outline"
+                    className="border-border/60"
                     onClick={() => {
                       if (!userId) return
                       void Promise.resolve(
@@ -430,9 +452,12 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
 
             <div className="space-y-2">
               <Label className="text-muted-foreground">处理时间线</Label>
-              <div className="space-y-2">
+              <div className="rounded-lg border border-border/60">
                 {timeline.map((item) => (
-                  <div key={item.id} className="text-sm flex items-start justify-between gap-3">
+                  <div
+                    key={item.id}
+                    className="flex items-start justify-between gap-3 border-b border-border/60 px-3 py-2 text-sm last:border-b-0"
+                  >
                     <span>{item.content}</span>
                     <span className="text-xs text-muted-foreground shrink-0">
                       {new Date(item.createdAt).toLocaleString("zh-CN")}
@@ -449,15 +474,17 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
 
   if (showSubmitted) {
     return (
-      <div className="container mx-auto py-8 px-4 max-w-lg text-center space-y-4">
-        <AlertTriangle className="h-12 w-12 mx-auto text-yellow-500" />
-        <h2 className="text-xl font-bold">争议已提交，请等待平台处理</h2>
-        <p className="text-sm text-muted-foreground">
-          平台将在约 {Math.floor(DISPUTE_TO_RESOLVED_MS / 1000)} 秒内给出模拟处理结果。
-        </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={`平台将在约 ${Math.floor(DISPUTE_TO_RESOLVED_MS / 1000)} 秒内给出模拟处理结果。`}
+          icon={AlertTriangle}
+          action={
+            <Button variant="outline" className="border-border/60" asChild>
+              <Link href={`/order/${id}`}>返回订单详情</Link>
+            </Button>
+          }
+        />
       </div>
     )
   }
@@ -472,10 +499,10 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
         返回订单
       </Link>
 
-      <Card className="hover:shadow-card-hover">
+      <Card className="border-border/80 shadow-sm">
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
-            <AlertTriangle className="h-5 w-5 text-yellow-500" />
+            <AlertTriangle className="h-5 w-5 text-warning" />
             发起争议
           </CardTitle>
           <p className="text-sm text-muted-foreground">{order.service.title}</p>
@@ -504,7 +531,7 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
             />
             <button
               type="button"
-              className="w-full border-2 border-dashed rounded-md p-6 text-center text-sm text-muted-foreground hover:border-primary/50 hover:text-foreground transition-colors disabled:opacity-50"
+              className="w-full rounded-md border-2 border-dashed border-border/60 bg-muted/20 p-6 text-center text-sm text-muted-foreground transition-colors hover:border-primary/60 hover:bg-muted/30 hover:text-foreground disabled:opacity-50"
               onClick={() => fileInputRef.current?.click()}
               disabled={files.length >= 5}
             >
@@ -518,7 +545,7 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
                 {files.map((fileUrl, index) => (
                   <div
                     key={fileUrl}
-                    className="relative h-16 w-16 rounded border overflow-hidden bg-muted"
+                    className="relative h-16 w-16 overflow-hidden rounded-md border border-border/60 bg-muted/30"
                   >
                     <Image
                       src={fileUrl}
@@ -529,6 +556,7 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
                     />
                     <button
                       type="button"
+                      aria-label={`移除证据截图 ${index + 1}`}
                       className="absolute right-0 top-0 rounded-bl bg-background/90 p-0.5"
                       onClick={() => removeFile(index, files, setFiles)}
                     >
@@ -541,7 +569,7 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
             <div className="text-xs text-muted-foreground">最多5张</div>
           </div>
 
-          <div className="rounded-md bg-muted/50 p-3 text-xs text-muted-foreground space-y-1">
+          <div className="space-y-1 rounded-lg border border-border/60 bg-muted/20 p-3 text-xs text-muted-foreground">
             <p>· 提交争议后，订单资金将继续托管</p>
             <p>· 聊天记录将作为证据保留</p>
             <p>· 平台将在约 {Math.floor(DISPUTE_TO_RESOLVED_MS / 1000)} 秒内完成模拟审核</p>