Patchbay Integrations
錄音室接線盤隱喻的整合展示區：左側輸出埠拖曳纜線插入右側整合插孔，帶垂墜鬆弛的物理曲線與亮起的指示燈。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
1
<PatchbayIntegrations />
安裝
npx shadcn@latest add https://webberui.com/r/patchbay-integrations.json或在 components.json 設定 registries 後，改用 @webberui/patchbay-integrations 安裝。
安裝依賴後，從 registry JSON（/r/patchbay-integrations.json 的 files[0].content）複製 patchbay-integrations.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import * as React from "react";
import {
PatchbayIntegrations,
type PatchbayConnection,
} from "@/components/ui/patchbay-integrations";
const outputs = [
{ id: "events", label: "事件串流" },
{ id: "webhook", label: "Webhook" },
];
const integrations = [
{ id: "slack", label: "Slack", accent: "#4a154b" },
{ id: "github", label: "GitHub" },
{ id: "email", label: "Email" },
];
export function Example() {
const [connections, setConnections] = React.useState<PatchbayConnection[]>([
{ from: "events", to: "slack" },
]);
return (
<PatchbayIntegrations
outputs={outputs}
integrations={integrations}
connections={connections}
onConnectionsChange={setConnections}
/>
);
}非受控用法只要改傳 defaultConnections，元件會自行管理連線狀態：
<PatchbayIntegrations
outputs={outputs}
integrations={integrations}
defaultConnections={[{ from: "events", to: "slack" }]}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
outputs | PatchbayOutput[] | — | 左側輸出埠清單（id / label / 選填 icon） |
integrations | PatchbayIntegration[] | — | 右側整合插孔清單（id / label / 選填 icon / accent） |
connections | PatchbayConnection[] | — | 受控連線陣列；傳入時以外部為準 |
defaultConnections | PatchbayConnection[] | [] | 非受控初始連線陣列 |
onConnectionsChange | (next: PatchbayConnection[]) => void | — | 連線增減時觸發（拖曳與點擊接線皆會呼叫） |
interactive | boolean | true | 是否允許拖曳／點擊接線；false 時為純展示 |
cableSag | number | 1 | 纜線垂墜量倍率，越大越鬆弛 |
label | string | "整合接線盤" | 根容器 aria-label |
className | string | — | 附加樣式 |
型別
interface PatchbayOutput {
id: string;
label: string;
icon?: React.ReactNode;
}
interface PatchbayIntegration {
id: string;
label: string;
icon?: React.ReactNode;
accent?: string; // 品牌強調色（HEX/RGB），套用於纜線與指示燈
}
interface PatchbayConnection {
from: string; // 輸出埠 id
to: string; // 整合插孔 id
}細節
- 纜線以 cubic bézier 產生，控制點向下垂墜，模擬重力鬆弛的接線纜；
cableSag可調整鬆弛程度。 - 端點錨點以插孔小圓的中心即時量測（
ResizeObserver+window resize），容器縮放或重排時纜線會跟著重新落位。 - 一個輸出埠可同時接多個整合，一個整合也可接多個輸出埠；再次拖曳或點擊同一組合會拆線。
- 接線後對應整合的指示燈亮起；懸停、選取或拖曳某輸出埠時，其相連插孔的指示燈會脈動強調。
accent未提供時，纜線與指示燈使用中性色；提供時套用該品牌色。
可及性
- 輸出埠與整合插孔皆為原生
button，可用鍵盤聚焦操作：先以 Enter／Space 選取一個輸出埠（aria-pressed），再對整合插孔按下即可建立或移除連線。 - 選取輸出埠時，各整合插孔的
aria-pressed反映是否已與其相連，aria-label提示「按下建立連線／按下移除連線」。 - 拖曳採用 pointer 事件並具命中半徑，觸控時以
touch-none避免頁面捲動干擾。 - SVG 纜線層為
aria-hidden且pointer-events-none，不干擾底下按鈕的點擊與朗讀。 - 使用者系統開啟「減少動態效果」時，停用纜線畫入與指示燈脈動，連線與亮燈狀態直接呈現。