```jsx import React, { useState, useEffect, useMemo, useRef } from 'react'; const ChineseHistoryMap = () => { const [currentIndex, setCurrentIndex] = useState(0); const [progress, setProgress] = useState(0); const [prevIndex, setPrevIndex] = useState(null); // 动画配置 const DURATION_PER_ERA = 8000; // 延长单朝代展示时间以增强沉浸感 const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 700; // 数据源：增加开国皇帝 (emperor) 字段，微调描述 const dynasties = useMemo(() => [ { id: 'qin', name: '秦', fullTitle: '秦朝 (Qin Dynasty)', year: '221 BC - 206 BC', emperor: '秦始皇 · 嬴政', desc: '六王毕，四海一。中国历史上第一个大一统王朝，确立中央集权制，统一度量衡与文字。', color: '#ef4444', capital: { x: 580, y: 380, name: '咸阳' }, path: "M 520,320 L 600,300 L 650,310 L 680,350 L 660,420 L 600,450 L 550,430 L 500,400 L 480,350 Z" }, { id: 'han', name: '汉', fullTitle: '西汉 (Han Dynasty)', year: '202 BC - 220 AD', emperor: '汉高祖 · 刘邦', desc: '犯强汉者，虽远必诛。开辟丝绸之路，疆域向西延伸至西域，向南延伸至交趾。', color: '#eab308', capital: { x: 590, y: 385, name: '长安' }, path: "M 350,280 L 500,300 L 620,260 L 750,280 L 780,350 L 700,480 L 600,520 L 500,450 L 450,400 L 300,320 Z" }, { id: 'tang', name: '唐', fullTitle: '大唐 (Tang Dynasty)', year: '618 - 907', emperor: '唐高祖 · 李渊', desc: '九天阊阖开宫殿，万国衣冠拜冕旒。版图极盛，西达咸海，万邦来朝的盛世。', color: '#a855f7', capital: { x: 590, y: 385, name: '长安' }, path: "M 200,250 L 400,280 L 550,250 L 700,240 L 780,300 L 750,450 L 650,500 L 550,460 L 450,400 Z" }, { id: 'song', name: '宋', fullTitle: '北宋 (Song Dynasty)', year: '960 - 1127', emperor: '宋太祖 · 赵匡胤', desc: '华夏民族之文化，历数千载之演进，造极于赵宋之世。经济繁荣但疆域收缩。', color: '#3b82f6', capital: { x: 630, y: 390, name: '开封' }, path: "M 520,350 L 650,330 L 700,360 L 680,450 L 600,480 L 540,440 Z" }, { id: 'yuan', name: '元', fullTitle: '大元 (Yuan Dynasty)', year: '1271 - 1368', emperor: '元世祖 · 忽必烈', desc: '北逾阴山，西极流沙，东尽辽左，南越海表。中国历史上版图最大的王朝。', color: '#22c55e', capital: { x: 640, y: 280, name: '大都' }, path: "M 250,150 L 500,100 L 800,120 L 900,200 L 850,350 L 750,480 L 600,550 L 400,450 L 300,350 Z" }, { id: 'ming', name: '明', fullTitle: '大明 (Ming Dynasty)', year: '1368 - 1644', emperor: '明太祖 · 朱元璋', desc: '天子守国门，君王死社稷。驱除鞑虏，恢复中华，郑和七下西洋。', color: '#f97316', capital: { x: 640, y: 280, name: '北京' }, path: "M 480,280 L 650,250 L 780,260 L 750,450 L 600,530 L 500,450 L 480,350 Z" }, { id: 'qing', name: '清', fullTitle: '大清 (Qing Dynasty)', year: '1644 - 1912', emperor: '清太宗 · 皇太极', desc: '奠定了现代中国的版图基础，统一满蒙藏疆。', color: '#06b6d4', capital: { x: 640, y: 280, name: '北京' }, path: "M 300,200 L 500,150 L 800,150 L 850,250 L 800,350 L 750,480 L 600,550 L 400,480 L 250,350 Z" }, { id: 'prc', name: '今', fullTitle: '中华人民共和国 (PRC)', year: '1949 - Present', emperor: '毛泽东 (主席)', desc: '巨龙腾飞，民族复兴。', color: '#ef4444', capital: { x: 640, y: 280, name: '北京' }, path: "M 320,220 L 500,180 L 780,180 L 820,250 L 780,350 L 720,480 L 600,540 L 450,460 L 300,380 Z" } ], []); // 动画循环逻辑 useEffect(() => { let startTimestamp = null; let animationFrameId; const step = (timestamp) => { if (!startTimestamp) startTimestamp = timestamp; const elapsed = timestamp - startTimestamp; const newProgress = Math.min(elapsed / DURATION_PER_ERA, 1); setProgress(newProgress); if (elapsed < DURATION_PER_ERA) { animationFrameId = requestAnimationFrame(step); } else { // 切换到下一个朝代 setPrevIndex(currentIndex); setCurrentIndex((prev) => (prev + 1) % dynasties.length); startTimestamp = null; setProgress(0); animationFrameId = requestAnimationFrame(step); } }; animationFrameId = requestAnimationFrame(step); return () => cancelAnimationFrame(animationFrameId); }, [currentIndex, dynasties.length]); const currentDynasty = dynasties[currentIndex]; // 如果没有 prevIndex (初始状态)，则使用最后一个作为 ghost，或者 null const prevDynasty = prevIndex !== null ? dynasties[prevIndex] : null; // 随机生成的装饰性网格线 const gridLines = useMemo(() => { const lines = []; // 垂直线 for (let i = 0; i < VIEW_WIDTH; i += 60) { lines.push( ); } // 水平线 for (let i = 0; i < VIEW_HEIGHT; i += 60) { lines.push( ); } return lines; }, []); return (

{/* 外部容器样式增强 */}

); }; export default ChineseHistoryMap; ```