✨ feat: 重构评论功能，支持删除和点赞，更新国际化文本，优化组件结构

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

@@ -10,7 +10,7 @@ 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-to-login";
+import { useToLogin } from "@/hooks/use-route";
 import NeedLogin from "../common/need-login";
 
 
@@ -57,6 +57,7 @@ export function CommentInput(
             );
         });
     };
+
     return (
         <div className="fade-in-up">
             <div className="flex py-4 fade-in">

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

@@ -16,7 +16,7 @@ import type { User } from "@/models/user";
 import Link from "next/link";
 import "./comment-animations.css";
 
-export function CommentItem({comment, parentComment}:{comment: Comment, parentComment: Comment | null}) {
+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);
@@ -50,6 +50,7 @@ export function CommentItem({comment, parentComment}:{comment: Comment, parentCo
         deleteComment(id)
             .then(() => {
                 toast.success(t("delete_success"));
+                onCommentDelete();
             })
             .catch(error => {
                 toast.error(t("delete_failed") + ": " + error.message);
@@ -143,11 +144,28 @@ function RepliesList({ parentComment }: { parentComment: Comment }) {
         });
     }, [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} />
+                    <CommentItem comment={reply} parentComment={parentComment} onCommentDelete={onCommentDelete} />
                 </div>
             ))}
         </div>

web/src/components/comment/index.tsx

@@ -38,7 +38,7 @@ export default function CommentSection(props: CommentAreaProps) {
       })
   }, [targetType, targetId]);
 
-  const onCommentSubmitted = () => {
+  const onCommentsChange = () => {
     // 重新加载评论列表
     listComments({
       targetType,
@@ -54,17 +54,19 @@ export default function CommentSection(props: CommentAreaProps) {
       })
   }
 
+  // TODO: 支持分页加载更多评论
+
   return (
     <div>
       <Separator className="my-16" />
       <div className="font-bold text-2xl">评论</div>
-      <CommentInput targetType={targetType} targetId={targetId} replyId={0} onCommentSubmitted={onCommentSubmitted} />
+      <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} />
+              <CommentItem comment={comment} parentComment={null} onCommentDelete={onCommentsChange} />
             </div>
           ))}
         </Suspense>