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.
2025-09-23 09:36:23 +00:00 · 2025-09-09 00:24:25 +08:00
parent 382132f550
commit dd7641bf6e
28 changed files with 422 additions and 101 deletions
--- a/README.md
+++ b/README.md
@ -9,7 +9,7 @@
 - [ ] 支持文章置顶
 - [x] OIDC认证和注册
 - [x] 支持多用户
- [ ] 高级评论功能(后端已实装)
+- [x] 高级评论功能(后端已实装)
 - [ ] 支持多语言
 - [x] 移动端适配
 - [ ] 后台管理
@ -24,7 +24,7 @@ services:
  frontend:
    container_name: neo-blog-frontend
    environment:
-      - BACKEND_URL=http://neo-blog-backend:8888  # 此处请保证和后端服务的名称一致
+      - BACKEND_URL=http://neo-blog-backend:8888  # 此处的后端地址用于前端服务器访问后端服务
    image: snowykami/neo-blog-frontend:latest
    networks:
      - internal-network
@ -38,7 +38,7 @@ services:
    container_name: neo-blog-backend
    image: snowykami/neo-blog-backend:latest
    environment:
-      - BASE_URL=https://neo-blog-dev.sfkm.me # 此处是外部用户访问端点，也许你使用了nginx等反向代理
+      - BASE_URL=https://neo-blog-dev.sfkm.me # 此处是外部用户访问端点，用于在某些情况下后端可以生成正确的URL
    networks:
      - internal-network
    restart: always
@ -72,7 +72,7 @@ helm repo update
 helm install neo-blog git.liteyuki.org/neo-blog
 ```

-### 使用源码构建部署(除开发场景外不推荐)
+### 使用源码构建部署(不推荐)

 需要准备：go、nodejs、pnpm

@ -132,5 +132,10 @@ pnpm install
 pnpm dev
 ```

+### 联合调试
+
+默认情况下，本机启动后端和前端服务器无须额外配置即可互联，若后端在不同的主机上，需要在.env.development(自己创建)中配置`BACKEND_URL`变量
+
 ## 环境变量配置
+
 后端所有环境变量及其示例在[`.env.example`](./.env.example)文件中
--- a/TODO.md
+++ b/TODO.md
@ -0,0 +1,12 @@
+# TODO List
+
+## 主页模块
+
+- [ ]主页文章列表
+- [ ]主页侧边栏卡片列表
+
+## 评论模块
+
+- [ ]评论列表
+- [ ]评论输入框
+- [ ]评论回复功能
--- a/internal/controller/v1/comment.go
+++ b/internal/controller/v1/comment.go
@ -107,6 +107,16 @@ func (cc *CommentController) GetCommentList(ctx context.Context, c *app.RequestC
 		resps.BadRequest(c, "无效的 target_id")
 		return
 	}
+	commentIDStr := c.Query("comment_id")
+	var commentID uint
+	if commentIDStr != "" {
+		commentIDInt, err := strconv.Atoi(commentIDStr)
+		if err != nil {
+			resps.BadRequest(c, "无效的 comment_id")
+			return
+		}
+		commentID = uint(commentIDInt)
+	}
 	req := dto.GetCommentListReq{
 		Desc:       pagination.Desc,
 		OrderBy:    pagination.OrderBy,
@ -115,6 +125,7 @@ func (cc *CommentController) GetCommentList(ctx context.Context, c *app.RequestC
 		Depth:      depthInt,
 		TargetID:   uint(targetID),
 		TargetType: c.Query("target_type"),
+		CommentID:  commentID,
 	}
 	resp, err := cc.service.GetCommentList(ctx, &req)
 	if err != nil {
--- a/internal/controller/v1/like.go
+++ b/internal/controller/v1/like.go
@ -2,15 +2,39 @@ package v1

 import (
 	"context"
+
 	"github.com/cloudwego/hertz/pkg/app"
+	"github.com/cloudwego/hertz/pkg/common/utils"
+	"github.com/sirupsen/logrus"
+	"github.com/snowykami/neo-blog/internal/dto"
+	"github.com/snowykami/neo-blog/internal/service"
+	"github.com/snowykami/neo-blog/pkg/errs"
+	"github.com/snowykami/neo-blog/pkg/resps"
 )

-type LikeController struct{}
+type LikeController struct {
+	service *service.LikeService
+}

 func NewLikeController() *LikeController {
-	return &LikeController{}
+	return &LikeController{
+		service: service.NewLikeService(),
+	}
 }

 func (lc *LikeController) ToggleLike(ctx context.Context, c *app.RequestContext) {
-	// Implementation for creating a like
+	var toggleLikeReq dto.ToggleLikeReq
+	if err := c.BindAndValidate(&toggleLikeReq); err != nil {
+		logrus.Error(err)
+		resps.BadRequest(c, resps.ErrParamInvalid)
+		return
+	}
+	liked, err := lc.service.ToggleLike(ctx, toggleLikeReq.TargetID, toggleLikeReq.TargetType)
+	if err != nil {
+		serviceErr := errs.AsServiceError(err)
+		logrus.Error(serviceErr.Error())
+		resps.Custom(c, serviceErr.Code, serviceErr.Message, nil)
+		return
+	}
+	resps.Ok(c, resps.Success, utils.H{"status": liked})
 }
--- a/internal/controller/v1/user.go
+++ b/internal/controller/v1/user.go
@ -3,6 +3,8 @@ package v1
 import (
 	"context"
 	"fmt"
+	"strconv"
+
 	"github.com/cloudwego/hertz/pkg/app"
 	"github.com/cloudwego/hertz/pkg/common/utils"
 	"github.com/snowykami/neo-blog/internal/ctxutils"
@ -10,7 +12,6 @@ import (
 	"github.com/snowykami/neo-blog/internal/service"
 	"github.com/snowykami/neo-blog/pkg/errs"
 	"github.com/snowykami/neo-blog/pkg/resps"
-	"strconv"
 )

 type UserController struct {
--- a/internal/dto/comment.go
+++ b/internal/dto/comment.go
@ -9,7 +9,10 @@ type CommentDto struct {
 	Depth      int     `json:"depth"`    // 评论的层级深度
 	CreatedAt  string  `json:"created_at"`
 	UpdatedAt  string  `json:"updated_at"`
-	User       UserDto `json:"user"` // 评论的
+	User       UserDto `json:"user"`        // 评论的
+	ReplyCount int64   `json:"reply_count"` // 回复数量
+	LikeCount  uint64  `json:"like_count"`  // 点赞数量
+	IsLiked    bool    `json:"is_liked"`    // 当前用户是否点赞
 }

 type CreateCommentReq struct {
@ -29,8 +32,9 @@ type UpdateCommentReq struct {
 type GetCommentListReq struct {
 	TargetID   uint   `json:"target_id" binding:"required"`
 	TargetType string `json:"target_type" binding:"required"`
-	OrderBy    string `json:"order_by"` // 排序方式
-	Page       uint64 `json:"page"`     // 页码
+	CommentID  uint   `json:"comment_id"` // 获取某条评论的所有子评论
+	OrderBy    string `json:"order_by"`   // 排序方式
+	Page       uint64 `json:"page"`       // 页码
 	Size       uint64 `json:"size"`
 	Desc       bool   `json:"desc"`
 	Depth      int    `json:"depth"` // 评论的层级深度
--- a/internal/dto/like.go
+++ b/internal/dto/like.go
@ -1 +1,6 @@
 package dto
+
+type ToggleLikeReq struct {
+	TargetID   uint   `json:"target_id" binding:"required"`
+	TargetType string `json:"target_type" binding:"required"` // 目标类型，如 "post", "comment"
+}
--- a/internal/model/like.go
+++ b/internal/model/like.go
@ -2,6 +2,7 @@ package model

 import (
 	"fmt"
+
 	"github.com/snowykami/neo-blog/pkg/constant"
 	"gorm.io/gorm"
 )
@ -32,10 +33,10 @@ func (l *Like) AfterDelete(tx *gorm.DB) (err error) {
 	switch l.TargetType {
 	case constant.TargetTypePost:
 		return tx.Model(&Post{}).Where("id = ?", l.TargetID).
-			UpdateColumn("like_count", gorm.Expr("GREATEST(like_count - ?, 0)", 1)).Error
+			UpdateColumn("like_count", gorm.Expr("like_count - ?", 1)).Error
 	case constant.TargetTypeComment:
 		return tx.Model(&Comment{}).Where("id = ?", l.TargetID).
-			UpdateColumn("like_count", gorm.Expr("GREATEST(like_count - ?, 0)", 1)).Error
+			UpdateColumn("like_count", gorm.Expr("like_count - ?", 1)).Error
 	default:
 		return fmt.Errorf("不支持的目标类型: %s", l.TargetType)
 	}
--- a/internal/repo/comment.go
+++ b/internal/repo/comment.go
@ -9,6 +9,7 @@ import (
 	"github.com/snowykami/neo-blog/internal/model"
 	"github.com/snowykami/neo-blog/pkg/constant"
 	"github.com/snowykami/neo-blog/pkg/errs"
+	"github.com/snowykami/neo-blog/pkg/utils"
 	"gorm.io/gorm"
 )

@ -92,16 +93,15 @@ func (cr *CommentRepo) CreateComment(comment *model.Comment) error {
 			}
 			depth = parentComment.Depth + 1
 		}
-
+		if depth > utils.Env.GetAsInt(constant.EnvKeyMaxReplyDepth, constant.MaxReplyDepthDefault) {
+			return errs.New(http.StatusBadRequest, "exceeded maximum reply depth", nil)
+		}
 		comment.Depth = depth
-
 		if err := tx.Create(comment).Error; err != nil {
 			return err
 		}
-
 		return nil
 	})
-
 	return err
 }

@ -172,7 +172,7 @@ func (cr *CommentRepo) GetComment(commentID string) (*model.Comment, error) {
 	return &comment, nil
 }

-func (cr *CommentRepo) ListComments(currentUserID uint, targetID uint, targetType string, page, size uint64, orderBy string, desc bool, depth int) ([]model.Comment, error) {
+func (cr *CommentRepo) ListComments(currentUserID, targetID, commentID uint, targetType string, page, size uint64, orderBy string, desc bool, depth int) ([]model.Comment, error) {
 	if !slices.Contains(constant.OrderByEnumComment, orderBy) {
 		return nil, errs.New(http.StatusBadRequest, "invalid order_by parameter", nil)
 	}
@ -189,13 +189,17 @@ func (cr *CommentRepo) ListComments(currentUserID uint, targetID uint, targetTyp

 	query := GetDB().Model(&model.Comment{}).Preload("User")

+	if commentID > 0 {
+		query = query.Where("reply_id = ?", commentID)
+	}
+
 	if currentUserID > 0 {
 		query = query.Where("(is_private = ? OR (is_private = ? AND (user_id = ? OR user_id = ?)))", false, true, currentUserID, masterID)
 	} else {
 		query = query.Where("is_private = ?", false)
 	}

-	if depth > 0 {
+	if depth >= 0 {
 		query = query.Where("target_id = ? AND target_type = ? AND depth = ?", targetID, targetType, depth)
 	} else {
 		query = query.Where("target_id = ? AND target_type = ?", targetID, targetType)
@ -208,3 +212,11 @@ func (cr *CommentRepo) ListComments(currentUserID uint, targetID uint, targetTyp

 	return items, nil
 }
+
+func (cr *CommentRepo) CountReplyComments(commentID uint) (int64, error) {
+	var count int64
+	if err := GetDB().Model(&model.Comment{}).Where("reply_id = ?", commentID).Count(&count).Error; err != nil {
+		return 0, err
+	}
+	return count, nil
+}
--- a/internal/repo/like.go
+++ b/internal/repo/like.go
@ -2,6 +2,8 @@ package repo

 import (
 	"errors"
+
+	"github.com/sirupsen/logrus"
 	"github.com/snowykami/neo-blog/internal/model"
 	"github.com/snowykami/neo-blog/pkg/constant"
 	"gorm.io/gorm"
@ -11,24 +13,28 @@ type likeRepo struct{}

 var Like = &likeRepo{}

-func (l *likeRepo) ToggleLike(userID, targetID uint, targetType string) error {
+func (l *likeRepo) ToggleLike(userID, targetID uint, targetType string) (bool, error) {
 	err := l.checkTargetType(targetType)
 	if err != nil {
-		return err
+		return false, err
 	}
-	return GetDB().Transaction(func(tx *gorm.DB) error {
-		// 判断是否已点赞
+	var finalStatus bool
+	err = GetDB().Transaction(func(tx *gorm.DB) error {
 		isLiked, err := l.IsLiked(userID, targetID, targetType)
 		if err != nil {
+			logrus.Error(err)
 			return err
 		}
 		if isLiked {
-			// 已点赞，执行取消点赞逻辑
-			if err := tx.Where("target_type = ? AND target_id = ? AND user_id = ?", targetType, targetID, userID).Delete(&model.Like{}).Error; err != nil {
+			if err :=
+				tx.Where("target_type = ? AND target_id = ? AND user_id = ?", targetType, targetID, userID).
+					Delete(&model.Like{TargetType: targetType, TargetID: targetID, UserID: userID}).
+					Error; err != nil {
+				logrus.Error(err)
 				return err
 			}
+			finalStatus = false
 		} else {
-			// 未点赞，执行新增点赞逻辑
 			like := &model.Like{
 				TargetType: targetType,
 				TargetID:   targetID,
@ -37,6 +43,7 @@ func (l *likeRepo) ToggleLike(userID, targetID uint, targetType string) error {
 			if err := tx.Create(like).Error; err != nil {
 				return err
 			}
+			finalStatus = true
 		}
 		// 重新计算点赞数量
 		var count int64
@ -58,6 +65,7 @@ func (l *likeRepo) ToggleLike(userID, targetID uint, targetType string) error {
 		}
 		return nil
 	})
+	return finalStatus, err
 }

 // IsLiked 检查是否点赞
--- a/internal/repo/post.go
+++ b/internal/repo/post.go
@ -1,11 +1,12 @@
 package repo

 import (
+	"net/http"
+	"slices"
+
 	"github.com/snowykami/neo-blog/internal/model"
 	"github.com/snowykami/neo-blog/pkg/constant"
 	"github.com/snowykami/neo-blog/pkg/errs"
-	"net/http"
-	"slices"
 )

 type postRepo struct{}
@ -73,13 +74,13 @@ func (p *postRepo) ListPosts(currentUserID uint, keywords []string, page, size u
 	return items, nil
 }

-func (p *postRepo) ToggleLikePost(postID uint, userID uint) error {
+func (p *postRepo) ToggleLikePost(postID uint, userID uint) (bool, error) {
 	if postID == 0 || userID == 0 {
-		return errs.New(http.StatusBadRequest, "invalid post ID or user ID", nil)
+		return false, errs.New(http.StatusBadRequest, "invalid post ID or user ID", nil)
 	}
-	err := Like.ToggleLike(userID, postID, constant.TargetTypePost)
+	liked, err := Like.ToggleLike(userID, postID, constant.TargetTypePost)
 	if err != nil {
-		return err
+		return false, err
 	}
-	return nil
+	return liked, nil
 }
--- a/internal/service/comment.go
+++ b/internal/service/comment.go
@ -130,7 +130,7 @@ func (cs *CommentService) GetCommentList(ctx context.Context, req *dto.GetCommen
 		currentUserID = currentUser.ID
 	}

-	comments, err := repo.Comment.ListComments(currentUserID, req.TargetID, req.TargetType, req.Page, req.Size, req.OrderBy, req.Desc, req.Depth)
+	comments, err := repo.Comment.ListComments(currentUserID, req.TargetID, req.CommentID, req.TargetType, req.Page, req.Size, req.OrderBy, req.Desc, req.Depth)
 	if err != nil {
 		return nil, errs.New(errs.ErrInternalServer.Code, "failed to list comments", err)
 	}
@ -138,15 +138,25 @@ func (cs *CommentService) GetCommentList(ctx context.Context, req *dto.GetCommen
 	commentDtos := make([]dto.CommentDto, 0)

 	for _, comment := range comments {
+		replyCount, _ := repo.Comment.CountReplyComments(comment.ID)
+		isLiked := false
+		if currentUserID != 0 {
+			isLiked, _ = repo.Like.IsLiked(currentUserID, comment.ID, constant.TargetTypeComment)
+		}
+
 		commentDto := dto.CommentDto{
 			ID:         comment.ID,
 			Content:    comment.Content,
 			TargetID:   comment.TargetID,
 			TargetType: comment.TargetType,
+			ReplyID:    comment.ReplyID,
 			CreatedAt:  comment.CreatedAt.String(),
 			UpdatedAt:  comment.UpdatedAt.String(),
 			Depth:      comment.Depth,
 			User:       comment.User.ToDto(),
+			ReplyCount: replyCount,
+			LikeCount:  comment.LikeCount,
+			IsLiked:    isLiked,
 		}
 		commentDtos = append(commentDtos, commentDto)
 	}
--- a/internal/service/like.go
+++ b/internal/service/like.go
@ -1 +1,23 @@
 package service
+
+import (
+	"context"
+
+	"github.com/snowykami/neo-blog/internal/ctxutils"
+	"github.com/snowykami/neo-blog/internal/repo"
+	"github.com/snowykami/neo-blog/pkg/errs"
+)
+
+type LikeService struct{}
+
+func NewLikeService() *LikeService {
+	return &LikeService{}
+}
+
+func (ls *LikeService) ToggleLike(ctx context.Context, targetID uint, targetType string) (bool, error) {
+	currentUser, ok := ctxutils.GetCurrentUser(ctx)
+	if !ok {
+		return false, errs.ErrUnauthorized
+	}
+	return repo.Like.ToggleLike(currentUser.ID, targetID, targetType)
+}
--- a/internal/service/post.go
+++ b/internal/service/post.go
@ -2,12 +2,13 @@ package service

 import (
 	"context"
+	"strconv"
+
 	"github.com/snowykami/neo-blog/internal/ctxutils"
 	"github.com/snowykami/neo-blog/internal/dto"
 	"github.com/snowykami/neo-blog/internal/model"
 	"github.com/snowykami/neo-blog/internal/repo"
 	"github.com/snowykami/neo-blog/pkg/errs"
-	"strconv"
 )

 type PostService struct{}
@ -126,27 +127,28 @@ func (p *PostService) ListPosts(ctx context.Context, req *dto.ListPostReq) ([]*d
 	return postDtos, nil
 }

-func (p *PostService) ToggleLikePost(ctx context.Context, id string) error {
+func (p *PostService) ToggleLikePost(ctx context.Context, id string) (bool, error) {
 	currentUser, ok := ctxutils.GetCurrentUser(ctx)
 	if !ok {
-		return errs.ErrUnauthorized
+		return false, errs.ErrUnauthorized
 	}
 	if id == "" {
-		return errs.ErrBadRequest
+		return false, errs.ErrBadRequest
 	}
 	post, err := repo.Post.GetPostByID(id)
 	if err != nil {
-		return errs.New(errs.ErrNotFound.Code, "post not found", err)
+		return false, errs.New(errs.ErrNotFound.Code, "post not found", err)
 	}
 	if post.UserID == currentUser.ID {
-		return errs.ErrForbidden
+		return false, errs.ErrForbidden
 	}
 	idInt, err := strconv.ParseUint(id, 10, 64)
 	if err != nil {
-		return errs.New(errs.ErrBadRequest.Code, "invalid post ID", err)
+		return false, errs.New(errs.ErrBadRequest.Code, "invalid post ID", err)
 	}
-	if err := repo.Post.ToggleLikePost(uint(idInt), currentUser.ID); err != nil {
-		return errs.ErrInternalServer
+	liked, err := repo.Post.ToggleLikePost(uint(idInt), currentUser.ID)
+	if err != nil {
+		return false, errs.ErrInternalServer
 	}
-	return nil
+	return liked, nil
 }
--- a/pkg/constant/constant.go
+++ b/pkg/constant/constant.go
@ -10,12 +10,13 @@ const (
 	ModeProd                               = "prod"
 	RoleUser                               = "user"
 	RoleAdmin                              = "admin"
-	EnvKeyBaseUrl                          = "BASE_URL"       // 环境变量：基础URL
-	EnvKeyLogLevel                         = "LOG_LEVEL"      // 环境变量：日志级别
-	EnvKeyMode                             = "MODE"           // 环境变量：运行模式
-	EnvKeyJwtSecrete                       = "JWT_SECRET"     // 环境变量：JWT密钥
-	EnvKeyPasswordSalt                     = "PASSWORD_SALT"  // 环境变量：密码盐
-	EnvKeyTokenDuration                    = "TOKEN_DURATION" // 环境变量：令牌有效期
+	EnvKeyBaseUrl                          = "BASE_URL"        // 环境变量：基础URL
+	EnvKeyLogLevel                         = "LOG_LEVEL"       // 环境变量：日志级别
+	EnvKeyMode                             = "MODE"            // 环境变量：运行模式
+	EnvKeyJwtSecrete                       = "JWT_SECRET"      // 环境变量：JWT密钥
+	EnvKeyPasswordSalt                     = "PASSWORD_SALT"   // 环境变量：密码盐
+	EnvKeyTokenDuration                    = "TOKEN_DURATION"  // 环境变量：令牌有效期
+	EnvKeyMaxReplyDepth                    = "MAX_REPLY_DEPTH" // 环境变量：最大回复深度
 	EnvKeyTokenDurationDefault             = 300
 	EnvKeyRefreshTokenDurationDefault      = 604800
 	EnvKeyRefreshTokenDuration             = "REFRESH_TOKEN_DURATION"               // 环境变量：刷新令牌有效期
@ -35,6 +36,7 @@ const (
 	OrderByCommentCount                    = "comment_count" // 按评论数排序
 	OrderByViewCount                       = "view_count"    // 按浏览量排序
 	OrderByHeat                            = "heat"
+	MaxReplyDepthDefault                   = 3  // 默认最大回复深度
 	HeatFactorViewWeight                   = 1  // 热度因子：浏览量权重
 	HeatFactorLikeWeight                   = 5  // 热度因子：点赞权重
 	HeatFactorCommentWeight                = 10 // 热度因子：评论权重
--- a/pkg/utils/env.go
+++ b/pkg/utils/env.go
@ -2,11 +2,12 @@ package utils

 import (
 	"fmt"
+	"os"
+	"strconv"
+
 	"github.com/joho/godotenv"
 	"github.com/sirupsen/logrus"
 	"github.com/snowykami/neo-blog/pkg/constant"
-	"os"
-	"strconv"
 )

 var (
--- a/web/src/api/comment.ts
+++ b/web/src/api/comment.ts
@ -32,6 +32,7 @@ export interface ListCommentsParams {
  desc?: boolean
  page?: number
  size?: number
+  commentId?: number
 }

 export async function listComments(params: ListCommentsParams): Promise<BaseResponse<Comment[]>> {
@ -43,6 +44,7 @@ export async function listComments(params: ListCommentsParams): Promise<BaseResp
    desc = true,
    page = 1,
    size = 10,
+    commentId = 0,
  } = params
  const res = await axiosClient.get<BaseResponse<Comment[]>>(`/comment/list`, {
    params: {
@ -52,7 +54,8 @@ export async function listComments(params: ListCommentsParams): Promise<BaseResp
      orderBy,
      desc,
      page,
-      size
+      size,
+      commentId,
    }
  })
  return res.data
--- a/web/src/api/like.ts
+++ b/web/src/api/like.ts
@ -0,0 +1,11 @@
+import axiosClient from './client'
+import type { BaseResponse } from '@/models/resp'
+import { TargetType } from '@/models/types'
+
+
+export async function toggleLike(
+    { targetType, targetId }: { targetType: TargetType, targetId: number },
+): Promise<BaseResponse<{ status: boolean }>> {
+    const res = await axiosClient.put<BaseResponse<{ status: boolean }>>('/like/toggle', { targetType, targetId })
+    return res.data
+}
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@ -112,6 +112,10 @@
  --sidebar-ring: oklch(0.488 0.243 264.376);
 }

+:root {
+  --animation-duration: 0.6s;
+}
+
@layer base {
  * {
    @apply border-border outline-ring/50;
--- a/web/src/components/comment/comment-animations.css
+++ b/web/src/components/comment/comment-animations.css
@ -0,0 +1,47 @@
+/* 评论区原生动画：淡入、上移 */
+.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);
+  }
+}
--- a/web/src/components/comment/comment-input.tsx
+++ b/web/src/components/comment/comment-input.tsx
@ -13,9 +13,13 @@ import { TargetType } from "@/models/types";
 import { useToLogin } from "@/hooks/use-to-login";
 import NeedLogin from "../common/need-login";

+
+import "./comment-animations.css";
+
 export function CommentInput(
-    { targetId, targetType, onCommentSubmitted }: { targetId: number, targetType: TargetType, onCommentSubmitted: () => void }
+    { 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);
@ -41,6 +45,8 @@ export function CommentInput(
            targetType: targetType,
            targetId: targetId,
            content: commentContent,
+            replyId: replyId,
+            isPrivate: false,
        }).then(response => {
            setCommentContent("");
            toast.success(t("comment_success"));
@ -52,25 +58,25 @@ export function CommentInput(
        });
    };
    return (
-        <div>
-            <div className="flex py-4">
+        <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">
+                <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" />}
+                    {!user && <CircleUser className="w-full h-full fade-in" />}
                </div>
                {/* Input Area */}
-                <div className="flex-1 pl-2">
+                <div className="flex-1 pl-2 fade-in-up">
                    <Textarea
                        placeholder={t("placeholder")}
-                        className="w-full p-2 border border-gray-300 rounded-md"
+                        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">
-                <button onClick={handleCommentSubmit} className="px-2 py-1 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors">
+            <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>
--- a/web/src/components/comment/comment-item.tsx
+++ b/web/src/components/comment/comment-item.tsx
@ -1,42 +1,155 @@
 "use client";

 import type { Comment } from "@/models/comment";
-import { CardHeader, CardTitle } from "@/components/ui/card";
 import { getGravatarByUser } from "@/components/common/gravatar";
-import { useState, useEffect } from "react";
-import { get } from "http";
+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}:{comment: Comment, parentComment: Comment | null}) {
+    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"));
+            })
+            .catch(error => {
+                toast.error(t("delete_failed") + ": " + error.message);
+            });
+    }
+
+    const onReplySubmitted = () => {
+        setReplyCount(replyCount + 1);
+        setShowReplyInput(false);
+        setShowReplies(true);
+    }

-export function CommentItem(comment: Comment) {
-    const [replies, setReplies] = useState<Comment[]>([]);
-    const [loadingReplies, setLoadingReplies] = useState(false);
    return (
-        <div className="flex">
-            <div>
+        <div className="flex fade-in-up">
+            <div className="fade-in">
                {getGravatarByUser(comment.user)}
            </div>
-            <div className="flex-1 pl-2">
-                <div className="font-bold">{comment.user.nickname}</div>
-                <p className="text-xs text-slate-600 dark:text-slate-400">{comment.content}</p>
-                <div className="mt-1 text-xs text-slate-500 dark:text-slate-400">
-                    {new Date(comment.updatedAt).toLocaleString()}
+            <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 ReplyItem({ reply }: { reply: Comment }) {
+// 一个评论的回复区域组件
+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])
+
    return (
-        <div className="bg-gray-50 dark:bg-slate-700 shadow-sm rounded-lg p-4 mb-2 ml-4">
-            <CardHeader>
-                <CardTitle className="text-sm font-semibold text-slate-800 dark:text-slate-100">
-                    {reply.user.nickname}
-                </CardTitle>
-            </CardHeader>
-            <p className="text-xs text-slate-600 dark:text-slate-400">{reply.content}</p>
-            <div className="mt-1 text-xs text-slate-500 dark:text-slate-400">
-                {new Date(reply.updatedAt).toLocaleString()}
-            </div>
+        <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} />
+                </div>
+            ))}
        </div>
-    );
+    )
 }
--- a/web/src/components/comment/index.tsx
+++ b/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>
      ))}
--- a/web/src/components/login/login-form.tsx
+++ b/web/src/components/login/login-form.tsx
@ -77,7 +77,8 @@ export function LoginForm({
                      <LoginWithOidc
                        key={uniqueKey}
                        // 这个REDIRECT_BACK需要前端自己拼接，传给后端服务器，后端服务器拿来响应给前端另一个页面获取，然后改变路由   
-                        // 因为这个是我暑假那会写的，后面因为其他事情太忙了，好久没看了，忘了为什么当时要这么设计了，在弄清楚之前先保持这样                   
+                        // 因为这个是我暑假那会写的，后面因为其他事情太忙了，好久没看了，忘了为什么当时要这么设计了，在弄清楚之前先保持这样   
+                        // 貌似是因为oidc认证时是后端响应重定向的，所以前端只能把redirect_back传给后端，由后端再传回来；普通登录时，这个参数可以被前端直接拿到进行路由跳转
                        loginUrl={config.loginUrl.replace("REDIRECT_BACK", encodeURIComponent(`?redirect_back=${redirectBack}`))}
                        displayName={config.displayName}
                        icon={config.icon}
--- a/web/src/locales/zh-CN.json
+++ b/web/src/locales/zh-CN.json
@ -3,12 +3,21 @@
    "title": "Hello world!"
  },
  "Comment": {
-    "placeholder": "写下你的评论...",
+    "placeholder": "写你的评论...",
    "submit": "提交",
    "login_required": "请先登录后再评论。",
    "content_required": "评论内容不能为空。",
    "comment_success": "评论提交成功！",
-    "comment_failed": "评论提交失败"
+    "comment_failed": "评论提交失败",
+    "delete": "删除",
+    "delete_success": "评论删除成功",
+    "confirm_delete": "确定删除？",
+    "like_success": "点赞评论成功",
+    "unlike_success": "取消点赞成功",
+    "like_failed": "点赞失败",
+    "reply": "回复",
+    "expand_replies": "展开 {count} 条回复",
+    "collapse_replies": "收起回复"
  },
  "Login": {
    "welcome": "欢迎回来",
--- a/web/src/models/comment.ts
+++ b/web/src/models/comment.ts
@ -12,14 +12,17 @@ export interface Comment {
    createdAt: string
    updatedAt: string
    user: User
+    replyCount: number
+    likeCount: number
+    isLiked: boolean
 }

 export interface CreateCommentRequest {
    targetType: TargetType
    targetId: number
    content: string
-    replyId?: number // 可选字段，默认为 null
-    isPrivate?: boolean // 可选字段，默认为 false
+    replyId: number | null// 可选字段，默认为 null
+    isPrivate: boolean// 可选字段，默认为 false
 }

 export interface UpdateCommentRequest {
--- a/web/src/models/like.tsx
+++ b/web/src/models/like.tsx
--- a/web/src/models/types.ts
+++ b/web/src/models/types.ts
@ -1,8 +1,10 @@
+
 // 目标类型枚举
 export enum TargetType {
    Post = "post",
    Page = "page",
    Article = "article",
+    Comment = "comment",
    Video = "video",
    Image = "image",
    Other = "other"