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

2026-02-20 15:22:30 +08:00
parent dad59e4914
commit e132ffcefb
3 changed files with 412 additions and 10 deletions
@@ -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>
  )
 }