'use client'; import React, { useState, useEffect, useMemo } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import * as Lucide from 'lucide-react'; // 动画数据定义 const SCENES = [ { id: 0, year: "1956", era: "The Awakening", title: "启蒙时代", subtitle: "The Birth of AI", desc: "达特茅斯会议正式提出 Artificial Intelligence 概念。图灵测试 (Turing Test) 定义了机器智能的边界，符号主义开始萌芽。", icon: "Binary", shape: "circle" }, { id: 1, year: "1980s", era: "Symbolic Era", title: "专家系统", subtitle: "Rule-Based Logic", desc: "基于“如果-那么”规则的知识库推理系统盛行。LISP 机器崛起，AI 尝试通过逻辑符号模拟人类专家决策。", icon: "Network", shape: "rect" }, { id: 2, year: "2012", era: "Deep Learning", title: "深度学习", subtitle: "Neural Networks", desc: "AlexNet 在 ImageNet 竞赛中爆发，卷积神经网络 (CNN) 与反向传播算法结合大数据，开启了感知智能的新纪元。", icon: "BrainCircuit", shape: "hexagon" }, { id: 3, year: "2023+", era: "Generative AI", title: "生成式 AI", subtitle: "Large Language Models", desc: "Transformer 架构引领变革。ChatGPT 等大模型展现涌现能力 (Emergent Ability)，AI 从“识别”进化为“创造”。", icon: "Sparkles", shape: "star" } ]; const DURATION = 3500; // 2s展示 + 转场缓冲 export default function AIHistoryAnimation() { const [currentIndex, setCurrentIndex] = useState(0); // 主循环：控制场景切换 useEffect(() => { const timer = setInterval(() => { setCurrentIndex((prev) => (prev + 1) % SCENES.length); }, DURATION); return () => clearInterval(timer); }, []); const currentScene = SCENES[currentIndex]; // 动态组件映射 const IconComponent = useMemo(() => { const icons = { Binary: Lucide.Binary, Network: Lucide.Workflow, BrainCircuit: Lucide.Cpu, Sparkles: Lucide.Bot, }; return icons[currentScene.icon] || Lucide.Activity; }, [currentScene.icon]); return (

{/* 左侧视觉区 */} {/* 背景网格装饰 */}

{/* 动态图标容器 */}

{/* 装饰光环 */}

{/* 左下角标签 */}

Phase {currentScene.id + 1} {currentScene.year}

{/* 右侧内容区 */}

{/* 顶部标签 */}

{currentScene.era}

{/* 主标题 */}

{currentScene.title}

{currentScene.subtitle}

{/* 分割线与进度条 */}

{/* 正文描述 */}

{currentScene.desc}

{/* 底部导航状态 */}

{SCENES.map((_, idx) => ( ))}

{currentIndex + 1} / {SCENES.length}

{/* 装饰性UI元素 */}

); }