基本信息
- 类型: React Client Component
- 路径:
./src/components/comments/comment-form.tsx
功能描述
评论表单组件，用于发表评论或回复。支持未登录用户引导登录，包含文本输入框和提交按钮。
Props 接口
| 属性 | 类型 | 描述 |
|---|
promptId | string | 提示词ID |
parentId | `string \ | undefined` | 父评论ID（用于回复） |
isLoggedIn | boolean | 用户是否已登录 |
onCommentAdded | (comment: Comment) => void | 评论添加成功回调 |
onCancel | `() => void \ | undefined` | 取消回调（可选） |
placeholder | `string \ | undefined` | 文本框占位符（可选） |
autoFocus | boolean | 是否自动聚焦（默认 false） |
| 属性 | 类型 | 描述 |
|---|
id | string | 评论唯一标识 |
content | string | 评论内容 |
createdAt | string | 创建时间 |
updatedAt | string | 更新时间 |
parentId | `string \ | null` | 父评论ID |
flagged | boolean | 是否被标记 |
author | object | 作者信息对象 |
score | number | 评论得分 |
userVote | number | 用户投票状态 |
replyCount | number | 回复数量 |
依赖导入
next/link - Next.js 链接组件next-intl - 国际化翻译lucide-react - 图标库（Loader2, LogIn）@/components/ui/button - 按钮组件@/components/ui/textarea - 文本域组件@/components/ui/dialog - 对话框组件sonner - 通知提示@/lib/analytics - 分析统计
主要功能
- 提供多行文本输入框输入评论内容
- 支持自动聚焦（用于回复场景）
- 自定义占位符文本
- 提交按钮根据是否有 parentId 显示"回复"或"发表评论"
- 空内容时禁用提交按钮
- 提交时显示加载状态
- 未登录用户点击提交时弹出登录引导对话框
- 支持取消操作（如果提供 onCancel 回调）
- 发布成功后清空输入框并触发回调
- 触发评论发布的分析事件
状态管理
| 状态 | 类型 | 描述 |
|---|
content | string | 评论内容 |
isLoading | boolean | 提交加载状态 |
showLoginModal | boolean | 登录引导弹窗显示状态 |