'use client'; import React, { useState, useEffect, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // 颜色定义 const COLORS = { bg: '#0f172a', primary: '#3b82f6', // 蓝色 success: '#10b981', // 绿色 danger: '#ef4444', // 红色 warning: '#f59e0b', // 橙色 text: '#e2e8f0', grid: '#1e293b', dim: '#475569' }; // 阶段定义 const STAGES = [ { id: 0, title: '正常运行 & 本地备份', sub: 'Normal Operation & Local Backup', desc: '数据实时写入本地存储，业务正常访问' }, { id: 1, title: '异地数据同步', sub: 'Remote Replication', desc: '数据通过专线异步/同步复制到异地灾备中心' }, { id: 2, title: '灾难发生 !', sub: 'Disaster Occurred', desc: '主中心遭遇故障（断电/火灾/攻击），服务中断' }, { id: 3, title: '容灾切换 (Failover)', sub: 'Disaster Recovery', desc: '业务流量自动切换至灾备中心，保证业务连续性 (RTO)' }, { id: 4, title: '重建与回切 (Failback)', sub: 'Restoration', desc: '主中心修复，数据差异回传，业务切回主中心' }, ]; export default function DisasterRecoveryAnimation() { const [stage, setStage] = useState(0); const [timer, setTimer] = useState(0); // 自动播放逻辑 useEffect(() => { const interval = setInterval(() => { setTimer(prev => prev + 1); }, 100); return () => clearInterval(interval); }, []); // 状态机流转 useEffect(() => { // 简单的时间轴控制 const cycleLength = 240; // 总周期 tick 数 const t = timer % cycleLength; if (t < 50) setStage(0); // 0-5s: 正常+本地 else if (t < 90) setStage(1); // 5-9s: 异地同步 else if (t < 110) setStage(2); // 9-11s: 灾难 else if (t < 170) setStage(3); // 11-17s: 切换 else setStage(4); // 17-24s: 恢复 }, [timer]); // 计算节点状态颜色 const primaryStatus = useMemo(() => { if (stage === 2 || stage === 3) return 'danger'; if (stage === 4) return 'warning'; // 恢复中 return 'primary'; }, [stage]); const drStatus = useMemo(() => { if (stage === 3 || stage === 4) return 'success'; // 接管业务 return 'dim'; // 待机 }, [stage]); // 粒子生成器组件 const DataStream = ({ pathId, active, color, speed = '2s', delay = '0s', count = 3, reverse = false }) => { if (!active) return null; return ( {Array.from({ length: count }).map((_, i) => ( {/* 粒子闪烁 */} ))} ); }; return ( ); }