你可以为 ComfyUI 提供一个设置对象，这些设置会显示在用户打开 ComfyUI 设置面板时。
基本操作
添加一个设置项
import { app } from "../../scripts/app.js";
app.registerExtension({
name: "My Extension",
settings: [
{
id: "example.boolean",
name: "示例布尔设置",
type: "boolean",
defaultValue: false,
},
],
});
id 必须在所有扩展中唯一，并将用于获取设置值。
如果你没有指定分类，那么 id 会通过 . 分割来决定它在设置面板中的显示位置。
- 如果你的
id 不包含 .，它会显示在”其他”分类下，并以你的 id 作为分组标题。
- 如果你的
id 至少包含一个 .，最左边的部分会作为设置分类，第二部分作为分组标题，后续部分会被忽略。
读取设置项
import { app } from "../../scripts/app.js";
if (app.extensionManager.setting.get('example.boolean')) {
console.log("设置已启用。");
} else {
console.log("设置已禁用。");
}
响应设置变化
当用户在设置面板中更改设置时，onChange() 事件处理器会被立即调用。
每次页面加载、扩展注册时也会调用。
{
id: "example.boolean",
name: "示例布尔设置",
type: "boolean",
defaultValue: false,
onChange: (newVal, oldVal) => {
console.log(`设置从 ${oldVal} 变为 ${newVal}`);
},
}
写入设置项
import { app } from "../../scripts/app.js";
try {
await app.extensionManager.setting.set("example.boolean", true);
} catch (error) {
console.error(`更改设置时出错: ${error}`);
}
额外配置
设置类型基于 PrimeVue 组件。
在 attrs 字段中添加 PrimeVue 文档中描述的属性即可为 ComfyUI 设置项配置更多参数。
例如，下面为数字输入框添加了增减按钮：
{
id: "example.number",
name: "示例数字设置",
type: "number",
defaultValue: 0,
attrs: {
showButtons: true,
},
onChange: (newVal, oldVal) => {
console.log(`设置从 ${oldVal} 变为 ${newVal}`);
},
}
布尔值（Boolean）
显示一个开关。
基于 ToggleSwitch PrimeVue 组件。
{
id: "example.boolean",
name: "示例布尔设置",
type: "boolean",
defaultValue: false,
onChange: (newVal, oldVal) => {
console.log(`设置从 ${oldVal} 变为 ${newVal}`);
},
}
文本（Text）
自由文本输入。
基于 InputText PrimeVue 组件。
{
id: "example.text",
name: "示例文本设置",
type: "text",
defaultValue: "Foo",
onChange: (newVal, oldVal) => {
console.log(`设置从 ${oldVal} 变为 ${newVal}`);
},
}
数字（Number）
用于输入数字。
如需允许小数位，请将 maxFractionDigits 属性设置为大于 0 的数字。
基于 InputNumber PrimeVue 组件。
{
id: "example.number",
name: "示例数字设置",
type: "number",
defaultValue: 42,
attrs: {
showButtons: true,
maxFractionDigits: 1,
},
onChange: (newVal, oldVal) => {
console.log(`设置从 ${oldVal} 变为 ${newVal}`);
},
}
滑块（Slider）
允许用户直接输入数字或通过滑块选择。
基于 Slider PrimeVue 组件。不支持区间。
{
id: "example.slider",
name: "示例滑块设置",
type: "slider",
attrs: {
min: -10,
max: 10,
step: 0.5,
},
defaultValue: 0,
onChange: (newVal, oldVal) => {
console.log(`设置从 ${oldVal} 变为 ${newVal}`);
},
}
下拉选择（Combo）
允许用户从下拉列表中选择。
你可以用纯字符串或带 text 和 value 字段的对象提供选项。如果只提供字符串，则会同时作为显示和实际值。
通过 editable: true 属性允许用户输入自定义内容，通过 filter: true 属性允许搜索。
基于 Select PrimeVue 组件。不支持分组。
{
id: "example.combo",
name: "示例下拉设置",
type: "combo",
defaultValue: "first",
options: [
{ text: "我的第一个选项", value: "first" },
"我的第二个选项",
],
attrs: {
editable: true,
filter: true,
},
onChange: (newVal, oldVal) => {
console.log(`设置从 ${oldVal} 变为 ${newVal}`);
},
}
颜色（Color）
允许用户通过颜色选择器选择颜色或输入十六进制颜色值。
注意格式必须为六位十六进制，不支持三位简写。
基于 ColorPicker PrimeVue 组件。
{
id: "example.color",
name: "示例颜色设置",
type: "color",
defaultValue: "ff0000",
onChange: (newVal, oldVal) => {
console.log(`设置从 ${oldVal} 变为 ${newVal}`);
},
}
图片（Image）
允许用户上传图片。
设置会以 data URL 格式保存。
基于 FileUpload PrimeVue 组件。
{
id: "example.image",
name: "示例图片设置",
type: "image",
onChange: (newVal, oldVal) => {
console.log(`设置从 ${oldVal} 变为 ${newVal}`);
},
}
隐藏（Hidden）
隐藏设置不会显示在设置面板，但你可以在代码中读写它们。
{
id: "example.hidden",
name: "示例隐藏设置",
type: "hidden",
}
分类（Categories）
你可以通过 category 字段单独指定设置的分类。
这样可以在不更改 id 的情况下调整分类和命名，不会丢失用户已设置的值。
{
id: "example.boolean",
name: "示例布尔设置",
type: "boolean",
defaultValue: false,
category: ["分类名称", "分组标题", "设置标签"],
}
你可以通过 tooltip 字段添加额外的上下文帮助。这会在字段名后显示一个小的 ℹ︎ 图标，用户悬停时会显示帮助文本。
{
id: "example.boolean",
name: "示例布尔设置",
type: "boolean",
defaultValue: false,
tooltip: "这是一些有用的提示信息",
}
