feat: implement advanced comment features including reply and like functionality

- Added support for nested comments with reply functionality.
- Implemented like/unlike feature for comments and posts.
- Enhanced comment DTO to include reply count, like count, and like status.
- Updated comment and like services to handle new functionalities.
- Created new API endpoints for toggling likes and listing comments.
- Improved UI components for comments to support replies and likes with animations.
- Added localization for new comment-related messages.
- Introduced a TODO list for future enhancements in the comment module.

web/src/components/comment/index.tsx

@@ -2,6 +2,7 @@
 
 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";
@@ -57,13 +58,13 @@ export default function CommentSection(props: CommentAreaProps) {
     <div>
       <Separator className="my-16" />
       <div className="font-bold text-2xl">评论</div>
-      <CommentInput targetType={targetType} targetId={targetId} onCommentSubmitted={onCommentSubmitted} />
+      <CommentInput targetType={targetType} targetId={targetId} replyId={0} onCommentSubmitted={onCommentSubmitted} />
       <div className="mt-4">
         <Suspense fallback={<CommentLoading />}>
-          {comments.map(comment => (
-            <div key={comment.id}>
+          {comments.map((comment, idx) => (
+            <div key={comment.id} className="fade-in-up" style={{ animationDelay: `${idx * 60}ms` }}>
               <Separator className="my-2" />
-              <CommentItem {...comment} />
+              <CommentItem comment={comment} parentComment={null} />
             </div>
           ))}
         </Suspense>
@@ -77,12 +78,12 @@ function CommentLoading() {
   return (
     <div className="space-y-6 py-8">
       {[...Array(3)].map((_, i) => (
-        <div key={i} className="flex gap-3">
-          <Skeleton className="w-10 h-10 rounded-full" />
+        <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" />
-            <Skeleton className="h-4 w-3/4" />
-            <Skeleton className="h-4 w-2/3" />
+            <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>
       ))}