From 3a1f9c2b7f6d9b62d20f7df6dcc6def171821148 Mon Sep 17 00:00:00 2001
From: zetaloop <zetaloop@outlook.com>
Date: Sat, 21 Feb 2026 15:45:20 +0800
Subject: [PATCH] feat: wire post interactions and persist favorites state

---
 app/(main)/player/[id]/page.tsx |  6 +-
 app/(main)/post/[id]/page.tsx   | 45 +--------------
 app/(main)/post/new/page.tsx    | 19 +++++--
 app/(main)/shop/[id]/page.tsx   |  6 +-
 components/favorite-button.tsx  | 35 +++++++++++-
 components/post-comments.tsx    | 99 +++++++++++++++++++++++++++++++++
 6 files changed, 158 insertions(+), 52 deletions(-)
 create mode 100644 components/post-comments.tsx

diff --git a/app/(main)/player/[id]/page.tsx b/app/(main)/player/[id]/page.tsx
index 787b720..e2877be 100644
--- a/app/(main)/player/[id]/page.tsx
+++ b/app/(main)/player/[id]/page.tsx
@@ -76,7 +76,11 @@ export default async function PlayerDetailPage({ params }: { params: Promise<{ i
                 </Button>
               </Link>
             )}
-            <FavoriteButton initialFavorited={isFavorited} />
+            <FavoriteButton
+              initialFavorited={isFavorited}
+              targetType="player"
+              targetId={player.id}
+            />
           </div>
 
           <div className="bg-muted/50 p-4 rounded-lg">
diff --git a/app/(main)/post/[id]/page.tsx b/app/(main)/post/[id]/page.tsx
index c1a9d57..cf4bdaa 100644
--- a/app/(main)/post/[id]/page.tsx
+++ b/app/(main)/post/[id]/page.tsx
@@ -2,12 +2,11 @@ import { ArrowLeft, Heart, MessageCircle, Pin, Star } from "lucide-react"
 import Image from "next/image"
 import Link from "next/link"
 import { notFound } from "next/navigation"
+import { PostComments } from "@/components/post-comments"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader } from "@/components/ui/card"
 import { Separator } from "@/components/ui/separator"
-import { Textarea } from "@/components/ui/textarea"
 import { roleLabels } from "@/lib/constants"
 import { mockComments, mockOrders, mockPlayers, mockPosts } from "@/lib/mock"
 
@@ -112,47 +111,7 @@ export default async function PostDetailPage({ params }: { params: Promise<{ id:
 
       <Separator className="my-6" />
 
-      <div className="space-y-4">
-        <h2 className="font-semibold">评论 ({comments.length})</h2>
-
-        <div className="flex gap-3">
-          <Textarea placeholder="写下你的评论..." className="flex-1" rows={2} />
-          <Button className="self-end">发送</Button>
-        </div>
-
-        {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>
+      <PostComments initialComments={comments} postId={id} />
     </div>
   )
 }
diff --git a/app/(main)/post/new/page.tsx b/app/(main)/post/new/page.tsx
index a587a2c..1132ce8 100644
--- a/app/(main)/post/new/page.tsx
+++ b/app/(main)/post/new/page.tsx
@@ -20,7 +20,7 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 import { Textarea } from "@/components/ui/textarea"
-import { mockPosts } from "@/lib/mock"
+import { mockOrders, mockPosts } from "@/lib/mock"
 import { useRequireAuth } from "@/lib/use-require-auth"
 
 const postSchema = z.object({
@@ -37,6 +37,7 @@ export default function NewPostPage() {
   const [selectedTags, setSelectedTags] = useState<string[]>([])
   const [imageCount, setImageCount] = useState(0)
   const [selectedQuotePostId, setSelectedQuotePostId] = useState<string | undefined>(undefined)
+  const [selectedOrderId, setSelectedOrderId] = useState<string | undefined>(undefined)
 
   const {
     register,
@@ -95,12 +96,18 @@ export default function NewPostPage() {
             {postType === "show_order" && (
               <div className="space-y-2">
                 <Label>关联订单</Label>
-                <Select>
+                <Select value={selectedOrderId} onValueChange={setSelectedOrderId}>
                   <SelectTrigger>
                     <SelectValue placeholder="选择要展示的订单" />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="ord2">英雄联盟上分陪玩 · 已完成</SelectItem>
+                    {mockOrders
+                      .filter((order) => order.status === "completed")
+                      .map((order) => (
+                        <SelectItem key={order.id} value={order.id}>
+                          {order.service.title} · {order.playerName}
+                        </SelectItem>
+                      ))}
                   </SelectContent>
                 </Select>
               </div>
@@ -210,7 +217,11 @@ export default function NewPostPage() {
             </div>
 
             <div className="flex gap-2">
-              <Button type="submit" className="flex-1" disabled={isSubmitting}>
+              <Button
+                type="submit"
+                className="flex-1"
+                disabled={isSubmitting || (postType === "show_order" && !selectedOrderId)}
+              >
                 {isSubmitting ? "发布中..." : "发布"}
               </Button>
               <Button type="button" variant="outline" asChild>
diff --git a/app/(main)/shop/[id]/page.tsx b/app/(main)/shop/[id]/page.tsx
index 4b9959f..41f2f03 100644
--- a/app/(main)/shop/[id]/page.tsx
+++ b/app/(main)/shop/[id]/page.tsx
@@ -96,7 +96,11 @@ export default async function ShopPage({ params }: PageProps) {
                           {shop.owner.bio || "暂无介绍"}
                         </p>
                       </div>
-                      <FavoriteButton initialFavorited={isFavorited} />
+                      <FavoriteButton
+                        initialFavorited={isFavorited}
+                        targetType="shop"
+                        targetId={shop.id}
+                      />
                     </div>
                   </div>
                 </CardContent>
diff --git a/components/favorite-button.tsx b/components/favorite-button.tsx
index 2738eeb..09f2150 100644
--- a/components/favorite-button.tsx
+++ b/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 ? "已收藏" : "收藏"}
diff --git a/components/post-comments.tsx b/components/post-comments.tsx
new file mode 100644
index 0000000..4a61901
--- /dev/null
+++ b/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>
+  )
+}