45 lines
1.7 KiB
TypeScript
45 lines
1.7 KiB
TypeScript
import { InsightChart } from "@/components/insight-chart";
|
||
import { InsightBarChart, InsightPieChart } from "@/components/insight-extra-charts";
|
||
|
||
const rank = [
|
||
["Media Spark", 29430],
|
||
["Nova AI Studio", 28810],
|
||
["Pixel Flow", 19840],
|
||
["DevLight Proxy", 11690],
|
||
];
|
||
|
||
export default function InsightsPage() {
|
||
return (
|
||
<div className="space-y-6 py-8">
|
||
<h1 className="text-3xl font-bold">数据概览</h1>
|
||
<p className="text-sm text-slate-300">前端 mock 展示未来分析后台能力：趋势、排行、来源、渠道。</p>
|
||
<div className="card-glass">
|
||
<h3 className="mb-2 text-lg font-semibold">下载趋势图</h3>
|
||
<InsightChart />
|
||
</div>
|
||
<section className="grid gap-4 md:grid-cols-2">
|
||
<div className="card-glass">
|
||
<h3 className="mb-2 font-semibold">分类热度柱状图</h3>
|
||
<InsightBarChart />
|
||
</div>
|
||
<div className="card-glass">
|
||
<h3 className="mb-2 font-semibold">点击来源占比饼图</h3>
|
||
<InsightPieChart />
|
||
</div>
|
||
</section>
|
||
<section className="grid gap-4 md:grid-cols-2">
|
||
<div className="card-glass">
|
||
<h3 className="mb-2 font-semibold">热门资源排行</h3>
|
||
{rank.map(([n, v]) => (
|
||
<div key={n} className="mb-2 flex items-center justify-between text-sm"><span>{n}</span><span>{v}</span></div>
|
||
))}
|
||
</div>
|
||
<div className="card-glass">
|
||
<h3 className="mb-2 mt-4 font-semibold">下载渠道占比</h3>
|
||
<p className="text-sm text-slate-300">官方 39% · 百度网盘 33% · 夸克 21% · 备用线路 7%</p>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|