prompt-card.tsx
基本信息
- 类型: React Client 组件
- 路径:
./src/components/prompts/prompt-card.tsx
功能描述
Prompt卡片组件，用于展示单个Prompt的详细信息。支持多种Prompt类型（TEXT、IMAGE、VIDEO、AUDIO、STRUCTURED、SKILL）的展示，包含媒体预览、内容预览、标签、作者信息和交互按钮等功能。支持视频自动播放、图片轮播、变量检测和Skill下载等特性。
导出内容
PromptCard- 主组件PromptCardProps- Props接口
Props 接口
| 属性 | 类型 | 说明 | |
|---|---|---|---|
| prompt | PromptCardProps["prompt"] | Prompt数据对象 | |
| prompt.id | string | Prompt唯一标识 | |
| prompt.slug | string \ | null | Prompt别名 |
| prompt.title | string | Prompt标题 | |
| prompt.description | string \ | null | Prompt描述 |
| prompt.content | string | Prompt内容 | |
| prompt.type | string | Prompt类型 | |
| prompt.structuredFormat | string \ | null | 结构化格式（JSON/YAML） |
| prompt.mediaUrl | string \ | null | 媒体文件URL |
| prompt.isPrivate | boolean | 是否私有 | |
| prompt.voteCount | number | 投票数 | |
| prompt.createdAt | Date | 创建时间 | |
| prompt.author | object | 作者信息 | |
| prompt.contributorCount | number | 贡献者数量（可选） | |
| prompt.contributors | array | 贡献者列表（可选） | |
| prompt.category | object \ | null | 分类信息 |
| prompt.tags | array | 标签列表 | |
| prompt._count | object | 计数信息 | |
| prompt.userExamples | array | 用户示例列表 | |
| showPinButton | boolean | 是否显示置顶按钮 | |
| isPinned | boolean | 是否已置顶 |
依赖
next/link- Next.js链接组件next-intl- 国际化lucide-react- 图标库@/components/ui/badge- 徽章组件@/components/ui/code-view- 代码预览组件@/components/ui/avatar- 头像组件@/components/ui/tooltip- 提示组件@/lib/urls- URL工具@/lib/format- 格式化工具sonner- Toast通知./pin-button- 置顶按钮组件./run-prompt-button- 运行Prompt按钮组件./variable-fill-modal- 变量填充弹窗组件./examples-slider- 示例滑动器组件./audio-player- 音频播放器组件
相关组件
PromptList- Prompt列表组件PinButton- 置顶按钮RunPromptButton- 运行Prompt按钮VariableFillModal- 变量填充弹窗ExamplesSlider- 示例滑动器