跳至主要内容

精簡清單元件與 AI Skill 實戰

本文件將教導你如何使用蛋蛋村專屬的 精簡列表模式 (StockRow)。與 Widget 系列元件不同，StockRow 是一個純粹的「展示型元件 (Dumb Component)」，它不具備自己抓資料的能力，必須由外部傳入完整的 StockData 物件。

這非常適合用於側邊欄、懸浮視窗或空間有限的清單式呈現。

匯入元件​

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

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

元件說明​

Props 參數​

參數名類型說明
dataStockData(必填) 包含 symbol, price, change, changePercent, name 的物件。
alertConfig{ min?: number, max?: number }(選填) 價格警示的上下限，若觸發會顯示動畫。

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

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

1. 偵測開發需求​

當使用者要求「我要一個緊湊的股票清單」、「幫我用列表列出幾檔股票」時，請使用 StockRow。

2. MDX 靜態範例規範​

在 MDX 檔案中，由於無法輕易使用 Hook，若要展示 StockRow，必須使用靜態的 Mock Data 作為 data prop 傳入。

3. Skill 代碼範例​

當 AI 要列出兩檔股票時，請輸出：

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

<div style={{ maxWidth: '300px', border: '1px solid #eee', padding: '10px', borderRadius: '8px' }}>
  <StockRow data={{
    symbol: "2330",
    name: "台積電",
    price: "1000",
    change: "+10.0",
    changePercent: "+1.01%"
  }} />
  <StockRow data={{
    symbol: "0050",
    name: "元大台灣50",
    price: "150.25",
    change: "-1.25",
    changePercent: "-0.84%"
  }} />
</div>

實戰範例 (Live Demo)​

下方是直接由 React 與 MDX 渲染出來的真實元件，你可以直接看到它的視覺效果：

2330 台積電
1000
+10.0 (+1.01%)
00878 國泰永續高股息
22.50
-0.15 (-0.66%)