代理接力工作區｜React 元件

多個代理工作區以 3D 翻轉輪流登場，每個工作區跑一段假任務進度，完成後把成果交棒給下一位，最後彙整成總結果。

把多代理流程演成一場接力：上方是代理接力軌，目前那位高亮、已完成的打勾；中央舞台是目前代理的工作區，步驟 log 逐行打出、右側進度環跟著填滿；做完後舞台以 3D 翻轉換到下一位，同時一顆「成果膠囊」從舊卡飛到接力軌的下一位頭像，再落進新卡的輸入區。最後一棒完成後翻出總結卡，彙整每位的產出。適合用在產品介紹頁說明「一個任務被拆成幾段、誰接手做什麼」。

把這個效果裝進你的專案

在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。

npx webberui@latest add "https://webberui.com/r/agent-relay-workspaces.json?t=<安裝 token>"

還沒有專案，或安裝遇到問題？看快速開始 →

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

自動播放autoPlay

逐行間隔（ms）lineInterval

450

交棒停頓（ms）handoffDelay

600

強調色accent

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

編輯中的呼叫預設屬性

<AgentRelayWorkspaces/>

    </div>
  );
}

完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。

安裝

npx webberui@latest add "https://webberui.com/r/agent-relay-workspaces.json?t=<安裝 token>"

或在 components.json 設定 registries 後，改用 @webberui/agent-relay-workspaces 安裝。

使用

import {
  AgentRelayWorkspaces,
  type RelayAgent,
} from "@/components/ui/agent-relay-workspaces";

const agents: RelayAgent[] = [
  {
    id: "collector",
    name: "資料收集員",
    role: "資料收集",
    steps: ["讀取 3 個帳戶交易…", "合併 10 月份明細", "輸出交易總表"],
    output: "286 筆交易明細",
  },
  {
    id: "analyst",
    name: "分析員",
    role: "數據分析",
    steps: ["計算月營收與毛利", "與上月同期比較", "產出 2 張圖表"],
    output: "營收分析與 2 張圖表",
  },
];

<AgentRelayWorkspaces
  agents={agents}
  result={<p>月結報告已完成：4 頁、2 張圖表</p>}
  onComplete={() => console.log("接力完成")}
/>;

Props

Prop	型別	預設值	說明
`agents`	`RelayAgent[]`	—	依接力順序排列的代理清單
`result`	`ReactNode`	—	全部完成後顯示於總結卡下方的自訂內容
`autoPlay`	`boolean`	`true`	是否自動播放接力；變動時同步播放狀態
`lineInterval`	`number`	`450`	log 每新增一行的間隔（ms），同時寫入 `--wb-agent-relay-line`
`handoffDelay`	`number`	`600`	工作區全部完成後、交棒前的停頓（ms）
`accent`	`string`	—	強調色；未提供時使用 `--wb-agent-relay-accent`（預設 `#8b5cf6`）
`index`	`number`	—	受控的目前代理索引（0 起算；等於 `agents.length` 代表已完成並顯示總結卡）
`defaultIndex`	`number`	`0`	非受控模式的初始代理索引
`onIndexChange`	`(index: number) => void`	—	目前代理索引變動時回呼（含按「重來」回到 0）
`onComplete`	`() => void`	—	最後一位代理完成、進入總結卡時回呼
`className`	`string`	—	透傳到最外層容器

RelayAgent

欄位	型別	預設值	說明
`id`	`string`	—	唯一識別碼
`name`	`string`	—	代理名稱，顯示於接力軌與工作區標題
`role`	`string`	—	角色說明，例如「對帳員」
`icon`	`ReactNode`	—	頭像圖示；未提供時使用預設機器人圖示
`steps`	`string[]`	—	工作區 log 的步驟清單，依序逐行打出
`output`	`string`	—	完成後交棒給下一位的產出，顯示在成果膠囊上

另外具名匯出 RelayAgent 與 AgentRelayWorkspacesProps 型別。

細節

節奏：每 lineInterval 新增一行 log，新行左側先是轉動的狀態點，下一行出現時變成勾；全部行完成後進度環滿格，停 handoffDelay 再交棒。單一代理的總時長約為（行數 + 1）× lineInterval + handoffDelay
翻轉換場：舞台加上 perspective: 1200px，舊卡 rotateY 0 → -90°（ease-in），新卡 90° → 0（ease-out），兩段比例為 280：320。總時長讀自 CSS 變數 --wb-agent-relay-flip（預設 600ms），可在主題中覆寫
交棒：成果膠囊以 layoutId 共享版面動畫（spring stiffness 260、damping 26）先從舊卡底部飛到接力軌下一位頭像下方，等新卡翻入後再落入新卡的「接收」區。為什麼分三段：同一個 layoutId 同時只能出現在一個位置，逐段切換才量得到乾淨的起訖點
回看：點接力軌上已完成的代理會顯示它的工作區（完成狀態）並暫停自動播放；按播放、或點目前代理即回到進行中的工作區
受控模式：傳 index 與 onIndexChange 即可由外部掌握目前是第幾棒；外部改索引時，該代理的進度自動從頭開始
CSS 變數：--wb-agent-relay-flip（翻轉總時長）、--wb-agent-relay-accent（強調色）、--wb-agent-relay-line（log 與進度環的過渡時長，由 lineInterval 寫入）

可及性

接力軌為 role="tablist"，每位代理與總結各是一個 role="tab"，aria-selected 標示目前顯示的工作區；以左右方向鍵、Home、End 在可選的分頁間移動（roving tabindex），尚未輪到的代理為 aria-disabled
工作區為 role="tabpanel" 並以 aria-labelledby 對應分頁；log 為 role="log"、aria-live="polite"，每行附「完成／進行中／等待中」的螢幕閱讀器文字
提供暫停／播放與重來按鈕（WCAG 2.2.2 暫停、停止、隱藏），按鈕皆為 type="button" 並有 focus-visible 外框
3D 翻轉的卡片設定 backface-visibility: hidden，翻到背面時不會露出鏡像內容
使用者系統開啟「減少動態效果」時，工作區改為短暫交叉淡切、不做 3D 翻轉，成果膠囊不飛行而是直接出現在新卡，log 一次顯示全部步驟（狀態點改為靜態圖示，依原節奏逐一打勾）

代理接力工作區

把這個效果裝進你的專案

Playground

安裝

使用

Props

RelayAgent

細節

可及性

本頁目錄