zetaloop
62 lines
2.6 KiB
TypeScript
62 lines
2.6 KiB
TypeScript
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"
|
|
|
|
export default function ChatListPage() {
|
|
return (
|
|
<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>
|
|
)
|
|
}
|