底部面板标签页 API 允许扩展为 ComfyUI 界面的底部面板添加自定义标签页。这对于添加日志、调试工具或自定义面板等功能非常有用。

​
基本用法

app.registerExtension({
  name: "MyExtension",
  bottomPanelTabs: [
    {
      id: "customTab",
      title: "Custom Tab",
      type: "custom",
      render: (el) => {
        el.innerHTML = '<div>这是我的自定义标签页内容</div>';
      }
    }
  ]
});

​
标签页配置

每个标签页都需要 id、title 和 type，以及一个渲染函数：

{
  id: string,              // 标签页的唯一标识符
  title: string,           // 标签页上显示的标题
  type: string,            // 标签页类型（通常为 "custom"）
  icon?: string,           // 图标类名（可选）
  render: (element) => void // 用于填充标签页内容的函数
}

render 函数会接收一个 DOM 元素，你应在其中插入标签页的内容。

​
交互元素

你可以添加如按钮等交互元素：

app.registerExtension({
  name: "InteractiveTabExample",
  bottomPanelTabs: [
    {
      id: "controlsTab",
      title: "Controls",
      type: "custom",
      render: (el) => {
        el.innerHTML = `
          <div style="padding: 10px;">
            <button id="runBtn">运行工作流</button>
          </div>
        `;
        
        // 添加事件监听器
        el.querySelector('#runBtn').addEventListener('click', () => {
          app.queuePrompt();
        });
      }
    }
  ]
});

​
使用 React 组件

你可以在底部面板标签页中挂载 React 组件：

// 在你的扩展中引入 React 依赖
import React from "react";
import ReactDOM from "react-dom/client";

// 简单的 React 组件
function TabContent() {
  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 内容的扩展
app.registerExtension({
  name: "ReactTabExample",
  bottomPanelTabs: [
    {
      id: "reactTab",
      title: "React Tab",
      type: "custom",
      render: (el) => {
        const container = document.createElement("div");
        container.id = "react-tab-container";
        el.appendChild(container);
        
        // 挂载 React 组件
        ReactDOM.createRoot(container).render(
          <React.StrictMode>
            <TabContent />
          </React.StrictMode>
        );
      }
    }
  ]
});

​
独立注册

你也可以在 registerExtension 之外注册标签页：

app.extensionManager.registerBottomPanelTab({
  id: "standAloneTab",
  title: "Stand-Alone Tab",
  type: "custom",
  render: (el) => {
    el.innerHTML = '<div>此标签页是独立注册的</div>';
  }
});