跳至主要内容

基本資料元件與 AI Skill 實戰

本文件將教導你如何使用蛋蛋村專屬的 靜態基本資料 (StockInfoWidget)。這是一個「智能元件」，只要給定股票代號，它就會自動去讀取專案靜態資料夾下的 JSON 檔案，渲染出 ETF/股票的資本資料、產業分佈與前十大成分股。

匯入元件​

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

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

元件說明​

Props 參數​

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

行為特徵​

  • 自帶資料：自動請求 /tw_stocks/<symbol>.json。
  • 優雅降級：如果該代號沒有對應的靜態資料檔案 (404 Error)，元件會靜默隱藏，不會導致畫面崩潰。
  • 視覺化：包含文字網格與長條圖比例顯示。

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

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

1. 偵測開發需求​

當使用者詢問「這檔 ETF 的成分股是什麼」、「這檔股票的基本資料」、「它的產業分佈」時，請直接使用 <StockInfoWidget symbol="..." /> 嵌入文章中。

2. Skill 代碼範例​

當 AI 要為 00878 生成基本資料區塊時，請輸出：

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

<div style={{ maxWidth: '600px', margin: '0 auto' }}>
  <StockInfoWidget symbol="00878" />
</div>

實戰範例 (Live Demo)​

下方是直接由 React 與 MDX 渲染出來的真實元件，展示了 0050 的靜態資料：

載入基本資訊中 (0050)...