From e132ffcefb01666a0446469ec7bc19da8c74a8a3 Mon Sep 17 00:00:00 2001
From: zetaloop <zetaloop@outlook.com>
Date: Fri, 20 Feb 2026 15:22:30 +0800
Subject: [PATCH] feat: community feed, post detail, and new post pages

---
 app/(main)/community/page.tsx |  84 +++++++++++++++-
 app/(main)/post/[id]/page.tsx | 161 ++++++++++++++++++++++++++++++-
 app/(main)/post/new/page.tsx  | 177 +++++++++++++++++++++++++++++++++-
 3 files changed, 412 insertions(+), 10 deletions(-)

diff --git a/app/(main)/community/page.tsx b/app/(main)/community/page.tsx
index e4a01ef..750dca6 100644
--- a/app/(main)/community/page.tsx
+++ b/app/(main)/community/page.tsx
@@ -1,8 +1,86 @@
+import { Heart, MessageCircle, PenSquare, Pin } from "lucide-react"
+import Link from "next/link"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
+import { mockPosts } from "@/lib/mock-data"
+
+const roleLabels: Record<string, string> = {
+  consumer: "玩家",
+  player: "打手",
+  owner: "店主",
+}
+
 export default function CommunityPage() {
   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">
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-bold">社区</h1>
+        <Button asChild>
+          <Link href="/post/new">
+            <PenSquare className="mr-1 h-4 w-4" />
+            发帖
+          </Link>
+        </Button>
+      </div>
+
+      <div className="space-y-4">
+        {mockPosts.map((post) => (
+          <Link key={post.id} href={`/post/${post.id}`}>
+            <Card className="hover:shadow-md transition-shadow">
+              <CardHeader className="pb-3">
+                <div className="flex items-center gap-3">
+                  <Avatar className="h-9 w-9">
+                    <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="text-sm 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).toLocaleDateString("zh-CN")}
+                    </span>
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent className="pb-3">
+                <h3 className="font-semibold mb-1">{post.title}</h3>
+                <p className="text-sm text-muted-foreground line-clamp-2">{post.content}</p>
+                {post.tags.length > 0 && (
+                  <div className="flex flex-wrap gap-1 mt-2">
+                    {post.tags.map((tag) => (
+                      <Badge key={tag} variant="secondary" className="text-xs">
+                        {tag}
+                      </Badge>
+                    ))}
+                  </div>
+                )}
+                {post.linkedOrderId && (
+                  <div className="mt-2 rounded border bg-muted/30 px-3 py-2 text-xs text-muted-foreground">
+                    📋 关联订单秀单
+                  </div>
+                )}
+              </CardContent>
+              <CardFooter className="pt-0 text-sm text-muted-foreground gap-4">
+                <span className="flex items-center gap-1">
+                  <Heart className={`h-4 w-4 ${post.liked ? "fill-red-500 text-red-500" : ""}`} />
+                  {post.likeCount}
+                </span>
+                <span className="flex items-center gap-1">
+                  <MessageCircle className="h-4 w-4" />
+                  {post.commentCount}
+                </span>
+              </CardFooter>
+            </Card>
+          </Link>
+        ))}
+      </div>
     </div>
   )
 }
diff --git a/app/(main)/post/[id]/page.tsx b/app/(main)/post/[id]/page.tsx
index 603240e..2fd3f67 100644
--- a/app/(main)/post/[id]/page.tsx
+++ b/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>
   )
 }
diff --git a/app/(main)/post/new/page.tsx b/app/(main)/post/new/page.tsx
index 1f0b08f..064f0ac 100644
--- a/app/(main)/post/new/page.tsx
+++ b/app/(main)/post/new/page.tsx
@@ -1,8 +1,179 @@
+"use client"
+
+import { standardSchemaResolver } from "@hookform/resolvers/standard-schema"
+import { ArrowLeft, ImagePlus, X } from "lucide-react"
+import Link from "next/link"
+import { useRouter } from "next/navigation"
+import { useState } from "react"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Textarea } from "@/components/ui/textarea"
+
+const postSchema = z.object({
+  title: z.string().min(2, "标题至少2个字符").max(50, "标题最多50个字符"),
+  content: z.string().min(10, "内容至少10个字符"),
+})
+
+const tagOptions = ["英雄联盟", "王者荣耀", "CS2", "原神", "上分", "攻略", "好评", "吐槽", "求组队"]
+
 export default function NewPostPage() {
+  const router = useRouter()
+  const [postType, setPostType] = useState("normal")
+  const [selectedTags, setSelectedTags] = useState<string[]>([])
+  const [imageCount, setImageCount] = useState(0)
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm({
+    resolver: standardSchemaResolver(postSchema),
+  })
+
+  const toggleTag = (tag: string) => {
+    setSelectedTags((prev) =>
+      prev.includes(tag) ? prev.filter((t) => t !== tag) : prev.length < 5 ? [...prev, tag] : prev,
+    )
+  }
+
+  const onSubmit = async () => {
+    await new Promise((r) => setTimeout(r, 500))
+    router.push("/community")
+  }
+
   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>
+          <CardTitle>发布帖子</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+            <div className="space-y-2">
+              <Label>帖子类型</Label>
+              <Select value={postType} onValueChange={setPostType}>
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="normal">普通帖</SelectItem>
+                  <SelectItem value="show_order">秀单帖</SelectItem>
+                  <SelectItem value="quote">引用帖</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {postType === "show_order" && (
+              <div className="space-y-2">
+                <Label>关联订单</Label>
+                <Select>
+                  <SelectTrigger>
+                    <SelectValue placeholder="选择要展示的订单" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="ord2">英雄联盟上分陪玩 · 已完成</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            )}
+
+            <div className="space-y-2">
+              <Label htmlFor="title">标题</Label>
+              <Input id="title" placeholder="请输入帖子标题" {...register("title")} />
+              {errors.title && <p className="text-xs text-destructive">{errors.title.message}</p>}
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="content">内容</Label>
+              <Textarea
+                id="content"
+                placeholder="分享你的游戏体验..."
+                rows={6}
+                {...register("content")}
+              />
+              {errors.content && (
+                <p className="text-xs text-destructive">{errors.content.message}</p>
+              )}
+            </div>
+
+            <div className="space-y-2">
+              <Label>图片（最多9张）</Label>
+              <div className="flex gap-2 flex-wrap">
+                {Array.from({ length: imageCount }).map((_, i) => (
+                  <div
+                    key={`img-${i.toString()}`}
+                    className="h-20 w-20 rounded-md bg-muted flex items-center justify-center relative"
+                  >
+                    <span className="text-xs text-muted-foreground">图片</span>
+                    <button
+                      type="button"
+                      onClick={() => setImageCount((c) => c - 1)}
+                      className="absolute -top-1 -right-1 h-4 w-4 rounded-full bg-destructive text-destructive-foreground flex items-center justify-center"
+                    >
+                      <X className="h-3 w-3" />
+                    </button>
+                  </div>
+                ))}
+                {imageCount < 9 && (
+                  <button
+                    type="button"
+                    onClick={() => setImageCount((c) => c + 1)}
+                    className="h-20 w-20 rounded-md border-2 border-dashed border-muted-foreground/25 flex flex-col items-center justify-center gap-1 text-muted-foreground hover:border-muted-foreground/50 transition-colors"
+                  >
+                    <ImagePlus className="h-5 w-5" />
+                    <span className="text-[10px]">添加</span>
+                  </button>
+                )}
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label>标签（最多5个）</Label>
+              <div className="flex flex-wrap gap-2">
+                {tagOptions.map((tag) => (
+                  <Badge
+                    key={tag}
+                    variant={selectedTags.includes(tag) ? "default" : "outline"}
+                    className="cursor-pointer"
+                    onClick={() => toggleTag(tag)}
+                  >
+                    {tag}
+                  </Badge>
+                ))}
+              </div>
+            </div>
+
+            <div className="flex gap-2">
+              <Button type="submit" className="flex-1" disabled={isSubmitting}>
+                {isSubmitting ? "发布中..." : "发布"}
+              </Button>
+              <Button type="button" variant="outline" asChild>
+                <Link href="/community">取消</Link>
+              </Button>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
     </div>
   )
 }