```javascript 'use client'; import React, { useState, useEffect, useMemo, useRef, useCallback, useLayoutEffect } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import * as Lucide from 'lucide-react'; import * as d3 from 'd3'; // ----------------------------------------------------------------------------- // Constants & Data: Su Shi's Life Journey // ----------------------------------------------------------------------------- const SU_SHI_PATH = [ { name: "眉山", year: "1037", stage: "start", desc: "生于四川眉山，山川灵秀。少年苏轼在此度过无忧无虑的时光，初露文学锋芒。", poem: "人生到处知何似，应似飞鸿踏雪泥。", color: "#86efac", // 嫩绿 width: 3, coords: [103.83, 30.05] }, { name: "开封", year: "1056", stage: "youth", desc: "进京赶考，名动京师。主考官欧阳修赞其文章，意气风发，金榜题名。", poem: "想见青天多远，但也就是、这般颜色。", color: "#22c55e", // 明亮绿 width: 4, coords: [114.30, 34.80] }, { name: "凤翔", year: "1061", stage: "sorrow", desc: "初任仕途，奔波于凤翔。期间丧母、丧妻（王弗），人生初尝死别之痛，墨色转暗。", poem: "十年生死两茫茫，不思量，自难忘。", color: "#64748b", // 灰蓝 width: 2, coords: [107.39, 34.52] }, { name: "杭州", year: "1071", stage: "career", desc: "通判杭州，疏浚西湖，修苏堤。江南水乡滋养了其诗词灵性，笔触柔和如水。", poem: "欲把西湖比西子，淡妆浓抹总相宜。", color: "#0ea5e9", // 水波蓝 width: 3, coords: [120.15, 30.28] }, { name: "密州", year: "1075", stage: "career_hard", desc: "知密州。抗旱灭蝗，修超然台。笔触刚劲，豪放词风初成。", poem: "老夫聊发少年狂，左牵黄，右擎苍。", color: "#334155", // 刚劲墨 width: 5, coords: [119.46, 35.99] }, { name: "徐州", year: "1077", stage: "flood", desc: "知徐州，率民抗洪，甚至露宿城上。线条如激流湍急。", poem: "回首向来萧瑟处，归去，也无风雨也无晴。", color: "#1e293b", // 深墨 width: 4, coords: [117.28, 34.20] }, { name: "湖州", year: "1079", stage: "crash", desc: "乌台诗案爆发，于湖州被捕。人生急剧坠落，墨迹爆裂。", poem: "心似已灰之木，身如不系之舟。", color: "#000000", // 漆黑 width: 2, coords: [120.08, 30.89], effect: "explosion" }, { name: "黄州", year: "1080", stage: "rebirth", desc: "贬谪黄州，躬耕东坡。心态豁达，赤壁怀古，达创作巅峰。", poem: "大江东去，浪淘尽，千古风流人物。", color: "#d97706", // 暖赭 width: 6, coords: [114.87, 30.45], effect: "boat" }, { name: "惠州", year: "1094", stage: "exile", desc: "再贬惠州，日啖荔枝三百颗。虽然流离，仍乐观旷达。", poem: "试问岭南应不好，却道，此心安处是吾乡。", color: "#166534", // 热带暗绿 width: 3, coords: [114.41, 23.11] }, { name: "儋州", year: "1097", stage: "far_exile", desc: "跨海至海南儋州，极南蛮荒之地。兴办学堂，甚至掘井教化。", poem: "九死南荒吾不恨，兹游奇绝冠平生。", color: "#064e3b", // 深青 width: 2, coords: [109.57, 19.52], effect: "moon" }, { name: "常州", year: "1101", stage: "return", desc: "遇赦北归，病逝于常州。一代文豪，落叶归根。", poem: "庐山烟雨浙江潮，未到千般恨不消。", color: "#94a3b8", // 淡化 width: 1, coords: [119.97, 31.81] }, { name: "郏县", year: "1102", stage: "end", desc: "葬于河南郏县小峨眉山。千古风流，化作尘土。", poem: "（终）", color: "#ef4444", // 朱红印章色 width: 0, coords: [113.21, 33.97], effect: "seal" } ]; // ----------------------------------------------------------------------------- // Configuration // ----------------------------------------------------------------------------- const WIDTH = 1200; const HEIGHT = 700; const BASE_SPEED = 100; // Pixels per second const HOLD_DURATION = 3500; const CHINA_GEOJSON_URL = "https://gist.githubusercontent.com/zhulinpinyu/8e18d57b3b18fb74e776/raw/efbb74cfea53decb1fe7d6bf279fd351c28c4810/china_simplify.json"; // ----------------------------------------------------------------------------- // Main Component // ----------------------------------------------------------------------------- export const SuShiLifeMap = () => { // 1. Data State const [geoData, setGeoData] = useState(null); const [loading, setLoading] = useState(true); // 2. Animation State const [activeNodeIndex, setActiveNodeIndex] = useState(-1); const [currentLength, setCurrentLength] = useState(0); const [isPlaying, setIsPlaying] = useState(false); const [isFinished, setIsFinished] = useState(false); // 3. Refs for Loop const requestRef = useRef(); const lastTimeRef = useRef(0); const hasStartedRef = useRef(false); const stateRef = useRef({ phase: 'idle', currentLen: 0, targetLen: 0, nodeIndex: 0, holdStartTime: 0, totalPathLength: 0, nodeLengths: [], segments: [] // Stores SVG path d commands for each colored segment }); const pathRef = useRef(null); // --------------------------------------------------------------------------- // Data Loading // --------------------------------------------------------------------------- useEffect(() => { let isMounted = true; fetch(CHINA_GEOJSON_URL) .then(res => res.json()) .then(data => { if (isMounted) { setGeoData(data); setLoading(false); } }) .catch(err => { console.error("Failed to load map", err); if (isMounted) setLoading(false); }); return () => { isMounted = false; }; }, []); // --------------------------------------------------------------------------- // D3 Projection & Path Generation // --------------------------------------------------------------------------- const { pathGenerator, projectedPoints, fullPathString, segmentsData } = useMemo(() => { if (!geoData) return {}; // Focus on Central/East/South China const proj = d3.geoMercator() .center([112, 30]) .scale(2200) .translate([WIDTH / 2, HEIGHT / 2 - 50]); const pathGen = d3.geoPath().projection(proj); const points = SU_SHI_PATH.map(p => { const [x, y] = proj(p.coords); return { ...p, x, y }; }); const lineGenerator = d3.line() .x(d => d.x) .y(d => d.y) .curve(d3.curveCatmullRom.alpha(0.5)); const fullStr = lineGenerator(points); // Generate individual segments for coloring // We need to generate path strings between point i and i+1 const segments = []; for(let i=0; i { if (pathRef.current && projectedPoints && projectedPoints.length > 0) { const pathEl = pathRef.current; const totalLen = pathEl.getTotalLength(); const lengths = []; const precision = 4000; const pathPoints = []; for (let i = 0; i <= precision; i++) { const l = (i / precision) * totalLen; const p = pathEl.getPointAtLength(l); pathPoints.push({ l, x: p.x, y: p.y }); } // Map nodes to lengths along the path projectedPoints.forEach((node, i) => { if (i === 0) { lengths.push(0); return; } let minDist = Infinity; let bestLen = 0; // Optimization: Start search from previous node length const startSearchIdx = lengths[i-1] ? Math.floor((lengths[i-1] / totalLen) * precision) : 0; for (let j = startSearchIdx; j < pathPoints.length; j++) { const pp = pathPoints[j]; const dist = Math.sqrt((pp.x - node.x)**2 + (pp.y - node.y)**2); if (dist < minDist) { minDist = dist; bestLen = pp.l; } // Break if we are moving away significantly if (minDist < 5 && dist > 30) break; } lengths.push(bestLen); }); stateRef.current.totalPathLength = totalLen; stateRef.current.nodeLengths = lengths; // Auto Start if (!hasStartedRef.current) { hasStartedRef.current = true; stateRef.current.currentLen = 0; stateRef.current.nodeIndex = 0; stateRef.current.targetLen = 0; stateRef.current.phase = 'holding'; stateRef.current.holdStartTime = null; setActiveNodeIndex(0); setIsPlaying(true); requestRef.current = requestAnimationFrame(animate); } } }, [projectedPoints, fullPathString]); // --------------------------------------------------------------------------- // Animation Loop // --------------------------------------------------------------------------- const animate = useCallback((time) => { if (!lastTimeRef.current) lastTimeRef.current = time; const deltaTime = time - lastTimeRef.current; lastTimeRef.current = time; const state = stateRef.current; if (state.phase === 'moving') { const dist = (BASE_SPEED * deltaTime) / 1000; state.currentLen += dist; if (state.currentLen >= state.targetLen) { state.currentLen = state.targetLen; state.phase = 'holding'; state.holdStartTime = time; setActiveNodeIndex(state.nodeIndex); setCurrentLength(state.currentLen); } else { setCurrentLength(state.currentLen); } } else if (state.phase === 'holding') { if (!state.holdStartTime) state.holdStartTime = time; if (time - state.holdStartTime > HOLD_DURATION) { const nextIndex = state.nodeIndex + 1; if (nextIndex < state.nodeLengths.length) { state.nodeIndex = nextIndex; state.targetLen = state.nodeLengths[nextIndex]; state.phase = 'moving'; // Trigger start of move logic if needed } else { state.phase = 'finished'; setIsFinished(true); setIsPlaying(false); } } } if (state.phase !== 'finished') { requestRef.current = requestAnimationFrame(animate); } }, []); const togglePlay = () => { if (isFinished) { // Restart stateRef.current.currentLen = 0; stateRef.current.nodeIndex = 0; stateRef.current.targetLen = 0; stateRef.current.phase = 'holding'; stateRef.current.holdStartTime = performance.now(); setActiveNodeIndex(0); setIsFinished(false); setIsPlaying(true); lastTimeRef.current = 0; requestRef.current = requestAnimationFrame(animate); } else { if (isPlaying) { setIsPlaying(false); if (requestRef.current) cancelAnimationFrame(requestRef.current); } else { setIsPlaying(true); lastTimeRef.current = 0; requestRef.current = requestAnimationFrame(animate); } } }; useEffect(() => { return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); // --------------------------------------------------------------------------- // Derived Render Props // --------------------------------------------------------------------------- const headPos = useMemo(() => { if (!pathRef.current || currentLength < 0) return projectedPoints?.[0] || {x:0, y:0}; const p = pathRef.current.getPointAtLength(Math.max(0, currentLength)); return { x: p.x, y: p.y }; }, [currentLength, projectedPoints]); const currentNode = SU_SHI_PATH[activeNodeIndex]; // --------------------------------------------------------------------------- // Render // --------------------------------------------------------------------------- if (loading) { return (

墨迹研磨中...

); } return (

{/* Background Layers */}

{/* Main Title */}

东坡行旅

{/* Info Panel - Vertical Layout for Ancient Feel */} {activeNodeIndex >= 0 && currentNode && ( {/* Vertical Line Deco */}

{/* Year Stamp */}

宋仁宗/神宗/哲宗朝 · {currentNode.year}

{/* Main Poem/Text */}

{currentNode.poem}

{/* Description */}

{currentNode.desc}

{/* Progress Bar (Ink Style) */}

)} {/* Audio Visualizer (Simulated Guqin) */}

{[1,2,3,4,5].map(i => ( ))} 古琴 · 广陵散

{/* Controls */}

); }; ```