import React, { useState, useEffect, useRef, useMemo } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { Cpu, Server, Layers, ArrowDown, Search, CheckCircle, Split } from 'lucide-react'; // 常量定义 const WIDTH = 1200; const HEIGHT = 700; const COL_WIDTH = 240; const START_X = 120; const ORDER_Y = 200; // 颜色定义 const COLORS = { bg: '#0f172a', primary: '#3b82f6', accent: '#f59e0b', success: '#10b981', danger: '#ef4444', text: '#e2e8f0', textDim: '#64748b', grid: '#1e293b', blockBg: 'rgba(59, 130, 246, 0.2)', blockBorder: '#60a5fa', }; // 辅助函数：生成延迟 const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); export default function BuddySystemAnimation() { // 状态管理 const [blocks, setBlocks] = useState([]); const [activeOrder, setActiveOrder] = useState(null); const [scanStatus, setScanStatus] = useState<'idle' | 'searching' | 'found' | 'splitting' | 'allocated'>('idle'); const [log, setLog] = useState("系统初始化..."); const [highlightBlockId, setHighlightBlockId] = useState(null); // 确保动画只运行一次 const runOnce = useRef(false); // 初始化初始状态 useEffect(() => { // 初始状态：Order 3 链表中有一个块 (Page 0-7) const initialBlock = { id: 'block-3-0', order: 3, startPage: 0, pages: 8, status: 'free', // free, splitting, allocated x: START_X + 3 * COL_WIDTH, y: ORDER_Y + 60, opacity: 1 }; setBlocks([initialBlock]); }, []); // 主动画逻辑 useEffect(() => { if (runOnce.current) return; runOnce.current = true; const runAnimation = async () => { await wait(1000); setLog("系统也就绪。Free Area状态：仅 Order 3 有空闲块。"); await wait(1500); // 1. 用户请求 setLog("收到内存申请请求：需要 1 个 Page (Order 0)"); setScanStatus('searching'); await wait(1500); // 2. 扫描 Order 0 setLog("扫描 Free Area [Order 0] ..."); setActiveOrder(0); await wait(1000); setLog("Free Area [Order 0] 为空。"); await wait(800); // 3. 扫描 Order 1 setLog("向上查找：扫描 Free Area [Order 1] ..."); setActiveOrder(1); await wait(1000); setLog("Free Area [Order 1] 为空。"); await wait(800); // 4. 扫描 Order 2 setLog("向上查找：扫描 Free Area [Order 2] ..."); setActiveOrder(2); await wait(1000); setLog("Free Area [Order 2] 为空。"); await wait(800); // 5. 扫描 Order 3 setLog("向上查找：扫描 Free Area [Order 3] ..."); setActiveOrder(3); await wait(1000); setLog("成功！在 Order 3 发现空闲块 (PFN 0-7)。"); setScanStatus('found'); setHighlightBlockId('block-3-0'); await wait(1500); // 6. 分裂 Order 3 -> Order 2 setLog("执行分裂：Order 3 (8页) -> 两个 Order 2 (4页)"); setScanStatus('splitting'); setHighlightBlockId(null); // 动画：移除旧块，添加新块 setBlocks(prev => prev.filter(b => b.id !== 'block-3-0')); // 移除 Order 3 // 添加两个 Order 2 块 const block2_0 = { id: 'block-2-0', order: 2, startPage: 0, pages: 4, status: 'splitting', x: START_X + 3 * COL_WIDTH, y: ORDER_Y + 60, opacity: 1 }; const block2_4 = { id: 'block-2-4', order: 2, startPage: 4, pages: 4, status: 'free', x: START_X + 3 * COL_WIDTH, y: ORDER_Y + 60, opacity: 1 }; setBlocks([block2_0, block2_4]); await wait(100); // 移动新块到 Order 2 列 setBlocks(prev => prev.map(b => { if (b.order === 2) { // Block 2-0 是我们要继续分的，Block 2-4 是伙伴，放入 Free Area const isBuddy = b.startPage === 4; return { ...b, x: START_X + 2 * COL_WIDTH, y: isBuddy ? ORDER_Y + 60 : ORDER_Y + 180, // 伙伴留在上面，继续分的往下掉一点以示区分 status: isBuddy ? 'free' : 'splitting' }; } return b; })); setActiveOrder(2); await wait(2000); setLog("伙伴块 (PFN 4-7) 加入 Free Area [2]。继续分裂 (PFN 0-3)。"); await wait(1500); // 7. 分裂 Order 2 -> Order 1 setLog("执行分裂：Order 2 (4页) -> 两个 Order 1 (2页)"); setBlocks(prev => prev.filter(b => b.id !== 'block-2-0')); // 移除正在分的块 const block1_0 = { id: 'block-1-0', order: 1, startPage: 0, pages: 2, status: 'splitting', x: START_X + 2 * COL_WIDTH, y: ORDER_Y + 180, opacity: 1 }; const block1_2 = { id: 'block-1-2', order: 1, startPage: 2, pages: 2, status: 'free', x: START_X + 2 * COL_WIDTH, y: ORDER_Y + 180, opacity: 1 }; setBlocks(prev => [...prev, block1_0, block1_2]); await wait(100); // 移动到 Order 1 列 setBlocks(prev => prev.map(b => { if (b.order === 1) { const isBuddy = b.startPage === 2; return { ...b, x: START_X + 1 * COL_WIDTH, y: isBuddy ? ORDER_Y + 60 : ORDER_Y + 260, status: isBuddy ? 'free' : 'splitting' }; } return b; })); setActiveOrder(1); await wait(2000); setLog("伙伴块 (PFN 2-3) 加入 Free Area [1]。继续分裂 (PFN 0-1)。"); await wait(1500); // 8. 分裂 Order 1 -> Order 0 setLog("执行分裂：Order 1 (2页) -> 两个 Order 0 (1页)"); setBlocks(prev => prev.filter(b => b.id !== 'block-1-0')); const block0_0 = { id: 'block-0-0', order: 0, startPage: 0, pages: 1, status: 'allocated', x: START_X + 1 * COL_WIDTH, y: ORDER_Y + 260, opacity: 1 }; const block0_1 = { id: 'block-0-1', order: 0, startPage: 1, pages: 1, status: 'free', x: START_X + 1 * COL_WIDTH, y: ORDER_Y + 260, opacity: 1 }; setBlocks(prev => [...prev, block0_0, block0_1]); await wait(100); // 移动到 Order 0 列 setBlocks(prev => prev.map(b => { if (b.order === 0) { const isBuddy = b.startPage === 1; return { ...b, x: START_X + 0 * COL_WIDTH, y: isBuddy ? ORDER_Y + 60 : ORDER_Y + 340, status: isBuddy ? 'free' : 'allocated' // 0-0 最终分配 }; } return b; })); setActiveOrder(0); await wait(2000); setLog("伙伴块 (PFN 1) 加入 Free Area [0]。"); await wait(1000); // 9. 分配完成 setLog("分配成功！返回 PFN 0 给用户。"); setScanStatus('allocated'); setBlocks(prev => prev.map(b => { if (b.id === 'block-0-0') { return { ...b, y: ORDER_Y + 420, x: WIDTH / 2 - 60 }; // 移到底部中心 } return b; })); await wait(3000); setLog("演示结束。系统处于稳定状态。"); setActiveOrder(null); }; runAnimation(); // 清理 return () => { // 实际场景中这里需要 cancelAnimationFrame 或 clearTimeouts // 但由于使用了 await 链，React 的 unmount 会自然中断后续渲染（虽然 promise 会继续跑，但 setState 会被 React 拦截或忽略） }; }, []); return (

{/* 顶部标题栏 */}

Linux Buddy System Visualization

Kernel Memory Allocator (alloc_pages order=0)

{/* 状态指示器 */}

{scanStatus === 'searching' && } {scanStatus === 'splitting' && } {scanStatus === 'allocated' && } {log}

); }