'use client'; import React, { useState, useEffect, useRef } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // 颜色定义 - 赛博朋克/科技风格 const COLORS = { bg: '#0f172a', codeBg: '#1e293b', objectBg: '#334155', accent: '#38bdf8', // 天蓝 highlight: '#f472b6', // 粉色 vptr: '#a3e635', // 酸橙绿 text: '#e2e8f0', dimText: '#64748b', path: '#475569', gold: '#fbbf24' }; export const VTableMechanismView = () => { const [step, setStep] = useState(0); const totalSteps = 6; // 自动播放逻辑 useEffect(() => { const timers: NodeJS.Timeout[] = []; const nextStep = () => { setStep((prev) => (prev + 1) % totalSteps); }; // 时间轴控制 const sequence = [ 2000, // 0: 展示结构 2000, // 1: 代码调用 1500, // 2: 访问对象/vptr 1500, // 3: 访问虚表 1500, // 4: 获取函数地址 2500, // 5: 执行函数 ]; let accumulatedTime = 0; for (let i = 0; i < sequence.length; i++) { accumulatedTime += sequence[i]; timers.push(setTimeout(nextStep, accumulatedTime)); } return () => timers.forEach(clearTimeout); }, [step === 0]); // 当回到0时重新触发 // 辅助函数：计算连线路径 const createPath = (x1, y1, x2, y2, bend = 0) => { const mx = (x1 + x2) / 2; return `M ${x1} ${y1} C ${mx + bend} ${y1}, ${mx - bend} ${y2}, ${x2} ${y2}`; }; // 动态生成的粒子 const Particle = ({ pathId, color, delay = 0, active }) => { if (!active) return null; return ( ); }; return ( ); };