要在 Astro v5 儀表板中加入互動圖表，最推薦的方式是使用 Recharts 或 Chart.js 配合 React 或 Vue 組件，因為圖表需要客戶端（Client-side）的 JavaScript 來達成縮放、懸停提示等互動功能。
由於你使用了 Tailwind v4，我們可以直接利用其 CSS 變數來控制圖表的顏色，讓 UI 風格保持高度統一。1. 安裝必要套件
這裡我們以 Recharts 為例（它是 React 生態中最受歡迎的圖表庫，且對響應式支援極佳）：
# 安裝 React 整合包與 Recharts
npx astro add react
npm install recharts
2. 準備圖表數據 (Content Layer)
在 src/pages/[lang]/dashboard.astro 中，我們可以將 Content Layer 的商品數據處理成圖表需要的格式：
---
import { getCollection } from 'astro:content';
import PriceChart from '../../components/PriceChart'; // 這是我們等下要寫的 React 組件
const { lang } = Astro.params;
const allProducts = await getCollection('products', ({ id }) => id.startsWith(lang));
// 將數據轉換為圖表格式，例如：[ { name: 'iPhone', price: 999 }, ... ]
const chartData = allProducts.map(p => ({
name: p.data.title,
price: p.data.price
}));
---
3. 建立互動圖表組件
在 src/components/PriceChart.tsx 建立組件。注意我們使用了 client:load 指令來確保它在瀏覽器中運行：
import {
BarChart,
Bar,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
ResponsiveContainer,
} from 'recharts'
export default function PriceChart({ data }) {
return (
<div className="h-[400px] w-full bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
<h3 className="text-lg font-bold mb-4 text-gray-800">商品價格分佈圖</h3>
<ResponsiveContainer width="100%" height="100%">
<BarChart data={data}>
<CartesianGrid
strokeDasharray="3 3"
vertical={false}
stroke="#f1f5f9"
/>
<XAxis
dataKey="name"
axisLine={false}
tickLine={false}
tick={{ fill: '#64748b', fontSize: 12 }}
/>
<YAxis
axisLine={false}
tickLine={false}
tick={{ fill: '#64748b', fontSize: 12 }}
/>
<Tooltip
cursor={{ fill: '#f8fafc' }}
contentStyle={{
borderRadius: '8px',
border: 'none',
boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
}}
/>
{/* 使用 Tailwind v4 定義的顏色變數 */}
<Bar
dataKey="price"
fill="var(--color-brand)"
radius={[4, 4, 0, 0]}
/>
</BarChart>
</ResponsiveContainer>
</div>
)
}
4. 在頁面中引用 (關鍵的 client:load)
在 Astro 頁面中使用組件時，必須加上互動指令，否則它會被渲染成靜態 HTML：
<section class="mt-8">
<PriceChart client:load data={chartData} />
</section>
5. 進階：讓圖表隨主題顏色切換
Tailwind v4 讓「暗黑模式」變得非常簡單。你可以微調 PriceChart.tsx 讓它自動讀取 CSS 變數：
/* src/styles/global.css */
@theme {
--color-brand: #3b82f6;
}
@variant dark {
--color-brand: #60a5fa;
--color-dashboard-bg: #0f172a;
}
在圖表組件中，顏色會自動跟隨 --color-brand 的變化。
