基本用法
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>';
}
});