zetaloop
88 lines
3.1 KiB
TypeScript
88 lines
3.1 KiB
TypeScript
"use client"
|
|
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { EmptyState } from "@/components/ui/empty-state"
|
|
import { listChatSessions } from "@/lib/api"
|
|
import { useAuthStore } from "@/store/auth"
|
|
import { MessageSquare } from "lucide-react"
|
|
import Link from "next/link"
|
|
import { useEffect, useState } from "react"
|
|
|
|
export default function ChatListPage() {
|
|
const [sessions, setSessions] = useState<Awaited<ReturnType<typeof listChatSessions>>>([])
|
|
const userId = useAuthStore((state) => state.user?.id)
|
|
|
|
useEffect(() => {
|
|
let cancelled = false
|
|
|
|
void (async () => {
|
|
try {
|
|
const result = await Promise.resolve(listChatSessions())
|
|
if (!cancelled) setSessions(result)
|
|
} catch {
|
|
if (!cancelled) setSessions([])
|
|
}
|
|
})()
|
|
|
|
return () => {
|
|
cancelled = true
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<div className="container mx-auto max-w-2xl px-4 py-8 space-y-6">
|
|
<h1 className="text-2xl font-bold">消息</h1>
|
|
|
|
{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>
|
|
</Avatar>
|
|
<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={session.type === "order" ? "info" : "neutral"}
|
|
className="text-[10px] px-1.5 py-0 font-normal"
|
|
>
|
|
{session.type === "order" ? "订单" : "咨询"}
|
|
</Badge>
|
|
</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.unreadCount > 0 && (
|
|
<Badge className="h-4 min-w-4 px-1 flex items-center justify-center rounded-full text-[10px]">
|
|
{session.unreadCount}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
)
|
|
})}
|
|
</div>
|
|
) : (
|
|
<EmptyState
|
|
title="暂无消息"
|
|
description="订单沟通和咨询会话会显示在这里。"
|
|
icon={MessageSquare}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|