diff --git a/apps/desktop/src/components/comfyui/WorkflowTemplateCreator.tsx b/apps/desktop/src/components/comfyui/WorkflowTemplateCreator.tsx index a7f08f9..15e7661 100644 --- a/apps/desktop/src/components/comfyui/WorkflowTemplateCreator.tsx +++ b/apps/desktop/src/components/comfyui/WorkflowTemplateCreator.tsx @@ -36,6 +36,8 @@ interface ParameterSchema { min?: number; max?: number; pattern?: string; + items?: ParameterSchema; + properties?: Record; } interface WorkflowTemplateData { @@ -91,6 +93,7 @@ export const WorkflowTemplateCreator: React.FC = ( const [errors, setErrors] = useState>({}); const [isSaving, setIsSaving] = useState(false); const [workflowJsonText, setWorkflowJsonText] = useState('{}'); + const [newParameterName, setNewParameterName] = useState(''); // 重置表单数据 useEffect(() => { @@ -148,6 +151,38 @@ export const WorkflowTemplateCreator: React.FC = ( } }; + // 更新参数 + const updateParameter = (paramName: string, schema: ParameterSchema) => { + setTemplateData(prev => ({ + ...prev, + parameters: { ...prev.parameters, [paramName]: schema } + })); + }; + + // 删除参数 + const removeParameter = (paramName: string) => { + setTemplateData(prev => { + const newParameters = { ...prev.parameters }; + delete newParameters[paramName]; + return { ...prev, parameters: newParameters }; + }); + }; + + // 添加新参数 + const addParameter = () => { + if (!newParameterName.trim()) return; + + const newSchema: ParameterSchema = { + param_type: 'string', + required: false, + description: '', + default: '', + }; + + updateParameter(newParameterName.trim(), newSchema); + setNewParameterName(''); + }; + // 验证表单 const validateForm = (): boolean => { const newErrors: Record = {}; @@ -471,15 +506,185 @@ export const WorkflowTemplateCreator: React.FC = ( {/* 参数配置标签页 */} {activeTab === 'parameters' && (
-
+
+

模板参数配置

- -

参数配置

+ setNewParameterName(e.target.value)} + placeholder="参数名称" + className="px-3 py-1 border border-gray-300 rounded text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent" + onKeyDown={(e) => e.key === 'Enter' && addParameter()} + /> +
-

- 参数配置功能正在开发中,敬请期待... +

+ +
+
+ + 参数说明 +
+

+ 参数用于在工作流中定义可配置的变量。在工作流JSON中使用 {"{{参数名}}"} 语法引用参数。 + 例如:{"{{input_image}}"}

+ + {Object.keys(templateData.parameters).length === 0 ? ( +
+ +

暂无参数配置

+

添加参数来让模板更加灵活可配置

+
+ ) : ( +
+ {Object.entries(templateData.parameters).map(([paramName, schema]) => ( +
+
+

{paramName}

+ +
+ +
+
+ + +
+ +
+ + updateParameter(paramName, { + ...schema, + default: schema.param_type === 'number' ? Number(e.target.value) : e.target.value + })} + className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" + placeholder="设置默认值" + /> +
+ +
+ + updateParameter(paramName, { + ...schema, + description: e.target.value + })} + className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" + placeholder="参数描述" + /> +
+ +
+ +
+ + {schema.param_type === 'number' && ( +
+
+ + updateParameter(paramName, { + ...schema, + min: e.target.value ? Number(e.target.value) : undefined + })} + className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" + placeholder="最小值" + /> +
+
+ + updateParameter(paramName, { + ...schema, + max: e.target.value ? Number(e.target.value) : undefined + })} + className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" + placeholder="最大值" + /> +
+
+ )} + + {schema.param_type === 'string' && ( +
+ + updateParameter(paramName, { + ...schema, + pattern: e.target.value || undefined + })} + className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" + placeholder="例如:^[a-zA-Z0-9]+$" + /> +
+ )} +
+
+ ))} +
+ )}
)}