```javascript 'use client'; import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'; import { Shield, Users, Server, Database, Globe, Cpu, Activity, Lock, AlertTriangle, Zap, Search } from 'lucide-react'; import * as d3 from 'd3'; // --- Configuration & Constants --- const WIDTH = 1200; const HEIGHT = 700; const CX = WIDTH / 2; const CY = HEIGHT / 2; // Visual Palette const COLORS = { bg: '#0F172A', grid: '#1e293b', friendly: '#06b6d4', // Cyan hostile: '#d946ef', // Magenta neutral: '#f59e0b', // Amber text: '#f8fafc', textDim: '#64748b', link: '#334155', linkActive: '#38bdf8' }; // Easing Functions const easeOutElastic = (x) => { const c4 = (2 * Math.PI) / 3; return x === 0 ? 0 : x === 1 ? 1 : Math.pow(2, -10 * x) * Math.sin((x * 10 - 0.75) * c4) + 1; }; const easeOutQuint = (x) => 1 - Math.pow(1 - x, 5); const easeInOutCubic = (x) => x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2; // --- Data Generation --- const generateGraphData = () => { const nodes = []; const links = []; // Level 0: Core nodes.push({ id: 'core', level: 0, type: 'friendly', label: '核心枢纽', role: 'MAIN_SERVER', icon: Server, angle: 0, dist: 0, r: 40 }); // Level 1: Primary Connections (6 nodes) const l1Roles = [ { type: 'friendly', label: '安全网关', icon: Shield }, { type: 'hostile', label: '外部威胁', icon: AlertTriangle }, { type: 'neutral', label: '第三方API', icon: Globe }, { type: 'friendly', label: '数据中心', icon: Database }, { type: 'hostile', label: '异常节点', icon: Lock }, { type: 'friendly', label: '运维终端', icon: Cpu }, ]; l1Roles.forEach((role, i) => { const angle = (i / l1Roles.length) * Math.PI * 2; const id = `l1-${i}`; nodes.push({ id, level: 1, type: role.type, label: role.label, role: 'PRIMARY', icon: role.icon, angle, dist: 220, r: 24, parentId: 'core' }); links.push({ source: 'core', target: id, id: `link-c-${i}` }); }); // Level 2: Sub Connections (Distributed) let l2Count = 0; nodes.filter(n => n.level === 1).forEach((parent, i) => { const childrenCount = 2 + (i % 3); // 2 to 4 children const spread = 0.8; // Radian spread for (let j = 0; j < childrenCount; j++) { const offset = (j - (childrenCount - 1) / 2) * (spread / childrenCount); const angle = parent.angle + offset; const id = `l2-${l2Count++}`; const type = parent.type === 'hostile' ? (Math.random() > 0.5 ? 'hostile' : 'neutral') : 'friendly'; nodes.push({ id, level: 2, type, label: `节点-${100 + l2Count}`, role: 'SUB', icon: type === 'hostile' ? AlertTriangle : (type === 'neutral' ? Users : Activity), angle, dist: 360, // Further out r: 14, parentId: parent.id }); links.push({ source: parent.id, target: id, id: `link-p-${i}-${j}` }); } }); // Identify Active Path for Animation Phase 4 // Path: Core -> L1-0 (Friendly) -> First Child of L1-0 const activePathNodes = ['core', 'l1-0', nodes.find(n => n.parentId === 'l1-0').id]; const activePathLinks = links.filter(l => (l.source === activePathNodes[0] && l.target === activePathNodes[1]) || (l.source === activePathNodes[1] && l.target === activePathNodes[2]) ).map(l => l.id); return { nodes, links, activePathNodes, activePathLinks }; }; export default function KnowledgeGraphAnimation() { // State for rendering loop const [frameData, setFrameData] = useState({ time: 0, zoom: 1, pan: { x: CX, y: CY } }); // Refs for loop control const requestRef = useRef(); const startTimeRef = useRef(null); // Memoized Static Data const { nodes, links, activePathNodes, activePathLinks } = useMemo(() => generateGraphData(), []); // --- Animation Loop --- const animate = useCallback((time) => { if (!startTimeRef.current) startTimeRef.current = time; const elapsed = (time - startTimeRef.current) / 1000; // Seconds // Calculate Camera Zoom (Phase 3: 5s - 8s) let zoom = 1; if (elapsed > 5) { const t = Math.min((elapsed - 5) / 3, 1); zoom = 1 - easeInOutCubic(t) * 0.35; // Zoom out to 0.65 } setFrameData({ time: elapsed, zoom, pan: { x: CX, y: CY } // Fixed center for now, could pan if needed }); requestRef.current = requestAnimationFrame(animate); }, []); useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, [animate]); // --- Helper: Calculate Node Position per Frame --- const getNodeTransform = (node, time) => { // Delays based on level const delay = node.level === 0 ? 0 : node.level === 1 ? 2.0 : 5.0; const stagger = node.level === 0 ? 0 : (node.angle / (Math.PI * 2)) * 1.5; // Radial stagger const actualStart = delay + stagger; // 1. Scale/Entry Animation let scale = 0; if (time > actualStart) { const t = Math.min(time - actualStart, 1); // 1s duration scale = easeOutElastic(t); } // 2. Position Calculation (Polar -> Cartesian) // Add "breathing" movement const breath = Math.sin(time * 0.5 + node.angle * 3) * 5; const currentDist = node.dist + breath; const x = Math.cos(node.angle) * currentDist; const y = Math.sin(node.angle) * currentDist; // 3. Shake Effect (Phase 2 entry) let shakeX = 0; let shakeY = 0; if (time > actualStart && time < actualStart + 0.5) { const shakeIntensity = (1 - (time - actualStart) * 2) * 5; shakeX = (Math.random() - 0.5) * shakeIntensity; shakeY = (Math.random() - 0.5) * shakeIntensity; } return { x: x + shakeX, y: y + shakeY, scale, opacity: Math.min(scale * 1.5, 1), visible: scale > 0.01 }; }; // --- Render Helpers --- const getColor = (type) => COLORS[type] || COLORS.neutral; // Phase 4 Logic: Active Query const isQueryActive = frameData.time > 8; const queryProgress = isQueryActive ? (frameData.time - 8) % 2.5 : 0; // 2.5s loop return (

{/* Root Container */}

); } ```