blog-kit 擴充元件展示 ： blocks + Mermaid + BarChart 完整範例

本文是給內容團隊的擴充元件展示，列出 blog-kit 提供的所有 mdx 用元件與其使用方式。複製對應段落即可在自己的文章中使用。

一、CalloutBox 提示框

5 種類型：info（資訊）、tip（提示）、warning（注意）、danger（警告）、success（成功）。

二、Quote 引言

兩種變體：default 卡片風（適合長段落）與 pullquote 大字嵌入（適合精選短句）。

本機制適用於負債總額超過 100 萬元，或負債佔月收入 22 倍以上之債務人。

真正的財務自由不是無債一身輕，而是學會與債務和平共處。

三、Comparison 比較表

兩欄並列，響應式自動 stacked。每欄可設 tone="positive" | "negative" | "neutral" 改變視覺。

前置協商 vs 司法更生

兩種債務處理方式的核心差異

前置協商

適合多筆消金、信貸

• 處理週期短（30-60 天）
• 費用低（無律師費）
• 保留信用紀錄機會較大
• 免出庭

司法更生

適合負債超過 1000 萬

• 處理週期長（6-12 個月）
• 費用高（含律師費、法院規費）
• 信用註記 10 年
• 需出庭

四、Timeline 時間軸

垂直時間軸，支援 milestone 變體高亮關鍵節點。

債務協商完整流程時程

1. Day 1

   送件

   備齊文件、計算 DBR、向銀行公會提出申請
2. Day 7

   銀行回覆收件

   公會通知所有相關銀行，30 日內回應
3. Day 30

   協商會議

   與多家銀行討論還款條件，是流程關鍵節點
4. Day 45

   簽約

   達成共識後簽署協商書，執行新還款計畫
5. Day 60

   執行階段

   依約定金額按月還款，維持良好紀錄

五、Mermaid 圖表（一打六）

一個元件涵蓋 10+ 種圖表類型。記得加 client:visible 才能載入 mermaid lib（~150KB gzipped），文章內多個圖表共用同一份。

5.1 Flowchart（流程圖）

載入圖表中…

5.2 Sequence Diagram（時序圖）

載入圖表中…

5.3 Gantt（甘特圖）

載入圖表中…

5.4 Mindmap（心智圖）

載入圖表中…

5.5 ER Diagram（實體關聯圖）

載入圖表中…

六、BarChart 統計圖

純 SVG / CSS 渲染，0 KB JS 下載（不需 client:* 指令）。適合簡單金額／比例呈現。

6.1 Horizontal（橫條，適合長 label）

• 1 月120 件
• 2 月180 件
• 3 月240 件
• 4 月210 件
• 5 月295 件
• 6 月320 件

6.2 Vertical（直條，適合多筆比較）

15 %

10x↓

28 %

10-15x

34 %

15-22x

18 %

22-30x

5 %

30x↑

元件選型建議

需求	元件	載入成本
提示／注意事項	<CalloutBox>	0 KB
引言／重點摘要	<Quote>	0 KB
方案／產品比較	<Comparison>	0 KB
時程／流程進度	<Timeline>	0 KB
流程／時序／甘特／樹狀／心智／ER	<Mermaid client:visible>	~150 KB（首次）
簡單統計圖	<BarChart>	0 KB
進階互動圖（hover、動畫、多 series）	待 Phase 6c 加 recharts 等	TBD