From 236c1a24da0fe836a1f3a8b3fd8cd490adfb619e Mon Sep 17 00:00:00 2001
From: zetaloop <zetaloop@outlook.com>
Date: Sun, 1 Mar 2026 22:40:29 +0800
Subject: [PATCH] feat(comments): migrate to backend API

---
 app/(main)/post/[id]/page.tsx     |   2 +-
 components/post-comment-count.tsx |   9 +--
 components/post-comments.tsx      | 106 ++++++++++++++++++++++----
 lib/api/comments.ts               | 121 ++++++++++++++++++------------
 4 files changed, 169 insertions(+), 69 deletions(-)

diff --git a/app/(main)/post/[id]/page.tsx b/app/(main)/post/[id]/page.tsx
index 7e85708..f736c42 100644
--- a/app/(main)/post/[id]/page.tsx
+++ b/app/(main)/post/[id]/page.tsx
@@ -90,7 +90,7 @@ export default async function PostDetailPage({ params }: { params: Promise<{ id:
               initialLiked={post.liked}
               initialLikeCount={post.likeCount}
             />
-            <PostCommentCount postId={post.id} />
+            <PostCommentCount count={post.commentCount} />
           </div>
         </CardContent>
       </Card>
diff --git a/components/post-comment-count.tsx b/components/post-comment-count.tsx
index fdd63c6..1f11de8 100644
--- a/components/post-comment-count.tsx
+++ b/components/post-comment-count.tsx
@@ -1,17 +1,12 @@
 "use client"
 
-import { useCommentStore } from "@/store/comments"
 import { MessageCircle } from "lucide-react"
 
 interface PostCommentCountProps {
-  postId: string
+  count: number
 }
 
-export function PostCommentCount({ postId }: PostCommentCountProps) {
-  const count = useCommentStore(
-    (state) => state.comments.filter((comment) => comment.postId === postId).length,
-  )
-
+export function PostCommentCount({ count }: PostCommentCountProps) {
   return (
     <span className="flex items-center gap-1">
       <MessageCircle className="h-4 w-4" />
diff --git a/components/post-comments.tsx b/components/post-comments.tsx
index bd0a476..97e6cc8 100644
--- a/components/post-comments.tsx
+++ b/components/post-comments.tsx
@@ -1,10 +1,12 @@
 "use client"
 
-import { addComment, toggleCommentLike } from "@/lib/api/comments"
+import { addComment, listCommentsByPost, toggleCommentLike } from "@/lib/api/comments"
+import { toApiError } from "@/lib/errors"
+import { notifyInfo } from "@/lib/toast"
+import type { Comment } from "@/lib/types"
 import { useRequireAuth } from "@/lib/use-require-auth"
-import { useCommentStore } from "@/store/comments"
 import { Heart } from "lucide-react"
-import { useMemo, useState } from "react"
+import { useCallback, useEffect, useState } from "react"
 import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar"
 import { Button } from "./ui/button"
 import { Textarea } from "./ui/textarea"
@@ -14,28 +16,58 @@ interface PostCommentsProps {
 }
 
 export function PostComments({ postId }: PostCommentsProps) {
-  const allComments = useCommentStore((state) => state.comments)
-  const comments = useMemo(
-    () => allComments.filter((comment) => comment.postId === postId),
-    [allComments, postId],
-  )
+  const [comments, setComments] = useState<Comment[]>([])
+  const [loading, setLoading] = useState(true)
+  const [loadError, setLoadError] = useState<string | null>(null)
   const [content, setContent] = useState("")
+  const [submitting, setSubmitting] = useState(false)
+  const [pendingLike, setPendingLike] = useState<Record<string, boolean>>({})
   const { requireAuth } = useRequireAuth()
 
+  const refresh = useCallback(async () => {
+    setLoading(true)
+    setLoadError(null)
+    try {
+      const items = await listCommentsByPost(postId)
+      setComments(items)
+    } catch (err: unknown) {
+      setLoadError(toApiError(err).msg)
+    } finally {
+      setLoading(false)
+    }
+  }, [postId])
+
+  useEffect(() => {
+    void refresh()
+  }, [refresh])
+
   return (
     <div className="space-y-4">
-      <h2 className="font-semibold">评论 ({comments.length})</h2>
+      <h2 className="font-semibold">
+        评论 ({loading && comments.length === 0 ? "..." : comments.length})
+      </h2>
 
       <form
         className="flex gap-3"
         onSubmit={(event) => {
           event.preventDefault()
-          requireAuth(() => {
+          requireAuth(async () => {
+            if (submitting) return
+
             const nextContent = content.trim()
             if (!nextContent) return
-            const decision = addComment(postId, nextContent)
-            if (!decision.ok) return
+
+            setSubmitting(true)
+            const decision = await addComment(postId, nextContent)
+            if (!decision.ok) {
+              notifyInfo(decision.error.msg)
+              setSubmitting(false)
+              return
+            }
+
             setContent("")
+            await refresh()
+            setSubmitting(false)
           })
         }}
       >
@@ -46,12 +78,16 @@ export function PostComments({ postId }: PostCommentsProps) {
           value={content}
           onChange={(event) => setContent(event.target.value)}
         />
-        <Button className="self-end" disabled={!content.trim()}>
+        <Button className="self-end" disabled={!content.trim() || submitting}>
           发送
         </Button>
       </form>
 
-      {comments.length === 0 ? (
+      {loading && comments.length === 0 ? (
+        <p className="text-sm text-muted-foreground text-center py-8">加载中...</p>
+      ) : loadError ? (
+        <p className="text-sm text-muted-foreground text-center py-8">加载失败：{loadError}</p>
+      ) : comments.length === 0 ? (
         <p className="text-sm text-muted-foreground text-center py-8">还没有评论</p>
       ) : (
         <div className="space-y-4">
@@ -71,10 +107,50 @@ export function PostComments({ postId }: PostCommentsProps) {
                 <p className="text-sm">{comment.content}</p>
                 <button
                   type="button"
+                  disabled={pendingLike[comment.id]}
                   className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground mt-1 transition-colors"
                   onClick={() =>
                     requireAuth(() => {
-                      toggleCommentLike(comment.id)
+                      if (pendingLike[comment.id]) return
+
+                      const prevLiked = comment.liked
+                      const prevCount = comment.likeCount
+                      const nextLiked = !prevLiked
+
+                      setComments((current) =>
+                        current.map((item) => {
+                          if (item.id !== comment.id) return item
+                          return {
+                            ...item,
+                            liked: nextLiked,
+                            likeCount: Math.max(0, prevCount + (nextLiked ? 1 : -1)),
+                          }
+                        }),
+                      )
+                      setPendingLike((current) => ({ ...current, [comment.id]: true }))
+
+                      toggleCommentLike(comment.id, prevLiked)
+                        .then((decision) => {
+                          if (!decision.ok) {
+                            throw decision.error
+                          }
+                        })
+                        .catch((err: unknown) => {
+                          setComments((current) =>
+                            current.map((item) => {
+                              if (item.id !== comment.id) return item
+                              return {
+                                ...item,
+                                liked: prevLiked,
+                                likeCount: prevCount,
+                              }
+                            }),
+                          )
+                          notifyInfo(toApiError(err).msg)
+                        })
+                        .finally(() => {
+                          setPendingLike((current) => ({ ...current, [comment.id]: false }))
+                        })
                     })
                   }
                 >
diff --git a/lib/api/comments.ts b/lib/api/comments.ts
index b890946..85c087b 100644
--- a/lib/api/comments.ts
+++ b/lib/api/comments.ts
@@ -1,56 +1,85 @@
-import { addNotification } from "@/lib/api/notifications"
 import { allow, deny } from "@/lib/decision"
-import { useAuthStore } from "@/store/auth"
-import { useCommentStore } from "@/store/comments"
-import { usePostStore } from "@/store/posts"
+import { toApiError } from "@/lib/errors"
+import type { Comment } from "@/lib/types"
 
-export function listComments() {
-  return useCommentStore.getState().comments
+import { httpJson } from "./http"
+
+type Paginated<T> = {
+  items: T[]
+  meta: {
+    total: number
+    offset: number
+    limit: number
+  }
 }
 
-export function listCommentsByPost(postId: string) {
-  return useCommentStore.getState().comments.filter((comment) => comment.postId === postId)
+type ListOptions = {
+  offset?: number
+  limit?: number
 }
 
-export function addComment(postId: string, content: string) {
-  const user = useAuthStore.getState().user
-  if (!user) {
-    return deny(401, "请先登录")
-  }
-
-  const post = usePostStore.getState().posts.find((item) => item.id === postId)
-  if (!post) {
-    return deny(404, "帖子不存在")
-  }
-
-  const comment = useCommentStore.getState().addComment(postId, user, content)
-  if (!comment) {
-    return deny(400, "评论内容不能为空")
-  }
-
-  usePostStore.getState().incrementCommentCount(postId)
-
-  addNotification({
-    type: "community",
-    title: "帖子收到新评论",
-    content: `《${post.title}》有新的评论`,
-    link: `/post/${post.id}`,
+function withOffsetLimit(path: string, options?: ListOptions): string {
+  const offset = options?.offset ?? 0
+  const limit = options?.limit ?? 1000
+  const searchParams = new URLSearchParams({
+    offset: String(offset),
+    limit: String(limit),
   })
-
-  return allow()
+  return `${path}?${searchParams.toString()}`
 }
 
-export function toggleCommentLike(commentId: string) {
-  const user = useAuthStore.getState().user
-  if (!user) {
-    return deny(401, "请先登录")
-  }
-
-  const comment = useCommentStore.getState().comments.find((item) => item.id === commentId)
-  if (!comment) {
-    return deny(404, "评论不存在")
-  }
-
-  useCommentStore.getState().toggleCommentLike(commentId)
-  return allow()
+export async function listCommentsByPost(
+  postId: string,
+  options?: ListOptions,
+): Promise<Comment[]> {
+  const encodedId = encodeURIComponent(postId)
+  const res = await httpJson<Paginated<Comment>>(
+    withOffsetLimit(`/api/v1/posts/${encodedId}/comments`, options),
+    {
+      cache: "no-store",
+    },
+  )
+  return res.items
+}
+
+export async function addComment(postId: string, content: string) {
+  const encodedId = encodeURIComponent(postId)
+  try {
+    await httpJson<unknown>(`/api/v1/posts/${encodedId}/comments`, {
+      method: "POST",
+      cache: "no-store",
+      json: { content },
+    })
+    return allow()
+  } catch (err: unknown) {
+    if (err instanceof Error && err.message === "UNAUTHORIZED") {
+      return deny(401, "请先登录")
+    }
+    const apiError = toApiError(err)
+    return deny(apiError.code, apiError.msg)
+  }
+}
+
+export async function toggleCommentLike(commentId: string, currentlyLiked: boolean) {
+  const encodedId = encodeURIComponent(commentId)
+  try {
+    if (currentlyLiked) {
+      await httpJson<unknown>(`/api/v1/comments/${encodedId}/like`, {
+        method: "DELETE",
+        cache: "no-store",
+      })
+    } else {
+      await httpJson<unknown>(`/api/v1/comments/${encodedId}/like`, {
+        method: "POST",
+        cache: "no-store",
+      })
+    }
+    return allow()
+  } catch (err: unknown) {
+    if (err instanceof Error && err.message === "UNAUTHORIZED") {
+      return deny(401, "请先登录")
+    }
+    const apiError = toApiError(err)
+    return deny(apiError.code, apiError.msg)
+  }
 }