多來源合流佇列｜免費 React 元件

多來源合流佇列 React 元件：電子郵件、電話、表單、櫃台等來源的請求從各自的圖示沿弧線飛入同一條佇列，每筆保留來源徽章，點來源膠囊可多選篩選，支援自動播放與暫停。

把多個管道進來的請求收進同一條佇列。上方是 3–6 個來源膠囊（圖示、名稱、累計數），下方是佇列清單；每有新項目加入——無論是受控 items 新增了 id，或 autoPlay 依 script 依序播放——就會從對應來源膠囊發射一顆小圓點，沿二次貝茲曲線飛向佇列頂端，抵達後新列插入、既有列以 spring 往下推，新列底色以強調色閃一下後淡去。每列保留來源徽章、標題、客戶、相對時間與狀態；點來源膠囊可多選篩選，超過 maxItems 時最舊一列淡出。

把這個效果裝進你的專案

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

npx webberui@latest add multi-source-queue

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

Playground

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

自動播放autoPlay

節奏（ms）interval

1400

最多列數maxItems

強調色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">

編輯中的呼叫預設屬性

<MultiSourceQueue/>

    </div>
  );
}

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

安裝

npx webberui@latest add https://webberui.com/r/multi-source-queue.json

或在 components.json 設定 registries 後，改用 @webberui/multi-source-queue 安裝。

使用

import { Mail, Phone } from "lucide-react";
import { MultiSourceQueue } from "@/components/ui/multi-source-queue";

const sources = [
  { id: "email", label: "電子郵件", icon: <Mail />, color: "#3b82f6" },
  { id: "phone", label: "電話", icon: <Phone />, color: "#f59e0b" },
];

// items 由舊到新排列；push 新項目時會從來源膠囊飛入佇列頂端
<MultiSourceQueue
  sources={sources}
  items={[
    { id: "r1", sourceId: "email", title: "洗衣機漏水", customer: "王小姐", status: "待處理" },
  ]}
  maxItems={8}
  onFilterChange={(filter) => console.log(filter)}
/>

Props

Prop	型別	預設值	說明
`sources`	`MultiSourceQueueSource[]`	—	來源清單，建議 3–6 個
`items`	`MultiSourceQueueItem[]`	—	佇列項目（舊到新排列）；新增的 id 會從來源膠囊飛入佇列頂端，移除的 id 會從佇列移除
`filter`	`string[]`	—	受控的來源篩選（來源 id 陣列，空陣列表示顯示全部）
`defaultFilter`	`string[]`	`[]`	非受控模式的初始篩選
`onFilterChange`	`(filter: string[]) => void`	—	篩選變動時回呼
`autoPlay`	`boolean`	`false`	是否依 `script` 自動依序加入項目（附暫停鈕）
`interval`	`number`	`1400`	自動播放的間隔（ms）
`script`	`MultiSourceQueueItem[]`	—	自動播放時依序加入的項目；播完會從頭循環
`maxItems`	`number`	`8`	佇列最多保留幾列，超過時最舊一列淡出
`accent`	`string`	—	強調色（新列閃色與焦點框）；未提供時沿用 `--wb-multi-source-accent` 變數
`onItemArrive`	`(item: MultiSourceQueueItem) => void`	—	項目抵達佇列（飛行結束、插入列表）時回呼
`className`	`string`	—	透傳到最外層容器

MultiSourceQueueSource

欄位	型別	預設值	說明
`id`	`string`	—	來源識別碼，對應項目的 `sourceId`
`label`	`string`	—	來源名稱，顯示於來源膠囊與螢幕閱讀器宣告
`icon`	`ReactNode`	圓點圖示	來源圖示，建議傳 lucide-react 圖示
`color`	`string`	內建色票	來源色（任何 CSS 顏色）

MultiSourceQueueItem

欄位	型別	預設值	說明
`id`	`string`	—	唯一識別碼
`sourceId`	`string`	—	所屬來源的 id
`title`	`string`	—	請求標題（例如「冷氣不冷」）
`customer`	`string`	—	客戶名稱
`time`	`string`	依加入時間	顯示用時間文字；未提供時顯示「剛剛」「3 分鐘前」
`status`	`string`	—	狀態文字（例如「待處理」）

細節

飛行路徑：發射時量測來源膠囊與佇列的 getBoundingClientRect，換算成相對容器的座標，圓點沿二次貝茲曲線（控制點在來源正下方、與終點同高）飛行，縮放 0.6→1、ease [0.22, 1, 0.36, 1]；對整體進度套 easing 再取曲線上的點，速度不會一段一段頓。
節奏與色彩可用 CSS 變數覆寫：--wb-multi-source-fly（預設 520ms）控制飛行時長，--wb-multi-source-accent（預設 #3b82f6）控制新列閃色與焦點框；accent prop 會寫入後者。
新列插入時既有列以 layout 動畫往下推（spring stiffness 380、damping 32），新列底色以強調色 8% 閃 600ms 後淡去；來源膠囊發射時縮放 1→0.92→1 並累計 +1。
受控 items 視為由舊到新的紀錄：新出現的 id 會飛入，消失的 id 會從佇列移除；autoPlay 加入的項目由元件自行管理。
自動播放在元件離開畫面時自動暫停（IntersectionObserver），回到畫面再繼續。

可及性

佇列是 role="list" 並設 aria-live="polite"，新項目會被宣告為「來自電話：冷氣不冷」這樣的句子（來源以隱藏文字附在標題前）
來源膠囊是帶 aria-pressed 的 toggle 按鈕，aria-label 含來源名稱與累計數；整列以 role="group" 標示「依來源篩選」
自動播放時提供暫停／繼續按鈕（aria-pressed），篩選中提供清除篩選按鈕；所有按鈕都有 focus-visible 焦點框
飛行圓點與來源徽章圖示設 aria-hidden，不干擾朗讀
使用者系統開啟「減少動態效果」時不飛行、不縮放、不做 layout 位移，新列直接淡入

多來源合流佇列

把這個效果裝進你的專案

本頁目錄