初步完成评论

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

@@ -0,0 +1,30 @@
+'use client';
+
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { BlogApi } from "@/lib/api";
+import { Send } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+
+export function BlogCommentTool({ blogId }: { blogId: string }) {
+
+    const [comment, setComment] = useState('');
+    const submit = async () => {
+        const res = await BlogApi.createComment(blogId, comment);
+        if (res) {
+            toast.success('发布成功');
+            setComment('');
+            // 提交界面刷新
+        }
+    }
+
+    return (
+        <div className="my-3 flex items-end gap-2">
+            <Textarea placeholder="评论" onChange={v => setComment(v.target.value)} value={comment} />
+            <Button variant='outline' size='icon' onClick={() => submit()}>
+                <Send />
+            </Button>
+        </div>
+    )
+}

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

@@ -0,0 +1,51 @@
+import useSWR from "swr";
+import { BlogCommentTool } from "./BlogCommentTool";
+import { BlogApi } from "@/lib/api";
+
+export function BlogComments({ blogId }: { blogId: string }) {
+    const { data, isLoading, error } = useSWR(
+        `/api/blog/${blogId}/comments`,
+        () => BlogApi.getComments(blogId),
+    )
+
+    return (
+        data && <div className="" >
+            <h1 className="px-2 border-l-4 border-zinc-300">评论 {data.length}</h1>
+            <BlogCommentTool blogId={blogId} />
+            <div className="flex flex-col gap-3">
+                {
+                    data.filter(d => !d.parentId)
+                        .map(d => (
+                            <div key={d.id}>
+                                <h1 className="text-zinc-500">{d.user ? d.user : '匿名'}</h1>
+                                <div>{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>
+                                </div>
+                                {
+                                    data.filter(c => c.parentId === d.id).length > 0 && (
+                                        <div className="flex flex-col gap-3 ml-5 my-1">
+                                            {
+                                                data.filter(c => c.parentId === d.id).map(c => (
+                                                    <div key={c.id}>
+                                                        <h1 className="text-zinc-500">{c.user ? c.user : '匿名'}</h1>
+                                                        <div>{c.content}</div>
+                                                        <p className="text-xs text-zinc-500 flex gap-2">
+                                                            <p>{new Date().toLocaleString()}</p>
+                                                            <p>未知</p>
+                                                        </p>
+                                                    </div>
+                                                ))
+                                            }
+                                        </div>
+                                    )
+                                }
+                            </div>
+                        ))
+                }
+            </div >
+        </div>
+    )
+}

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

@@ -12,6 +12,7 @@ import { PhotoProvider, PhotoView } from 'react-photo-view';
 import 'react-photo-view/dist/react-photo-view.css';
 import rehypeRaw from 'rehype-raw'
 import { Skeleton } from "@/components/ui/skeleton";
+import { BlogComments } from "./components/BlogComments";
 
 export default function Blog() {
     const params = useParams();
@@ -74,6 +75,13 @@ export default function Blog() {
                         />
                     </>
                 )}
+
+                {data && (
+                    <>
+                        <div className="border my-5"></div>
+                        <BlogComments blogId={data.id} />
+                    </>
+                )}
             </div>
         </div>
     )