'use client'; import React, { useState, useEffect, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // 硬件位置定义 const POS = { SSD: { x: 150, y: 450, w: 160, h: 80 }, RAM: { x: 500, y: 300, w: 180, h: 60 }, CPU: { x: 250, y: 100, w: 140, h: 140 }, GPU: { x: 750, y: 100, w: 200, h: 100 }, }; // 动画阶段定义 type Phase = 'IDLE' | 'SSD_READ' | 'SSD_TO_RAM' | 'RAM_PROCESS' | 'RAM_DISTRIBUTE' | 'PROCESSING' | 'COMPLETE'; export default function HardwareSystemAnimation() { const [phase, setPhase] = useState('IDLE'); const [fps, setFps] = useState(0); // 自动循环动画逻辑 useEffect(() => { let timer: NodeJS.Timeout; const sequence = async () => { // 1. 初始状态 setPhase('IDLE'); setFps(0); await wait(1000); // 2. 硬盘读取 setPhase('SSD_READ'); await wait(2000); // 3. 传输到内存 setPhase('SSD_TO_RAM'); await wait(1500); // 4. 内存激活 setPhase('RAM_PROCESS'); await wait(1000); // 5. 分发给CPU和GPU setPhase('RAM_DISTRIBUTE'); await wait(1500); // 6. 核心工作 (CPU/GPU) setPhase('PROCESSING'); // 模拟FPS爬升 let currentFps = 0; const fpsInterval = setInterval(() => { currentFps += 4; if (currentFps >= 144) { currentFps = 144; clearInterval(fpsInterval); } setFps(currentFps); }, 50); await wait(4000); // 7. 完成展示 setPhase('COMPLETE'); await wait(3000); // 重置循环 sequence(); }; sequence(); return () => clearTimeout(timer); }, []); const wait = (ms: number) => new Promise(resolve => setTimeout(resolve, ms)); // 颜色定义 const colors = { bg: '#0f172a', circuit: '#1e293b', ssd: '#0ea5e9', // Sky blue ram: '#d946ef', // Fuchsia cpu: '#f59e0b', // Amber gpu: '#10b981', // Emerald text: '#e2e8f0', glow: 'rgba(255,255,255,0.8)' }; return (

); } // 子组件：背景电路 const BackgroundCircuits = () => ( {/* 随机装饰线条 */} ); // 子组件：连接线动画 const ConnectionPath = ({ start, end, active, color, label, delay = 0 }: any) => { // 生成简单的折线路径 const midY = (start.y + end.y) / 2; // 如果是SSD到RAM，做特定的拐弯 // 这里做一个简单的三次贝塞尔曲线或者直角折线 // 为了科技感，使用直角折线 let d = ""; if (start.y > end.y) { // 向上流动 // 简单的两点连接，如果需要折线逻辑需要更复杂，这里简化为直线或S型 // 针对SSD(Bottom) -> RAM(Mid) if (start.x < end.x) { d = `M${start.x},${start.y} L${start.x},${end.y + 40} L${end.x},${end.y + 40} L${end.x},${end.y}`; } else { // RAM -> CPU/GPU (Upwards) d = `M${start.x},${start.y} L${start.x},${midY} L${end.x},${midY} L${end.x},${end.y}`; } } else { d = `M${start.x},${start.y} L${end.x},${end.y}`; } return ( {/* 底部暗线 */} {/* 激活时的亮线 */} {/* 传输粒子的动画 */} {active && ( )} {/* 标签 */} {active && ( {label} )} ); }; // 子组件：GPU风扇 const Fan = ({ x, y, r, spinning, color, delay = 0 }: any) => { return ( {spinning && ( )} {[0, 45, 90, 135, 180, 225, 270, 315].map((angle, i) => ( ))} ); };