feat(posts): wire community pages to backend posts API

app/(main)/community/page.tsx

@@ -6,7 +6,7 @@ import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
 import { listGames, listOrders, listPlayers, listPosts } from "@/lib/api"
 import { roleLabels } from "@/lib/constants"
-import type { Game, Player } from "@/lib/types"
+import type { Game, Player, Post } from "@/lib/types"
 import { ClipboardList, Heart, MessageCircle, PenSquare, Pin } from "lucide-react"
 import Link from "next/link"
 import { useEffect, useState } from "react"
@@ -14,7 +14,8 @@ import { useEffect, useState } from "react"
 export default function CommunityPage() {
   const [games, setGames] = useState<Game[]>([])
   const [players, setPlayers] = useState<Player[]>([])
-  const posts = listPosts()
+  const [posts, setPosts] = useState<Post[]>([])
+  const [postsLoading, setPostsLoading] = useState(true)
   const orders = listOrders()
 
   const [sortMode, setSortMode] = useState<"latest" | "hot">("latest")
@@ -23,16 +24,22 @@ export default function CommunityPage() {
   useEffect(() => {
     let cancelled = false
 
-    Promise.all([listGames(), listPlayers()])
-      .then(([gamesItems, playersItems]) => {
+    setPostsLoading(true)
+
+    Promise.all([listGames(), listPlayers(), listPosts()])
+      .then(([gamesItems, playersItems, postsItems]) => {
         if (cancelled) return
         setGames(gamesItems)
         setPlayers(playersItems)
+        setPosts(postsItems)
+        setPostsLoading(false)
       })
       .catch(() => {
         if (cancelled) return
         setGames([])
         setPlayers([])
+        setPosts([])
+        setPostsLoading(false)
       })
 
     return () => {
@@ -98,86 +105,92 @@ export default function CommunityPage() {
       </div>
 
       <div className="flex flex-col gap-4">
-        {filteredPosts.map((post) =>
-          (() => {
-            const linkedOrder = post.linkedOrderId
-              ? orders.find((order) => order.id === post.linkedOrderId)
-              : null
-            const linkedPlayer = linkedOrder
-              ? players.find((player) => player.id === linkedOrder.playerId)
-              : null
+        {postsLoading ? (
+          <div className="text-center py-12 text-muted-foreground">加载中...</div>
+        ) : filteredPosts.length === 0 ? (
+          <div className="text-center py-12 text-muted-foreground">暂无帖子</div>
+        ) : (
+          filteredPosts.map((post) =>
+            (() => {
+              const linkedOrder = post.linkedOrderId
+                ? orders.find((order) => order.id === post.linkedOrderId)
+                : null
+              const linkedPlayer = linkedOrder
+                ? players.find((player) => player.id === linkedOrder.playerId)
+                : null
 
-            return (
-              <Link key={post.id} href={`/post/${post.id}`} className="block">
-                <Card className="hover:shadow-md transition-shadow gap-4">
-                  <CardHeader>
-                    <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>
-                    <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-lg border bg-muted/30 px-3 py-2 text-xs text-muted-foreground space-y-1.5">
-                        <div className="flex items-center gap-1.5">
-                          <ClipboardList className="h-3.5 w-3.5" />
-                          关联订单秀单
-                        </div>
-                        {linkedOrder && (
-                          <div className="pl-5">
-                            <p>
-                              {linkedOrder.service.gameName} · {linkedOrder.service.title}
-                            </p>
-                            <p>
-                              {linkedOrder.playerName}
-                              {linkedPlayer ? ` · ${linkedPlayer.rating}` : ""}
-                            </p>
+              return (
+                <Link key={post.id} href={`/post/${post.id}`} className="block">
+                  <Card className="hover:shadow-md transition-shadow gap-4">
+                    <CardHeader>
+                      <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>
-                    )}
-                  </CardContent>
-                  <CardFooter className="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>
-            )
-          })(),
+                    </CardHeader>
+                    <CardContent>
+                      <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-lg border bg-muted/30 px-3 py-2 text-xs text-muted-foreground space-y-1.5">
+                          <div className="flex items-center gap-1.5">
+                            <ClipboardList className="h-3.5 w-3.5" />
+                            关联订单秀单
+                          </div>
+                          {linkedOrder && (
+                            <div className="pl-5">
+                              <p>
+                                {linkedOrder.service.gameName} · {linkedOrder.service.title}
+                              </p>
+                              <p>
+                                {linkedOrder.playerName}
+                                {linkedPlayer ? ` · ${linkedPlayer.rating}` : ""}
+                              </p>
+                            </div>
+                          )}
+                        </div>
+                      )}
+                    </CardContent>
+                    <CardFooter className="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>

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

@@ -14,7 +14,7 @@ import { notFound } from "next/navigation"
 
 export default async function PostDetailPage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = await params
-  const post = getPostById(id)
+  const post = await getPostById(id)
   if (!post) notFound()
 
   const linkedOrder = post.linkedOrderId ? getOrderById(post.linkedOrderId) : null
@@ -91,7 +91,11 @@ export default async function PostDetailPage({ params }: { params: Promise<{ id:
           )}
 
           <div className="flex items-center gap-4 text-sm text-muted-foreground pt-2">
-            <PostLikeButton postId={post.id} />
+            <PostLikeButton
+              postId={post.id}
+              initialLiked={post.liked}
+              initialLikeCount={post.likeCount}
+            />
             <PostCommentCount postId={post.id} />
           </div>
         </CardContent>

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

@@ -22,7 +22,7 @@ export default async function UserProfilePage({ params }: { params: Promise<{ id
   }
 
   const [userPosts, userFavorites, players, shops] = await Promise.all([
-    listPostsByAuthor(user.id),
+    listPostsByAuthor(id),
     listFavoritesByUser(user.id),
     listPlayers(),
     listShops(),