'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const CENTER = { x: VIEW_WIDTH / 2, y: VIEW_HEIGHT / 2 }; const RADIUS = 220; // Helper: Generate random range const random = (min, max) => Math.random() * (max - min) + min; // Agent Types configuration const AGENT_CONFIGS = [ { id: 0, role: 'Architect', label: '架构师', color: '#38bdf8', icon: 'A' }, { id: 1, role: 'Developer', label: '开发者', color: '#818cf8', icon: 'D' }, { id: 2, role: 'Reviewer', label: '审查员', color: '#c084fc', icon: 'R' }, { id: 3, role: 'Security', label: '安全官', color: '#f472b6', icon: 'S' }, { id: 4, role: 'Optimizer', label: '优化师', color: '#34d399', icon: 'O' }, ]; export const AICollaborationView = () => { // Animation driver state (increment to force re-render) const [, setTick] = useState(0); // Refs for physics and logic to avoid React render cycle dependency issues const timeRef = useRef(0); const rafRef = useRef(null); // Particle/Packet System const packetsRef = useRef([]); // { id, from: {x,y}, to: {x,y}, progress, color, size } const nextPacketId = useRef(0); // Agent States (simulating processing activity) const agentsRef = useRef(AGENT_CONFIGS.map(() => ({ activity: 0, // 0-1 scale of activity statusIdx: 0, statusTimer: 0 }))); // Static Geometry Calculation const agents = useMemo(() => { return AGENT_CONFIGS.map((config, index) => { const angle = (index / AGENT_CONFIGS.length) * Math.PI * 2 - Math.PI / 2; return { ...config, x: CENTER.x + Math.cos(angle) * RADIUS, y: CENTER.y + Math.sin(angle) * RADIUS, angle }; }); }, []); // Status messages const STATUS_MESSAGES = ['待机中', '分析数据', '生成方案', '同步节点', '校验中']; useEffect(() => { const loop = () => { timeRef.current += 0.01; const t = timeRef.current; // 1. Manage Packets (Data flow) // Spawn new packets randomly if (Math.random() < 0.08) { const sourceIdx = Math.floor(random(0, agents.length)); const targetType = Math.random() > 0.4 ? 'CENTER' : 'NEIGHBOR'; const source = agents[sourceIdx]; let target, targetPos; if (targetType === 'CENTER') { targetPos = CENTER; } else { // Send to neighbor const neighborIdx = (sourceIdx + 1) % agents.length; targetPos = { x: agents[neighborIdx].x, y: agents[neighborIdx].y }; } packetsRef.current.push({ id: nextPacketId.current++, from: { x: source.x, y: source.y }, to: targetPos, progress: 0, speed: random(0.01, 0.025), color: source.color, type: targetType }); // Spike activity on source agent agentsRef.current[sourceIdx].activity = 1.0; } // Also spawn from Center to Agents (Instructions) if (Math.random() < 0.05) { const targetIdx = Math.floor(random(0, agents.length)); packetsRef.current.push({ id: nextPacketId.current++, from: CENTER, to: { x: agents[targetIdx].x, y: agents[targetIdx].y }, progress: 0, speed: random(0.015, 0.03), color: '#ffffff', type: 'INSTRUCTION' }); } // Update Packets packetsRef.current = packetsRef.current.filter(p => { p.progress += p.speed; return p.progress < 1; }); // 2. Update Agent Activity & Status agentsRef.current.forEach((agentState, i) => { // Decay activity agentState.activity *= 0.95; // Cycle status text occasionally agentState.statusTimer++; if (agentState.statusTimer > 200 + random(0, 100)) { agentState.statusIdx = (agentState.statusIdx + 1) % STATUS_MESSAGES.length; agentState.statusTimer = 0; } }); setTick(prev => prev + 1); rafRef.current = requestAnimationFrame(loop); }; rafRef.current = requestAnimationFrame(loop); return () => { if (rafRef.current) cancelAnimationFrame(rafRef.current); }; }, [agents]); // Dependencies empty or stable // Render Helpers const getPacketPos = (p) => { return { x: p.from.x + (p.to.x - p.from.x) * p.progress, y: p.from.y + (p.to.y - p.from.y) * p.progress }; }; const t = timeRef.current; return ( ); };