import React, { useState, useEffect, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const CAR_WIDTH = 220; const CAR_LENGTH = 440; export default function AutoSafetyResponse() { const [phase, setPhase] = useState(0); // 0: Cruising (L3 Scanning) // 1: Impact Detected (Red Alert) // 2: Hazards On (Blinking) // 3: Unlock Doors // 4: Open Windows const [logs, setLogs] = useState([]); useEffect(() => { let timeouts: NodeJS.Timeout[] = []; const runSequence = () => { // Reset setPhase(0); setLogs(['系统初始化...', 'L3 自动驾驶模式：激活']); // Phase 1: Accident happens timeouts.push(setTimeout(() => { setPhase(1); setLogs(prev => [...prev, '⚠️ 检测到碰撞冲击', '启动应急安全协议']); }, 3000)); // Phase 2: Hazards timeouts.push(setTimeout(() => { setPhase(2); setLogs(prev => [...prev, '>> 正在开启双闪预警']); }, 4500)); // Phase 3: Unlock timeouts.push(setTimeout(() => { setPhase(3); setLogs(prev => [...prev, '>> 车门中控锁：已释放']); }, 6000)); // Phase 4: Windows timeouts.push(setTimeout(() => { setPhase(4); setLogs(prev => [...prev, '>> 车窗玻璃：自动降下']); }, 7500)); // Loop timeouts.push(setTimeout(() => { runSequence(); }, 12000)); }; runSequence(); return () => timeouts.forEach(clearTimeout); }, []); // Derived states for animations const isCruising = phase === 0; const isImpact = phase >= 1; const hazardsActive = phase >= 2; const doorsUnlocked = phase >= 3; const windowsOpen = phase >= 4; // Road lines animation const dashOffset = isCruising ? 0 : 100; // Stop moving when impact happens return (

); }