feat: Heritage Globe - 中国文物全球分布地图

- Next.js + MapLibre GL 3D 地球 - CARTO dark-matter vector 底图 - 动态星空背景（闪烁、漂移、流星） - 经纬网格线（graticule） - 文物数据图层与朝代/类别筛选 - 中国风信息弹窗 - 中英双语 i18n - LayerPanel + MapControls 浮动面板
2026-07-01 01:37:18 +08:00
commit a550d6d0fd
35 changed files with 11760 additions and 0 deletions
@@ -0,0 +1,140 @@
+@import "tailwindcss";
+
+:root {
+  --map-bg: #06060c;
+  --map-panel: #0d0d18;
+  --map-panel-hover: #161624;
+  --map-accent: #3b82f6;
+  --map-border: #1e1e30;
+  --map-text: #e2e8f0;
+  --map-text-muted: #6b7280;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: var(--map-bg);
+  color: var(--map-text);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+/* MapLibre GL 自定义样式 */
+.maplibregl-ctrl-bottom-left,
+.maplibregl-ctrl-bottom-right,
+.maplibregl-ctrl-top-right {
+  display: none;
+}
+
+.maplibregl-popup-content {
+  background-color: var(--map-panel);
+  color: var(--map-text);
+  border: 1px solid var(--map-border);
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3);
+}
+
+.maplibregl-popup-close-button {
+  color: var(--map-text);
+  font-size: 20px;
+  padding: 4px 8px;
+}
+
+.maplibregl-popup-close-button:hover {
+  background-color: var(--map-panel-hover);
+  color: var(--map-accent);
+}
+
+/* 文物信息弹窗：中国风深色玻璃卡片 */
+.heritage-popup .maplibregl-popup-content {
+  background: rgba(18, 16, 22, 0.92);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-radius: 16px;
+  border: 1px solid rgba(212, 175, 55, 0.25);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
+  padding: 16px;
+  overflow: hidden;
+}
+
+.heritage-popup .maplibregl-popup-content::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.6), rgba(220, 38, 38, 0.5), transparent);
+  opacity: 0.8;
+}
+
+.heritage-popup .maplibregl-popup-close-button {
+  color: #a89a88;
+  font-size: 18px;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  top: 10px;
+  right: 10px;
+  transition: all 0.2s ease;
+}
+
+.heritage-popup .maplibregl-popup-close-button:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: #f5f0e8;
+}
+
+.heritage-popup .maplibregl-popup-tip {
+  border-top-color: rgba(18, 16, 22, 0.92);
+  border-bottom-color: rgba(18, 16, 22, 0.92);
+}
+
+.maplibregl-popup-anchor-top .maplibregl-popup-tip,
+.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
+.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
+  border-bottom-color: var(--map-panel);
+}
+
+.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
+.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
+.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
+  border-top-color: var(--map-panel);
+}
+
+.maplibregl-popup-anchor-left .maplibregl-popup-tip {
+  border-right-color: var(--map-panel);
+}
+
+.maplibregl-popup-anchor-right .maplibregl-popup-tip {
+  border-left-color: var(--map-panel);
+}
+
+/* 滚动条样式 */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--map-bg);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--map-border);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--map-panel-hover);
+}
@@ -0,0 +1,49 @@
+import type { Metadata } from "next";
+import { NextIntlClientProvider } from 'next-intl';
+import { getMessages } from 'next-intl/server';
+import { setRequestLocale } from 'next-intl/server';
+import { notFound } from 'next/navigation';
+import { locales } from '@/i18n';
+import "./globals.css";
+import 'maplibre-gl/dist/maplibre-gl.css';
+
+export const metadata: Metadata = {
+  title: "Heritage Globe - 中国文物全球分布",
+  description: "Explore Chinese cultural relics worldwide on an interactive map",
+};
+
+export function generateStaticParams() {
+  return locales.map((locale) => ({ locale }));
+}
+
+export default async function LocaleLayout({
+  children,
+  params: paramsPromise
+}: {
+  children: React.ReactNode;
+  params: Promise<{ locale: string }>;
+}) {
+  const params = await paramsPromise;
+  const locale = params.locale;
+  
+  // 验证语言参数
+  if (!locales.includes(locale as any)) {
+    notFound();
+  }
+
+  // 设置请求的语言环境（启用静态渲染优化）
+  setRequestLocale(locale);
+
+  // 获取翻译消息
+  const messages = await getMessages();
+
+  return (
+    <html lang={locale}>
+      <body className="antialiased">
+        <NextIntlClientProvider messages={messages}>
+          {children}
+        </NextIntlClientProvider>
+      </body>
+    </html>
+  );
+}
@@ -0,0 +1,9 @@
+import { MapContainer } from '@/components/map/MapContainer';
+
+export default function HomePage() {
+  return (
+    <main className="h-screen w-screen overflow-hidden">
+      <MapContainer />
+    </main>
+  );
+}