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()])
+    setPostsLoading(true)
-      .then(([gamesItems, playersItems]) => {
+
+    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,7 +105,12 @@ export default function CommunityPage() {
       </div>
 
       <div className="flex flex-col gap-4">
-        {filteredPosts.map((post) =>
+        {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)
@@ -178,6 +190,7 @@ export default function CommunityPage() {
                 </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(),

components/post-like-button.tsx

@@ -1,34 +1,59 @@
 "use client"
 
 import { togglePostLike } from "@/lib/api/posts"
+import { toApiError } from "@/lib/errors"
+import { notifyInfo } from "@/lib/toast"
 import { useRequireAuth } from "@/lib/use-require-auth"
-import { usePostStore } from "@/store/posts"
 import { Heart } from "lucide-react"
+import { useState } from "react"
 
 interface PostLikeButtonProps {
   postId: string
+  initialLiked: boolean
+  initialLikeCount: number
 }
 
-export function PostLikeButton({ postId }: PostLikeButtonProps) {
+export function PostLikeButton({ postId, initialLiked, initialLikeCount }: PostLikeButtonProps) {
   const { requireAuth } = useRequireAuth()
-  const post = usePostStore((state) => state.posts.find((item) => item.id === postId))
+  const [liked, setLiked] = useState(initialLiked)
-
+  const [likeCount, setLikeCount] = useState(initialLikeCount)
-  if (!post) {
+  const [pending, setPending] = useState(false)
-    return null
-  }
 
   return (
     <button
       type="button"
-      className="flex items-center gap-1 hover:text-foreground transition-colors"
+      disabled={pending}
+      className="flex items-center gap-1 hover:text-foreground transition-colors disabled:opacity-60 disabled:pointer-events-none"
       onClick={() =>
         requireAuth(() => {
-          togglePostLike(postId)
+          if (pending) return
+
+          const prevLiked = liked
+          const prevCount = likeCount
+          const nextLiked = !prevLiked
+
+          setLiked(nextLiked)
+          setLikeCount(Math.max(0, prevCount + (nextLiked ? 1 : -1)))
+          setPending(true)
+
+          togglePostLike(postId, prevLiked)
+            .catch((err: unknown) => {
+              setLiked(prevLiked)
+              setLikeCount(prevCount)
+              if (err instanceof Error && err.message === "UNAUTHORIZED") {
+                notifyInfo("请先登录")
+                return
+              }
+              notifyInfo(toApiError(err).msg)
+            })
+            .finally(() => {
+              setPending(false)
+            })
         })
       }
     >
-      <Heart className={`h-4 w-4 ${post.liked ? "fill-red-500 text-red-500" : ""}`} />
+      <Heart className={`h-4 w-4 ${liked ? "fill-red-500 text-red-500" : ""}`} />
-      {post.likeCount}
+      {likeCount}
     </button>
   )
 }

lib/api/posts.ts

@@ -1,43 +1,78 @@
-import { addNotification } from "@/lib/api/notifications"
+import { isApiError } from "@/lib/errors"
-import { allow, deny } from "@/lib/decision"
+import type { Post } from "@/lib/types"
-import { useAuthStore } from "@/store/auth"
-import { usePostStore } from "@/store/posts"
 
-export function listPosts() {
+import { httpJson } from "./http"
-  return usePostStore.getState().posts
+
+type Paginated<T> = {
+  items: T[]
+  meta: {
+    total: number
+    offset: number
+    limit: number
+  }
 }
 
-export function getPostById(postId: string) {
+type ListOptions = {
-  return usePostStore.getState().posts.find((post) => post.id === postId)
+  offset?: number
+  limit?: number
 }
 
-export function listPostsByAuthor(userId: string) {
+function withOffsetLimit(path: string, options?: ListOptions): string {
-  return usePostStore.getState().posts.filter((post) => post.author.id === userId)
+  const offset = options?.offset ?? 0
+  const limit = options?.limit ?? 1000
+
+  const searchParams = new URLSearchParams({
+    offset: String(offset),
+    limit: String(limit),
+  })
+  return `${path}?${searchParams.toString()}`
 }
 
-export function togglePostLike(postId: string) {
+export async function listPosts(options?: ListOptions): Promise<Post[]> {
-  const user = useAuthStore.getState().user
+  const res = await httpJson<Paginated<Post>>(withOffsetLimit("/api/v1/posts", options), {
-  if (!user) {
+    cache: "no-store",
-    return deny(401, "请先登录")
+  })
+  return res.items
 }
 
-  const post = usePostStore.getState().posts.find((item) => item.id === postId)
+export async function getPostById(postId: string): Promise<Post | undefined> {
-  if (!post) {
+  try {
-    return deny(404, "帖子不存在")
+    return await httpJson<Post>(`/api/v1/posts/${encodeURIComponent(postId)}`, {
+      cache: "no-store",
+    })
+  } catch (error) {
+    if (error instanceof Error && error.message === "UNAUTHORIZED") {
+      throw error
+    }
+    if (isApiError(error) && error.code === 404) {
+      return undefined
+    }
+    throw error
+  }
 }
 
-  const shouldNotify = !post.liked
+export async function listPostsByAuthor(userId: string, options?: ListOptions): Promise<Post[]> {
+  const res = await httpJson<Paginated<Post>>(
+    withOffsetLimit(`/api/v1/users/${encodeURIComponent(userId)}/posts`, options),
+    {
+      cache: "no-store",
+    },
+  )
+  return res.items
+}
 
-  usePostStore.getState().togglePostLike(postId)
+export async function togglePostLike(postId: string, currentlyLiked: boolean): Promise<void> {
+  const encodedId = encodeURIComponent(postId)
+  if (currentlyLiked) {
+    await httpJson<unknown>(`/api/v1/posts/${encodedId}/like`, {
+      method: "DELETE",
+      cache: "no-store",
+    })
+    return
+  }
 
-  if (shouldNotify) {
+  await httpJson<unknown>(`/api/v1/posts/${encodedId}/like`, {
-    addNotification({
+    method: "POST",
-      type: "community",
+    cache: "no-store",
-      title: "帖子收到点赞",
-      content: `《${post.title}》有新的点赞`,
-      link: `/post/${post.id}`,
   })
 }
-
-  return allow()
-}