'use client'; import React, { useState, useEffect, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // x86 Stack Visualization Component export const X86StackAnimation = () => { // Animation State const [stepIndex, setStepIndex] = useState(0); const [isPlaying, setIsPlaying] = useState(true); // Simulation Data Definitions type StackItem = { id: string; addr: number; label: string; // Human readable content value: string; // Hex/Value type: 'arg' | 'ret' | 'ebp' | 'local' | 'padding'; color: string; }; type RegisterState = { eip: string; // Instruction Pointer esp: number; // Stack Pointer (address) ebp: number; // Base Pointer (address) eax: string; // Accumulator desc: string; // Step description highlightLine: number; // For code highlighting asmHighlight: number; // For asm highlighting }; // Base Memory Address (High memory) const BASE_ADDR = 0x7ffffff8; const CELL_HEIGHT = 40; // Code & ASM Definitions const cCode = [ `int add(int a, int b) {`, ` int sum = a + b;`, ` return sum;`, `}`, `void main() {`, ` int res = add(10, 20);`, `}` ]; const asmCode = [ { text: `push 20 ; 压入参数 b`, line: 5 }, { text: `push 10 ; 压入参数 a`, line: 5 }, { text: `call add ; 调用函数`, line: 5 }, { text: `push ebp ; 保存旧栈底`, line: 0 }, { text: `mov ebp, esp ; 设置新栈底`, line: 0 }, { text: `sub esp, 4 ; 分配局部变量`, line: 1 }, { text: `mov eax, [ebp+8]`, line: 1 }, { text: `add eax, [ebp+12]`, line: 1 }, { text: `mov [ebp-4], eax`, line: 1 }, { text: `mov esp, ebp ; 恢复栈顶`, line: 2 }, { text: `pop ebp ; 恢复旧栈底`, line: 2 }, { text: `ret ; 返回`, line: 2 }, { text: `add esp, 8 ; 清理参数`, line: 6 }, ]; // Animation Steps Data const steps = useMemo(() => { const s: { stack: StackItem[], regs: RegisterState }[] = []; // Initial State (Inside main, before call) let currentStack: StackItem[] = []; // Let's pretend main's frame is already there "above" // Helper to generate step const addStep = ( diffStack: (s: StackItem[]) => StackItem[], regs: Partial ) => { currentStack = diffStack([...currentStack]); const lastRegs = s.length > 0 ? s[s.length - 1].regs : { eip: '0x00401000', esp: BASE_ADDR, ebp: BASE_ADDR + 8, eax: '0x00000000', desc: '初始状态', highlightLine: 4, asmHighlight: -1 }; s.push({ stack: currentStack, regs: { ...lastRegs, ...regs } }); }; // 0. Idle addStep(s => s, { desc: '准备调用 add(10, 20)', asmHighlight: -1 }); // 1. push 20 addStep(s => [...s, { id: 'arg_b', addr: BASE_ADDR - 4, label: '参数 b', value: '20', type: 'arg', color: '#3b82f6' }], { esp: BASE_ADDR - 4, desc: '压入参数 b (20)', asmHighlight: 0 }); // 2. push 10 addStep(s => [...s, { id: 'arg_a', addr: BASE_ADDR - 8, label: '参数 a', value: '10', type: 'arg', color: '#3b82f6' }], { esp: BASE_ADDR - 8, desc: '压入参数 a (10)', asmHighlight: 1 }); // 3. call add (Pushes Return Address) addStep(s => [...s, { id: 'ret_addr', addr: BASE_ADDR - 12, label: '返回地址', value: '0x00401020', type: 'ret', color: '#a855f7' }], { esp: BASE_ADDR - 12, eip: '0x00401050', desc: 'Call指令: 压入返回地址并跳转', asmHighlight: 2 }); // 4. push ebp addStep(s => [...s, { id: 'old_ebp', addr: BASE_ADDR - 16, label: '旧 EBP', value: `0x${(BASE_ADDR+8).toString(16)}`, type: 'ebp', color: '#f59e0b' }], { esp: BASE_ADDR - 16, desc: '保存 Main 函数的 EBP', asmHighlight: 3, highlightLine: 0 }); // 5. mov ebp, esp addStep(s => s, { ebp: BASE_ADDR - 16, desc: '建立 Add 函数的栈帧 (EBP = ESP)', asmHighlight: 4 }); // 6. sub esp, 4 addStep(s => [...s, { id: 'local_sum', addr: BASE_ADDR - 20, label: '局部变量 sum', value: '?', type: 'local', color: '#10b981' }], { esp: BASE_ADDR - 20, desc: '为局部变量分配栈空间', asmHighlight: 5, highlightLine: 1 }); // 7. Calculation (mov eax... add eax... mov [ebp-4]...) // Consolidated for animation brevity addStep(s => s.map(item => item.id === 'local_sum' ? { ...item, value: '30' } : item), { eax: '30', desc: '执行加法运算: 10 + 20 = 30', asmHighlight: 7 }); // 8. mov esp, ebp (Restore ESP) addStep(s => s.filter(i => i.id !== 'local_sum'), { esp: BASE_ADDR - 16, desc: '释放局部变量空间 (ESP = EBP)', asmHighlight: 9, highlightLine: 2 }); // 9. pop ebp addStep(s => s.filter(i => i.id !== 'old_ebp'), { esp: BASE_ADDR - 12, ebp: BASE_ADDR + 8, desc: '恢复 Main 函数的 EBP', asmHighlight: 10 }); // 10. ret addStep(s => s.filter(i => i.id !== 'ret_addr'), { esp: BASE_ADDR - 8, eip: '0x00401020', desc: '返回 Main 函数 (Pop EIP)', asmHighlight: 11, highlightLine: 5 }); // 11. add esp, 8 addStep(s => s.filter(i => !['arg_a', 'arg_b'].includes(i.id) ), { esp: BASE_ADDR, desc: '清理参数 (Cdecl调用约定)', asmHighlight: 12, highlightLine: 6 }); return s; }, []); // Playback Control useEffect(() => { let timer: NodeJS.Timeout; if (isPlaying) { timer = setTimeout(() => { setStepIndex(prev => { if (prev >= steps.length - 1) { return 0; // Loop } return prev + 1; }); }, 2000); } return () => clearTimeout(timer); }, [isPlaying, stepIndex, steps.length]); const currentStep = steps[stepIndex]; const { stack, regs } = currentStep; // Visual Calculation Helpers const getStackY = (addr: number) => { // Map address to Y coordinate. Base (High) is top of stack visual area. // Address decreases as stack grows down visually. const offset = (BASE_ADDR - addr) / 4; return 150 + offset * CELL_HEIGHT; }; return ( ); };