顶部菜单栏

顶部菜单栏 API 允许扩展为 ComfyUI 的顶部菜单栏添加自定义菜单项。这对于提供高级功能或不常用命令的访问非常有用。

​

基本用法

app.registerExtension({
  name: "MyExtension",
  // 定义命令
  commands: [
    { 
      id: "myCommand", 
      label: "我的命令", 
      function: () => { alert("命令已执行！"); } 
    }
  ],
  // 将命令添加到菜单
  menuCommands: [
    { 
      path: ["扩展", "我的扩展"], 
      commands: ["myCommand"] 
    }
  ]
});

命令定义方式与 命令与快捷键绑定 API 相同。详细定义命令请参见该页面。

​

命令配置

每个命令都需要 id、label 和 function：

{
  id: string,              // 命令的唯一标识符
  label: string,           // 命令显示名称
  function: () => void     // 命令被触发时执行的函数
}

​

菜单配置

menuCommands 数组定义了命令在菜单结构中的位置：

{
  path: string[],          // 表示菜单层级的数组
  commands: string[]       // 要添加到该位置的命令 ID 数组
}

path 数组指定菜单层级。例如，["文件", "导出"] 会将命令添加到”文件”菜单下的”导出”子菜单。

​

菜单示例

​

添加到已有菜单

app.registerExtension({
  name: "MenuExamples",
  commands: [
    { 
      id: "saveAsImage", 
      label: "另存为图片", 
      function: () => { 
        // 保存画布为图片的代码
      } 
    },
    { 
      id: "exportWorkflow", 
      label: "导出工作流", 
      function: () => { 
        // 导出工作流的代码
      } 
    }
  ],
  menuCommands: [
    // 添加到文件菜单
    { 
      path: ["文件"], 
      commands: ["saveAsImage", "exportWorkflow"] 
    }
  ]
});

​

创建子菜单结构

app.registerExtension({
  name: "SubmenuExample",
  commands: [
    { 
      id: "option1", 
      label: "选项 1", 
      function: () => { console.log("选项 1"); } 
    },
    { 
      id: "option2", 
      label: "选项 2", 
      function: () => { console.log("选项 2"); } 
    },
    { 
      id: "suboption1", 
      label: "子选项 1", 
      function: () => { console.log("子选项 1"); } 
    }
  ],
  menuCommands: [
    // 创建嵌套菜单结构
    { 
      path: ["扩展", "我的工具"], 
      commands: ["option1", "option2"] 
    },
    { 
      path: ["扩展", "我的工具", "高级"], 
      commands: ["suboption1"] 
    }
  ]
});

​

多个菜单位置

你可以将同一个命令添加到多个菜单位置：

app.registerExtension({
  name: "MultiLocationExample",
  commands: [
    { 
      id: "helpCommand", 
      label: "获取帮助", 
      function: () => { window.open("https://docs.example.com", "_blank"); } 
    }
  ],
  menuCommands: [
    // 添加到帮助菜单
    { 
      path: ["帮助"], 
      commands: ["helpCommand"] 
    },
    // 也添加到扩展菜单
    { 
      path: ["扩展"], 
      commands: ["helpCommand"] 
    }
  ]
});

命令可以与其他 ComfyUI API（如设置）配合使用。关于设置 API 的更多信息，请参见 设置 API 文档。