基本用法
app.extensionManager.registerSidebarTab({
id: "customSidebar",
icon: "pi pi-compass",
title: "自定义标签页",
tooltip: "我的自定义侧边栏标签页",
type: "custom",
render: (el) => {
el.innerHTML = '<div>这是我的自定义侧边栏内容</div>';
}
});
标签页配置
每个标签页需要以下属性：{
id: string, // 标签页的唯一标识符
icon: string, // 标签按钮的图标类名
title: string, // 标签页标题文本
tooltip?: string, // 悬停时的提示文本（可选）
type: string, // 标签页类型（通常为 "custom"）
render: (element) => void // 用于填充标签页内容的函数
}
render 函数会接收一个 DOM 元素，你应在其中插入标签页的内容。
图标选项
侧边栏标签页图标可使用多种图标集：- PrimeVue 图标：
pi pi-[icon-name]（如pi pi-home） - Material Design 图标：
mdi mdi-[icon-name]（如mdi mdi-robot） - Font Awesome 图标：
fa-[style] fa-[icon-name]（如fa-solid fa-star）
有状态标签页示例
你可以创建带有状态的标签页：app.extensionManager.registerSidebarTab({
id: "statefulTab",
icon: "pi pi-list",
title: "笔记",
type: "custom",
render: (el) => {
// 创建元素
const container = document.createElement('div');
container.style.padding = '10px';
const notepad = document.createElement('textarea');
notepad.style.width = '100%';
notepad.style.height = '200px';
notepad.style.marginBottom = '10px';
// 加载已保存内容（如有）
const savedContent = localStorage.getItem('comfyui-notes');
if (savedContent) {
notepad.value = savedContent;
}
// 自动保存内容
notepad.addEventListener('input', () => {
localStorage.setItem('comfyui-notes', notepad.value);
});
// 组装 UI
container.appendChild(notepad);
el.appendChild(container);
}
});
使用 React 组件
你可以在侧边栏标签页中挂载 React 组件：// 在你的扩展中引入 React 依赖
import React from "react";
import ReactDOM from "react-dom/client";
// 注册带有 React 内容的侧边栏标签页
app.extensionManager.registerSidebarTab({
id: "reactSidebar",
icon: "mdi mdi-react",
title: "React 标签页",
type: "custom",
render: (el) => {
const container = document.createElement("div");
container.id = "react-sidebar-container";
el.appendChild(container);
// 定义一个简单的 React 组件
function SidebarContent() {
const [count, setCount] = React.useState(0);
return (
<div style={{ padding: "10px" }}>
<h3>React 侧边栏</h3>
<p>计数：{count}</p>
<button onClick={() => setCount(count + 1)}>
递增
</button>
</div>
);
}
// 挂载 React 组件
ReactDOM.createRoot(container).render(
<React.StrictMode>
<SidebarContent />
</React.StrictMode>
);
}
});
动态内容更新
你可以根据图变化动态更新侧边栏内容：app.extensionManager.registerSidebarTab({
id: "dynamicSidebar",
icon: "pi pi-chart-line",
title: "统计信息",
type: "custom",
render: (el) => {
const container = document.createElement('div');
container.style.padding = '10px';
el.appendChild(container);
// 更新统计信息的函数
function updateStats() {
const stats = {
nodes: app.graph._nodes.length,
connections: Object.keys(app.graph.links).length
};
container.innerHTML = `
<h3>工作流统计</h3>
<ul>
<li>节点数：${stats.nodes}</li>
<li>连接数：${stats.connections}</li>
</ul>
`;
}
// 初始更新
updateStats();
// 监听图变化
const api = app.api;
api.addEventListener("graphChanged", updateStats);
// 标签页销毁时清理监听器
return () => {
api.removeEventListener("graphChanged", updateStats);
};
}
});