feat: search, player detail, shop detail, order flow, chat, review, and dispute pages

app/(order)/chat/[id]/page.tsx

@@ -1,8 +1,126 @@
-export default function ChatDetailPage({ params: _params }: { params: Promise<{ id: string }> }) {
+"use client"
+
+import { ArrowLeft, Lock, Send } from "lucide-react"
+import Link from "next/link"
+import { use, useState } from "react"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { mockChatMessages, mockChatSessions } from "@/lib/mock-data"
+import { cn } from "@/lib/utils"
+
+export default function ChatDetailPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = use(params)
+  const session = mockChatSessions.find((s) => s.id === id)
+  const messages = mockChatMessages.filter((m) => m.sessionId === id)
+  const [input, setInput] = useState("")
+
+  if (!session) {
+    return (
+      <div className="container mx-auto py-8 px-4 text-center text-muted-foreground">
+        会话不存在
+      </div>
+    )
+  }
+
+  const other = session.participants[1]
+  const currentUserId = session.participants[0].id
+
   return (
-    <div className="container mx-auto py-8 px-4">
-      <h1 className="text-2xl font-bold">聊天</h1>
-      <p className="mt-2 text-muted-foreground">与打手沟通</p>
+    <div className="flex flex-col h-[calc(100vh-3.5rem)]">
+      <div className="border-b px-4 py-3 flex items-center gap-3">
+        <Link href="/chat" className="text-muted-foreground hover:text-foreground">
+          <ArrowLeft className="h-5 w-5" />
+        </Link>
+        <Avatar className="h-8 w-8">
+          <AvatarImage src={other.avatar} />
+          <AvatarFallback>{other.name[0]}</AvatarFallback>
+        </Avatar>
+        <div>
+          <span className="text-sm font-medium">{other.name}</span>
+          <div className="flex items-center gap-1">
+            <Badge variant="outline" className="text-[10px] px-1.5 py-0">
+              {session.type === "order" ? "订单会话" : "咨询会话"}
+            </Badge>
+            {session.readonly && (
+              <span className="text-[10px] text-muted-foreground flex items-center gap-0.5">
+                <Lock className="h-3 w-3" />
+                只读
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <ScrollArea className="flex-1 p-4">
+        <div className="space-y-4 max-w-2xl mx-auto">
+          {messages.map((msg) => {
+            if (msg.type === "system") {
+              return (
+                <div key={msg.id} className="text-center">
+                  <span className="text-xs text-muted-foreground bg-muted px-2 py-1 rounded">
+                    {msg.content}
+                  </span>
+                </div>
+              )
+            }
+            const isMine = msg.senderId === currentUserId
+            return (
+              <div key={msg.id} className={cn("flex gap-2", isMine && "flex-row-reverse")}>
+                <Avatar className="h-8 w-8 shrink-0">
+                  <AvatarImage src={msg.senderAvatar} />
+                  <AvatarFallback>{msg.senderName[0]}</AvatarFallback>
+                </Avatar>
+                <div className={cn("max-w-[70%]", isMine && "text-right")}>
+                  <p
+                    className={cn(
+                      "inline-block rounded-lg px-3 py-2 text-sm",
+                      isMine ? "bg-primary text-primary-foreground" : "bg-muted",
+                    )}
+                  >
+                    {msg.content}
+                  </p>
+                  <p className="text-[10px] text-muted-foreground mt-1">
+                    {new Date(msg.createdAt).toLocaleTimeString("zh-CN", {
+                      hour: "2-digit",
+                      minute: "2-digit",
+                    })}
+                  </p>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </ScrollArea>
+
+      {!session.readonly ? (
+        <div className="border-t p-4">
+          <form
+            className="flex gap-2 max-w-2xl mx-auto"
+            onSubmit={(e) => {
+              e.preventDefault()
+              setInput("")
+            }}
+          >
+            <Input
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              placeholder="输入消息..."
+              className="flex-1"
+            />
+            <Button type="submit" size="icon" disabled={!input.trim()}>
+              <Send className="h-4 w-4" />
+            </Button>
+          </form>
+        </div>
+      ) : (
+        <div className="border-t p-4 text-center text-sm text-muted-foreground">
+          <Lock className="h-4 w-4 inline mr-1" />
+          订单已关闭，会话为只读状态
+        </div>
+      )}
     </div>
   )
 }

app/(order)/chat/page.tsx

@@ -1,8 +1,61 @@
+import { Lock, MessageSquare } from "lucide-react"
+import Link from "next/link"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Badge } from "@/components/ui/badge"
+import { Card, CardContent } from "@/components/ui/card"
+import { mockChatSessions } from "@/lib/mock-data"
+
 export default function ChatListPage() {
   return (
-    <div className="container mx-auto py-8 px-4">
-      <h1 className="text-2xl font-bold">消息</h1>
-      <p className="mt-2 text-muted-foreground">咨询会话和订单会话</p>
+    <div className="container mx-auto py-8 px-4 max-w-2xl">
+      <h1 className="text-2xl font-bold mb-6">消息</h1>
+
+      <div className="space-y-2">
+        {mockChatSessions.map((session) => {
+          const other = session.participants[1]
+          return (
+            <Link key={session.id} href={`/chat/${session.id}`}>
+              <Card className="hover:bg-accent/30 transition-colors">
+                <CardContent className="flex items-center gap-3 py-3">
+                  <Avatar className="h-10 w-10">
+                    <AvatarImage src={other.avatar} />
+                    <AvatarFallback>{other.name[0]}</AvatarFallback>
+                  </Avatar>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm font-medium">{other.name}</span>
+                      <Badge variant="outline" className="text-[10px] px-1.5 py-0">
+                        {session.type === "order" ? "订单" : "咨询"}
+                      </Badge>
+                      {session.readonly && <Lock className="h-3 w-3 text-muted-foreground" />}
+                    </div>
+                    <p className="text-xs text-muted-foreground truncate">{session.lastMessage}</p>
+                  </div>
+                  <div className="flex flex-col items-end gap-1 shrink-0">
+                    {session.lastMessageAt && (
+                      <span className="text-[10px] text-muted-foreground">
+                        {new Date(session.lastMessageAt).toLocaleDateString("zh-CN")}
+                      </span>
+                    )}
+                    {session.unreadCount > 0 && (
+                      <Badge className="h-4 min-w-4 px-1 flex items-center justify-center text-[10px]">
+                        {session.unreadCount}
+                      </Badge>
+                    )}
+                  </div>
+                </CardContent>
+              </Card>
+            </Link>
+          )
+        })}
+
+        {mockChatSessions.length === 0 && (
+          <div className="text-center py-12 text-muted-foreground">
+            <MessageSquare className="h-12 w-12 mx-auto mb-2 opacity-50" />
+            暂无消息
+          </div>
+        )}
+      </div>
     </div>
   )
 }