import React, { useState, useEffect, useRef, useMemo } from 'react'; // ----------------------------------------------------------------------------- // Constants & Styles // ----------------------------------------------------------------------------- const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const BG_COLOR = "#0f172a"; const COMPONENT_BG = "#1e293b"; const COMPONENT_BORDER = "#334155"; const TEXT_MAIN = "#f8fafc"; const TEXT_SUB = "#94a3b8"; // Neon Colors const COLOR_PC = "#3b82f6"; // Blue const COLOR_MEM = "#10b981"; // Green const COLOR_ALU = "#f59e0b"; // Amber const COLOR_BUS = "#6366f1"; // Indigo const COLOR_CU = "#ec4899"; // Pink const COLOR_DAT = "#06b6d4"; // Cyan // ----------------------------------------------------------------------------- // Helper Components // ----------------------------------------------------------------------------- // A reusable circuit board wire (path) with optional active glow const Wire = ({ d, active, color = COLOR_BUS, dashed = false }) => ( {/* Base Wire */} {/* Active Glow */} {/* Data Flow Particle */} {active && ( )} ); // A standard hardware component box (Register, ALU, etc.) const HardwareBox = ({ x, y, w, h, title, value, color, active, labelInfo }) => ( {/* Title */} {title} {/* Main Value */} {value} {/* Extra Label */} {labelInfo && ( {labelInfo} )} {/* Active Indicator Light */} ); // ----------------------------------------------------------------------------- // Main Component // ----------------------------------------------------------------------------- export default function CPUArchitectureAnim() { // --- State --- const [pc, setPc] = useState(0); const [mar, setMar] = useState(null); const [mdr, setMdr] = useState(null); const [ir, setIr] = useState("NOP"); const [acc, setAcc] = useState(0); const [aluVal, setAluVal] = useState(null); // Memory State: 8 slots // 0-2: Instructions, 3: Halt, 5-7: Data const [memory, setMemory] = useState([ { addr: 0, val: "LOAD 5", type: 'ins' }, // Load value at addr 5 to ACC { addr: 1, val: "ADD 6", type: 'ins' }, // Add value at addr 6 to ACC { addr: 2, val: "STORE 7",type: 'ins' }, // Store ACC to addr 7 { addr: 3, val: "HALT", type: 'ins' }, { addr: 4, val: 0, type: 'data' }, { addr: 5, val: 10, type: 'data' }, { addr: 6, val: 20, type: 'data' }, { addr: 7, val: 0, type: 'data' }, ]); // Animation Control const [phase, setPhase] = useState("IDLE"); // IDLE, FETCH, DECODE, EXECUTE const [activeWires, setActiveWires] = useState([]); const [explanation, setExplanation] = useState("系统准备就绪，等待指令..."); const [activeComponent, setActiveComponent] = useState(null); const isRunningRef = useRef(false); // --- Animation Sequence Logic --- const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms)); useEffect(() => { // Main Cycle Runner const runCycle = async () => { if (isRunningRef.current) return; isRunningRef.current = true; // Loop through instructions until HALT let currentPc = 0; let halted = false; while (!halted) { // ------------------------------------------------------- // 1. FETCH STAGE (取指阶段) // ------------------------------------------------------- setPhase("FETCH"); setExplanation("取指周期 (Fetch): 将 PC 的地址送往地址总线"); setActiveComponent("PC"); setActiveWires(["PC_TO_MAR"]); await delay(1000); // PC -> MAR setMar(currentPc); setActiveComponent("MAR"); setExplanation(`MAR 接收地址: [${currentPc}]`); await delay(800); // MAR -> Address Bus -> RAM setActiveWires(["MAR_TO_RAM"]); setActiveComponent("RAM"); setExplanation("控制单元发出读指令，通过地址总线访问内存"); await delay(1000); // RAM -> Data Bus -> MDR const instruction = memory[currentPc].val; setActiveWires(["RAM_TO_MDR"]); setActiveComponent("MDR"); setMdr(instruction); setExplanation(`从内存读取指令/数据: "${instruction}" 送入 MDR`); await delay(1000); // MDR -> IR setActiveWires(["MDR_TO_IR"]); setActiveComponent("IR"); setIr(instruction as string); setExplanation(`指令 "${instruction}" 存入指令寄存器 (IR)`); await delay(1000); // PC Increment setExplanation("程序计数器 (PC) 加 1，指向下一条指令"); setActiveComponent("PC"); currentPc += 1; setPc(currentPc); setActiveWires([]); await delay(800); // ------------------------------------------------------- // 2. DECODE STAGE (译码阶段) // ------------------------------------------------------- setPhase("DECODE"); setActiveComponent("CU"); setExplanation("译码周期 (Decode): 控制单元 (CU) 分析指令含义"); await delay(1200); const parts = (instruction as string).split(" "); const op = parts[0]; const operand = parts.length > 1 ? parseInt(parts[1]) : null; if (op === "HALT") { setExplanation("识别到停机指令，程序结束。"); halted = true; setPhase("HALTED"); setActiveWires([]); setActiveComponent(null); break; } // ------------------------------------------------------- // 3. EXECUTE STAGE (执行阶段) // ------------------------------------------------------- setPhase("EXECUTE"); if (op === "LOAD") { setExplanation(`执行 LOAD: 再次访问内存地址 [${operand}] 获取数据`); // Fetch data operand logic // IR(addr) -> MAR setActiveWires(["IR_TO_MAR"]); setMar(operand); setActiveComponent("MAR"); await delay(800); // MAR -> RAM setActiveWires(["MAR_TO_RAM"]); setActiveComponent("RAM"); await delay(800); // RAM -> MDR const dataVal = memory[operand!].val; setActiveWires(["RAM_TO_MDR"]); setMdr(dataVal); setActiveComponent("MDR"); setExplanation(`获取数据 ${dataVal}，暂存入 MDR`); await delay(800); // MDR -> ACC setActiveWires(["MDR_TO_ACC"]); setAcc(dataVal as number); setActiveComponent("ACC"); setExplanation(`将数据 ${dataVal} 载入累加器 (ACC)`); await delay(1000); } else if (op === "ADD") { setExplanation(`执行 ADD: 访问内存 [${operand}] 并与 ACC 相加`); // IR(addr) -> MAR setActiveWires(["IR_TO_MAR"]); setMar(operand); setActiveComponent("MAR"); await delay(800); // MAR -> RAM -> MDR setActiveWires(["MAR_TO_RAM"]); await delay(600); setActiveWires(["RAM_TO_MDR"]); const dataVal = memory[operand!].val; setMdr(dataVal); setActiveComponent("MDR"); await delay(800); // Send operands to ALU setExplanation("ALU 接收操作数: ACC 和 MDR"); setActiveWires(["ACC_TO_ALU", "MDR_TO_ALU"]); setActiveComponent("ALU"); await delay(800); // Calculation setAluVal((acc as number) + (dataVal as number)); setExplanation(`ALU 计算: ${acc} + ${dataVal} = ${(acc as number) + (dataVal as number)}`); await delay(1000); // Write back to ACC setAcc((prev) => prev + (dataVal as number)); setAluVal(null); setActiveWires(["ALU_TO_ACC"]); setActiveComponent("ACC"); setExplanation("计算结果回写至累加器 (ACC)"); await delay(1000); } else if (op === "STORE") { setExplanation(`执行 STORE: 将 ACC 的值写入内存地址 [${operand}]`); // IR(addr) -> MAR setActiveWires(["IR_TO_MAR"]); setMar(operand); setActiveComponent("MAR"); await delay(800); // ACC -> MDR setActiveWires(["ACC_TO_MDR"]); setMdr(acc); setActiveComponent("MDR"); setExplanation(`将 ACC 值 (${acc}) 复制到 MDR，准备写入`); await delay(800); // Write Signal setActiveWires(["MAR_TO_RAM", "MDR_TO_RAM_WRITE"]); setActiveComponent("RAM"); setExplanation(`控制单元发出写信号: 将 ${acc} 写入地址 [${operand}]`); // Update Memory State setMemory(prev => { const newMem = [...prev]; newMem[operand!] = { ...newMem[operand!], val: acc }; return newMem; }); await delay(1200); } // Cleanup before next cycle setActiveWires([]); setActiveComponent(null); await delay(500); } // End sequence await delay(2000); // Reset logic could go here if we wanted to loop forever, // but instruction halts, so we stop. }; runCycle(); return () => { // Cleanup strictly not possible with async function but refs prevent double start }; }, []); // Empty dependency array = run once on mount // --------------------------------------------------------------------------- // Coordinate Mapping for Wires // --------------------------------------------------------------------------- // Layout: // RAM: Left column // CPU: Right container // - Registers: Top center // - CU: Top Right // - ALU: Bottom Right // - ACC: Bottom Center const RAM_BOX = { x: 50, y: 100, w: 180, h: 400 }; // CPU Internal Positions (Relative to Global or CPU Group) const CPU_X = 280; const CPU_Y = 50; const CPU_W = 680; const CPU_H = 500; const PC_POS = { x: CPU_X + 50, y: CPU_Y + 50 }; const MAR_POS = { x: CPU_X + 50, y: CPU_Y + 150 }; const MDR_POS = { x: CPU_X + 250, y: CPU_Y + 150 }; const IR_POS = { x: CPU_X + 250, y: CPU_Y + 50 }; const CU_POS = { x: CPU_X + 450, y: CPU_Y + 50 }; const ACC_POS = { x: CPU_X + 250, y: CPU_Y + 350 }; const ALU_POS = { x: CPU_X + 450, y: CPU_Y + 350 }; const REG_W = 120; const REG_H = 60; const CU_SIZE = 120; // Path Definitions const paths = { // 1. PC -> MAR PC_TO_MAR: `M ${PC_POS.x + REG_W/2} ${PC_POS.y + REG_H} L ${PC_POS.x + REG_W/2} ${MAR_POS.y}`, // 2. MAR -> RAM (Address Bus) MAR_TO_RAM: `M ${MAR_POS.x} ${MAR_POS.y + REG_H/2} L ${RAM_BOX.x + RAM_BOX.w} ${MAR_POS.y + REG_H/2}`, // 3. RAM -> MDR (Data Bus Read) RAM_TO_MDR: `M ${RAM_BOX.x + RAM_BOX.w} ${MDR_POS.y + REG_H/2} L ${MDR_POS.x} ${MDR_POS.y + REG_H/2}`, // 4. MDR -> RAM (Data Bus Write) - same path visually, different logic usually MDR_TO_RAM_WRITE: `M ${MDR_POS.x} ${MDR_POS.y + REG_H/2} L ${RAM_BOX.x + RAM_BOX.w} ${MDR_POS.y + REG_H/2}`, // 5. MDR -> IR MDR_TO_IR: `M ${MDR_POS.x + REG_W/2} ${MDR_POS.y} L ${MDR_POS.x + REG_W/2} ${IR_POS.y + REG_H}`, // 6. IR -> MAR (Address part of instruction) IR_TO_MAR: `M ${IR_POS.x} ${IR_POS.y + REG_H/2} L ${MAR_POS.x + REG_W + 20} ${IR_POS.y + REG_H/2} L ${MAR_POS.x + REG_W + 20} ${MAR_POS.y + REG_H/2} L ${MAR_POS.x + REG_W} ${MAR_POS.y + REG_H/2}`, // 7. MDR -> ACC (LOAD) MDR_TO_ACC: `M ${MDR_POS.x + REG_W/2} ${MDR_POS.y + REG_H} L ${MDR_POS.x + REG_W/2} ${ACC_POS.y}`, // 8. ACC -> MDR (STORE) ACC_TO_MDR: `M ${ACC_POS.x + REG_W/2} ${ACC_POS.y} L ${ACC_POS.x + REG_W/2} ${MDR_POS.y + REG_H}`, // 9. ACC -> ALU ACC_TO_ALU: `M ${ACC_POS.x + REG_W} ${ACC_POS.y + REG_H/2} L ${ALU_POS.x} ${ACC_POS.y + REG_H/2}`, // 10. MDR -> ALU (Operand) MDR_TO_ALU: `M ${MDR_POS.x + REG_W} ${MDR_POS.y + REG_H/2} L ${ALU_POS.x + REG_W/2} ${MDR_POS.y + REG_H/2} L ${ALU_POS.x + REG_W/2} ${ALU_POS.y}`, // 11. ALU -> ACC (Writeback) ALU_TO_ACC: `M ${ALU_POS.x} ${ALU_POS.y + REG_H - 20} L ${ACC_POS.x + REG_W/2} ${ALU_POS.y + REG_H - 20} L ${ACC_POS.x + REG_W/2} ${ACC_POS.y + REG_H}`, }; return ( ); }