From 2627c85ec5dafaf6f94d95579f315cf70e4c40e0 Mon Sep 17 00:00:00 2001
From: tone <3341154833@qq.com>
Date: Sat, 7 Jun 2025 13:49:33 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E8=AF=84=E8=AE=BA=E6=9C=AC?=
 =?UTF-8?q?=E5=9C=B0=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../blog/[id]/components/BlogCommentTool.tsx  |  8 +++++---
 .../blog/[id]/components/BlogComments.tsx     | 19 +++++++++++++++----
 tone-page-web/lib/api/blog/createComment.ts   | 10 ++--------
 tone-page-web/lib/api/blog/getComments.ts     | 11 ++---------
 tone-page-web/lib/types/blogComment.ts        | 11 +++++++++++
 5 files changed, 35 insertions(+), 24 deletions(-)
 create mode 100644 tone-page-web/lib/types/blogComment.ts

diff --git a/tone-page-web/app/(with-header-footer)/blog/[id]/components/BlogCommentTool.tsx b/tone-page-web/app/(with-header-footer)/blog/[id]/components/BlogCommentTool.tsx
index e73cd04..46f01e3 100644
--- a/tone-page-web/app/(with-header-footer)/blog/[id]/components/BlogCommentTool.tsx
+++ b/tone-page-web/app/(with-header-footer)/blog/[id]/components/BlogCommentTool.tsx
@@ -3,26 +3,28 @@
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 import { BlogApi } from "@/lib/api";
+import { BlogComment } from "@/lib/types/blogComment";
 import { Send } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 
-export function BlogCommentTool({ blogId }: { blogId: string }) {
+export function BlogCommentTool({ blogId, onInsertComment }: { blogId: string, onInsertComment: (b: BlogComment) => void }) {
 
     const [comment, setComment] = useState('');
     const submit = async () => {
+        if (comment.trim().length === 0) return;
         const res = await BlogApi.createComment(blogId, comment);
         if (res) {
             toast.success('发布成功');
             setComment('');
-            // 提交界面刷新
+            onInsertComment(res);
         }
     }
 
     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()}>
+            <Button variant='outline' size='icon' onClick={() => submit()} disabled={comment.trim().length === 0}>
                 <Send />
             </Button>
         </div>
diff --git a/tone-page-web/app/(with-header-footer)/blog/[id]/components/BlogComments.tsx b/tone-page-web/app/(with-header-footer)/blog/[id]/components/BlogComments.tsx
index cd28b08..ef764ee 100644
--- a/tone-page-web/app/(with-header-footer)/blog/[id]/components/BlogComments.tsx
+++ b/tone-page-web/app/(with-header-footer)/blog/[id]/components/BlogComments.tsx
@@ -1,23 +1,34 @@
 import useSWR from "swr";
 import { BlogCommentTool } from "./BlogCommentTool";
 import { BlogApi } from "@/lib/api";
+import { BlogComment } from "@/lib/types/blogComment";
 
 export function BlogComments({ blogId }: { blogId: string }) {
-    const { data, isLoading, error } = useSWR(
+    const { data, isLoading, error, mutate } = useSWR(
         `/api/blog/${blogId}/comments`,
         () => BlogApi.getComments(blogId),
     )
 
+    const insertComment = async (newOne: BlogComment) => {
+        await mutate(
+            (comments) => {
+                if (!comments) return [newOne];
+                return [newOne, ...comments]
+            },
+            { revalidate: false }
+        )
+    }
+
     return (
         data && <div className="" >
             <h1 className="px-2 border-l-4 border-zinc-300">评论 {data.length}</h1>
-            <BlogCommentTool blogId={blogId} />
+            <BlogCommentTool blogId={blogId} onInsertComment={insertComment} />
             <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>
+                                <h1 className="text-zinc-500">{d.user ? d.user.nickname : '匿名'}</h1>
                                 <div>{d.content}</div>
                                 <div className="text-xs text-zinc-500 flex gap-2">
                                     <p>{new Date(d.createdAt).toLocaleString()}</p>
@@ -30,7 +41,7 @@ export function BlogComments({ blogId }: { blogId: string }) {
                                             {
                                                 data.filter(c => c.parentId === d.id).map(c => (
                                                     <div key={c.id}>
-                                                        <h1 className="text-zinc-500">{c.user ? c.user : '匿名'}</h1>
+                                                        <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">
                                                             <p>{new Date().toLocaleString()}</p>
diff --git a/tone-page-web/lib/api/blog/createComment.ts b/tone-page-web/lib/api/blog/createComment.ts
index e4655b8..f2f9e5b 100644
--- a/tone-page-web/lib/api/blog/createComment.ts
+++ b/tone-page-web/lib/api/blog/createComment.ts
@@ -1,14 +1,8 @@
+import { BlogComment } from "@/lib/types/blogComment";
 import fetcher from "../fetcher";
 
 export async function createComment(blogId: string, content: string) {
-    return fetcher<{
-        blogId: string;
-        content: string;
-        createdAt: string
-        deletedAt: null; // 原则上能看到就是null
-        id: string;
-        parentId: string | null;
-    }>(`/api/blog/${blogId}/comment`, {
+    return fetcher<BlogComment>(`/api/blog/${blogId}/comment`, {
         method: 'POST',
         body: JSON.stringify({ content }),
     });
diff --git a/tone-page-web/lib/api/blog/getComments.ts b/tone-page-web/lib/api/blog/getComments.ts
index ea2f72a..d76d885 100644
--- a/tone-page-web/lib/api/blog/getComments.ts
+++ b/tone-page-web/lib/api/blog/getComments.ts
@@ -1,13 +1,6 @@
+import { BlogComment } from "@/lib/types/blogComment";
 import fetcher from "../fetcher";
 
 export async function getComments(blogId: string) {
-    return fetcher<{
-        blogId: string;
-        content: string;
-        createdAt: string;
-        deletedAt: string | null;// 原则上能看到就是null，
-        id: string;
-        parentId: string | null; // 如果是回复，则有parentId
-        user: null;// TODO需要完善
-    }[]>(`/api/blog/${blogId}/comments`, { method: 'GET' });
+    return fetcher<BlogComment[]>(`/api/blog/${blogId}/comments`, { method: 'GET' });
 }
\ No newline at end of file
diff --git a/tone-page-web/lib/types/blogComment.ts b/tone-page-web/lib/types/blogComment.ts
new file mode 100644
index 0000000..2168761
--- /dev/null
+++ b/tone-page-web/lib/types/blogComment.ts
@@ -0,0 +1,11 @@
+import { User } from "./user";
+
+export interface BlogComment {
+    id: string;
+    blogId: string;
+    content: string;
+    createdAt: string;
+    deletedAt: string | null;
+    parentId: string | null;
+    user: User | null;
+}
\ No newline at end of file