zetaloop
104 lines
4.0 KiB
TypeScript
104 lines
4.0 KiB
TypeScript
import { PostCommentCount } from "@/components/post-comment-count"
|
|
import { PostComments } from "@/components/post-comments"
|
|
import { PostLikeButton } from "@/components/post-like-button"
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Card, CardContent, CardHeader } from "@/components/ui/card"
|
|
import { Separator } from "@/components/ui/separator"
|
|
import { getPostById } from "@/lib/api"
|
|
import { roleLabels } from "@/lib/constants"
|
|
import { ArrowLeft, Pin, Star } from "lucide-react"
|
|
import Image from "next/image"
|
|
import Link from "next/link"
|
|
import { notFound } from "next/navigation"
|
|
|
|
export default async function PostDetailPage({ params }: { params: Promise<{ id: string }> }) {
|
|
const { id } = await params
|
|
const post = await getPostById(id)
|
|
if (!post) notFound()
|
|
|
|
return (
|
|
<div className="container mx-auto max-w-2xl px-4 py-8 space-y-6">
|
|
<Link
|
|
href="/community"
|
|
className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground mb-4"
|
|
>
|
|
<ArrowLeft className="h-4 w-4" />
|
|
返回社区
|
|
</Link>
|
|
|
|
<Card className="shadow-sm border-border/80">
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center gap-3">
|
|
<Avatar className="h-10 w-10">
|
|
<AvatarImage src={post.author.avatar} />
|
|
<AvatarFallback>{post.author.nickname[0]}</AvatarFallback>
|
|
</Avatar>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2">
|
|
<span className="font-medium">{post.author.nickname}</span>
|
|
<Badge variant="outline" className="text-[10px] px-1.5 py-0">
|
|
{roleLabels[post.author.role]}
|
|
</Badge>
|
|
{post.pinned && <Pin className="h-3 w-3 text-muted-foreground" />}
|
|
</div>
|
|
<span className="text-xs text-muted-foreground">
|
|
{new Date(post.createdAt).toLocaleString("zh-CN")}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<h1 className="text-xl font-bold tracking-tighter leading-tight">{post.title}</h1>
|
|
<p className="text-sm leading-relaxed whitespace-pre-wrap">{post.content}</p>
|
|
|
|
{post.images.length > 0 && (
|
|
<div className="flex gap-2 flex-wrap">
|
|
{post.images.map((img) => (
|
|
<div key={img} className="relative h-40 w-40 rounded-lg overflow-hidden bg-muted">
|
|
<Image src={img} alt="帖子图片" fill className="object-cover" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{post.tags.length > 0 && (
|
|
<div className="flex flex-wrap gap-1">
|
|
{post.tags.map((tag) => (
|
|
<Badge key={tag} variant="secondary" className="text-xs">
|
|
{tag}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{post.linkedOrderId ? (
|
|
<Link href={`/order/${post.linkedOrderId}`}>
|
|
<div className="rounded-lg border bg-muted/30 p-3 text-sm hover:bg-muted/50 transition-colors">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<Star className="h-3.5 w-3.5 text-warning fill-warning" />
|
|
<span className="font-medium">关联订单</span>
|
|
</div>
|
|
<p className="text-muted-foreground text-xs">点击查看订单详情</p>
|
|
</div>
|
|
</Link>
|
|
) : null}
|
|
|
|
<div className="flex items-center gap-4 text-sm text-muted-foreground pt-2">
|
|
<PostLikeButton
|
|
postId={post.id}
|
|
initialLiked={post.liked}
|
|
initialLikeCount={post.likeCount}
|
|
/>
|
|
<PostCommentCount count={post.commentCount} />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Separator className="my-6" />
|
|
|
|
<PostComments postId={id} />
|
|
</div>
|
|
)
|
|
}
|