实现博客评论

tone-page-web/app/(with-header-footer)/blog/[id]/components/BlogComments.tsx

@@ -2,6 +2,7 @@ import useSWR from "swr";
 import { BlogCommentTool } from "./BlogCommentTool";
 import { BlogApi } from "@/lib/api";
 import { BlogComment } from "@/lib/types/blogComment";
+import { useState } from "react";
 
 export function BlogComments({ blogId }: { blogId: string }) {
     const { data, isLoading, error, mutate } = useSWR(
@@ -19,34 +20,42 @@ export function BlogComments({ blogId }: { blogId: string }) {
         )
     }
 
+
+    const [replayTarget, setReplayTarget] = useState<BlogComment | null>(null);
+
     return (
         data && <div className="" >
             <h1 className="px-2 border-l-4 border-zinc-300">评论 {data.length}</h1>
-            <BlogCommentTool blogId={blogId} onInsertComment={insertComment} />
-            <div className="flex flex-col gap-3">
+            <BlogCommentTool
+                blogId={blogId}
+                onInsertComment={insertComment}
+                replayTarget={replayTarget}
+                handleClearReplayTarget={() => setReplayTarget(null)}
+            />
+            <div className="flex flex-col">
                 {
                     data.filter(d => !d.parentId)
-                        .map(d => (
-                            <div key={d.id}>
+                        .map((d, dIndex) => (
+                            <div key={d.id} className="border-b border-zinc-300 py-2 last:border-none">
                                 <h1 className="text-zinc-500">{d.user ? d.user.nickname : '匿名'}</h1>
-                                <div>{d.content}</div>
+                                <div className="whitespace-pre-wrap break-all">{d.content}</div>
                                 <div className="text-xs text-zinc-500 flex gap-2">
                                     <p>{new Date(d.createdAt).toLocaleString()}</p>
                                     <p>未知</p>
-                                    <p className="text-zinc-900 cursor-pointer">回复</p>
+                                    <p className="text-zinc-900 cursor-pointer" onClick={() => setReplayTarget(d)}>回复</p>
                                 </div>
                                 {
                                     data.filter(c => c.parentId === d.id).length > 0 && (
-                                        <div className="flex flex-col gap-3 ml-5 my-1">
+                                        <div className="flex flex-col ml-5 my-1">
                                             {
                                                 data.filter(c => c.parentId === d.id).map(c => (
-                                                    <div key={c.id}>
+                                                    <div key={c.id} className="border-b border-zinc-300 py-1 last:border-none">
                                                         <h1 className="text-zinc-500">{c.user ? c.user.nickname : '匿名'}</h1>
-                                                        <div>{c.content}</div>
-                                                        <p className="text-xs text-zinc-500 flex gap-2">
+                                                        <div className="whitespace-pre-wrap break-all">{c.content}</div>
+                                                        <div className="text-xs text-zinc-500 flex gap-2">
                                                             <p>{new Date().toLocaleString()}</p>
                                                             <p>未知</p>
-                                                        </p>
+                                                        </div>
                                                     </div>
                                                 ))
                                             }