110 lines
3.9 KiB
TypeScript
110 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
import { useTheme } from "@/app/context/ThemeContext";
|
|
import { useLocale, useTranslation } from "@/i18n/navigation";
|
|
import { Link } from "@/i18n/navigation";
|
|
import { MembersMap, BarChart, PieChart, LineChart } from "@/app/lib/charts";
|
|
import { MAP_CITIES } from "@/app/data/map-cities";
|
|
|
|
// 演示数据
|
|
const getCityBarData = (locale: "zh" | "en") =>
|
|
[...MAP_CITIES]
|
|
.sort((a, b) => b.nomadsNow - a.nomadsNow)
|
|
.slice(0, 10)
|
|
.map((c) => ({ name: locale === "zh" ? c.name : c.nameEn, value: c.nomadsNow }));
|
|
|
|
const REGION_PIE_DATA = [
|
|
{ name: "华东", value: 3200 },
|
|
{ name: "华南", value: 1800 },
|
|
{ name: "西南", value: 2100 },
|
|
{ name: "华北", value: 1200 },
|
|
{ name: "其他", value: 700 },
|
|
];
|
|
|
|
const GROWTH_LINE_DATA = {
|
|
xAxis: ["1月", "2月", "3月", "4月", "5月", "6月"],
|
|
series: [
|
|
{ name: "新增成员", data: [320, 480, 520, 610, 720, 850] },
|
|
{ name: "活跃城市", data: [12, 14, 15, 16, 17, 18] },
|
|
],
|
|
};
|
|
|
|
export default function DataReportPage() {
|
|
const { t } = useTranslation("dataReport");
|
|
const locale = useLocale();
|
|
const { theme } = useTheme();
|
|
const dark = theme === "dark";
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#fafafa] dark:bg-gray-950">
|
|
<main className="max-w-[1400px] mx-auto px-4 sm:px-6 py-8 sm:py-12">
|
|
<header className="mb-8 flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
|
|
<div>
|
|
<Link
|
|
href="/report"
|
|
className="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 mb-2"
|
|
>
|
|
← {t("backToReport")}
|
|
</Link>
|
|
<h1 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2">
|
|
<span className="w-1 h-8 bg-[#ff4d4f] rounded-full" />
|
|
{t("title")}
|
|
</h1>
|
|
<p className="text-gray-500 dark:text-gray-400 mt-1 text-sm sm:text-base">
|
|
{t("subtitle")}
|
|
</p>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="space-y-8">
|
|
{/* 成员地图 */}
|
|
<section className="bg-white dark:bg-gray-900 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-800 overflow-hidden p-4 sm:p-6">
|
|
<h2 className="text-lg font-bold text-gray-900 dark:text-gray-100 mb-4">
|
|
{t("membersMap")}
|
|
</h2>
|
|
<div className="rounded-xl overflow-hidden bg-gray-50 dark:bg-gray-800/50">
|
|
<MembersMap
|
|
data={MAP_CITIES}
|
|
locale={locale}
|
|
dark={dark}
|
|
className="min-h-[400px]"
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
{/* 图表网格 */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<section className="bg-white dark:bg-gray-900 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-800 p-4 sm:p-6">
|
|
<BarChart
|
|
data={getCityBarData(locale)}
|
|
title={t("cityRanking")}
|
|
dark={dark}
|
|
/>
|
|
</section>
|
|
|
|
<section className="bg-white dark:bg-gray-900 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-800 p-4 sm:p-6">
|
|
<PieChart
|
|
data={REGION_PIE_DATA}
|
|
title={t("regionDist")}
|
|
dark={dark}
|
|
/>
|
|
</section>
|
|
</div>
|
|
|
|
<section className="bg-white dark:bg-gray-900 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-800 p-4 sm:p-6">
|
|
<LineChart
|
|
data={GROWTH_LINE_DATA}
|
|
title={t("growthTrend")}
|
|
dark={dark}
|
|
/>
|
|
</section>
|
|
</div>
|
|
|
|
<p className="text-xs text-gray-400 dark:text-gray-500 mt-8 text-center">
|
|
{t("demoHint")}
|
|
</p>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|