議題瀑布看板

把一份議題清單做成產品發表區塊裡的「工作正在流動」畫面：暗底上漂著兩三顆模糊光暈，議題列捲進視窗時由上而下瀑布滑入；點狀態膠囊會在待辦、進行中、審查中、完成之間循環，膠囊改寬、文字交叉淡接，狀態圖示重新描繪。開啟分組後，列會從原群組飛到新群組；開啟自動播放則每隔幾秒把下一張卡往前推一格。所有圖示與子結構都在元件內自行實作。

Playground

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

import * as React from "react";

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

<IssueCascadeBoard/>

    </div>
  );
}

安裝

使用

import * as React from "react";
import {
  IssueCascadeBoard,
  type IssueItem,
} from "@/components/ui/issue-cascade-board";

const initial: IssueItem[] = [
  { id: "1", key: "HX-142", title: "結帳頁金額四捨五入錯誤", status: "doing", labels: ["錯誤"], assignee: "林以晴", priority: 3 },
  { id: "2", key: "HX-138", title: "新增繁中排序選項", status: "review", labels: ["功能"], assignee: "陳柏宇", priority: 2 },
  { id: "3", key: "HX-151", title: "行程卡片在窄螢幕換行跑版", status: "todo", assignee: "張書豪", priority: 1 },
];

export function LaunchBoard() {
  const [items, setItems] = React.useState(initial);
  return (
    <IssueCascadeBoard
      items={items}
      onStatusChange={(id, status) =>
        setItems((prev) => prev.map((it) => (it.id === id ? { ...it, status } : it)))
      }
      groupBy="status"
      autoPlay
    />
  );
}

Props

IssueItem

另外具名匯出 IssueItem、IssueStatus 與 IssueCascadeBoardProps 型別。

細節

• CSS 變數：--wb-issue-cascade-stagger（預設 70ms，進場時每列的延遲）、--wb-issue-cascade-accent（預設 #6366f1）、--wb-issue-cascade-glow-duration（預設 1.6s，hover 邊框光暈轉一圈的時間）。可在主題層覆寫
• 進場：IntersectionObserver 偵測元件進入視窗後才觸發一次，每列 y: 16 → 0、透明度與 blur(6px) 淡出，位移用彈簧（stiffness 260、damping 26）
• 狀態圖示：待辦是空心圓、進行中是圓環加半填、審查中是六段虛線弧、完成是實心圓加打勾，切換時都以 pathLength 重新描繪
• 自動播放：依序挑下一張未完成的卡推進一格；全部完成後從游標處循環回待辦。元件離開視窗時暫停，光暈漂移也一併停止
• 受控模式：傳入 items 時元件不會自行改狀態，請在 onStatusChange 裡更新陣列；自動播放同樣透過這個回呼推進

可及性

• 議題列表為 role="list"，分組模式下每組是以標題命名的 section
• 狀態膠囊是 button，aria-label 例如「HX-142 狀態：進行中，點擊切換」，可用 Tab 聚焦、Enter／空白鍵切換，並有 focus-visible 外框
• 狀態變更（點擊、自動播放或外部受控更新）會透過 aria-live="polite" 區域宣告
• 自動播放時提供「暫停自動播放」按鈕（WCAG 2.2.2），aria-pressed 反映暫停狀態
• 優先度條與負責人頭像都有 role="img" 與文字標籤
• 使用者系統開啟「減少動態效果」時，取消瀑布進場與版面動畫、光暈球不漂移、hover 邊框不旋轉，狀態直接切換