'use client'; import React, { useState, useEffect, useMemo } from 'react'; export default function CICDCanaryView() { const [phase, setPhase] = useState(0); // 0: CI Build & Test // 1: Deploy v2 (Init) // 2: Canary 10% // 3: Canary 50% // 4: Full Rollout 100% // 5: Decommission v1 const [trafficSplit, setTrafficSplit] = useState(0); // 0 to 1 (percentage to v2) const [logs, setLogs] = useState([]); // Simulation Loop useEffect(() => { let timeout: NodeJS.Timeout; const addLog = (msg: string) => { setLogs(prev => [msg, ...prev].slice(0, 4)); }; const runSequence = async () => { // Reset setPhase(0); setTrafficSplit(0); setLogs([]); addLog("检测到代码提交 (Commit Detected)"); // Phase 0: CI Build (0s - 3s) await new Promise(r => setTimeout(r, 1000)); addLog("开始构建 v2.0 (Building...)"); await new Promise(r => setTimeout(r, 1500)); addLog("自动化测试通过 (Tests Passed)"); // Phase 1: Deploy (3s - 5s) setPhase(1); addLog("部署灰度环境 (Deploying Canary)"); await new Promise(r => setTimeout(r, 2000)); // Phase 2: Canary 10% (5s - 9s) setPhase(2); setTrafficSplit(0.1); addLog("切分流量 10% -> v2.0"); await new Promise(r => setTimeout(r, 4000)); // Phase 3: Canary 50% (9s - 13s) setPhase(3); setTrafficSplit(0.5); addLog("监控正常，扩大流量至 50%"); await new Promise(r => setTimeout(r, 4000)); // Phase 4: Full Rollout (13s - 16s) setPhase(4); setTrafficSplit(1.0); addLog("全量发布 v2.0 (Full Rollout)"); await new Promise(r => setTimeout(r, 3000)); // Phase 5: Cleanup (16s - 18s) setPhase(5); addLog("下线旧版本 v1.0"); await new Promise(r => setTimeout(r, 3000)); // Loop runSequence(); }; runSequence(); return () => clearTimeout(timeout); }, []); // Visual Constants const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const COLOR_BG = "#0f172a"; const COLOR_V1 = "#3b82f6"; // Blue const COLOR_V2 = "#10b981"; // Emerald const COLOR_TRAFFIC = "#fbbf24"; // Amber // Helper to calculate traffic opacity/width const v1Intensity = phase === 5 ? 0 : (1 - trafficSplit); const v2Intensity = phase === 0 ? 0 : trafficSplit; return (

); }