'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const CENTER_X = VIEW_WIDTH / 2; const CENTER_Y = VIEW_HEIGHT / 2; // 坐标定义：抽象的中国地理分布 const LOCATIONS = { BEIJING: { x: 580, y: 180, label: 'Beijing (北京)', color: '#fbbf24' }, // Gold SHANGHAI: { x: 650, y: 320, label: 'YRD (长三角)', color: '#38bdf8' }, // Cyan SHENZHEN: { x: 560, y: 450, label: 'GBA (大湾区)', color: '#38bdf8' }, CHENGDU: { x: 380, y: 300, label: 'West (西部经济圈)', color: '#38bdf8' }, GLOBAL_W: { x: 100, y: 150, label: 'Belt & Road (一带一路)', color: '#a78bfa' }, GLOBAL_E: { x: 900, y: 200, label: 'Global Trade (全球贸易)', color: '#a78bfa' }, }; // 经济关键词 const KEYWORDS = [ "总部经济 (HQ Economy)", "金融决策中心 (Financial Hub)", "科技创新 (Tech Innovation)", "高端服务业 (High-end Service)", "数字经济 (Digital Economy)" ]; export default function BeijingEconomicImportance() { const [time, setTime] = useState(0); const [activeKeywordIndex, setActiveKeywordIndex] = useState(0); const requestRef = useRef(); // 粒子系统状态 const [particles, setParticles] = useState>([]); // 动画循环 const animate = (t: number) => { setTime(t); // 更新粒子位置 setParticles(prev => { const newParticles = prev.map(p => ({ ...p, progress: p.progress + p.speed })).filter(p => p.progress < 1); // 随机生成从北京流出或流向北京的粒子 if (Math.random() > 0.85) { // 粒子生成频率 const targets = ['SHANGHAI', 'SHENZHEN', 'CHENGDU', 'GLOBAL_W', 'GLOBAL_E'] as const; const targetKey = targets[Math.floor(Math.random() * targets.length)]; const isOutbound = Math.random() > 0.4; // 更多的是流出（辐射带动） newParticles.push({ id: Math.random(), from: isOutbound ? 'BEIJING' : targetKey, to: isOutbound ? targetKey : 'BEIJING', progress: 0, speed: 0.005 + Math.random() * 0.005, color: isOutbound ? '#fbbf24' : '#38bdf8' }); } return newParticles; }); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); // 轮播关键词 useEffect(() => { const interval = setInterval(() => { setActiveKeywordIndex(prev => (prev + 1) % KEYWORDS.length); }, 3000); return () => clearInterval(interval); }, []); // 计算两点连线 const getLine = (start: {x: number, y: number}, end: {x: number, y: number}) => { return { x1: start.x, y1: start.y, x2: end.x, y2: end.y }; }; // 获取粒子当前坐标 const getParticlePos = (p: typeof particles[0]) => { const start = LOCATIONS[p.from]; const end = LOCATIONS[p.to]; return { x: start.x + (end.x - start.x) * p.progress, y: start.y + (end.y - start.y) * p.progress }; }; return (

); }