'use client'; import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import * as Lucide from 'lucide-react'; import * as d3 from 'd3'; export const CompanyHistoryViz = () => { // --------------------------------------------------------------------------- // Constants & Config // --------------------------------------------------------------------------- const WIDTH = 1200; const HEIGHT = 700; const ITEM_SPACING = 280; // Distance between timeline nodes const AUTO_PLAY_INTERVAL = 5000; // ms per slide // --------------------------------------------------------------------------- // Data // --------------------------------------------------------------------------- const rawData = [ { year: '2015', title: '公司成立', description: '浙江永拓信息科技有限公司正式成立，注册资金3000万元，专注于数字孪生地图应用服务。', icon: 'Building2', color: '#38bdf8' }, { year: '2015.11', title: '产学研合作启动', description: '与中国工程院院士合作成立"永拓院士专家工作站"，与浙江大学联合成立智慧城市研究中心。', icon: 'Handshake', color: '#818cf8' }, { year: '2017', title: '技术突破', description: '在数字孪生核心技术上取得重大突破，获得多项软件著作权，开始服务于智慧城市建设。', icon: 'Cpu', color: '#c084fc' }, { year: '2019', title: '高新技术认证', description: '获批高新技术研究开发中心，标志着公司在技术创新方面达到行业领先水平。', icon: 'Award', color: '#f472b6' }, { year: '2022', title: '业务扩展', description: '高企复审通过，业务覆盖全国多个省市，服务客户超过10000家，成为行业知名品牌。', icon: 'TrendingUp', color: '#34d399' }, { year: '至今', title: '未来发展', description: '持续投入研发，拓展国际市场，致力于成为全球领先的数字孪生技术服务提供商。', icon: 'Rocket', color: '#fbbf24' } ]; // Enrich data with positions const milestones = useMemo(() => { return rawData.map((item, index) => ({ ...item, id: index, x: index * ITEM_SPACING })); }, []); // --------------------------------------------------------------------------- // State // --------------------------------------------------------------------------- const [activeIndex, setActiveIndex] = useState(0); const [isPaused, setIsPaused] = useState(false); const containerRef = useRef(null); // --------------------------------------------------------------------------- // Animation Loop (RAF) for Background Particles // --------------------------------------------------------------------------- // Using direct DOM manipulation via refs for high-performance particle system // without triggering React re-renders. const particleRefs = useRef([]); const particles = useMemo(() => { return Array.from({ length: 40 }).map(() => ({ x: Math.random() * WIDTH, y: Math.random() * HEIGHT, vx: (Math.random() - 0.5) * 0.5, vy: (Math.random() - 0.5) * 0.5, size: Math.random() * 2 + 1, opacity: Math.random() * 0.5 + 0.1 })); }, []); useEffect(() => { let animationFrameId; const loop = () => { // Update particles particles.forEach((p, i) => { p.x += p.vx; p.y += p.vy; // Wrap around screen if (p.x < 0) p.x = WIDTH; if (p.x > WIDTH) p.x = 0; if (p.y < 0) p.y = HEIGHT; if (p.y > HEIGHT) p.y = 0; // Direct DOM update const el = particleRefs.current[i]; if (el) { el.setAttribute('cx', p.x.toFixed(1)); el.setAttribute('cy', p.y.toFixed(1)); } }); animationFrameId = requestAnimationFrame(loop); }; loop(); return () => { cancelAnimationFrame(animationFrameId); }; }, [particles]); // --------------------------------------------------------------------------- // Auto-Play Logic // --------------------------------------------------------------------------- useEffect(() => { const timer = setInterval(() => { if (!isPaused) { setActiveIndex((prev) => (prev + 1) % milestones.length); } }, AUTO_PLAY_INTERVAL); return () => clearInterval(timer); }, [isPaused, milestones.length]); // --------------------------------------------------------------------------- // Helper Components & Icons // --------------------------------------------------------------------------- const IconComponent = ({ name, color, size = 24 }) => { const LucideIcon = Lucide[name] || Lucide.Circle; return ; }; // --------------------------------------------------------------------------- // Render // --------------------------------------------------------------------------- // Calculate camera offset to center the active item // Center of screen is WIDTH/2. Active item is at activeIndex * SPACING. // We want: (activeIndex * SPACING) + offsetX = WIDTH/2 // So: offsetX = WIDTH/2 - (activeIndex * SPACING) const cameraOffset = WIDTH / 2 - (activeIndex * ITEM_SPACING); return (

setIsPaused(true)} onMouseLeave={() => setIsPaused(false)} > {/* 1. Background Grid & Particles */} {/* 2. Main Visualization Layer */}

{/* 3. Info Card Overlay (Glassmorphism) */}

{/* Background decorative glow inside card */}

{/* Header */}

{milestones[activeIndex].title}

{milestones[activeIndex].year} MILESTONE

{/* Divider */}

{/* Description */}

{milestones[activeIndex].description}

{/* Progress Bar inside Card */}

{!isPaused && ( )} {isPaused && (

)}

{isPaused && (

PAUSED

)}

{/* 4. Top Header / Branding */}

COMPANY HISTORY

DEVELOPMENT ROADMAP

{/* 5. Navigation Dots (Bottom) */}

{milestones.map((_, i) => (

); };