Refactor comment system:

- Update comment API to handle private comments and improve request structure.
- Remove unused CSS animations and components related to comments.
- Implement new comment input and item components with enhanced functionality including editing and private comment options.
- Integrate user profile navigation and improve user experience with better feedback on actions (like, delete, edit).
- Update localization for new features and ensure consistency in comment handling.
- Introduce checkbox for private comments in the comment input.

web/src/api/comment.ts

@@ -1,5 +1,5 @@
 import axiosClient from './client'
-import { UpdateCommentRequest, Comment } from '@/models/comment'
+import { Comment } from '@/models/comment'
 import { PaginationParams } from '@/models/common'
 import { OrderBy } from '@/models/common'
 import type { BaseResponse } from '@/models/resp'
@@ -32,13 +32,23 @@ export async function createComment(
 }
 
 export async function updateComment(
-  data: UpdateCommentRequest,
+  {
+    id, content,
+    isPrivate = false
+  }: {
+    id: number
+    content: string
+    isPrivate?: boolean // 可选字段，默认为 false
+  }
 ): Promise<BaseResponse<Comment>> {
-  const res = await axiosClient.put<BaseResponse<Comment>>(`/comment/c/${data.id}`, data)
+  const res = await axiosClient.put<BaseResponse<Comment>>(`/comment/c/${id}`, {
+    content,
+    isPrivate
+  })
   return res.data
 }
 
-export async function deleteComment(id: number): Promise<void> {
+export async function deleteComment({ id }: { id: number }): Promise<void> {
   await axiosClient.delete(`/comment/c/${id}`)
 }
 

web/src/components/comment/comment-animations.css

@@ -1,47 +0,0 @@
-/* 评论区原生动画：淡入、上移 */
-.fade-in {
-  opacity: 0;
-  animation: fadeIn 0.5s ease forwards;
-}
-
-.fade-in-up {
-  opacity: 0;
-  transform: translateY(16px);
-  animation: fadeInUp 0.5s cubic-bezier(.33,1,.68,1) forwards;
-}
-
-@keyframes fadeIn {
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes fadeInUp {
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}/* 评论区原生动画：淡入、上移 */
-.fade-in {
-  opacity: 0;
-  animation: fadeIn 0.5s ease forwards;
-}
-
-.fade-in-up {
-  opacity: 0;
-  transform: translateY(16px);
-  animation: fadeInUp 0.5s cubic-bezier(.33,1,.68,1) forwards;
-}
-
-@keyframes fadeIn {
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes fadeInUp {
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}

web/src/components/comment/comment-input.tsx

@@ -1,86 +0,0 @@
-"use client";
-import { Textarea } from "@/components/ui/textarea"
-import { getGravatarByUser } from "@/components/common/gravatar"
-import { toast } from "sonner";
-import { useState, useEffect } from "react";
-import type { User } from "@/models/user";
-import { getLoginUser } from "@/api/user";
-import { createComment } from "@/api/comment";
-
-import { CircleUser } from "lucide-react";
-import { useTranslations } from "next-intl";
-import { TargetType } from "@/models/types";
-import { useToLogin } from "@/hooks/use-route";
-import NeedLogin from "../common/need-login";
-
-
-import "./comment-animations.css";
-
-export function CommentInput(
-    { targetId, targetType, replyId, onCommentSubmitted }: { targetId: number, targetType: TargetType, replyId: number | null, onCommentSubmitted: () => void }
-) {
-
-    const t = useTranslations('Comment')
-    const toLogin = useToLogin()
-    const [user, setUser] = useState<User | null>(null);
-    const [commentContent, setCommentContent] = useState("");
-
-    useEffect(() => {
-        getLoginUser()
-            .then(response => {
-                setUser(response.data);
-            })
-    }, []);
-
-    const handleCommentSubmit = async () => {
-        if (!user) {
-            toast.error(<NeedLogin>{t("login_required")}</NeedLogin>);
-            return;
-        }
-        if (!commentContent.trim()) {
-            toast.error(t("content_required"));
-            return;
-        }
-        await createComment({
-            targetType: targetType,
-            targetId: targetId,
-            content: commentContent,
-            replyId: replyId,
-            isPrivate: false,
-        }).then(response => {
-            setCommentContent("");
-            toast.success(t("comment_success"));
-            onCommentSubmitted();
-        }).catch(error => {
-            toast.error(t("comment_failed") + ": " +
-                error?.response?.data?.message || error?.message
-            );
-        });
-    };
-
-    return (
-        <div className="fade-in-up">
-            <div className="flex py-4 fade-in">
-                {/* Avatar */}
-                <div onClick={user ? undefined : toLogin} className="flex-shrink-0 w-10 h-10 fade-in">
-                    {user && getGravatarByUser(user)}
-                    {!user && <CircleUser className="w-full h-full fade-in" />}
-                </div>
-                {/* Input Area */}
-                <div className="flex-1 pl-2 fade-in-up">
-                    <Textarea
-                        placeholder={t("placeholder")}
-                        className="w-full p-2 border border-gray-300 rounded-md fade-in-up"
-                        value={commentContent}
-                        onChange={(e) => setCommentContent(e.target.value)}
-                    />
-                </div>
-            </div>
-            <div className="flex justify-end fade-in-up">
-                <button onClick={handleCommentSubmit} className="px-2 py-1 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors fade-in-up">
-                    {t("submit")}
-                </button>
-            </div>
-        </div>
-    );
-}

web/src/components/comment/comment-item.tsx

@@ -1,173 +0,0 @@
-"use client";
-
-import type { Comment } from "@/models/comment";
-import { getGravatarByUser } from "@/components/common/gravatar";
-import { useEffect, useState } from "react";
-import { Reply, Trash } from "lucide-react";
-import { toggleLike } from "@/api/like";
-import { TargetType } from "@/models/types";
-import { toast } from "sonner";
-import { useTranslations } from "next-intl";
-import { CommentInput } from "./comment-input";
-import { deleteComment, listComments } from "@/api/comment";
-import { OrderBy } from "@/models/common";
-import { getLoginUser } from "@/api/user";
-import type { User } from "@/models/user";
-import Link from "next/link";
-import "./comment-animations.css";
-
-export function CommentItem({comment, parentComment, onCommentDelete}:{comment: Comment, parentComment: Comment | null, onCommentDelete: () => void}) {
-    const t = useTranslations("Comment")
-    const [user, setUser] = useState<User | null>(null);
-    const [liked, setLiked] = useState(comment.isLiked);
-    const [likeCount, setLikeCount] = useState(comment.likeCount);
-    const [replyCount, setReplyCount] = useState(comment.replyCount);
-    const [showReplyInput, setShowReplyInput] = useState(false);
-    const [showReplies, setShowReplies] = useState(false);
-    // 二次确认删除
-    const [deleteConfirm, setDeleteConfirm] = useState(false);
-
-    useEffect(() => {
-        getLoginUser()
-            .then(response => {
-                setUser(response.data);
-            })
-    }, []);
-
-    const handleToggleLike = () => {
-        toggleLike({ targetType: TargetType.Comment, targetId: comment.id })
-            .then(res => {
-                setLiked(res.data.status);
-                setLikeCount(res.data.status ? likeCount + 1 : likeCount - 1);
-                toast.success(res.data.status ? t("like_success") : t("unlike_success"));
-            })
-            .catch(error => {
-                toast.error(t("like_failed") + ": " + error.message);
-            });
-    }
-
-    const handleDeleteComment = (id: number) => {
-        deleteComment(id)
-            .then(() => {
-                toast.success(t("delete_success"));
-                onCommentDelete();
-            })
-            .catch(error => {
-                toast.error(t("delete_failed") + ": " + error.message);
-            });
-    }
-
-    const onReplySubmitted = () => {
-        setReplyCount(replyCount + 1);
-        setShowReplyInput(false);
-        setShowReplies(true);
-    }
-
-    return (
-        <div className="flex fade-in-up">
-            <div className="fade-in">
-                {getGravatarByUser(comment.user)}
-            </div>
-            <div className="flex-1 pl-2 fade-in-up">
-                <div className="font-bold text-base text-slate-800 dark:text-slate-100 fade-in-up">{comment.user.nickname}</div>
-                <p className="text-lg text-slate-600 dark:text-slate-400 fade-in">
-                    {parentComment && <>{t("reply")} <Link href={`/u/${parentComment.user.username}`} className="text-primary">{parentComment?.user.nickname}</Link>: </>}
-                    {comment.content}
-                </p>
-                <div className="mt-1 text-xs text-slate-500 dark:text-slate-400 flex items-center gap-4 fade-in">
-                    <span>{new Date(comment.updatedAt).toLocaleString()}</span>
-                    <button
-                        onClick={handleToggleLike}
-                        className={`flex items-center justify-center px-2 py-1 h-5 text-xs rounded 
-                        ${liked ? 'bg-primary text-primary-foreground dark:text-white' : 'bg-slate-400 hover:bg-slate-600'}
-                         dark:hover:bg-slate-500 fade-in`}
-                    >
-                        👍 {likeCount}
-                    </button>
-                    <button onClick={() => setShowReplyInput(!showReplyInput)}
-                        className="flex items-center justify-center px-2 py-1 h-5 
-                        text-primary-foreground dark:text-white text-xs 
-                        rounded bg-slate-400 hover:bg-slate-600 dark:hover:bg-slate-500 fade-in-up">
-                        <Reply className="w-3 h-3" />
-                    </button>
-                    {comment.user.id === user?.id && (
-                        deleteConfirm ? (
-                            <button
-                                onClick={() => handleDeleteComment(comment.id)}
-                                className="flex items-center justify-center px-2 py-1 h-5 text-primary-foreground dark:text-white text-xs rounded bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 fade-in"
-                                onBlur={() => setDeleteConfirm(false)}
-                                title={t("confirm_delete")}
-                            >
-                                {t("confirm_delete")}
-                            </button>
-                        ) : (
-                            <button
-                                onClick={() => setDeleteConfirm(true)}
-                                className="flex items-center justify-center px-2 py-1 h-5 text-primary-foreground dark:text-white text-xs rounded bg-slate-400 hover:bg-red-600 dark:hover:bg-red-500 fade-in"
-                                title={t("delete")}
-                            >
-                                <Trash className="w-3 h-3" />
-                            </button>
-                        )
-                    )}
-                    {replyCount > 0 &&
-                        <button onClick={() => setShowReplies(!showReplies)} className="fade-in-up">
-                            {!showReplies ? t("expand_replies", { count: replyCount }) : t("collapse_replies")}
-                        </button>
-                    }
-                </div>
-                {showReplyInput && <CommentInput targetId={comment.targetId} targetType={comment.targetType} replyId={comment.id} onCommentSubmitted={onReplySubmitted} />}
-                {showReplies && replyCount > 0 && <RepliesList parentComment={comment} />}
-            </div>
-        </div>
-    );
-}
-
-// 一个评论的回复区域组件
-function RepliesList({ parentComment }: { parentComment: Comment }) {
-    const t = useTranslations("Comment")
-    const [replies, setReplies] = useState<Comment[]>([]);
-    useEffect(() => {
-        listComments({
-            targetType: parentComment.targetType,
-            targetId: parentComment.targetId,
-            commentId: parentComment.id,
-            depth: parentComment.depth + 1,
-            orderBy: OrderBy.CreatedAt,
-            desc: false,
-            page: 1,
-            size: 9999,
-        }).then(res => {
-            setReplies(res.data);
-        }).catch(error => {
-            toast.error(t("load_replies_failed") + ": " + error.message);
-        });
-    }, [parentComment])
-
-    const onCommentDelete = () => {
-        listComments({
-            targetType: parentComment.targetType,
-            targetId: parentComment.targetId,
-            commentId: parentComment.id,
-            depth: parentComment.depth + 1,
-            orderBy: OrderBy.CreatedAt,
-            desc: false,
-            page: 1,
-            size: 9999,
-        }).then(res => {
-            setReplies(res.data);
-        }).catch(error => {
-            toast.error(t("load_replies_failed") + ": " + error.message);
-        });
-    }
-
-    return (
-        <div className="mt-4 border-l border-slate-300 pl-4">
-            {replies.map(reply => (
-                <div key={reply.id} className="mb-4">
-                    <CommentItem comment={reply} parentComment={parentComment} onCommentDelete={onCommentDelete} />
-                </div>
-            ))}
-        </div>
-    )
-}

web/src/components/comment/index.tsx

@@ -1,94 +0,0 @@
-"use client";
-
-import type { Comment } from "@/models/comment";
-import { CommentInput } from "@/components/comment/comment-input";
-import "./comment-animations.css";
-import { Suspense, useEffect, useState } from "react";
-import { listComments } from "@/api/comment";
-import { OrderBy } from "@/models/common";
-import { CommentItem } from "./comment-item";
-import { Separator } from "../ui/separator";
-import { TargetType } from "@/models/types";
-import { Skeleton } from "../ui/skeleton";
-
-interface CommentAreaProps {
-  targetType: TargetType;
-  targetId: number;
-}
-
-
-
-export default function CommentSection(props: CommentAreaProps) {
-  const { targetType, targetId } = props;
-  const [comments, setComments] = useState<Comment[]>([]);
-  const [newComment, setNewComment] = useState<string>("");
-
-  useEffect(() => {
-    listComments({
-      targetType,
-      targetId,
-      depth: 0,
-      orderBy: OrderBy.CreatedAt,
-      desc: true,
-      page: 1,
-      size: 10
-    })
-      .then(response => {
-        setComments(response.data);
-      })
-  }, [targetType, targetId]);
-
-  const onCommentsChange = () => {
-    // 重新加载评论列表
-    listComments({
-      targetType,
-      targetId,
-      depth: 0,
-      orderBy: OrderBy.CreatedAt,
-      desc: true,
-      page: 1,
-      size: 10
-    })
-      .then(response => {
-        setComments(response.data);
-      })
-  }
-
-  // TODO: 支持分页加载更多评论
-
-  return (
-    <div>
-      <Separator className="my-16" />
-      <div className="font-bold text-2xl">评论</div>
-      <CommentInput targetType={targetType} targetId={targetId} replyId={0} onCommentSubmitted={onCommentsChange} />
-      <div className="mt-4">
-        <Suspense fallback={<CommentLoading />}>
-          {comments.map((comment, idx) => (
-            <div key={comment.id} className="fade-in-up" style={{ animationDelay: `${idx * 60}ms` }}>
-              <Separator className="my-2" />
-              <CommentItem comment={comment} parentComment={null} onCommentDelete={onCommentsChange} />
-            </div>
-          ))}
-        </Suspense>
-      </div>
-    </div>
-  );
-}
-
-
-function CommentLoading() {
-  return (
-    <div className="space-y-6 py-8">
-      {[...Array(3)].map((_, i) => (
-        <div key={i} className="flex gap-3 fade-in-up" style={{ animationDelay: `${i * 80}ms` }}>
-          <Skeleton className="w-10 h-10 rounded-full fade-in" />
-          <div className="flex-1 space-y-2">
-            <Skeleton className="h-4 w-1/4 fade-in" />
-            <Skeleton className="h-4 w-3/4 fade-in" />
-            <Skeleton className="h-4 w-2/3 fade-in" />
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}

web/src/components/neo-comment/comment-input.tsx

@@ -0,0 +1,79 @@
+import { useToLogin, useToUserProfile } from "@/hooks/use-route";
+import { User } from "@/models/user";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+import NeedLogin from "@/components/common/need-login";
+import { toast } from "sonner";
+import { getGravatarByUser } from "@/components/common/gravatar";
+import { CircleUser } from "lucide-react";
+import { Textarea } from "@/components/ui/textarea";
+import { Checkbox } from "@/components/ui/checkbox"
+import { Label } from "@/components/ui/label";
+
+export function CommentInput(
+  {
+    user,
+    onCommentSubmitted,
+    initContent = "",
+    initIsPrivate = false,
+    isUpdate = false
+  }: {
+    user: User | null,
+    onCommentSubmitted: ({ commentContent, isPrivate }: { commentContent: string, isPrivate: boolean }) => void,
+    initContent?: string,
+    initIsPrivate?: boolean,
+    isUpdate?: boolean,
+  }
+) {
+  const t = useTranslations('Comment')
+  const handleToLogin = useToLogin()
+  const toUserProfile = useToUserProfile();
+
+  const [isPrivate, setIsPrivate] = useState(initIsPrivate);
+  const [commentContent, setCommentContent] = useState(initContent);
+
+  const handleCommentSubmit = async () => {
+    if (!user) {
+      toast.error(<NeedLogin>{t("login_required")}</NeedLogin>);
+      return;
+    }
+    if (!commentContent.trim()) {
+      toast.error(t("content_required"));
+      return;
+    }
+    onCommentSubmitted({ commentContent, isPrivate });
+    setCommentContent("");
+  };
+
+  return (
+    <div className="fade-in-up">
+      <div className="flex py-4 fade-in">
+        <div onClick={user ? () => toUserProfile(user.username) : handleToLogin} className="flex-shrink-0 w-10 h-10 fade-in">
+          {user ? getGravatarByUser(user) : null}
+          {!user && <CircleUser className="w-full h-full fade-in" />}
+        </div>
+        <div className="flex-1 pl-2 fade-in-up">
+          <Textarea
+            placeholder={t("placeholder")}
+            className="w-full p-2 border border-gray-300 rounded-md fade-in-up"
+            value={commentContent}
+            onChange={(e) => setCommentContent(e.target.value)}
+          />
+        </div>
+      </div>
+      <div className="flex justify-end fade-in-up space-x-4 items-center">
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            checked={isPrivate}
+            onCheckedChange={checked => setIsPrivate(checked === true)}
+          />
+          <Label>{t("private")}</Label>
+        </div>
+
+        <button onClick={handleCommentSubmit} className="px-2 py-1 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors fade-in-up">
+          {isUpdate ? t("update") : t("submit")}
+        </button>
+      </div>
+    </div>
+  );
+}

web/src/components/neo-comment/comment-item.tsx

@@ -0,0 +1,224 @@
+import { useToUserProfile } from "@/hooks/use-route";
+import { User } from "@/models/user";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+import { toast } from "sonner";
+import { getGravatarByUser } from "@/components/common/gravatar";
+import { Reply, Trash, Heart, Pencil, Lock } from "lucide-react";
+import { Comment } from "@/models/comment";
+import { TargetType } from "@/models/types";
+import { toggleLike } from "@/api/like";
+import { useDoubleConfirm } from "@/hooks/use-double-confirm";
+import { CommentInput } from "./comment-input";
+import { createComment, deleteComment, listComments, updateComment } from "@/api/comment";
+import { OrderBy } from "@/models/common";
+import config from "@/config";
+
+export function CommentItem(
+  {
+    user,
+    comment,
+    parentComment,
+    onCommentDelete,
+  }: {
+    user: User | null,
+    comment: Comment,
+    parentComment: Comment | null,
+    onCommentDelete: ({ commentId }: { commentId: number }) => void,
+  }
+) {
+  const t = useTranslations("Comment")
+  const toUserProfile = useToUserProfile();
+  const { confirming, onClick, onBlur } = useDoubleConfirm();
+
+  const [likeCount, setLikeCount] = useState(comment.likeCount);
+  const [liked, setLiked] = useState(comment.isLiked);
+  const [replyCount, setReplyCount] = useState(comment.replyCount);
+  const [showReplies, setShowReplies] = useState(false);
+  const [showReplyInput, setShowReplyInput] = useState(false);
+  const [replies, setReplies] = useState<Comment[]>([]);
+  const [repliesLoaded, setRepliesLoaded] = useState(false);
+  const [showEditInput, setShowEditInput] = useState(false);
+
+  const handleToggleLike = () => {
+    toggleLike(
+      { targetType: TargetType.Comment, targetId: comment.id }
+    ).then(res => {
+      toast.success(res.data.status ? t("like_success") : t("unlike_success"));
+      setLiked(res.data.status);
+      setLikeCount(res.data.status ? likeCount + 1 : likeCount - 1);
+    }).catch(error => {
+      toast.error(t("like_failed") + ": " + error.message);
+    });
+  }
+
+  const reloadReplies = () => {
+    listComments(
+      {
+        targetType: comment.targetType,
+        targetId: comment.targetId,
+        depth: comment.depth + 1,
+        orderBy: OrderBy.CreatedAt,
+        desc: false,
+        page: 1,
+        size: config.commentsPerPage,
+        commentId: comment.id
+      }
+    ).then(response => {
+      setReplies(response.data);
+      setRepliesLoaded(true);
+    });
+  }
+
+  const toggleReplies = () => {
+    if (!showReplies && !repliesLoaded) {
+      reloadReplies();
+    }
+    setShowReplies(!showReplies);
+  }
+
+  const onCommentEdit = ({ commentContent: newContent, isPrivate }: { commentContent: string, isPrivate: boolean }) => {
+    updateComment({ id: comment.id, content: newContent, isPrivate }).then(() => {
+      toast.success(t("edit_success"));
+      comment.content = newContent;
+      comment.isPrivate = isPrivate;
+      setShowEditInput(false);
+    }).catch(error => {
+      toast.error(t("edit_failed") + ": " + error.message);
+    });
+  }
+
+  const onReply = ({ commentContent, isPrivate }: { commentContent: string, isPrivate: boolean }) => {
+    createComment({
+      targetType: comment.targetType,
+      targetId: comment.targetId,
+      content: commentContent,
+      replyId: comment.id,
+      isPrivate,
+    }).then(() => {
+      toast.success(t("comment_success"));
+      reloadReplies();
+      setShowReplies(true);
+      setShowReplyInput(false);
+      setReplyCount(replyCount + 1);
+    }).catch(error => {
+      toast.error(t("comment_failed") + ": " +
+        error?.response?.data?.message || error?.message
+      );
+    });
+  }
+
+  const onReplyDelete = ({ commentId: replyId }: { commentId: number }) => {
+    deleteComment({ id: replyId }).then(() => {
+      toast.success(t("delete_success"));
+      setReplyCount(replyCount - 1);
+      setReplies(replies.filter(r => r.id !== replyId));
+    }).catch(error => {
+      toast.error(t("delete_failed") + ": " + error.message);
+    });
+  }
+
+  return (
+    <div className="flex">
+      <div className="fade-in">
+        {getGravatarByUser(comment.user)}
+      </div>
+      <div className="flex-1 pl-2 fade-in-up">
+        <div className="font-bold text-base text-slate-800 dark:text-slate-100 fade-in-up">{comment.user.nickname}</div>
+        <p className="text-lg text-slate-600 dark:text-slate-400 fade-in">
+          {
+            comment.isPrivate && <Lock className="inline w-4 h-4 mr-1 mb-1 text-slate-500 dark:text-slate-400" />
+          }
+          {
+            parentComment &&
+            <>{t("reply")} <button onClick={() => toUserProfile(parentComment.user.nickname)} className="text-primary">{parentComment?.user.nickname}</button>: </>
+          }
+          {comment.content}
+        </p>
+        <div className="mt-1 text-xs text-slate-500 dark:text-slate-400 flex items-center gap-4 fade-in">
+          <span>{new Date(comment.updatedAt).toLocaleString()}</span>
+          {/* 点赞按钮 */}
+          <button
+            title={t(liked ? "unlike" : "like")}
+            onClick={handleToggleLike}
+            className={`flex items-center justify-center px-2 py-1 h-5 gap-1 text-xs rounded 
+                        ${liked ? 'bg-primary ' : 'bg-slate-400 hover:bg-slate-600'}
+                         text-primary-foreground dark:text-white dark:hover:bg-slate-500 fade-in`}
+          >
+            <Heart className="w-3 h-3" /> <div>{likeCount}</div>
+          </button>
+          {/* 回复按钮 */}
+          <button
+            title={t("reply")}
+            onClick={() => { setShowReplyInput(!showReplyInput); setShowEditInput(false); }}
+            className={`flex items-center justify-center px-2 py-1 h-5 
+                        text-primary-foreground dark:text-white text-xs 
+                        rounded ${showReplyInput ? "bg-slate-600" : "bg-slate-400"} hover:bg-slate-600 dark:hover:bg-slate-500 fade-in-up`}>
+            <Reply className="w-3 h-3" />
+          </button>
+          {/* 编辑和删除按钮 仅自己的评论可见 */}
+          {user?.id === comment.user.id && (
+            <>
+              <button
+                title={t("edit")}
+                className={`
+                flex items-center justify-center px-2 py-1 h-5 
+                text-primary-foreground dark:text-white text-xs 
+                rounded ${showEditInput ? "bg-slate-600" : "bg-slate-400"} hover:bg-slate-600 dark:hover:bg-slate-500 fade-in-up`}
+                onClick={() => { setShowEditInput(!showEditInput); setShowReplyInput(false); }}
+              >
+                <Pencil className="w-3 h-3" />
+              </button>
+
+              <button
+                title={t("delete")}
+                className={`flex items-center justify-center px-2 py-1 h-5 rounded
+                  text-primary-foreground dark:text-white text-xs 
+                  ${confirming ? 'bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600' : 'bg-slate-400 hover:bg-slate-600 dark:hover:bg-slate-500'} fade-in`}
+                onClick={() => onClick(() => { onCommentDelete({ commentId: comment.id }); })}
+                onBlur={onBlur}
+              >
+
+                <Trash className="w-3 h-3" />
+                {confirming && (
+                  <span className="ml-1 confirm-delete-anim">{t("confirm_delete")}</span>
+                )}
+              </button>
+            </>
+          )}
+
+          {replyCount > 0 &&
+            <button onClick={toggleReplies} className="fade-in-up">
+              {!showReplies ? t("expand_replies", { count: replyCount }) : t("collapse_replies")}
+            </button>
+          }
+        </div>
+        {/* 这俩输入框一次只能显示一个 */}
+        {showReplyInput && !showEditInput && <CommentInput
+          user={user}
+          onCommentSubmitted={onReply}
+        />}
+        {showEditInput && !showReplyInput && <CommentInput
+          user={user}
+          initContent={comment.content}
+          initIsPrivate={comment.isPrivate}
+          onCommentSubmitted={onCommentEdit}
+          isUpdate={true}
+        />}
+        {showReplies && replies.length > 0 && (
+          <div className="mt-4 pl-4 border-l border-slate-300 dark:border-slate-600 space-y-4">
+            {replies.map((reply) => (
+              <CommentItem
+                key={reply.id}
+                user={reply.user}
+                comment={reply}
+                parentComment={comment}
+                onCommentDelete={onReplyDelete}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div >
+  )
+}

web/src/components/neo-comment/index.tsx

@@ -1,27 +1,23 @@
 "use client"
 
-import { clickToUserprofile, useToLogin } from "@/hooks/use-route";
 import { User } from "@/models/user";
 import { useTranslations } from "next-intl";
-import { Suspense, use, useEffect, useState } from "react";
-import NeedLogin from "../common/need-login";
+import { Suspense, useEffect, useState } from "react";
 import { toast } from "sonner";
-import { getGravatarByUser } from "../common/gravatar";
-import { CircleUser, Reply, Trash } from "lucide-react";
-import { Textarea } from "../ui/textarea";
 import { Comment } from "@/models/comment";
 import { createComment, deleteComment, listComments } from "@/api/comment";
 import { TargetType } from "@/models/types";
 import { OrderBy } from "@/models/common";
-import { Separator } from "../ui/separator";
+import { Separator } from "@/components/ui/separator";
 import { getLoginUser } from "@/api/user";
-import { Skeleton } from "../ui/skeleton";
-import { toggleLike } from "@/api/like";
-import { useDoubleConfirm } from "@/hooks/use-double-confirm";
+import { Skeleton } from "@/components/ui/skeleton";
 
 import "./style.css";
+import { CommentInput } from "./comment-input";
+import { CommentItem } from "./comment-item";
+import config from "@/config";
+
 
-const DEFAULT_PAGE_SIZE = 20;
 
 export function CommentSection(
   {
@@ -55,28 +51,28 @@ export function CommentSection(
       orderBy: OrderBy.CreatedAt,
       desc: true,
       page: 1,
-      size: DEFAULT_PAGE_SIZE,
+      size: config.commentsPerPage,
       commentId: 0
     }).then(response => {
       setComments(response.data);
     });
   }, [refreshCommentsKey])
 
-  const onCommentSubmitted = (commentContent: string) => {
+  const onCommentSubmitted = ({ commentContent, isPrivate }: { commentContent: string, isPrivate: boolean }) => {
     createComment({
       targetType,
       targetId,
       content: commentContent,
       replyId: null,
-      isPrivate: false
+      isPrivate,
     }).then(() => {
       toast.success(t("comment_success"));
       setRefreshCommentsKey(k => k + 1);
     })
   }
 
-  const onCommentDelete = (commentId: number) => {
-    deleteComment(commentId).then(() => {
+  const onCommentDelete = ({ commentId }: { commentId: number }) => {
+    deleteComment({ id: commentId }).then(() => {
       toast.success(t("delete_success"));
       setRefreshCommentsKey(k => k + 1);
     }).catch(error => {
@@ -111,156 +107,6 @@ export function CommentSection(
   )
 }
 
-export function CommentInput(
-  { user, onCommentSubmitted, }: { user: User | null, onCommentSubmitted: (commentContent: string) => void }
-) {
-  const t = useTranslations('Comment')
-  const handleToLogin = useToLogin()
-
-  const [commentContent, setCommentContent] = useState("");
-
-  const handleCommentSubmit = async () => {
-    if (!user) {
-      toast.error(<NeedLogin>{t("login_required")}</NeedLogin>);
-      return;
-    }
-    if (!commentContent.trim()) {
-      toast.error(t("content_required"));
-      return;
-    }
-    onCommentSubmitted(commentContent);
-    setCommentContent("");
-  };
-
-  return (
-    <div className="fade-in-up">
-      <div className="flex py-4 fade-in">
-        <div onClick={user ? clickToUserprofile(user.username) : handleToLogin} className="flex-shrink-0 w-10 h-10 fade-in">
-          {user && getGravatarByUser(user)}
-          {!user && <CircleUser className="w-full h-full fade-in" />}
-        </div>
-        <div className="flex-1 pl-2 fade-in-up">
-          <Textarea
-            placeholder={t("placeholder")}
-            className="w-full p-2 border border-gray-300 rounded-md fade-in-up"
-            value={commentContent}
-            onChange={(e) => setCommentContent(e.target.value)}
-          />
-        </div>
-      </div>
-      {commentContent.trim() && (
-        <div className="flex justify-end fade-in-up">
-          <button onClick={handleCommentSubmit} className="px-2 py-1 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors fade-in-up">
-            {t("submit")}
-          </button>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export function CommentItem(
-  {
-    user,
-    comment,
-    parentComment,
-    onCommentDelete,
-  }: {
-    user: User | null,
-    comment: Comment,
-    parentComment: Comment | null,
-    onCommentDelete: (commentId: number) => void,
-  }
-) {
-  const t = useTranslations("Comment")
-  const { confirming, onClick, onBlur } = useDoubleConfirm();
-
-  const [likeCount, setLikeCount] = useState(comment.likeCount);
-  const [liked, setLiked] = useState(comment.isLiked);
-  const [replyCount, setReplyCount] = useState(comment.replyCount);
-  const [showReplies, setShowReplies] = useState(false);
-  const [showReplyInput, setShowReplyInput] = useState(false);
-
-  const handleToggleLike = () => {
-    toggleLike(
-      { targetType: TargetType.Comment, targetId: comment.id }
-    ).then(res => {
-      toast.success(res.data.status ? t("like_success") : t("unlike_success"));
-      setLiked(res.data.status);
-      setLikeCount(res.data.status ? likeCount + 1 : likeCount - 1);
-    }).catch(error => {
-      toast.error(t("like_failed") + ": " + error.message);
-    });
-  }
-
-
-  const onReply = (replyContent: string) => {
-    setShowReplies(true);
-    setShowReplyInput(false);
-    setReplyCount(replyCount + 1);
-  }
-
-  return (
-    <div className="flex">
-      <div className="fade-in">
-        {getGravatarByUser(comment.user)}
-      </div>
-      <div className="flex-1 pl-2 fade-in-up">
-        <div className="font-bold text-base text-slate-800 dark:text-slate-100 fade-in-up">{comment.user.nickname}</div>
-        <p className="text-lg text-slate-600 dark:text-slate-400 fade-in">
-          {
-            parentComment &&
-            <>{t("reply")} <button onClick={clickToUserprofile(parentComment.user.nickname)} className="text-primary">{parentComment?.user.nickname}</button>: </>
-          }
-          {comment.content}
-        </p>
-        <div className="mt-1 text-xs text-slate-500 dark:text-slate-400 flex items-center gap-4 fade-in">
-          <span>{new Date(comment.updatedAt).toLocaleString()}</span>
-          {/* 点赞按钮 */}
-          <button
-            title={t(liked ? "unlike" : "like")}
-            onClick={handleToggleLike}
-            className={`flex items-center justify-center px-2 py-1 h-5 text-xs rounded 
-                        ${liked ? 'bg-primary text-primary-foreground dark:text-white' : 'bg-slate-400 hover:bg-slate-600'}
-                         dark:hover:bg-slate-500 fade-in`}
-          >
-            👍 {likeCount}
-          </button>
-          {/* 回复按钮 */}
-          <button
-            title={t("reply")}
-            onClick={() => setShowReplyInput(!showReplyInput)}
-            className="flex items-center justify-center px-2 py-1 h-5 
-                        text-primary-foreground dark:text-white text-xs 
-                        rounded bg-slate-400 hover:bg-slate-600 dark:hover:bg-slate-500 fade-in-up">
-            <Reply className="w-3 h-3" />
-          </button>
-          {/* 删除按钮 仅自己的评论可见 */}
-          {user?.id === comment.user.id && (
-            <button
-              title={t("delete")}
-              onClick={() => onClick(() => { comment.id && onCommentDelete(comment.id); })}
-              onBlur={onBlur}
-              className={`flex items-center justify-center px-2 py-1 h-5 text-xs rounded bg-red-500 text-white hover:bg-red-600 transition animated-btn fade-in`}
-            >
-              <Trash className="w-3 h-3" />
-              {confirming && (
-                <span className="ml-1 confirm-delete-anim">{t("confirm_delete")}</span>
-              )}
-            </button>)}
-
-          {replyCount > 0 &&
-            <button onClick={() => setShowReplies(!showReplies)} className="fade-in-up">
-              {!showReplies ? t("expand_replies", { count: replyCount }) : t("collapse_replies")}
-            </button>
-          }
-        </div>
-        {showReplyInput && <CommentInput user={user} onCommentSubmitted={onReply} />}
-      </div>
-    </div>
-  )
-}
-
 function CommentLoading() {
   return (
     <div className="space-y-6 py-8">

web/src/components/ui/checkbox.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

web/src/config.ts

@@ -15,6 +15,7 @@ const config = {
     bodyWidth: "80vw",
     bodyWidthMobile: "100vw",
     postsPerPage: 12,
+    commentsPerPage: 20,
     footer: {
         text: "Liteyuki ICP备 1145141919810",
         links: []

web/src/hooks/use-route.ts

@@ -12,11 +12,11 @@ export function useToLogin() {
   }
 }
 
-export function clickToUserprofile(username: string) {
-  const router = useRouter()
-  return () => {
-    router.push(`/user/${username}`)
-  }
+export function useToUserProfile() {
+  const router = useRouter();
+  return (username: string) => {
+    router.push(`/u/${username}`);
+  };
 }
 
 export function clickToPost(postId: number) {

web/src/locales/zh-CN.json

@@ -3,25 +3,30 @@
     "title": "Hello world!"
   },
   "Comment": {
+    "collapse_replies": "收起",
     "comment": "评论",
-    "placeholder": "写你的评论...",
-    "submit": "提交",
-    "login_required": "请先登录后再评论。",
-    "content_required": "评论内容不能为空。",
-    "comment_success": "评论成功！",
     "comment_failed": "评论失败",
-    "delete": "删除",
-    "delete_success": "评论已经删除",
-    "delete_failed": "删除评论失败",
+    "comment_success": "评论成功！",
     "confirm_delete": "确定吗？",
+    "content_required": "评论内容不能为空。",
+    "delete": "删除",
+    "delete_failed": "删除评论失败",
+    "delete_success": "评论已经删除",
+    "edit": "编辑",
+    "edit_failed": "编辑评论失败",
+    "edit_success": "评论已更新",
+    "expand_replies": "展开 {count} 条",
     "like": "点赞",
-    "unlike": "取消点赞",
-    "like_success": "点赞成功",
-    "unlike_success": "已取消点赞",
     "like_failed": "点赞失败",
+    "like_success": "点赞成功",
+    "login_required": "请先登录后再评论。",
+    "placeholder": "写你的评论...",
+    "private": "私密评论",
     "reply": "回复",
-    "expand_replies": "展开 {count} 条回复",
-    "collapse_replies": "收起回复"
+    "submit": "提交",
+    "unlike": "取消点赞",
+    "unlike_success": "已取消点赞",
+    "update": "更新"
   },
   "Login": {
     "welcome": "欢迎回来",

web/src/models/comment.ts

@@ -18,7 +18,5 @@ export interface Comment {
 }
 
 export interface UpdateCommentRequest {
-  id: number
-  content: string
-  isPrivate?: boolean // 可选字段，默认为 false
+  
 }