基本信息
- 类型: React Client Component
- 路径:
./src/components/comments/comment-item.tsx
功能描述
单个评论项组件，展示评论内容、作者信息、投票按钮、操作菜单等。支持嵌套回复显示、投票、回复、删除、标记等功能。
Props 接口
| 属性 | 类型 | 描述 |
|---|
id | string | 评论唯一标识 |
content | string | 评论内容 |
createdAt | string | 创建时间 |
updatedAt | string | 更新时间 |
parentId | `string \ | null` | 父评论ID |
flagged | boolean | 是否被标记 |
author | object | 作者信息 |
score | number | 评论得分 |
userVote | number | 用户投票状态 |
replyCount | number | 回复数量 |
| 属性 | 类型 | 描述 |
|---|
comment | Comment | 评论数据 |
promptId | string | 提示词ID |
currentUserId | `string \ | undefined` | 当前用户ID |
isAdmin | boolean | 是否为管理员 |
isLoggedIn | boolean | 是否已登录 |
locale | string | 语言区域 |
replies | Comment[] | 直接回复列表 |
allComments | Comment[] | 所有评论列表（用于递归回复） |
onCommentAdded | (comment: Comment) => void | 添加评论回调 |
onCommentDeleted | (commentId: string) => void | 删除评论回调 |
onCommentUpdated | (comment: Comment) => void | 更新评论回调 |
depth | number | 嵌套深度（默认 0） |
依赖导入
next/link - Next.js 链接组件next-intl - 国际化翻译@/lib/date - 日期格式化@/lib/utils - 工具函数lucide-react - 图标库@/components/ui/avatar - 头像组件@/components/ui/button - 按钮组件@/components/ui/dropdown-menu - 下拉菜单组件@/components/ui/alert-dialog - 确认对话框组件sonner - 通知提示./comment-form - 评论表单组件
主要功能
- 显示评论作者头像和用户名
- 显示管理员身份标识
- 显示评论创建时间（相对时间）
- 显示评论内容（支持自动链接URL）
- 投票功能（点赞/踩），未登录提示
- 回复功能（深度限制为5层）
- 删除功能（作者或管理员可操作）
- 标记功能（仅管理员可操作）
- 被踩的评论降低透明度
- 被标记的评论显示红色背景
- 嵌套回复的展开/折叠
- 深度超过0时显示左侧缩进线
工具函数
autoLinkText
将评论内容中的URL自动转换为可点击的链接，添加安全属性。
状态管理
| 状态 | 类型 | 描述 |
|---|
isReplying | boolean | 是否显示回复表单 |
isVoting | boolean | 投票操作加载状态 |
showDeleteDialog | boolean | 删除确认对话框显示状态 |
isDeleting | boolean | 删除操作加载状态 |
isFlagging | boolean | 标记操作加载状态 |
localScore | number | 本地评论得分（实时反馈） |
localUserVote | number | 本地用户投票状态 |
localFlagged | boolean | 本地标记状态 |
isCollapsed | boolean | 回复折叠状态 |