import React, { useState, useEffect, useRef, useMemo } from 'react'; // 动画配置常量 const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const BG_COLOR = '#0f172a'; const PRIMARY_COLOR = '#38bdf8'; // Sky blue const ACCENT_COLOR = '#a855f7'; // Purple const SUCCESS_COLOR = '#22c55e'; // Green const TEXT_COLOR = '#e2e8f0'; // 依赖服务元数据 const SERVICES_DATA = [ { id: 'auth', name: 'AuthService', color: '#f43f5e', icon: '🛡️' }, { id: 'db', name: 'Database', color: '#3b82f6', icon: '💾' }, { id: 'log', name: 'Logger', color: '#eab308', icon: '📝' }, ]; export const DependencyInjectionAnim = () => { // 动画阶段状态 // 0: Init (Empty Container) // 1: Register (Services flying in) // 2: Consumer (Consumer appears) // 3: Request (Consumer asks for deps) // 4: Inject (Data flow) // 5: Active (System running) const [phase, setPhase] = useState(0); // 用于强制刷新 RAF 动画 (粒子/流光) const [, setTick] = useState(0); const timeRef = useRef(0); const rafRef = useRef(); // 粒子系统 (背景氛围) const particles = useMemo(() => { return Array.from({ length: 40 }).map(() => ({ x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, size: Math.random() * 2 + 0.5, speed: Math.random() * 0.5 + 0.1, opacity: Math.random() * 0.5 + 0.1, })); }, []); // 动画主循环 (只负责时间推进和粒子位置，不处理业务逻辑状态) useEffect(() => { const loop = () => { timeRef.current += 0.01; setTick(t => t + 1); // 触发重绘以更新粒子和流光 rafRef.current = requestAnimationFrame(loop); }; rafRef.current = requestAnimationFrame(loop); return () => cancelAnimationFrame(rafRef.current!); }, []); // 业务逻辑状态机控制器 useEffect(() => { let timer: NodeJS.Timeout; const runSequence = async () => { // Phase 0: Start await new Promise(r => setTimeout(r, 1000)); // Phase 1: Register Services setPhase(1); await new Promise(r => setTimeout(r, 2500)); // Phase 2: Define Consumer setPhase(2); await new Promise(r => setTimeout(r, 2000)); // Phase 3: Request Dependencies (Scanning) setPhase(3); await new Promise(r => setTimeout(r, 1500)); // Phase 4: Injecting (Beams) setPhase(4); await new Promise(r => setTimeout(r, 2500)); // Phase 5: Complete setPhase(5); await new Promise(r => setTimeout(r, 4000)); // Reset setPhase(0); runSequence(); }; runSequence(); return () => clearTimeout(timer); }, []); // 计算连线路径 (贝塞尔曲线) const getConnectionPath = (start: {x: number, y: number}, end: {x: number, y: number}) => { const controlX1 = start.x + (end.x - start.x) / 2; const controlY1 = start.y; const controlX2 = start.x + (end.x - start.x) / 2; const controlY2 = end.y; return `M ${start.x} ${start.y} C ${controlX1} ${controlY1}, ${controlX2} ${controlY2}, ${end.x} ${end.y}`; }; // 渲染帮助函数：获取当前文字说明 const getLabel = () => { switch(phase) { case 0: return "初始化 IoC 容器 (Container Map)"; case 1: return "注册依赖 (Container.register)"; case 2: return "定义消费者 (Client Class)"; case 3: return "解析依赖需求 (Resolve Dependencies)"; case 4: return "注入依赖 (Injecting...)"; case 5: return "实例化完成 (Ready)"; default: return ""; } }; // 渲染帮助函数：获取代码片段 const getCodeSnippet = () => { switch(phase) { case 0: return "const container = new Container();"; case 1: return "container.register('auth', new AuthService());\ncontainer.register('db', new Database());..."; case 2: return "class UserController {\n constructor(@Inject('auth') auth, ...) {} \n}"; case 3: return "const userCtrl = container.resolve(UserController);"; case 4: return "// Injecting instances into constructor..."; case 5: return "// userCtrl is now fully initialized!"; default: return ""; } }; // 动态位置计算 const containerCenter = { x: 350, y: 300 }; const consumerCenter = { x: 800, y: 300 }; return (

); };