```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 // ----------------------------------------------------------------------------- // 秦灭六国顺序：韩 -> 赵 -> 魏 -> 楚 -> 燕 -> 齐 const QIN_PATH = [ { name: "咸阳", year: 230, type: "capital", desc: "秦王政（后为秦始皇）厉兵秣马，任用尉缭、李斯，确立“远交近攻”之策，自关中东出，开启统一战争序幕。", coords: [108.70, 34.33] }, { name: "灭韩", year: 230, type: "conquest", desc: "秦将内史腾率军南下渡河，攻破韩国都城新郑，俘虏韩王安。置颍川郡，韩国灭亡，成为六国中第一个被灭的诸侯。", coords: [113.73, 34.39] }, { name: "灭赵", year: 228, type: "battle", desc: "秦军名将王翦利用反间计除掉赵国良将李牧，随即攻破邯郸，俘虏赵王迁。赵公子嘉逃往代地称王。", coords: [114.48, 36.60] }, { name: "灭魏", year: 225, type: "siege", desc: "王贲率军攻魏，引黄河、鸿沟之水灌大梁城。三月后城坏，魏王假出降，魏国灭亡，置砀郡。", coords: [114.35, 34.79] }, { name: "灭楚", year: 223, type: "tragedy", desc: "秦倾国之兵六十万，由王翦统帅。双方对峙一年，秦军突袭大破楚军，攻入寿春，俘虏楚王负刍。楚国灭亡。", coords: [116.78, 32.57], speedMod: 0.8 }, { name: "灭燕", year: 222, type: "advance", desc: "王贲率军攻辽东，俘虏燕王喜。此前荆轲刺秦王失败，加速了燕国的灭亡。自此，北方大定。", coords: [116.40, 39.90], speedMod: 1.2 }, { name: "灭齐", year: 221, type: "victory", desc: "王贲南下攻齐，齐王建听信后胜之计，不战而降。齐国灭亡。至此，秦灭六国，天下大定。", coords: [118.30, 36.81] }, { name: "大一统", year: 221, type: "empire", desc: "秦王政称“皇帝”，建立中国历史上第一个中央集权的统一多民族国家——大秦帝国。书同文，车同轨，行同伦。", coords: [108.70, 34.33], speedMod: 1.5 } // 回到咸阳 ]; // Configuration const BASE_SPEED = 160; // Pixels per second const HOLD_DURATION = 3200; const WIDTH = 1200; const HEIGHT = 700; const BG_COLOR = "#0f172a"; // Deep slate/black for Qin theme const CHINA_GEOJSON_URL = "https://gist.githubusercontent.com/zhulinpinyu/8e18d57b3b18fb74e776/raw/efbb74cfea53decb1fe7d6bf279fd351c28c4810/china_simplify.json"; // ----------------------------------------------------------------------------- // Component // ----------------------------------------------------------------------------- export const QinUnificationMap = () => { // 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. Mutable Animation State 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: [], speedModifiers: [] }); 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, projectedPath, pathSvgString } = useMemo(() => { if (!geoData) return {}; // Center specifically on the Warring States region (Yellow River / Yangtze) const proj = d3.geoMercator() .center([114.5, 35]) .scale(2600) .translate([WIDTH / 2, HEIGHT / 2]); const pathGen = d3.geoPath().projection(proj); const projectedPoints = QIN_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 pathString = lineGenerator(projectedPoints); return { pathGenerator: pathGen, projectedPath: projectedPoints, pathSvgString: pathString }; }, [geoData]); // --------------------------------------------------------------------------- // Path Measurement & Auto Start // --------------------------------------------------------------------------- useLayoutEffect(() => { if (pathRef.current && projectedPath && projectedPath.length > 0) { const pathEl = pathRef.current; const totalLen = pathEl.getTotalLength(); const lengths = []; const precision = 3000; 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 }); } projectedPath.forEach((node, i) => { if (i === 0) { lengths.push(0); return; } let minDist = Infinity; let bestLen = 0; // Optimization: start searching from previous node's 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 passed the closest point significantly if (minDist < 5 && dist > 20) break; } lengths.push(bestLen); }); stateRef.current.totalPathLength = totalLen; stateRef.current.nodeLengths = lengths; stateRef.current.speedModifiers = projectedPath.map(p => p.speedMod || 1.0); // Auto Start Logic 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); } } }, [projectedPath, pathSvgString]); // --------------------------------------------------------------------------- // 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 speedMod = state.speedModifiers[state.nodeIndex] || 1.0; const currentSpeed = BASE_SPEED * speedMod; const dist = (currentSpeed * 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'; } else { state.phase = 'finished'; setIsFinished(true); setIsPlaying(false); } } } if (state.phase !== 'finished') { requestRef.current = requestAnimationFrame(animate); } }, []); // Control handlers 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 Data // --------------------------------------------------------------------------- const headPos = useMemo(() => { if (!pathRef.current || currentLength < 0) return projectedPath?.[0] || {x:0, y:0}; const p = pathRef.current.getPointAtLength(Math.max(0, currentLength)); return { x: p.x, y: p.y }; }, [currentLength, projectedPath]); // --------------------------------------------------------------------------- // Render // --------------------------------------------------------------------------- if (loading) { return (

大秦帝国史料加载中...

); } return (

{/* Background Tech Grid */}

{/* Vignette */}

{/* Title */}

秦灭六国

The Unification of China (230-221 BC)

{/* Info Card */} {activeNodeIndex >= 0 && QIN_PATH[activeNodeIndex] && ( {/* Header */}

前{QIN_PATH[activeNodeIndex].year}年

{getEventTypeLabel(QIN_PATH[activeNodeIndex].type)}

{getEventIcon(QIN_PATH[activeNodeIndex].type, 26)}

{/* Content */}

{QIN_PATH[activeNodeIndex].name}

{QIN_PATH[activeNodeIndex].desc}

{/* Progress Indicator */}

)} {/* Controls */}

); }; // ----------------------------------------------------------------------------- // Helpers // ----------------------------------------------------------------------------- function getEventTypeLabel(type) { const map = { 'capital': '帝国都城', 'conquest': '攻克', 'siege': '水淹大梁', 'tragedy': '倾国之战', 'advance': '北伐', 'battle': '激战', 'victory': '不战而降', 'empire': '大一统' }; return map[type] || '历史事件'; } function getEventIcon(type, size=24) { switch(type) { case 'capital': return ; case 'empire': return ; case 'battle': case 'siege': case 'tragedy': return ; case 'conquest': case 'victory': return ; case 'advance': return ; default: return ; } } ```