feat: community feed, post detail, and new post pages

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

@@ -1,8 +1,161 @@
-export default function PostDetailPage({ params: _params }: { params: Promise<{ id: string }> }) {
+import { ArrowLeft, Heart, MessageCircle, Pin, Star } from "lucide-react"
+import Link from "next/link"
+import { notFound } from "next/navigation"
+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 { mockComments, mockOrders, mockPosts } from "@/lib/mock-data"
+
+const roleLabels: Record<string, string> = {
+  consumer: "玩家",
+  player: "打手",
+  owner: "店主",
+}
+
+export default async function PostDetailPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params
+  const post = mockPosts.find((p) => p.id === id)
+  if (!post) notFound()
+
+  const comments = mockComments.filter((c) => c.postId === id)
+  const linkedOrder = post.linkedOrderId
+    ? mockOrders.find((o) => o.id === post.linkedOrderId)
+    : null
+
   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">
+      <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>
+        <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.authorRole]}
+                </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">{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="h-40 w-40 rounded-md bg-muted flex items-center justify-center text-xs text-muted-foreground"
+                >
+                  图片
+                </div>
+              ))}
+            </div>
+          )}
+
+          {linkedOrder && (
+            <Link href={`/order/${linkedOrder.id}`}>
+              <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-yellow-500" />
+                  <span className="font-medium">关联订单</span>
+                </div>
+                <p className="text-muted-foreground text-xs">
+                  {linkedOrder.service.title} · {linkedOrder.playerName} · ¥{linkedOrder.totalPrice}
+                </p>
+              </div>
+            </Link>
+          )}
+
+          {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>
+          )}
+
+          <div className="flex items-center gap-4 text-sm text-muted-foreground pt-2">
+            <button
+              type="button"
+              className="flex items-center gap-1 hover:text-foreground transition-colors"
+            >
+              <Heart className={`h-4 w-4 ${post.liked ? "fill-red-500 text-red-500" : ""}`} />
+              {post.likeCount}
+            </button>
+            <span className="flex items-center gap-1">
+              <MessageCircle className="h-4 w-4" />
+              {post.commentCount}
+            </span>
+          </div>
+        </CardContent>
+      </Card>
+
+      <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>
     </div>
   )
 }