feat(ui): refine order chat pages

app/(order)/chat/page.tsx

@@ -2,7 +2,7 @@
 
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Badge } from "@/components/ui/badge"
-import { Card, CardContent } from "@/components/ui/card"
+import { EmptyState } from "@/components/ui/empty-state"
 import { listChatSessions } from "@/lib/api"
 import { useAuthStore } from "@/store/auth"
 import { MessageSquare } from "lucide-react"
@@ -34,15 +34,19 @@ export default function ChatListPage() {
     <div className="container mx-auto max-w-2xl px-4 py-8 space-y-6">
       <h1 className="text-2xl font-bold">消息</h1>
 
-      <div className="flex flex-col gap-3">
-        {sessions.map((session) => {
-          const other =
-            session.participants.find((participant) => participant.id !== userId) ??
-            session.participants[0]
-          return (
-            <Link key={session.id} href={`/chat/${session.id}`} className="block">
-              <Card className="p-0 hover:bg-muted/50 transition-colors">
-                <CardContent className="flex items-center gap-3 p-4">
+      {sessions.length > 0 ? (
+        <div className="overflow-hidden rounded-xl border border-border/80 bg-card shadow-sm">
+          {sessions.map((session) => {
+            const other =
+              session.participants.find((participant) => participant.id !== userId) ??
+              session.participants[0]
+            return (
+              <Link
+                key={session.id}
+                href={`/chat/${session.id}`}
+                className="block border-b border-border/60 transition-colors last:border-0 hover:bg-muted/10"
+              >
+                <div className="flex items-center gap-3 p-4">
                   <Avatar className="h-10 w-10">
                     <AvatarImage src={other.avatar} />
                     <AvatarFallback>{other.nickname[0]}</AvatarFallback>
@@ -50,7 +54,10 @@ export default function ChatListPage() {
                   <div className="flex-1 min-w-0">
                     <div className="flex items-center gap-2">
                       <span className="text-sm font-medium">{other.nickname}</span>
-                      <Badge variant="outline" className="text-[10px] px-1.5 py-0">
+                      <Badge
+                        variant={session.type === "order" ? "info" : "neutral"}
+                        className="text-[10px] px-1.5 py-0 font-normal"
+                      >
                         {session.type === "order" ? "订单" : "咨询"}
                       </Badge>
                     </div>
@@ -58,26 +65,23 @@ export default function ChatListPage() {
                   </div>
                   <div className="flex flex-col items-end gap-1 shrink-0">
                     {session.unreadCount > 0 && (
-                      <Badge className="h-4 min-w-4 px-1 flex items-center justify-center text-[10px]">
+                      <Badge className="h-4 min-w-4 px-1 flex items-center justify-center rounded-full text-[10px]">
                         {session.unreadCount}
                       </Badge>
                     )}
                   </div>
-                </CardContent>
-              </Card>
-            </Link>
-          )
-        })}
-
-        {sessions.length === 0 && (
-          <Card className="hover:shadow-card-hover">
-            <CardContent className="py-8 text-center text-sm text-muted-foreground">
-              <MessageSquare className="h-12 w-12 mx-auto mb-2 opacity-50" />
-              暂无消息
-            </CardContent>
-          </Card>
-        )}
-      </div>
+                </div>
+              </Link>
+            )
+          })}
+        </div>
+      ) : (
+        <EmptyState
+          title="暂无消息"
+          description="订单沟通和咨询会话会显示在这里。"
+          icon={MessageSquare}
+        />
+      )}
     </div>
   )
 }