'use client'; import React, { useState, useEffect, useRef } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const NODE_WIDTH = 120; const NODE_HEIGHT = 60; const GAP = 80; // 辅助函数：生成随机地址字符串 const randomAddr = () => `0x${Math.floor(Math.random() * 0xffff).toString(16).toUpperCase().padStart(4, '0')}`; export const LinkedListInsertion = () => { // 定义初始节点数据 const initialList = [ { id: 'head', val: 10, x: 100, y: 300, addr: '0x10A4', nextAddr: '0x20B8' }, { id: 'n2', val: 20, x: 300, y: 300, addr: '0x20B8', nextAddr: '0x30C2' }, { id: 'n3', val: 40, x: 500, y: 300, addr: '0x30C2', nextAddr: '0x40D6' }, { id: 'n4', val: 50, x: 700, y: 300, addr: '0x40D6', nextAddr: 'NULL' }, ]; const targetNodeVal = 30; const targetNodeAddr = '0xNEW1'; // State const [nodes, setNodes] = useState(initialList); const [newNode, setNewNode] = useState<{id: string, val: number, x: number, y: number, addr: string, nextAddr: string} | null>(null); const [pointers, setPointers] = useState<{from: string, to: string | null, type: 'normal' | 'new' | 'temp'}[]>([]); const [highlightedNodes, setHighlightedNodes] = useState([]); const [activeCodeLine, setActiveCodeLine] = useState(-1); const [message, setMessage] = useState('准备就绪'); const [isAnimating, setIsAnimating] = useState(false); // 引用用于逻辑控制 const stepRef = useRef(0); // 初始化指针 useEffect(() => { const initialPointers = [ { from: 'head', to: 'n2', type: 'normal' as const }, { from: 'n2', to: 'n3', type: 'normal' as const }, { from: 'n3', to: 'n4', type: 'normal' as const }, { from: 'n4', to: null, type: 'normal' as const }, // NULL ]; setPointers(initialPointers); }, []); const reset = () => { setNodes(initialList); setNewNode(null); setPointers([ { from: 'head', to: 'n2', type: 'normal' }, { from: 'n2', to: 'n3', type: 'normal' }, { from: 'n3', to: 'n4', type: 'normal' }, { from: 'n4', to: null, type: 'normal' }, ]); setHighlightedNodes([]); setActiveCodeLine(-1); setMessage('准备就绪'); setIsAnimating(false); stepRef.current = 0; }; const delay = (ms: number) => new Promise(r => setTimeout(r, ms)); const startAnimation = async () => { if (isAnimating) return; setIsAnimating(true); stepRef.current = 0; // STEP 1: 创建新节点 setMessage('创建一个新节点 (Node newNode)'); setActiveCodeLine(1); setNewNode({ id: 'new', val: targetNodeVal, x: 400, // 初始在上方 y: 100, addr: targetNodeAddr, nextAddr: 'NULL' }); await delay(1500); // STEP 2: 遍历查找 setMessage('遍历链表寻找插入位置 (current.val < 30)'); setActiveCodeLine(2); // Check Head setHighlightedNodes(['head']); await delay(800); // Check Next (20) setHighlightedNodes(['n2']); setMessage('找到位置: 20 < 30 < 40'); await delay(1000); // STEP 3: 设置新节点的 Next 指针 setMessage('新节点指向下一节点 (newNode.next = current.next)'); setActiveCodeLine(3); // 更新 newNode 数据显示 setNewNode(prev => prev ? {...prev, nextAddr: '0x30C2'} : null); // 添加视觉连线: New -> N3 (40) setPointers(prev => [...prev, { from: 'new', to: 'n3', type: 'new' }]); await delay(1500); // STEP 4: 断开旧链接，指向新节点 setMessage('当前节点指向新节点 (current.next = newNode)'); setActiveCodeLine(4); // 更新 N2 (20) 的 nextAddr 显示 setNodes(prev => prev.map(n => n.id === 'n2' ? {...n, nextAddr: targetNodeAddr} : n)); // 修改指针：移除 n2->n3，添加 n2->new setPointers(prev => { const others = prev.filter(p => p.from !== 'n2'); return [...others, { from: 'n2', to: 'new', type: 'normal' }]; }); await delay(1500); // STEP 5: 物理插入 (移动节点) setMessage('调整链表布局'); setActiveCodeLine(-1); setHighlightedNodes([]); // 1. 将 n3, n4 向右移 // 2. 将 newNode 下移并插入水平位置 setNodes(prev => prev.map(n => { if (n.id === 'n3' || n.id === 'n4') { return { ...n, x: n.x + 200 }; } return n; })); if (newNode) { setNewNode(prev => prev ? { ...prev, x: 500, y: 300 } : null); } await delay(1500); setMessage('插入完成！'); setHighlightedNodes(['head', 'n2', 'new', 'n3', 'n4']); // 全绿 await delay(3000); reset(); }; // SVG 绘制辅助计算 const getNodeById = (id: string) => { if (id === 'new' && newNode) return newNode; return nodes.find(n => n.id === id); }; return ( ); }; // 子组件：单个节点 const NodeItem = ({ data, isHighlighted, isNew = false }: { data: any, isHighlighted: boolean, isNew?: boolean }) => { const { val, x, y, addr, nextAddr } = data; // 颜色逻辑 let strokeColor = "#475569"; let mainFill = "#1e293b"; let textColor = "#e2e8f0"; let glow = ""; if (isHighlighted) { strokeColor = "#38bdf8"; // 青色高亮 glow = "url(#glow)"; } if (isNew) { strokeColor = "#a855f7"; // 紫色表示新节点 if (isHighlighted) glow = "url(#glow)"; } return ( {/* 节点外框 */} {/* 分割线 (Data | Next) */} {/* 数据值区域 */} {val} Data {/* Next 指针区域 */} {nextAddr === 'NULL' ? 'NULL' : '...'+nextAddr.slice(-2)} Next {/* 节点自身地址 (底部) */} {addr} ); };