```javascript import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'; import { MessageSquare, Database, Server, Cpu, Globe, FileText, Search, Activity, Zap, CheckCircle, X } from 'lucide-react'; const WIDTH = 1200; const HEIGHT = 700; // 颜色定义 const COLORS = { bg: '#0f172a', primary: '#3b82f6', // 蓝色 mcp: '#06b6d4', // 青色 agent: '#8b5cf6', // 紫色 tool: '#f59e0b', // 琥珀色 success: '#10b981', // 绿色 text: '#e2e8f0', textDim: '#94a3b8', grid: '#1e293b' }; // 动画阶段定义 const PHASES = { INPUT: 0, // 0-2s MCP: 1, // 2-4s AGENT: 2, // 4-7s OUTPUT: 3, // 7-9s RESET: 4 // 9-10s }; export default function JDBotFlow() { // --------------------------------------------------------------------------- // 状态管理 // --------------------------------------------------------------------------- const [time, setTime] = useState(0); // 动画总时间 (ms) const [activePhase, setActivePhase] = useState(PHASES.INPUT); const [modal, setModal] = useState(null); // 'mcp' | 'kb' | null const [lang, setLang] = useState('zh'); // 'zh' | 'en' const requestRef = useRef(); const startTimeRef = useRef(); const isPaused = useRef(false); // --------------------------------------------------------------------------- // 动画循环 // --------------------------------------------------------------------------- const animate = (timestamp) => { if (!startTimeRef.current) startTimeRef.current = timestamp; // 如果暂停（打开模态框时），只更新时间戳偏移，不增加动画时间 if (isPaused.current) { startTimeRef.current = timestamp - time; requestRef.current = requestAnimationFrame(animate); return; } const elapsed = timestamp - startTimeRef.current; // 10秒一个循环 const cycleTime = elapsed % 10000; setTime(cycleTime); // 状态机逻辑 if (cycleTime < 2000) setActivePhase(PHASES.INPUT); else if (cycleTime < 4000) setActivePhase(PHASES.MCP); else if (cycleTime < 7000) setActivePhase(PHASES.AGENT); else if (cycleTime < 9000) setActivePhase(PHASES.OUTPUT); else setActivePhase(PHASES.RESET); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, []); // 暂停控制 useEffect(() => { isPaused.current = !!modal; }, [modal]); // --------------------------------------------------------------------------- // 渲染辅助计算 // --------------------------------------------------------------------------- // 背景网格 const gridLines = useMemo(() => { const lines = []; for (let i = 0; i < WIDTH; i += 50) { lines.push(); } for (let i = 0; i < HEIGHT; i += 50) { lines.push(); } return lines; }, []); // 粒子系统 (背景浮动数据流) const particles = useMemo(() => { return Array.from({ length: 20 }).map((_, i) => ({ id: i, x: Math.random() * WIDTH, y: Math.random() * HEIGHT, speed: 0.5 + Math.random(), size: Math.random() * 2 + 1 })); }, []); // --------------------------------------------------------------------------- // 交互处理 // --------------------------------------------------------------------------- const handleModalOpen = (type) => { setModal(type); }; const handleModalClose = () => { setModal(null); }; const toggleLang = () => { setLang(prev => prev === 'zh' ? 'en' : 'zh'); }; // --------------------------------------------------------------------------- // 动态样式计算 // --------------------------------------------------------------------------- // 连线动画辅助 const getDashOffset = (speed = 0.1) => -(time * speed) % 20; // 阶段透明度/高亮控制 const getOpacity = (targetPhase) => activePhase === targetPhase ? 1 : 0.3; const getGlow = (targetPhase, color) => activePhase === targetPhase ? `drop-shadow(0 0 10px ${color})` : 'none'; return (

{/* 标题栏 */}

京东国际 B端订单助手 | MCP Protocol Aware

响应式 SVG 交互演示系统

{/* --------------------------------------------------------------------------- 模态框 / Overlay Layers --------------------------------------------------------------------------- */} {modal && (

{modal === 'mcp' && ( <>

Model Context Protocol

MCP 是一个开放标准，用于在 AI 助手和系统之间建立安全的双向连接。

{`{ "protocol": "mcp-1.0", "role": "gateway", "capabilities": ["context-management", "tool-routing"] }`}

)} {modal === 'kb' && ( <>

向量知识库 (RAG)

通过将非结构化文档（PDF、Wiki）转化为向量索引，实现语义检索。

Query: "清关"

Vector: [0.12, 0.88, ...]

)}

)} {/* 底部时间轴指示器 */}

Input MCP Protocol Agent Processing Response

); } ```