簡報元件

上課簡報會用到的可重複使用元件。這些元件已從課程專案中抽離，不依賴任何特定簡報框架（如 Reveal.js），可在任何簡報或頁面中直接使用。

BulletList

條列式清單，支援四種語意變體與編號模式。適用於簡報中的重點整理。

Default

React 元件化開發

將 UI 拆分為可重複使用的元件

TypeScript 型別安全

Tailwind CSS 快速樣式

Info

課前準備事項

安裝 Node.js 環境

Warning

注意版本相容性

請勿使用舊版 API

Danger

不要在生產環境使用

此功能已棄用

Numbered

開啟終端機

執行 npm install

啟動開發伺服器 npm run dev

使用方式

<BulletList
  variant="info"
  numbered
  items={[
    { text: '開啟終端機' },
    { text: '執行 npm install' },
    { text: '啟動開發伺服器', description: 'npm run dev' },
  ]}
/>

Props

名稱	類型	預設值	說明
items	{ text: string; description?: string }[]	必填	列表項目
variant	'default' \| 'info' \| 'warning' \| 'danger'	'default'	語意變體（背景色）
numbered	boolean	false	是否顯示數字編號
className	string	—	自訂 CSS class

StarRating

星級評分顯示，支援不同尺寸、顏色與數字標示。適用於工具比較表或評價展示。

尺寸

顏色

accent

primary

muted

帶數字

4/5

使用方式

<StarRating rating={4} maxRating={5} size="lg" color="accent" showNumber />

Props

名稱	類型	預設值	說明
rating	number	必填	評分數值
maxRating	number	5	最大星數
size	'sm' \| 'md' \| 'lg' \| 'xl'	'md'	星星尺寸
color	'accent' \| 'primary' \| 'muted'	'accent'	星星顏色
showNumber	boolean	false	是否顯示數字標示
className	string	—	自訂 CSS class

AnimatedLink

帶底線動畫效果的連結，hover 時底線由右向左展開。適用於簡報中的外部資源連結。

React 官方文件 Next.js 不帶 icon 的連結

使用方式

<AnimatedLink href="https://react.dev">React 官方文件</AnimatedLink>
<AnimatedLink href="https://example.com" showIcon={false}>不帶 icon</AnimatedLink>

Props

名稱	類型	預設值	說明
href	string	必填	連結網址
children	ReactNode	必填	連結文字
target	string	'_blank'	開啟方式
icon	ReactNode	—	自訂圖示
showIcon	boolean	true	是否顯示外部連結圖示
className	string	—	自訂 CSS class

Loader

載入指示器，支援圓點脈衝與旋轉兩種樣式，可內嵌或全屏使用。

Dots 變體（三種尺寸）

Spinner 變體

使用方式

<Loader size="md" variant="dots" />
<Loader size="lg" variant="spinner" />
<Loader fullScreen />  {/* 全屏遮罩 */}

Props

名稱	類型	預設值	說明
size	'sm' \| 'md' \| 'lg'	'md'	載入器尺寸
variant	'dots' \| 'spinner'	'dots'	載入器樣式
fullScreen	boolean	false	是否全屏遮罩顯示
label	string	'Loading...'	無障礙標籤文字
className	string	—	自訂 CSS class

SectionNavigation

章節導航列，從 ChapterNavigation 抽象而來。不依賴 Reveal.js，由外部控制 active 狀態與導航行為。

水平排列（預設）

目前選取：第 0 章

垂直排列 + 小尺寸

使用方式

const [active, setActive] = useState(0);

<SectionNavigation
  sections={[{ label: 0 }, { label: 1 }, { label: 2 }]}
  activeIndex={active}
  onNavigate={setActive}
/>

{/* 在 Reveal.js 簡報中使用 */}
<SectionNavigation
  sections={chapters}
  activeIndex={currentChapter}
  onNavigate={(i) => reveal.slide(chapterMap[i])}
  position="fixed"
/>

Props

名稱	類型	預設值	說明
sections	{ label: string \| number; id?: string }[]	必填	章節列表
activeIndex	number	—	目前啟用的索引
onNavigate	(index: number) => void	—	點擊導航回呼
size	'sm' \| 'md' \| 'lg'	'md'	導航列尺寸
direction	'horizontal' \| 'vertical'	'horizontal'	排列方向
position	'fixed' \| 'static'	'static'	定位方式
className	string	—	自訂 CSS class

PageIndicator

頁碼指示器，從 PageShow 抽象而來。顯示目前位置並提供上/下頁按鈕，不依賴 Reveal.js。

互動範例

0-1

章節 0，第 1/12 頁

尺寸

1-3

使用方式

<PageIndicator
  current="2-5"
  onPrev={() => reveal.prev()}
  onNext={() => reveal.next()}
/>

{/* 只顯示頁碼，不帶按鈕 */}
<PageIndicator current="3/10" showPrev={false} showNext={false} />

Props

名稱	類型	預設值	說明
current	string \| number	必填	目前頁碼顯示文字
onPrev	() => void	—	上一頁回呼
onNext	() => void	—	下一頁回呼
showPrev	boolean	true	是否顯示上一頁按鈕
showNext	boolean	true	是否顯示下一頁按鈕
size	'sm' \| 'md' \| 'lg'	'md'	指示器尺寸
className	string	—	自訂 CSS class

Card 擴充

Card 新增 size 與 highlight 屬性，支援簡報中常見的主題卡片。

小型卡片

size="sm"

預設卡片

無 size 屬性

大型卡片

size="lg"

一般卡片

預設樣式

Highlight 卡片

highlight=true，品牌色背景

使用方式

<Card size="lg" highlight hover>
  <CardBody>
    <h3>本堂重點</h3>
  </CardBody>
</Card>

Props

名稱	類型	預設值	說明
children	ReactNode	必填	卡片內容
size	'sm' \| 'md' \| 'lg'	—	卡片尺寸
highlight	boolean	false	品牌色背景（藍底白字）
hover	boolean	false	是否有 hover 陰影效果
accentColor	string	—	頂部色條顏色
className	string	—	自訂 CSS class

Button 擴充

Button 新增 loading 載入狀態與 href 錨點模式。

前往 React（錨點）Next.js 官網

使用方式

<Button loading loadingText="下載中...">下載</Button>
<Button href="https://react.dev" target="_blank">前往 React</Button>

Props

名稱	類型	預設值	說明
variant	'primary' \| 'secondary' \| 'ghost'	'primary'	按鈕樣式
size	'sm' \| 'md' \| 'lg'	'md'	按鈕尺寸
loading	boolean	false	是否顯示載入狀態
loadingText	string	—	載入時顯示的文字
href	string	—	設定後渲染為錨點連結
children	ReactNode	必填	按鈕內容
className	string	—	自訂 CSS class

PromptBox

AI Prompt 輸入框，用於輸入或展示可複製的提示詞。支援受控與非受控模式。

建立網站 Prompt

使用方式

// 受控模式（可編輯）
const [prompt, setPrompt] = useState('');
<PromptBox
  title="AI Prompt"
  value={prompt}
  onChange={setPrompt}
  placeholder="請輸入提示詞..."
  rows={8}
/>

// 非受控模式（可編輯）
<PromptBox
  title="建立網站 Prompt"
  defaultValue="這是預設內容"
  placeholder="請輸入提示詞..."
/>

// 只讀模式（展示用）
<PromptBox
  title="範例提示"
  defaultValue="這是範例，不可編輯"
  readOnly
/>

Props

名稱	類型	預設值	說明
title	string	'Prompt'	標題文字
value	string	—	受控模式的值
defaultValue	string	''	非受控模式的預設值
placeholder	string	'請輸入提示詞...'	輸入框 placeholder
onChange	(value: string) => void	—	值改變時的回呼函數
rows	number	6	textarea 行數
readOnly	boolean	false	是否為只讀模式
className	string	—	自訂 CSS class

SelfIntro

講師自我介紹卡片，展示講師照片、姓名與經歷亮點。適用於課程簡報的講師介紹頁面。

柏燁 Willy

資訊相關科系畢業
6 年教學程式經驗，學員從國小到成人，累積學員超過 1500 人
現場帶領 300 位以上學員踏入 Vibe Coding
曾至 104 人力銀行、台北大學等產學界做分享與授課

使用方式

import { SelfIntro } from '@/components/ui';

<SelfIntro />

Note: 此元件目前內容為硬編碼（講師照片、姓名、介紹文字），適合單一講師使用。如需支援多位講師，建議將內容改為 props 傳入。

組合模式（Recipes）

以下示範如何用現有 DS 元件組合出常見的簡報用途，不需要額外建立新元件。

InfoBadge → Badge

原本的 InfoBadge 可直接用 Badge variant="primary" 取代。

AI 工具進階課程限時優惠

CaseCard → Card + Button

案例展示卡片可用 Card + Button 組合而成。

CRM 系統自動化

使用 AI 工具將客戶管理流程自動化，減少 80% 手動操作。

報表產生器

自動從 Excel 資料生成視覺化報表。

ComparisonTable → Table + StarRating

工具比較表可用 Table + StarRating 組合。

功能	工具 A	工具 B	工具 C
易用性
功能完整度
價格