prompt-connections.md
基本信息
- 类型: React Client 组件
- 路径:
./src/components/prompts/prompt-connections.tsx
功能描述
Prompt关联组件，用于展示和管理Prompt之间的连接关系。支持两种视图模式：D3力导向图（简单连接）和完整工作流图（复杂流程）。支持添加前驱/后继Prompt，删除连接，测试工作流。
导出内容
PromptConnections - 主组件PromptConnectionsProps - Props接口FlowGraph - 工作流图子组件
Props 接口
| 属性 | 类型 | 说明 |
|---|
| promptId | string | 当前Prompt ID |
| promptTitle | string | 当前Prompt标题 |
| canEdit | boolean | 是否可编辑 |
| currentUserId | string | 当前用户ID（可选） |
| isAdmin | boolean | 是否管理员（可选） |
| buttonOnly | boolean | 仅显示按钮模式 |
| sectionOnly | boolean | 仅显示内容模式 |
| expanded | boolean | 控制展开状态 |
| onExpandChange | (expanded: boolean) => void | 展开状态变更回调 |
| workflowLink | string \ | null | 工作流测试链接 |
数据结构
FlowGraphNode
| 属性 | 类型 | 说明 |
|---|
| id | string | 节点ID |
| title | string | 标题 |
| slug | string \ | null | 别名 |
| description | string \ | null | 描述 |
| content | string | 内容 |
| type | string | 类型 |
| authorId | string | 作者ID |
| authorUsername | string | 作者用户名 |
| authorAvatar | string \ | null | 作者头像 |
| requiresMediaUpload | boolean | 是否需要媒体上传 |
| requiredMediaType | string \ | null | 所需媒体类型 |
| requiredMediaCount | number \ | null | 所需媒体数量 |
| mediaUrl | string \ | null | 媒体URL |
FlowGraphEdge
| 属性 | 类型 | 说明 |
|---|
| source | string | 源节点ID |
| target | string | 目标节点ID |
| label | string | 连接标签 |
依赖
react - React核心next/navigation - Next.js导航next-intl - 国际化d3 - D3可视化库lucide-react - 图标库@/components/ui/button - 按钮组件@/lib/urls - URL工具sonner - Toast通知./add-connection-dialog - 添加连接弹窗
API端点
- GET
/api/prompts/{id}/connections - 获取连接
- GET
/api/prompts/{id}/flow - 获取完整工作流
- DELETE
/api/prompts/{id}/connections/{connId} - 删除连接
相关组件
AddConnectionDialog - 添加连接弹窗PromptDetail - Prompt详情页集成