feat: wire post interactions and persist favorites state

2026-02-21 15:45:20 +08:00
parent 1ff499720f
commit 3a1f9c2b7f
6 changed files with 158 additions and 52 deletions
@@ -0,0 +1,99 @@
+"use client"
+
+import { Heart } from "lucide-react"
+import { useState } from "react"
+import { currentUser } from "@/lib/mock"
+import type { Comment } from "@/lib/types"
+import { useRequireAuth } from "@/lib/use-require-auth"
+import { useAuthStore } from "@/store/auth"
+import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar"
+import { Button } from "./ui/button"
+import { Textarea } from "./ui/textarea"
+
+interface PostCommentsProps {
+  initialComments: Comment[]
+  postId: string
+}
+
+export function PostComments({ initialComments, postId }: PostCommentsProps) {
+  const [comments, setComments] = useState(initialComments)
+  const [content, setContent] = useState("")
+  const { requireAuth } = useRequireAuth()
+  const user = useAuthStore((s) => s.user)
+
+  return (
+    <div className="space-y-4">
+      <h2 className="font-semibold">评论 ({comments.length})</h2>
+
+      <form
+        className="flex gap-3"
+        onSubmit={(event) => {
+          event.preventDefault()
+          requireAuth(() => {
+            const nextContent = content.trim()
+            if (!nextContent) return
+            const author = user ?? currentUser
+            const createdAt = new Date().toISOString()
+            setComments((prev) => [
+              ...prev,
+              {
+                id: `comment-${postId}-${createdAt}`,
+                postId,
+                author,
+                content: nextContent,
+                likeCount: 0,
+                liked: false,
+                createdAt,
+              },
+            ])
+            setContent("")
+          })
+        }}
+      >
+        <Textarea
+          placeholder="写下你的评论..."
+          className="flex-1"
+          rows={2}
+          value={content}
+          onChange={(event) => setContent(event.target.value)}
+        />
+        <Button className="self-end" disabled={!content.trim()}>
+          发送
+        </Button>
+      </form>
+
+      {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>
+  )
+}