feat: wire post interactions and persist favorites state

app/(main)/post/[id]/page.tsx

@@ -2,12 +2,11 @@ import { ArrowLeft, Heart, MessageCircle, Pin, Star } from "lucide-react"
 import Image from "next/image"
 import Link from "next/link"
 import { notFound } from "next/navigation"
+import { PostComments } from "@/components/post-comments"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader } from "@/components/ui/card"
 import { Separator } from "@/components/ui/separator"
-import { Textarea } from "@/components/ui/textarea"
 import { roleLabels } from "@/lib/constants"
 import { mockComments, mockOrders, mockPlayers, mockPosts } from "@/lib/mock"
 
@@ -112,47 +111,7 @@ export default async function PostDetailPage({ params }: { params: Promise<{ id:
 
       <Separator className="my-6" />
 
-      <div className="space-y-4">
-        <h2 className="font-semibold">评论 ({comments.length})</h2>
-
-        <div className="flex gap-3">
-          <Textarea placeholder="写下你的评论..." className="flex-1" rows={2} />
-          <Button className="self-end">发送</Button>
-        </div>
-
-        {comments.length === 0 ? (
-          <p className="text-sm text-muted-foreground text-center py-8">还没有评论</p>
-        ) : (
-          <div className="space-y-4">
-            {comments.map((comment) => (
-              <div key={comment.id} className="flex gap-3">
-                <Avatar className="h-8 w-8">
-                  <AvatarImage src={comment.author.avatar} />
-                  <AvatarFallback>{comment.author.nickname[0]}</AvatarFallback>
-                </Avatar>
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-2 mb-0.5">
-                    <span className="text-sm font-medium">{comment.author.nickname}</span>
-                    <span className="text-xs text-muted-foreground">
-                      {new Date(comment.createdAt).toLocaleString("zh-CN")}
-                    </span>
-                  </div>
-                  <p className="text-sm">{comment.content}</p>
-                  <button
-                    type="button"
-                    className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground mt-1 transition-colors"
-                  >
-                    <Heart
-                      className={`h-3 w-3 ${comment.liked ? "fill-red-500 text-red-500" : ""}`}
-                    />
-                    {comment.likeCount}
-                  </button>
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
+      <PostComments initialComments={comments} postId={id} />
     </div>
   )
 }