feat(ui): 引入图表库并构建资产配置环形图 (Donut Chart)

app/dashboard/page.tsx

@@ -1,10 +1,26 @@
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { getPortfolioPositions } from '@/actions/portfolio';
 import { formatQuantity } from '@/lib/formatters';
+import AllocationChart from '@/components/dashboard/allocation-chart';
+
+const CHART_COLORS = [
+  '#3b82f6',
+  '#8b5cf6',
+  '#10b981',
+  '#f59e0b',
+  '#ef4444',
+  '#06b6d4',
+];
 
 export default async function DashboardPage() {
   const positions = await getPortfolioPositions();
 
+  const chartData = positions.map((pos, index) => ({
+    name: pos.symbol,
+    value: Number(pos.quantity),
+    fill: CHART_COLORS[index % CHART_COLORS.length],
+  }));
+
   return (
     <div className="space-y-6">
       <div>
@@ -48,6 +64,15 @@ export default async function DashboardPage() {
           ))
         )}
       </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>资产分布</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <AllocationChart data={chartData} />
+        </CardContent>
+      </Card>
     </div>
   );
 }