跳至主要内容

五檔報價元件與 AI Skill 實戰

本文件將教導你如何使用蛋蛋村專屬的 五檔報價 (OrderBookWidget)。這是一個「智能元件」，只要給定股票代號，它就會自動從全域 API 抓取即時資料並渲染出帶有能量條的深度圖。

匯入元件​

要在 MDX 或是自訂的 React 頁面中使用此元件，請先引入它：

import { OrderBookWidget } from '@site/src/components/Quotes/Widgets/OrderBookWidget';

元件說明​

Props 參數​

參數名類型說明範例
symbolstring(必填) 股票或 ETF 代號"0050"

行為特徵​

  • 自帶資料：不需要手動傳遞 asks 或 bids。
  • 自動輪詢：會自動與全域的 QuoteContext 註冊，取得每 60 秒的最新報價。
  • 視覺化：根據掛單量自動繪製紅綠背景能量條，左側為委買 (Bids)，右側為委賣 (Asks)。

AI 代理人使用指南 (AI Skill for Claude Code & Gemini)​

如果你是 AI 代理人，在協助使用者建立文章時，請遵循以下 Skill 指引：

1. 偵測開發需求​

當使用者要求「幫我加上五檔報價」、「看看掛單狀況」、「顯示委買委賣」時，請直接使用 <OrderBookWidget symbol="..." />。

2. Skill 代碼範例​

當 AI 要為台積電 (2330) 生成五檔報價區塊時，請輸出：

import { OrderBookWidget } from '@site/src/components/Quotes/Widgets/OrderBookWidget';

<div style={{ maxWidth: '500px', margin: '0 auto' }}>
  <OrderBookWidget symbol="2330" />
</div>

實戰範例 (Live Demo)​

下方是直接由 React 與 MDX 渲染出來的真實元件，你可以直接看到它的視覺效果（在開發環境中會自動使用 Mock 資料）：

等待五檔報價載入中 (0050)...