feat: wire post interactions and persist favorites state

components/favorite-button.tsx

@@ -1,24 +1,53 @@
 "use client"
 
 import { Heart } from "lucide-react"
-import { useState } from "react"
+import { useEffect, useMemo, useState } from "react"
 import { Button } from "@/components/ui/button"
 import { useRequireAuth } from "@/lib/use-require-auth"
+import { useAuthStore } from "@/store/auth"
 
 interface FavoriteButtonProps {
   initialFavorited: boolean
+  targetType: "player" | "shop"
+  targetId: string
 }
 
-export function FavoriteButton({ initialFavorited }: FavoriteButtonProps) {
+export function FavoriteButton({ initialFavorited, targetType, targetId }: FavoriteButtonProps) {
   const [favorited, setFavorited] = useState(initialFavorited)
   const { requireAuth } = useRequireAuth()
+  const userId = useAuthStore((s) => s.user?.id)
+  const storageKey = useMemo(
+    () => `favorite:${userId ?? "guest"}:${targetType}:${targetId}`,
+    [userId, targetType, targetId],
+  )
+
+  useEffect(() => {
+    const stored = window.localStorage.getItem(storageKey)
+    if (stored === "1") {
+      setFavorited(true)
+      return
+    }
+    if (stored === "0") {
+      setFavorited(false)
+      return
+    }
+    setFavorited(initialFavorited)
+  }, [storageKey, initialFavorited])
 
   return (
     <Button
       variant={favorited ? "default" : "outline"}
       size="sm"
       className="gap-1.5"
-      onClick={() => requireAuth(() => setFavorited(!favorited))}
+      onClick={() =>
+        requireAuth(() =>
+          setFavorited((prev) => {
+            const next = !prev
+            window.localStorage.setItem(storageKey, next ? "1" : "0")
+            return next
+          }),
+        )
+      }
     >
       <Heart className={`h-4 w-4 ${favorited ? "fill-current" : ""}`} />
       {favorited ? "已收藏" : "收藏"}

components/post-comments.tsx

@@ -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>
+  )
+}