feat(ui): refine order chat pages

app/(order)/orders/page.tsx

@@ -3,6 +3,8 @@
 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 } from "@/components/ui/status-badge"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { listChatSessions, listOrders } from "@/lib/api"
 import { statusLabels } from "@/lib/constants"
@@ -14,21 +16,22 @@ import {
 } from "@/lib/domain/order-filters"
 import { useMyShop } from "@/lib/hooks/use-my-shop"
 import type { OrderStatus, UserRole } from "@/lib/types"
-import { cn } from "@/lib/utils"
 import { useAuthStore } from "@/store/auth"
-import { Clock, MessageSquare, RefreshCw } from "lucide-react"
+import { ClipboardList, Clock, MessageSquare, RefreshCw } from "lucide-react"
 import Link from "next/link"
 import { useEffect, useState } from "react"
 
-const statusColors: Record<OrderStatus, string> = {
-  pending_payment: "bg-yellow-100 text-yellow-800",
-  pending_accept: "bg-blue-100 text-blue-800",
-  in_progress: "bg-green-100 text-green-800",
-  pending_close: "bg-orange-100 text-orange-800",
-  pending_review: "bg-purple-100 text-purple-800",
-  disputed: "bg-red-100 text-red-800",
-  completed: "bg-gray-100 text-gray-800",
-  cancelled: "bg-gray-100 text-gray-500",
+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",
 }
 
 type TabFilter = "all" | "active" | "completed" | "disputed"
@@ -71,11 +74,19 @@ export default function OrderListPage() {
   } = useMyShop(currentRole === "owner")
 
   if (currentRole === "owner" && shopLoading) {
-    return <div className="text-sm text-muted-foreground">加载中...</div>
+    return (
+      <div className="container mx-auto max-w-3xl px-4 py-8">
+        <EmptyState title="加载中" description="正在读取店铺订单视角..." icon={RefreshCw} />
+      </div>
+    )
   }
 
   if (currentRole === "owner" && shopError) {
-    return <div className="text-sm text-muted-foreground">{shopError}</div>
+    return (
+      <div className="container mx-auto max-w-3xl px-4 py-8">
+        <EmptyState title="无法读取订单" description={shopError} icon={ClipboardList} />
+      </div>
+    )
   }
 
   return (
@@ -179,14 +190,14 @@ function OrderListContent({
       </div>
 
       {!orderRole ? (
-        <Card className="hover:shadow-card-hover">
-          <CardContent className="py-8 text-center text-sm text-muted-foreground">
-            当前身份暂不支持订单视角
-          </CardContent>
-        </Card>
+        <EmptyState
+          title="当前身份暂不支持订单视角"
+          description="切换到客户、打手或店主身份后可查看对应订单。"
+          icon={ClipboardList}
+        />
       ) : (
         <Tabs value={tab} onValueChange={(v) => setTab(v as TabFilter | "pending")}>
-          <TabsList>
+          <TabsList variant="line">
             {tabs.map((item) => (
               <TabsTrigger key={item.value} value={item.value}>
                 {item.label}
@@ -196,20 +207,23 @@ function OrderListContent({
 
           <TabsContent value={tab} className="mt-4 space-y-4">
             {filtered.length === 0 ? (
-              <Card className="hover:shadow-card-hover">
-                <CardContent className="py-8 text-center text-sm text-muted-foreground">
-                  暂无订单
-                </CardContent>
-              </Card>
+              <EmptyState
+                title="暂无订单"
+                description="当前筛选下还没有订单记录。"
+                icon={ClipboardList}
+              />
             ) : (
               filtered.map((order) => (
-                <Card key={order.id} className="hover:shadow-card-hover">
+                <Card key={order.id} className="border-border/80 shadow-sm">
                   <CardHeader className="pb-3">
                     <div className="flex items-center justify-between">
                       <CardTitle className="text-base">{order.service.title}</CardTitle>
-                      <Badge className={cn("text-xs", statusColors[order.status])}>
+                      <StatusBadge
+                        status={statusVariants[order.status]}
+                        className="text-xs font-normal"
+                      >
                         {statusLabels[order.status]}
-                      </Badge>
+                      </StatusBadge>
                     </div>
                     <p className="text-sm text-muted-foreground">{order.service.title}</p>
                   </CardHeader>