直播購物疊層（React）

台灣社群直播、電商直播的「喊單」文化：主播介紹商品，觀眾在留言區打「+1」就代表下單。這個元件把整套直播賣場的 UI 疊層封裝成一個固定比例的舞台（直式 9:16 或橫式 16:9）——底層是漸層＋緩慢漂移的光暈當作影片占位（也可放 children 當真正的 video），上面疊：左上 LIVE 徽章與逐位滾動的觀看人數、右側愛心按鈕與上飄粒子、左下留言流（新訊息從底部滑入、舊的上移淡出、帳號以色塊首字當頭像）、+1 自動偵測（符合規則的留言高亮，商品卡上方浮出「+1」字樣，訂單數與庫存即時更新）、置頂商品卡與「+1 喊單」按鈕。留言串支援受控／非受控，也可以開 simulate 讓元件自己模擬留言與觀看人數變動；所有帳號、留言與商品皆為虛構示範資料。

Playground

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

<LiveShoppingOverlay />

安裝

使用

import {
  LiveShoppingOverlay,
  isPlusOne,
} from "@/components/ui/live-shopping-overlay";

// 示範模式：留言流與觀看人數由元件內部模擬（商品與帳號皆為虛構）
<LiveShoppingOverlay
  simulate
  product={{ name: "陶瓷手沖濾杯組", price: 680, stock: 12 }}
  onPlusOne={(msg) => console.log("喊單", msg.user, msg.text)}
  onHeart={(count) => console.log("愛心", count)}
/>

// 正式接後端：留言受控、觀看人數由 API 提供，舞台底層放真正的 video
<LiveShoppingOverlay
  layout="landscape"
  messages={messages}
  onMessagesChange={setMessages}
  viewers={viewers}
  product={product}
  onPlusOne={(msg) => createOrder(msg)}
>
  <video src={streamUrl} autoPlay muted playsInline />
</LiveShoppingOverlay>

// 喊單判定函式可單獨使用（例如在後端或表單層過濾留言）
isPlusOne("+1 黑色"); // true
isPlusOne("我要 1 個"); // true
isPlusOne("有優惠碼嗎"); // false

Props

LiveMessage

LiveProduct

另外具名匯出 isPlusOne(text) 與 LiveShoppingLayout 型別，方便在後端或表單層重複使用同一套喊單判定規則。

細節

• +1 判定規則（isPlusOne）：留言 trim 後符合 /(^|\s)\+?1(\s|$)/（獨立的「1」或「+1」，例如「1」「我要 1 個」），或內文任何位置含「+1」／全形「＋1」（例如「+1黑色」「幫我留一個＋1」）
• 訂單數與庫存：每一則「新的」+1 留言扣一件庫存並觸發 onPlusOne；元件以 id 記錄已處理的留言，同一個 id 不會重複計數。初始留言（defaultMessages 或首次傳入的 messages）中的 +1 直接算進起始訂單數，但不觸發回呼與浮出動畫，SSR 與客戶端輸出一致
• 受控／非受控：提供 messages 即為受控，元件不再自己新增留言（simulate 失效），按「+1 喊單」會以 onMessagesChange([...messages, 新留言]) 回寫，由你決定是否送到後端。非受控時內部保留的則數比 maxMessages 多一些，動態調大上限還有舊留言可補
• 模擬留言流：以 setTimeout 鏈而非固定 setInterval 排程，每則間隔帶確定性抖動，讀起來像真人留言而非節拍器；約三成五機率喊單，完售後只出一般聊天；分頁切到背景時不塞留言，避免回來瞬間一大串動畫同時播放；卸載時清理計時器
• 觀看人數：viewers 受控或以 defaultViewers 起始由內部每 3 秒微幅浮動（約 ±3%），數字逐位滾動；千分位格式自行實作，不走 toLocaleString，避免伺服器與瀏覽器 ICU 差異造成 hydration 不一致
• 愛心與「+1」浮出粒子皆以 motion 自行實作，每顆的飄移、擺幅、縮放與色調由序號推導的確定性偽亂數算出，render 期間不呼叫 Math.random；粒子壽命結束即移除並清理計時器
• 底層「影片」占位是漸層＋兩顆緩慢漂移的光暈，不用外部影片／圖片；傳入 children 時會被拉伸填滿（object-cover）並置於所有疊層之下，上下漸暗遮罩確保白字、留言與商品卡在任何底圖上都可讀
• 庫存倒數：商品卡進度條隨每筆 +1 縮短，剩 3 件以內轉紅並顯示「最後 N 件」，扣到 0 顯示「已完售」並停用喊單按鈕

可及性

• 最外層為 role="region" 並以 aria-label 帶入直播間標題；愛心按鈕與「+1 喊單」皆為 type="button"，具 focus-visible 環，完售時喊單按鈕 disabled
• 留言流為 role="log" 但 aria-live="off"——模擬留言每一兩秒一則，逐則播報會淹沒螢幕閱讀器；只有自己按下「+1 喊單」時，才透過隱形的 role="status" 區域播報累計單數與剩餘庫存
• 觀看人數不放 aria-live（每隔數秒就變），改以 sr-only 文字補上「人觀看中」單位；愛心按鈕的 aria-label 帶入已送出次數
• 所有裝飾性元素（光暈、漸暗遮罩、頭像色塊、粒子、進度條）皆 aria-hidden，留言文字本身仍是可讀的 DOM 內容
• 使用者系統開啟「減少動態效果」時，停用光暈漂移、LIVE 呼吸點、愛心與「+1」粒子、數字滾動與留言滑入動畫，只保留數字、高亮與文字更新；模擬留言與觀看人數變動的間隔放慢一倍