基本信息
- 类型: React Client Component
- 路径:
./src/components/comments/comment-section.tsx
功能描述
评论区块组件，展示提示词的完整评论列表。支持加载评论、发表评论、删除评论、排序评论等功能。是评论系统的顶层容器组件。
Props 接口
| 属性 | 类型 | 描述 |
|---|
id | string | 评论唯一标识 |
content | string | 评论内容 |
createdAt | string | 创建时间（ISO 格式） |
updatedAt | string | 更新时间（ISO 格式） |
parentId | `string \ | null` | 父评论ID（用于回复） |
flagged | boolean | 是否被标记 |
author | object | 评论作者信息 |
author.id | string | 作者ID |
author.name | `string \ | null` | 作者昵称 |
author.username | string | 作者用户名 |
author.avatar | `string \ | null` | 作者头像URL |
author.role | string | 作者角色 |
score | number | 评论得分（点赞数） |
userVote | number | 当前用户的投票状态 |
replyCount | number | 回复数量 |
| 属性 | 类型 | 描述 |
|---|
promptId | string | 提示词ID |
currentUserId | `string \ | undefined` | 当前用户ID |
isAdmin | boolean | 当前用户是否为管理员 |
isLoggedIn | boolean | 用户是否已登录 |
locale | string | 当前语言区域 |
依赖导入
next-intl - 国际化翻译lucide-react - 图标库（MessageSquare, Loader2）sonner - 通知提示./comment-form - 评论表单组件./comment-item - 评论项组件
主要功能
- 从 API 加载评论列表
/api/prompts/{id}/comments
- 显示评论总数
- 渲染评论表单（支持添加新评论）
- 渲染根评论列表（不含回复）
- 支持评论排序（按得分降序，同分按时间升序）
- 处理评论添加、删除、更新回调
- 递归删除评论及其所有回复
- 显示加载状态和无评论提示
状态管理
| 状态 | 类型 | 描述 |
|---|
comments | Comment[] | 评论列表 |
isLoading | boolean | 加载状态 |