'use client'; import React, { useState, useEffect, useMemo, useRef } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import * as Lucide from 'lucide-react'; import * as d3 from 'd3'; export const LiBaiJourneyMap = () => { const [geoData, setGeoData] = useState(null); const [loading, setLoading] = useState(true); const [currentIndex, setCurrentIndex] = useState(0); const [isPlaying, setIsPlaying] = useState(false); const [progress, setProgress] = useState(0); // 0 to 1 for path drawing // Fixed Canvas Size const WIDTH = 1200; const HEIGHT = 700; // External Data Source const CHINA_GEOJSON_URL = "https://gist.githubusercontent.com/zhulinpinyu/8e18d57b3b18fb74e776/raw/efbb74cfea53decb1fe7d6bf279fd351c28c4810/china_simplify.json"; // Li Bai's Journey Data (Coordinates are approximate for visualization) const JOURNEY = useMemo(() => [ { id: 1, name: "江油 (青莲)", coords: [104.74, 31.78], year: "701-720", age: "少年", title: "蜀中初长成", poem: "“小时不识月，呼作白玉盘。”", desc: "李白出生于西域碎叶城（一说），五岁随父迁居蜀中江油。在此度过充满幻想的童年与少年，读书习剑。" }, { id: 2, name: "成都", coords: [104.06, 30.67], year: "720-724", age: "20岁", title: "游历蓉城", poem: "“九天开出一成都，万户千门入画图。”", desc: "弱冠之年，李白游历成都，谒见长史，初露锋芒，展现出非凡的才华与抱负。" }, { id: 3, name: "峨眉山", coords: [103.48, 29.60], year: "724", age: "24岁", title: "仗剑去国", poem: "“峨眉山月半轮秋，影入平羌江水流。”", desc: "李白辞亲远游，仗剑去国，辞别蜀中，顺长江而下，开启了波澜壮阔的一生。" }, { id: 4, name: "荆门/武汉", coords: [114.30, 30.59], year: "725-727", age: "25-27岁", title: "江汉送别", poem: "“故人西辞黄鹤楼，烟花三月下扬州。”", desc: "游历江汉，广结名流。在黄鹤楼送别孟浩然，留下千古绝唱。" }, { id: 5, name: "安陆", coords: [113.68, 31.25], year: "727-738", age: "27-38岁", title: "酒隐安陆", poem: "“桃花流水杳然去，别有天地非人间。”", desc: "娶故相许圉师孙女，酒隐安陆蹉跎十年，干谒求仕未果。" }, { id: 6, name: "长安 (西安)", coords: [108.93, 34.34], year: "742-744", age: "42-44岁", title: "翰林供奉", poem: "“云想衣裳花想容，春风拂槛露华浓。”", desc: "奉诏入京，供奉翰林。玄宗御手调羹，贵妃捧砚，力士脱靴。这是他政治生涯的高光时刻。" }, { id: 7, name: "洛阳", coords: [112.45, 34.62], year: "744", age: "44岁", title: "仙圣相逢", poem: "“我呼尔为弟，尔为我是兄。”", desc: "赐金放还后，李白在洛阳遇见杜甫。中国文学史上最伟大的两位诗人在此相会，结伴同游。" }, { id: 8, name: "扬州", coords: [119.40, 32.39], year: "744-755", age: "45-55岁", title: "漫游吴越", poem: "“千金散尽还复来。”", desc: "漫游吴越，挥金如土，行侠仗义。此时大唐盛世将尽，风雨欲来。" }, { id: 9, name: "九江 (庐山)", coords: [115.99, 29.71], year: "756-757", age: "56岁", title: "误入幕府", poem: "“飞流直下三千尺，疑是银河落九天。”", desc: "安史之乱爆发，李白隐居庐山，后误入永王李璘幕府，卷入皇位之争。" }, { id: 10, name: "奉节 (白帝城)", coords: [109.53, 31.02], year: "759", age: "59岁", title: "夜郎遇赦", poem: "“朝辞白帝彩云间，千里江陵一日还。”", desc: "兵败流放夜郎（今贵州），行至白帝城遇赦。欣喜若狂，顺江东下。" }, { id: 11, name: "当涂", coords: [118.49, 31.57], year: "762", age: "62岁", title: "捉月长眠", poem: "“大鹏飞兮振八裔，中天摧兮力不济。”", desc: "投奔族叔李阳冰，病逝于当涂。传说他醉酒江中捉月，骑鲸升天。" } ], []); // Timer Ref const timerRef = useRef(null); const startTimeRef = useRef(null); // Initial Data Load useEffect(() => { fetch(CHINA_GEOJSON_URL) .then(res => res.json()) .then(data => { setGeoData(data); setLoading(false); // Start animation after load setTimeout(() => setIsPlaying(true), 1000); }) .catch(err => { console.error("Map Load Error", err); setLoading(false); }); }, []); // Animation Loop logic useEffect(() => { if (!isPlaying) { if (timerRef.current) cancelAnimationFrame(timerRef.current); return; } const durationPerStep = 4000; // ms per segment const totalDuration = durationPerStep * (JOURNEY.length - 1); const animate = (timestamp) => { if (!startTimeRef.current) startTimeRef.current = timestamp; const elapsed = timestamp - startTimeRef.current; // Calculate global progress (0 to 1) based on time // Loop it for demonstration or stop at end? Let's stop at end then manual replay let globalProgress = elapsed / totalDuration; if (globalProgress >= 1) { globalProgress = 1; setIsPlaying(false); // Stop at end startTimeRef.current = null; } else { timerRef.current = requestAnimationFrame(animate); } setProgress(globalProgress); // Calculate current index based on progress // Map 0..1 to 0..JOURNEY.length-1 const rawIndex = globalProgress * (JOURNEY.length - 1); const newIndex = Math.floor(rawIndex); // Update index if changed (to trigger text updates) setCurrentIndex((prev) => (newIndex !== prev ? newIndex : prev)); }; timerRef.current = requestAnimationFrame(animate); return () => { if (timerRef.current) cancelAnimationFrame(timerRef.current); }; }, [isPlaying, JOURNEY.length]); const handleReplay = () => { setProgress(0); setCurrentIndex(0); startTimeRef.current = null; setIsPlaying(true); }; // D3 Computations const { pathGenerator, projection, pathString, points } = useMemo(() => { if (!geoData) return { pathGenerator: null, projection: null, pathString: "", points: [] }; const proj = d3.geoMercator().fitSize([WIDTH, HEIGHT], geoData); const pathGen = d3.geoPath().projection(proj); // Calculate projected coordinates for journey const projectedPoints = JOURNEY.map(stop => { const p = proj(stop.coords); return { ...stop, x: p[0], y: p[1] }; }); // Generate a smooth curve through the points const lineGenerator = d3.line() .x(d => d.x) .y(d => d.y) .curve(d3.curveCatmullRom.alpha(0.5)); // CatmullRom for smooth trajectory const dPath = lineGenerator(projectedPoints); return { pathGenerator: pathGen, projection: proj, pathString: dPath, points: projectedPoints }; }, [geoData, JOURNEY, WIDTH, HEIGHT]); const currentData = JOURNEY[currentIndex] || JOURNEY[0]; if (loading) { return (

正在展开历史卷轴...

); } return (

{/* 1. Background Texture (SVG Noise) */} {/* 2. Header */}

李白·人生轨迹

Great Poet Li Bai's Life Journey Map

{/* 3. Controls */}

{/* 4. Main Visualization Layer */} {/* 5. Info Panel (Glassmorphism) */} {/* Header Row */}

Timeline: {currentData.year}

{currentData.title}

Age

{currentData.age}

{/* Poem Section */}

{currentData.poem}

{/* Description */}

{currentData.desc}

{/* Progress Bar in Card */}

{/* 6. Mini Legend / Stats */}

总里程 (Approx.)

{Math.floor(progress * 18000)} km

现存诗作

900+ 首

); };