```javascript import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { MapPin, Play, Pause, RotateCcw, Crosshair, ChevronRight, Activity, Database, Globe } from 'lucide-react'; import * as d3 from 'd3'; // ========================================== // 1. 常量与配置 // ========================================== const WIDTH = 1200; const HEIGHT = 700; const STEP_DURATION = 3500; // 每个事件停留时间 const TRANSITION_DURATION = 1.2; // 连线动画时间 // 颜色定义 const COLORS = { bg: '#0f172a', // Slate 900 grid: '#1e293b', // Slate 800 accent: '#38bdf8', // Sky 400 text: '#e2e8f0', // Slate 200 highlight: '#fbbf24', // Amber 400 (刘备/皇室) danger: '#ef4444', // Red 500 success: '#10b981', // Emerald 500 dim: 'rgba(148, 163, 184, 0.5)', wei: 'rgba(59, 130, 246, 0.15)', // Blue tint shu: 'rgba(16, 185, 129, 0.15)', // Green tint wu: 'rgba(239, 68, 68, 0.15)', // Red tint }; // 关键事件数据 (坐标经过调整以适应 1200x700 的中国地图大致投影) const EVENTS = [ { id: 1, name: "桃园结义", location: "涿郡 (今河北涿州)", year: "184年", x: 820, y: 180, desc: "汉室倾颓，黄巾乱起。刘备于涿郡起兵，与关羽、张飞誓同生死，共赴国难。此为刘备集团之始。", type: "start" }, { id: 2, name: "救援徐州", location: "徐州 (今江苏徐州)", year: "194年", x: 880, y: 320, desc: "曹操攻徐州，刘备领兵往救。陶谦感其义，三让徐州。刘备始有立足之地，然旋即被吕布所夺。", type: "move" }, { id: 3, name: "投奔袁绍", location: "邺城 (今河北临漳)", year: "200年", x: 780, y: 220, desc: "衣带诏事发，曹操东征。刘备战败，关羽被擒，张飞失散。刘备只身北投袁绍，以此抗曹。", type: "retreat" }, { id: 4, name: "三顾茅庐", location: "隆中 (今湖北襄阳)", year: "207年", x: 680, y: 380, desc: "依附刘表，屯兵新野。三顾茅庐请诸葛亮出山，定《隆中对》，确立'跨有荆益'之战略蓝图。", type: "key" }, { id: 5, name: "赤壁鏖战", location: "赤壁 (今湖北赤壁)", year: "208年", x: 740, y: 460, desc: "曹操南下，孙刘结盟。周瑜、诸葛亮火烧赤壁，大败曹军。天下三分之势初定。", type: "battle" }, { id: 6, name: "借据荆州", location: "公安 (今湖北公安)", year: "209年", x: 700, y: 490, desc: "向孙权借荆州南郡，南征四郡，实力大增，终于拥有了稳固的根据地。", type: "gain" }, { id: 7, name: "入主益州", location: "成都 (今四川成都)", year: "214年", x: 400, y: 460, desc: "西进巴蜀，刘璋投降。刘备入主成都，跨有荆益，霸业初成。", type: "gain" }, { id: 8, name: "汉中称王", location: "汉中 (今陕西汉中)", year: "219年", x: 450, y: 340, desc: "定军山斩夏侯渊，逼退曹操。进位汉中王，声势达到顶峰。", type: "peak" }, { id: 9, name: "夷陵之火", location: "夷陵 (今湖北宜昌)", year: "222年", x: 620, y: 450, desc: "关羽失荆州，刘备东征复仇。陆逊火烧连营七百里，蜀汉元气大伤。", type: "fail" }, { id: 10, name: "白帝托孤", location: "永安 (今重庆奉节)", year: "223年", x: 580, y: 430, desc: "病重托孤于诸葛亮：'君才十倍曹丕，必能安国。' 一代枭雄落幕。", type: "end" } ]; // 模拟河流数据 (长江、黄河) const RIVERS = [ { name: "黄河", path: "M 250,250 Q 350,150 450,220 T 600,200 T 750,180 T 900,250", color: "#fbbf24", width: 2, opacity: 0.3 }, { name: "长江", path: "M 200,350 Q 300,450 400,480 T 600,450 T 750,480 T 950,400 T 1100,420", color: "#38bdf8", width: 3, opacity: 0.4 } ]; // 三国大致区域多边形 const TERRITORIES = [ { id: 'wei', points: "200,50 1100,50 1100,350 700,380 400,300 200,250", color: COLORS.wei, label: "曹魏 (WEI)" }, { id: 'shu', points: "150,300 450,300 550,450 450,650 150,600", color: COLORS.shu, label: "蜀汉 (SHU)" }, { id: 'wu', points: "600,400 1150,350 1150,650 700,650 650,500", color: COLORS.wu, label: "东吴 (WU)" }, ]; // ========================================== // 2. 辅助组件 // ========================================== // 网格背景 const GridLayer = () => ( {/* 装饰性光圈 */} ); // 地形与河流 const TerrainLayer = () => ( {TERRITORIES.map(t => ( {/* 区域文字标签 - 只有大致位置 */} ))} {RIVERS.map((r, i) => ( ))} ); // 科技感装饰角标 const TechCorners = () => { const size = 30; return ( ); }; // ========================================== // 3. 主组件 // ========================================== export default function LiuBeiLifeMap() { // 状态管理 const [currentStep, setCurrentStep] = useState(0); const [isPlaying, setIsPlaying] = useState(true); const [isHovering, setIsHovering] = useState(false); // 引用 const timerRef = useRef(null); const startTimeRef = useRef(0); const animationFrameRef = useRef(null); // 计算路径 (使用 D3 CatmullRom 曲线生成平滑轨迹) const lineGenerator = useMemo(() => { return d3.line() .x(d => d.x) .y(d => d.y) .curve(d3.curveCatmullRom.alpha(0.5)); }, []); const fullPathData = useMemo(() => lineGenerator(EVENTS), [lineGenerator]); // 计算当前激活的路径段 const activePathData = useMemo(() => { if (currentStep === 0) return ""; const activeEvents = EVENTS.slice(0, currentStep + 1); return lineGenerator(activeEvents); }, [currentStep, lineGenerator]); // 动画循环控制 useEffect(() => { // 如果正在播放，设置定时器 if (isPlaying) { timerRef.current = setInterval(() => { setCurrentStep(prev => { if (prev >= EVENTS.length - 1) { setIsPlaying(false); return prev; } return prev + 1; }); }, STEP_DURATION); } return () => { if (timerRef.current) clearInterval(timerRef.current); }; }, [isPlaying]); // 进度重置 const handleReset = useCallback(() => { setCurrentStep(0); setIsPlaying(true); }, []); const handleTogglePlay = useCallback(() => { setIsPlaying(prev => !prev); }, []); const handleStepClick = useCallback((index) => { setCurrentStep(index); setIsPlaying(false); }, []); // 当前事件数据 const currentEvent = EVENTS[currentStep]; const progress = ((currentStep + 1) / EVENTS.length) * 100; return (

{/* 根容器 */}

{/* SVG 渲染层 */} {/* ================= UI 叠加层 ================= */} {/* 顶部标题栏 */}

刘备一生足迹图

PROJECT: SHU_HAN STATUS: {isPlaying ? 'REPLAYING' : 'PAUSED'}

{/* 时间轴进度条 */}

TIMELINE: {currentEvent.year}

{/* 左下角信息面板 */}

{/* 头部信息 */}

{currentEvent.year} COORD: {currentEvent.x}, {currentEvent.y}

{/* 标题 */}

{currentEvent.name}

{/* 地点 */}

{currentEvent.location}

{/* 描述 */}

{currentEvent.desc}

{/* 装饰性数据流 */}

DATA_ID: #{currentEvent.id.toString().padStart(4, '0')} TYPE: {currentEvent.type.toUpperCase()}

{/* 右下角控制区 */}

{isPlaying ? : }

{/* 装饰：右上角数据列表 */}

CHRONICLE LIST

{EVENTS.map((e, i) => ( {e.year} {e.name.substring(0, 4)} ))}

); } // 子组件：控制按钮 const ControlButton = ({ onClick, children, isActive }) => ( ); ```