```javascript 'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const BG_COLOR = '#0f172a'; const ACCENT_COLOR = '#38bdf8'; // Sky 400 const TEXT_COLOR = '#e2e8f0'; // Slate 200 const CODE_BG = '#1e293b'; // Slate 800 // 模拟 DOM 节点数据 const INITIAL_NODES = [ { id: 'root', label: 'document', type: 'obj', x: 500, y: 60, parent: null }, { id: 'html', label: 'html', type: 'tag', x: 500, y: 130, parent: 'root' }, { id: 'head', label: 'head', type: 'tag', x: 300, y: 200, parent: 'html' }, { id: 'body', label: 'body', type: 'tag', x: 700, y: 200, parent: 'html' }, { id: 'meta', label: 'meta', type: 'tag', x: 250, y: 270, parent: 'head' }, { id: 'title', label: 'title', type: 'tag', x: 350, y: 270, parent: 'head' }, { id: 'div', label: 'div#app', type: 'tag', x: 600, y: 270, parent: 'body' }, { id: 'script', label: 'script', type: 'tag', x: 800, y: 270, parent: 'body' }, { id: 'h1', label: 'h1', type: 'tag', x: 530, y: 350, parent: 'div' }, { id: 'p', label: 'p.content', type: 'tag', x: 670, y: 350, parent: 'div' }, ]; const CODE_STEPS = [ { line: 1, text: "const target = document.querySelector('p.content');", action: 'select', targetId: 'p' }, { line: 2, text: "target.style.color = '#4ade80';", action: 'style', targetId: 'p' }, { line: 3, text: "const newSpan = document.createElement('span');", action: 'create', targetId: 'new-span' }, { line: 4, text: "newSpan.innerText = ' (Updated)';", action: 'text', targetId: 'new-span' }, { line: 5, text: "target.appendChild(newSpan);", action: 'append', targetId: 'new-span', parentId: 'p' }, ]; export const JSDomAnimation = () => { const [nodes, setNodes] = useState(INITIAL_NODES); const [activeLine, setActiveLine] = useState(-1); const [highlightedNode, setHighlightedNode] = useState(null); const [scanPos, setScanPos] = useState({ x: 0, y: 0, visible: false }); const [systemStatus, setSystemStatus] = useState("系统就绪"); const [newNodeOpacity, setNewNodeOpacity] = useState(0); // 动画循环引用 const loopRef = useRef(null); const reset = () => { setNodes(INITIAL_NODES); setActiveLine(-1); setHighlightedNode(null); setNewNodeOpacity(0); setSystemStatus("系统就绪 - 等待执行"); setScanPos({ x: 0, y: 0, visible: false }); }; useEffect(() => { const runAnimation = async () => { // 初始延迟 await wait(1000); while (true) { // 无限循环 // Step 1: Select setSystemStatus("正在解析 DOM 树..."); setActiveLine(0); // 模拟扫描效果 setScanPos({ x: 500, y: 60, visible: true }); // Start at root await wait(300); setScanPos({ x: 500, y: 130, visible: true }); await wait(200); setScanPos({ x: 700, y: 200, visible: true }); // Body await wait(200); setScanPos({ x: 600, y: 270, visible: true }); // Div await wait(200); setScanPos({ x: 670, y: 350, visible: true }); // P (Target) setHighlightedNode('p'); setSystemStatus("目标节点已选中: p.content"); await wait(1500); setScanPos(prev => ({ ...prev, visible: false })); // Step 2: Style setActiveLine(1); setSystemStatus("执行样式修改: color = #4ade80"); setNodes(prev => prev.map(n => n.id === 'p' ? { ...n, style: { fill: '#4ade80', stroke: '#4ade80' } } : n)); await wait(1500); // Step 3: Create Element setActiveLine(2); setSystemStatus("创建新元素: "); // 临时添加一个悬浮节点 const tempNode = { id: 'new-span', label: 'span', type: 'tag', x: 850, y: 450, parent: null, isNew: true }; setNodes(prev => [...prev, tempNode]); setNewNodeOpacity(1); setHighlightedNode('new-span'); await wait(1500); // Step 4: Set Text setActiveLine(3); setSystemStatus("设置属性: innerText"); // 视觉上闪烁一下 await wait(200); setNodes(prev => prev.map(n => n.id === 'new-span' ? { ...n, label: 'span "Updated"' } : n)); await wait(1300); // Step 5: Append Child setActiveLine(4); setSystemStatus("操作 DOM: appendChild"); // 移动节点位置到父节点下方 setNodes(prev => prev.map(n => { if (n.id === 'new-span') { return { ...n, x: 670, y: 430, parent: 'p' }; // 移动到 P 下方 } return n; })); await wait(2000); // 完成展示 setSystemStatus("执行完毕"); setActiveLine(-1); setHighlightedNode(null); await wait(3000); // 重置 setSystemStatus("重置环境..."); reset(); await wait(1000); } }; runAnimation(); return () => { // Cleanup logic if needed, though loop logic handles internal state }; }, []); const wait = (ms: number) => new Promise(r => setTimeout(r, ms)); return ( ); }; ```