> 本文档抓取自官方文档中心（2026-10-10 快照），具体功能以实际产品为准。 # 图片节点多图参考连接功能 ## 功能概述 图片节点（image）支持通过**紫色参考端口**接收其他节点的图片作为参考图。连接后，参考图片显示在图片节点的参考图预览列表中。点击"编辑图片"时，所有参考图片的URL会一起传递给生图接口。 ## 支持的参考来源节点类型 | 节点类型 | type 值 | 图片字段 | 说明 | |-|-|-|-| | 图片节点 | `image` | `data.url` 或 `data.preview` | 支持循环引用检查 | | 角色节点 | `character` | `data.reference_image` | 角色参考图 | | 场景节点 | `location` | `data.reference_image` | 场景参考图 | | 道具节点 | `props` | `data.reference_image` | 道具参考图 | ## 连接方式 ### 方式一：从来源节点拖拽到参考端口 从角色/场景/道具/图片节点的**输出端口**（output port）拖拽到目标图片节点的**紫色参考端口**（reference port），松开鼠标即可建立连接。 ### 方式二：直接释放在参考端口附近 拖拽连接线到目标图片节点的紫色参考端口 50px 范围内自动吸附连接。 ## 连接限制 - **数量限制**：默认图生图模型最多 5 张参考图，其他模型最多 13 张（具体以所选模型为准） - **循环引用检查**：仅对图片节点间的连接进行循环引用检查 - **重复连接**：不允许同一来源节点重复连接到同一目标节点 ## 参考图显示 连接建立后，目标图片节点会显示参考图预览区域： - 显示参考图数量徽标 - 每张参考图缩略图可点击放大预览 - 角色/场景/道具参考图显示来源类型和名称作为 tooltip - 每张图片右上角有 `×` 按钮可移除单个参考连接 ## 编辑图片时的参考图传递 点击"编辑图片"按钮时： 1. 收集所有参考连接的来源节点 2. 根据节点类型获取对应的图片URL： - 图片节点：`data.url` - 角色/场景/道具节点：`data.reference_image` 3. 同时生成参考图描述后缀（`promptSuffix`），原图占据图1，参考图从图2开始编号。格式如：`图2是赵公子，图3是林枫，图4是顶级西餐厅天瑞阁所在地点，图5是镀金劳斯莱斯。` - 角色节点：`图N是{角色名}` - 场景节点：`图N是{场景名}` - 道具节点：`图N是{道具名}` - 图片节点：不生成描述，仅传递URL 4. 将描述后缀追加到提示词末尾，与宫格生图的 `reference_images_description` 保持一致 5. 将所有参考图URL和带描述的提示词传递给 `generateEditedImage` 接口 ## 连接线样式 参考连接线为**紫色虚线**，与普通连接线（灰色实线）区分。 ## 工作流保存与恢复 参考连接存储在 `state.referenceConnections` 数组中，格式： ```json { "id": 1, "from": 源节点ID, "to": 目标图片节点ID } ``` 工作流恢复时自动重建连接并更新参考图显示。 ## 删除节点的影响 当删除一个作为参考来源的节点时（角色/场景/道具/图片），相关的参考连接会自动清除，受影响的目标图片节点会自动更新参考图显示。 ## 涉及文件 - `web/js/nodes.js`：`updateReferenceImages()` 参考图显示、`referencePort` mouseup 连接建立、编辑按钮参考图URL收集 - `web/js/events.js`：拖拽连接的 mousemove 高亮和 mouseup 连接建立 - `web/js/canvas.js`：`removeNode()` 中参考连接清理 - `web/js/workflow.js`：工作流恢复时调用 `updateReferenceImages()` - `web/css/video_workflow.css`：参考连接线和参考图预览样式