'use client'; import React, { useState, useEffect, useMemo } from 'react'; // 动画阶段定义 const STAGES = { IDLE: 0, // 初始状态 CAR_ENTER: 1, // 车辆入场 BLOCKED: 2, // 遇到闸机，显示无法通行 ZOOM_IN: 3, // 切换到呼叫柱特写 PRESS_BTN: 4, // 按下按钮 CALLING: 5, // 呼叫中 CENTER: 6, // 远程中心接通 BACK_SCENE: 7, // 切回场景 GATE_OPEN: 8, // 抬杆 CAR_EXIT: 9, // 车辆离开 }; // 视觉常量 const VIEW_W = 360; const VIEW_H = 640; const COLOR_BG = "#0f172a"; // Slate 900 const COLOR_FLOOR = "#1e293b"; // Slate 800 const COLOR_ACCENT = "#38bdf8"; // Sky 400 const COLOR_WARN = "#f43f5e"; // Rose 500 const COLOR_SUCCESS = "#22c55e"; // Green 500 export default function ParkingIntercomDemo() { const [stage, setStage] = useState(STAGES.IDLE); // 自动播放逻辑控制器 useEffect(() => { let timer; const runSequence = async () => { // 0. 重置 setStage(STAGES.IDLE); await wait(500); // 1. 车辆入场 setStage(STAGES.CAR_ENTER); await wait(2000); // 2. 受阻提示 setStage(STAGES.BLOCKED); await wait(2000); // 3. 镜头切换至呼叫柱 setStage(STAGES.ZOOM_IN); await wait(1000); // 4. 按下按钮 setStage(STAGES.PRESS_BTN); await wait(800); // 5. 呼叫中动画 setStage(STAGES.CALLING); await wait(2000); // 6. 远程中心画面 setStage(STAGES.CENTER); await wait(2500); // 7. 切回主场景 setStage(STAGES.BACK_SCENE); await wait(1000); // 8. 抬杆 setStage(STAGES.GATE_OPEN); await wait(1000); // 9. 车辆离开 setStage(STAGES.CAR_EXIT); await wait(2000); // 循环 runSequence(); }; runSequence(); return () => clearTimeout(timer); }, []); const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms)); // 辅助样式计算 const getCarPosition = () => { if (stage === STAGES.IDLE) return -180; if (stage >= STAGES.CAR_ENTER && stage < STAGES.CAR_EXIT) return 60; if (stage === STAGES.CAR_EXIT) return 400; return -180; }; const isGateOpen = stage >= STAGES.GATE_OPEN; const showMainScene = stage <= STAGES.BLOCKED || stage >= STAGES.BACK_SCENE; const showIntercom = stage >= STAGES.ZOOM_IN && stage <= STAGES.CALLING; const showCenter = stage === STAGES.CENTER; return (

); }