```javascript import React, { useState, useEffect, useMemo, useRef } from 'react'; // ---------------------------------------------------------------------- // constants & types // ---------------------------------------------------------------------- const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const COLOR_BG = '#0f172a'; // Slate-900 const COLOR_ACCENT = '#06b6d4'; // Cyan-500 const COLOR_ODD = '#ef4444'; // Red-500 const COLOR_EVEN = '#10b981'; // Emerald-500 const COLOR_TEXT = '#f8fafc'; // Slate-50 // Shape definitions with path data and node topology for logic verification const SHAPES = [ { id: 'star', name: '五角星 (Pentagram)', description: '连通图，所有点均为偶点', path: "M500,100 L617,460 L310,235 L690,235 L383,460 Z", nodes: [ { x: 500, y: 100, degree: 2 }, // Top (Visual degree 2 in path, but usually treated as even in full graph context, here simplified for visual flow) // Actually for a filled star logic: // Let's use a continuous line logic. // Pentagram drawn as one line: 5 vertices, each has 2 lines connected in the drawing path. // Wait, standard graph theory: Star has 5 vertices, each degree 2. // 0 Odd nodes. { x: 617, y: 460, degree: 2 }, { x: 310, y: 235, degree: 2 }, { x: 690, y: 235, degree: 2 }, { x: 383, y: 460, degree: 2 } ], oddCount: 0, isUnicursal: true, hint: "奇点数 = 0" }, { id: 'arrow_nested', name: '箭头嵌套 (Nested Arrow)', description: '连通图，存在两个端点', // A shape looking like an arrow head with a tail, ensuring 2 odd nodes (start/end) path: "M300,300 L500,150 L700,300 L500,300 L500,500 L500,300", // Simplified visual logic: // Node (300,300) deg 1 (Odd) // Node (500,150) deg 2 // Node (700,300) deg 1 (Odd) // Node (500,300) deg 4 (Cross) // Node (500,500) deg 1 - Wait, that's 3 odd nodes if not connected. // Let's do a classic "House" or "Arrow" that is definitely 2 odd nodes. // Let's use a "Bow and Arrow" style or "Polyline Arrow". // Revised: A simple M shape with a line down. // Let's use the prompt's "Arrow Nested". // Let's draw a Triangle with a line extending from the top vertex. // Triangle: (400,400)-(600,400)-(500,200)-close. Line (500,200) to (500,100). // Nodes: (400,400)d=2, (600,400)d=2, (500,200)d=3(Odd), (500,100)d=1(Odd). path: "M500,100 L500,250 L350,450 L650,450 L500,250", nodes: [ { x: 500, y: 100, degree: 1 }, // Tip (Odd) { x: 500, y: 250, degree: 3 }, // Junction (Odd) { x: 350, y: 450, degree: 2 }, { x: 650, y: 450, degree: 2 }, ], oddCount: 2, isUnicursal: true, hint: "奇点数 = 2 (起点/终点)" }, { id: 'sun_variant', name: '日字变形 (Sun Variant)', description: '典型的一笔画结构', // A rect with a horizontal mid line. // Nodes: 4 corners (deg 2), 2 mid-points (deg 3). // Wait, "Ri" is usually 2 odd nodes. // Top-Left(2), Top-Right(2), Bot-Left(2), Bot-Right(2). // Mid-Left(3), Mid-Right(3). path: "M350,150 L650,150 L650,450 L350,450 L350,150 M350,300 L650,300", nodes: [ { x: 350, y: 150, degree: 2 }, { x: 650, y: 150, degree: 2 }, { x: 350, y: 450, degree: 2 }, { x: 650, y: 450, degree: 2 }, { x: 350, y: 300, degree: 3 }, // Odd { x: 650, y: 300, degree: 3 }, // Odd ], oddCount: 2, isUnicursal: true, hint: "奇点数 = 2" }, { id: 'tian_pitfall', name: '避坑：田字变形 (Field Variant)', description: '注意！这是两笔画图形', // Rect with Cross. // Nodes: 4 corners (deg 2). // 4 mid-sides (deg 3). // 1 center (deg 4). // Total 4 odd nodes. path: "M350,150 L650,150 L650,450 L350,450 L350,150 M500,150 L500,450 M350,300 L650,300", nodes: [ { x: 350, y: 150, degree: 2 }, { x: 650, y: 150, degree: 2 }, { x: 350, y: 450, degree: 2 }, { x: 650, y: 450, degree: 2 }, { x: 500, y: 300, degree: 4 }, // Center { x: 500, y: 150, degree: 3 }, // Top Mid (Odd) { x: 500, y: 450, degree: 3 }, // Bot Mid (Odd) { x: 350, y: 300, degree: 3 }, // Left Mid (Odd) { x: 650, y: 300, degree: 3 }, // Right Mid (Odd) ], oddCount: 4, isUnicursal: false, hint: "奇点数 = 4 (需两笔)" } ]; // ---------------------------------------------------------------------- // Components // ---------------------------------------------------------------------- const GridBackground = () => ( {Array.from({ length: 20 }).map((_, i) => ( ))} {/* Tech decor */} ); const TechScanner = () => { return ( ) } export const UnicursalGraphView = () => { const [step, setStep] = useState(0); // 0..SHAPES.length - 1 const [phase, setPhase] = useState('draw'); // 'draw', 'scan', 'analyze', 'result' const [drawProgress, setDrawProgress] = useState(0); const currentShape = SHAPES[step]; // Animation Sequence Controller useEffect(() => { let timer; const runSequence = async () => { // 1. Reset & Start Drawing setPhase('draw'); setDrawProgress(0); // Animate drawing const drawDuration = 1500; const startTime = Date.now(); const drawInterval = setInterval(() => { const elapsed = Date.now() - startTime; const p = Math.min(elapsed / drawDuration, 1); setDrawProgress(p); if (p >= 1) clearInterval(drawInterval); }, 16); await new Promise(r => setTimeout(r, drawDuration + 200)); // 2. Scan Nodes setPhase('scan'); await new Promise(r => setTimeout(r, 1500)); // 3. Analyze (Highlight Odds) setPhase('analyze'); await new Promise(r => setTimeout(r, 2000)); // 4. Result setPhase('result'); await new Promise(r => setTimeout(r, 3000)); // 5. Next Shape setStep(prev => (prev + 1) % SHAPES.length); }; runSequence(); return () => clearTimeout(timer); }, [step]); return (

{/* UI Overlay */}

图形推理：一笔画 (Unicursal Graph)

CASE {step + 1} / {SHAPES.length} 奇点法判定

SYSTEM STATUS: ONLINE

ODD_NODE_DETECTION: {phase === 'analyze' || phase === 'result' ? 'ACTIVE' : 'STANDBY'}

{/* Main Graphics */}

); }; ```