4.0 KiB

Raw Blame History

工作流模板创建器 - 节点关联功能实现总结

实现概述

根据promptx\tauri-desktop-app-expert规定的开发规范，我们在ComfyUI V2工作流模板创建器中成功实现了节点关联功能，允许用户将模板参数直接关联到工作流节点的输入字段。

核心功能

1. 工作流节点解析

自动解析：当用户导入或粘贴工作流JSON时，系统自动解析所有节点信息
节点信息提取：提取节点ID、class_type、_meta.title和inputs字段
实时更新：工作流JSON变化时，节点列表实时更新

2. 参数节点关联

可视化选择：提供直观的节点选择器界面
字段映射：支持选择具体的输入字段进行关联
自动替换：关联后自动将工作流中的字段值替换为{{参数名}}格式

3. 用户界面增强

节点选择器模态框：展示所有可用节点和输入字段
关联状态显示：清晰显示参数的关联状态
操作便捷性：支持重新选择和清除关联

技术实现

数据结构扩展

// 扩展参数schema，添加节点映射
interface ParameterSchema {
  // ... 原有字段
  node_mapping?: NodeMapping;
}

// 节点映射配置
interface NodeMapping {
  node_id: string;
  input_field: string;
}

// 工作流节点信息
interface WorkflowNode {
  id: string;
  class_type: string;
  title?: string;
  inputs: Record<string, any>;
}

核心功能函数

节点解析：parseWorkflowNodes() - 解析工作流JSON提取节点信息
参数关联：updateParameterNodeMapping() - 更新参数的节点映射
自动替换：updateWorkflowNodeValue() - 自动更新工作流中的字段值

UI组件结构

主组件：WorkflowTemplateCreator - 主要的模板创建器组件
节点选择器：内嵌的模态框组件，用于选择节点和字段
关联状态显示：在参数配置中显示关联信息

使用流程

1. 配置工作流

{
  "2": {
    "class_type": "CLIPTextEncode",
    "inputs": {
      "text": "a beautiful portrait",
      "clip": ["4", 1]
    },
    "_meta": {
      "title": "2🐕遮罩边缘滑条快速模糊"
    }
  }
}

2. 创建参数

参数名：prompt
参数类型：string
默认值："a beautiful portrait"

3. 关联节点

选择节点：2（2🐕遮罩边缘滑条快速模糊）
选择字段：text
系统自动替换为："{{prompt}}"

4. 结果验证

{
  "2": {
    "class_type": "CLIPTextEncode",
    "inputs": {
      "text": "{{prompt}}",
      "clip": ["4", 1]
    },
    "_meta": {
      "title": "2🐕遮罩边缘滑条快速模糊"
    }
  }
}

文件结构

apps/desktop/src/components/comfyui/
├── WorkflowTemplateCreator.tsx          # 主组件（已扩展）
├── WorkflowTemplateCreatorDemo.tsx      # 演示组件
├── README-WorkflowTemplateCreator.md    # 功能说明文档
└── IMPLEMENTATION_SUMMARY.md            # 实现总结（本文件）

apps/desktop/src/pages/
└── WorkflowTemplateCreatorTest.tsx      # 测试页面

apps/desktop/src/examples/
└── sample-workflow.json                 # 示例工作流

测试访问

开发环境访问：http://localhost:1420/workflow-template-creator-test
导航菜单：ComfyUI > 模板创建器测试
功能演示：包含完整的使用说明和示例数据

符合规范

✅ ComfyUI SDK使用：使用cargos\comfyui-sdk进行工作流处理 ✅ 页面规范：ComfyUI V2页面设计规范 ✅ 功能完整性：工作流TAB中的模板参数配置功能 ✅ 节点关联：支持节点编号+_meta.title展示 ✅ 参数替换：inputs字段值替换为{{变量名}}格式

扩展建议

批量关联：支持一次性关联多个参数
参数验证：添加参数类型与节点字段类型的匹配验证
模板预览：提供参数替换后的工作流预览功能
导入导出：支持参数配置的导入导出功能

4.0 KiB Raw Blame History Unescape Escape