61 lines
2.0 KiB
TypeScript
61 lines
2.0 KiB
TypeScript
"use client"
|
||
|
||
import { Suspense } from "react"
|
||
import dynamic from "next/dynamic"
|
||
import { useDashboard } from "../_lib/contexts/DashboardContext"
|
||
|
||
// 真实中国/世界地图（Leaflet+OSM），替代方块型 SVG
|
||
const RealMap = dynamic(() => import("./real-map"), {
|
||
ssr: false,
|
||
loading: () => (
|
||
<div className="w-full h-full min-h-[480px] flex items-center justify-center bg-white/5 rounded-lg border border-white/10">
|
||
<span className="text-white/70">加载真实地图中...</span>
|
||
</div>
|
||
),
|
||
})
|
||
const StatsPanel = dynamic(() => import("./stats-panel"), { ssr: false })
|
||
const InvestorCard = dynamic(() => import("./investor-card"), { ssr: false })
|
||
const GrowthChart = dynamic(() => import("./growth-chart"), { ssr: false })
|
||
|
||
function DashboardContent() {
|
||
const { isAuthenticated } = useDashboard()
|
||
|
||
return (
|
||
<main className="container mx-auto p-4 h-[calc(100vh-4rem)]">
|
||
<div className="grid grid-cols-12 gap-4 h-full">
|
||
{/* 左侧面板 */}
|
||
<div className="col-span-3 space-y-4 overflow-auto">
|
||
<StatsPanel />
|
||
</div>
|
||
|
||
{/* 中间地图区域 - 使用semantic tokens */}
|
||
<div className="wz-screen-map-wrap col-span-6 bg-secondary rounded-lg shadow-lg relative min-h-[500px]">
|
||
<Suspense
|
||
fallback={
|
||
<div className="w-full h-full flex items-center justify-center bg-background rounded-lg">
|
||
<div className="text-foreground text-lg">加载地图中...</div>
|
||
</div>
|
||
}
|
||
>
|
||
<RealMap />
|
||
</Suspense>
|
||
</div>
|
||
|
||
{/* 右侧面板 */}
|
||
<div className="col-span-3 space-y-4 overflow-auto">
|
||
<Suspense fallback={<div className="text-foreground">加载投资分析中...</div>}>
|
||
<InvestorCard />
|
||
</Suspense>
|
||
<Suspense fallback={<div className="text-foreground">加载增长图表中...</div>}>
|
||
<GrowthChart />
|
||
</Suspense>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
)
|
||
}
|
||
|
||
export { DashboardContent }
|
||
|
||
export default DashboardContent
|