'use client'; import React, { useState, useEffect, useMemo } from 'react'; // 视图配置：使用标准 HD 比例 1280x720 以保证 16:9 的完美适配 const VIEW_WIDTH = 1280; const VIEW_HEIGHT = 720; const CENTER_X = VIEW_WIDTH / 2; const CENTER_Y = VIEW_HEIGHT / 2; // 配色方案：科技蓝、警告橙、数据白 const THEME = { bg: '#0f172a', // Slate 900 primary: '#00f0ff', // Cyber Cyan secondary: '#3b82f6', // Tech Blue accent: '#f59e0b', // Amber Warning highlight: '#ffffff', // Pure White grid: '#1e293b', // Grid Lines dark: '#020617' // Deep bg }; export default function TechSchematicView() { const [step, setStep] = useState(0); // 0: 初始化 // 1: 网格与环境启动 // 2: 核心方框出现 (Zoom In/Large state) // 3: 核心方框缩小 (Zoom Out/Normal state) // 4: 线路延伸 // 5: 节点展开 // 6: 循环待机动画 useEffect(() => { const runSequence = async () => { await wait(200); setStep(1); // Grid await wait(800); setStep(2); // Box Appear (Large) await wait(1500); setStep(3); // Box Shrink await wait(1000); setStep(4); // Lines await wait(800); setStep(5); // Nodes await wait(1000); setStep(6); // Idle }; runSequence(); }, []); const wait = (ms) => new Promise(r => setTimeout(r, ms)); // 核心 16:9 方框尺寸 const boxW = 280; const boxH = boxW * 9 / 16; // ~157.5 // 节点配置 const nodes = [ { id: 'top', label: '军队指挥', sub: 'COMMAND CENTER', x: CENTER_X, y: 120, color: '#ef4444', // Red/Orange for Command icon: 'shield' }, { id: 'left', label: '宇航科学', sub: 'ASTRONAUTICS', x: 200, y: CENTER_Y, color: '#00f0ff', // Cyan for Science icon: 'atom' }, { id: 'right', label: '航天信息', sub: 'AEROSPACE INFO', x: 1080, y: CENTER_Y, color: '#8b5cf6', // Violet for Info icon: 'data' } ]; // 动态生成背景粒子 const particles = useMemo(() => { return Array.from({ length: 40 }).map((_, i) => ({ x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, r: Math.random() * 2, opacity: Math.random() * 0.5 + 0.1, speed: Math.random() * 0.5 + 0.1 })); }, []); // 计算折线路径 const getPath = (node) => { // 简单的曼哈顿路径逻辑 if (node.id === 'top') { return `M ${CENTER_X} ${CENTER_Y - boxH/2} L ${CENTER_X} ${node.y + 60}`; } else if (node.id === 'left') { return `M ${CENTER_X - boxW/2} ${CENTER_Y} L ${CENTER_X - boxW/2 - 40} ${CENTER_Y} L ${node.x + 80} ${node.y}`; } else { return `M ${CENTER_X + boxW/2} ${CENTER_Y} L ${CENTER_X + boxW/2 + 40} ${CENTER_Y} L ${node.x - 80} ${node.y}`; } }; return (

{/* CSS Animations */}

); }