variable-fill-modal.md

基本信息

• 类型: React Client 组件
• 路径: ./src/components/prompts/variable-fill-modal.tsx

功能描述

变量填充弹窗组件，用于在复制或运行Prompt前填充变量。支持解析 ${variable:default} 格式的变量，提供输入框供用户填入值，预览最终内容。

导出内容

• VariableFillModal - 主组件
• VariableFillModalProps - Props接口
• hasVariables - 检测内容是否包含变量
• renderContentWithVariables - 渲染带样式的变量预览

Props 接口

属性	类型	说明
content	string	原始Prompt内容
open	boolean	弹窗显示状态
onOpenChange	(open: boolean) => void	状态变更回调
mode	"copy" \	"run"	操作模式
promptId	string	Prompt ID（可选）
categoryName	string	分类名称（可选）
parentCategoryName	string	父分类名称（可选）

变量格式

• ${variableName} - 无默认值
• ${variableName:defaultValue} - 带默认值

依赖

• react - React核心
• next-intl - 国际化
• lucide-react - 图标库
• @/components/ui/dialog - 对话框组件
• @/components/ui/button - 按钮组件
• @/components/ui/input - 输入框组件
• @/components/ui/label - 标签组件
• sonner - Toast通知
• ./run-prompt-button - 运行Prompt按钮
• @/lib/analytics - 分析工具

相关组件

• PromptCard - 集成变量填充
• RunPromptButton - 运行模式使用
• CopyButton - 复制模式使用