import React, { useState, useEffect, useRef, useMemo } from 'react'; // ---------------------------------------------------------------------- // DATA & CONFIGURATION // ---------------------------------------------------------------------- const VIEW_WIDTH = 1200; const VIEW_HEIGHT = 720; const CELL_SIZE = 54; const GAP = 6; // Color Palette const COLORS = { bg: '#0f172a', text: '#e2e8f0', grid: '#1e293b', highlight: '#38bdf8', categories: { 'noble': '#a855f7', // Purple 'halogen': '#06b6d4', // Cyan 'alkali': '#ef4444', // Red 'alkaline': '#f97316', // Orange 'transition': '#3b82f6', // Blue 'post-transition': '#10b981', // Emerald 'metalloid': '#84cc16', // Lime 'nonmetal': '#f43f5e', // Rose 'lanthanide': '#d946ef', // Fuchsia 'actinide': '#8b5cf6', // Violet } }; // Category Definitions for UI const CATEGORY_BUTTONS = [ { id: 'noble', label: '惰性气体', color: COLORS.categories.noble }, { id: 'halogen', label: '卤素', color: COLORS.categories.halogen }, { id: 'alkali', label: '碱金属', color: COLORS.categories.alkali }, { id: 'alkaline', label: '碱土金属', color: COLORS.categories.alkaline }, { id: 'transition', label: '过渡金属', color: COLORS.categories.transition }, { id: 'nonmetal', label: '非金属', color: COLORS.categories.nonmetal }, ]; // Helper to generate element positions const generateElements = () => { const elements = []; // Minimal data for position mapping and basic info // [AtomicNumber, Symbol, NameCN, Category, Row, Col] const rawData = [ [1, 'H', '氢', 'nonmetal', 1, 1], [2, 'He', '氦', 'noble', 1, 18], [3, 'Li', '锂', 'alkali', 2, 1], [4, 'Be', '铍', 'alkaline', 2, 2], [5, 'B', '硼', 'metalloid', 2, 13], [6, 'C', '碳', 'nonmetal', 2, 14], [7, 'N', '氮', 'nonmetal', 2, 15], [8, 'O', '氧', 'nonmetal', 2, 16], [9, 'F', '氟', 'halogen', 2, 17], [10, 'Ne', '氖', 'noble', 2, 18], [11, 'Na', '钠', 'alkali', 3, 1], [12, 'Mg', '镁', 'alkaline', 3, 2], [13, 'Al', '铝', 'post-transition', 3, 13], [14, 'Si', '硅', 'metalloid', 3, 14], [15, 'P', '磷', 'nonmetal', 3, 15], [16, 'S', '硫', 'nonmetal', 3, 16], [17, 'Cl', '氯', 'halogen', 3, 17], [18, 'Ar', '氩', 'noble', 3, 18], [19, 'K', '钾', 'alkali', 4, 1], [20, 'Ca', '钙', 'alkaline', 4, 2], // Sc-Zn (Transition) ...Array.from({length: 10}, (_, i) => [21+i, ['Sc','Ti','V','Cr','Mn','Fe','Co','Ni','Cu','Zn'][i], ['钪','钛','钒','铬','锰','铁','钴','镍','铜','锌'][i], 'transition', 4, 3+i]), [31, 'Ga', '镓', 'post-transition', 4, 13], [32, 'Ge', '锗', 'metalloid', 4, 14], [33, 'As', '砷', 'metalloid', 4, 15], [34, 'Se', '硒', 'nonmetal', 4, 16], [35, 'Br', '溴', 'halogen', 4, 17], [36, 'Kr', '氪', 'noble', 4, 18], [37, 'Rb', '铷', 'alkali', 5, 1], [38, 'Sr', '锶', 'alkaline', 5, 2], // Y-Cd (Transition) ...Array.from({length: 10}, (_, i) => [39+i, ['Y','Zr','Nb','Mo','Tc','Ru','Rh','Pd','Ag','Cd'][i], ['钇','锆','铌','钼','锝','钌','铑','钯','银','镉'][i], 'transition', 5, 3+i]), [49, 'In', '铟', 'post-transition', 5, 13], [50, 'Sn', '锡', 'post-transition', 5, 14], [51, 'Sb', '锑', 'metalloid', 5, 15], [52, 'Te', '碲', 'metalloid', 5, 16], [53, 'I', '碘', 'halogen', 5, 17], [54, 'Xe', '氙', 'noble', 5, 18], [55, 'Cs', '铯', 'alkali', 6, 1], [56, 'Ba', '钡', 'alkaline', 6, 2], // Lanthanides placeholder [57, 'La-Lu', '', 'lanthanide', 6, 3], // Hf-Hg (Transition) ...Array.from({length: 9}, (_, i) => [72+i, ['Hf','Ta','W','Re','Os','Ir','Pt','Au','Hg'][i], ['铪','钽','钨','铼','锇','铱','铂','金','汞'][i], 'transition', 6, 4+i]), [81, 'Tl', '铊', 'post-transition', 6, 13], [82, 'Pb', '铅', 'post-transition', 6, 14], [83, 'Bi', '铋', 'post-transition', 6, 15], [84, 'Po', '钋', 'metalloid', 6, 16], [85, 'At', '砹', 'halogen', 6, 17], [86, 'Rn', '氡', 'noble', 6, 18], [87, 'Fr', '钫', 'alkali', 7, 1], [88, 'Ra', '镭', 'alkaline', 7, 2], // Actinides placeholder [89, 'Ac-Lr', '', 'actinide', 7, 3], // Rf-Cn (Transition) ...Array.from({length: 9}, (_, i) => [104+i, ['Rf','Db','Sg','Bh','Hs','Mt','Ds','Rg','Cn'][i], ['鑪','𨧀','𨭎','𨨏','𨭆','䥑','𫟼','𫓧','***'][i], 'transition', 7, 4+i]), [113, 'Nh', '鉨', 'post-transition', 7, 13], [114, 'Fl', '鈇', 'post-transition', 7, 14], [115, 'Mc', '镆', 'post-transition', 7, 15], [116, 'Lv', '鉝', 'post-transition', 7, 16], [117, 'Ts', '石田', 'halogen', 7, 17], [118, 'Og', '气奥', 'noble', 7, 18], ]; // Expansion for Lanthanides (Row 8 offset) const lanthanides = ['La','Ce','Pr','Nd','Pm','Sm','Eu','Gd','Tb','Dy','Ho','Er','Tm','Yb','Lu']; const lanthanidesCN = ['镧','铈','镨','钕','钷','钐','铕','钆','铽','镝','钬','铒','铥','镱','镥']; lanthanides.forEach((sym, i) => { rawData.push([57+i, sym, lanthanidesCN[i], 'lanthanide', 9, 3+i]); // Row 9 visual }); // Expansion for Actinides (Row 9 offset) const actinides = ['Ac','Th','Pa','U','Np','Pu','Am','Cm','Bk','Cf','Es','Fm','Md','No','Lr']; const actinidesCN = ['锕','钍','镤','铀','镎','钚','镅','锔','锫','锎','锿','镄','钔','锘','铹']; actinides.forEach((sym, i) => { rawData.push([89+i, sym, actinidesCN[i], 'actinide', 10, 3+i]); // Row 10 visual }); return rawData.map(d => ({ atomicNumber: d[0], symbol: d[1], nameCN: d[2], category: d[3], row: d[4], col: d[5], x: (d[5] - 1) * (CELL_SIZE + GAP) + 100, // Offset X for visual balance y: (d[4] - 1) * (CELL_SIZE + GAP) + 80, // Offset Y })).filter(e => e.symbol !== 'La-Lu' && e.symbol !== 'Ac-Lr'); // Filter placeholders }; // ---------------------------------------------------------------------- // MAIN COMPONENT // ---------------------------------------------------------------------- export default function PeriodicTableAnimation() { const [activeCategory, setActiveCategory] = useState(null); const [elements] = useState(generateElements); const [hoveredEl, setHoveredEl] = useState(null); // Animation Refs const timeRef = useRef(0); const rafRef = useRef(null); const particlesRef = useRef([]); // Init Particles useMemo(() => { particlesRef.current = Array.from({ length: 40 }, () => ({ x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, vx: (Math.random() - 0.5) * 0.5, vy: (Math.random() - 0.5) * 0.5, size: Math.random() * 2 + 1, opacity: Math.random() * 0.5 + 0.1, })); }, []); // Animation Loop useEffect(() => { const loop = () => { timeRef.current += 0.01; // Update particles particlesRef.current.forEach(p => { p.x += p.vx; p.y += p.vy; if (p.x < 0) p.x = VIEW_WIDTH; if (p.x > VIEW_WIDTH) p.x = 0; if (p.y < 0) p.y = VIEW_HEIGHT; if (p.y > VIEW_HEIGHT) p.y = 0; }); // Force a re-render for canvas/SVG updates if needed, // but for this React implementation, we stick to CSS transitions for elements // and only use RAF for the "Scanner" overlay if we were using Canvas. // To optimize React, we will animate a "scanner" div via ref or state if needed. // Here we just keep the loop running for potential expansions. rafRef.current = requestAnimationFrame(loop); }; loop(); return () => cancelAnimationFrame(rafRef.current); }, []); const handleCategoryClick = (catId) => { setActiveCategory(prev => prev === catId ? null : catId); }; return (

{/* 1. Background Layer (Static Grid + Animated Particles) */}

{/* 2. Main Content Area */}

{/* Header / Title */}

元素周期表 PERIODIC TABLE OF ELEMENTS

{/* SVG Table */}

{/* Info Panel Overlay (Top Center) */}

FILTER ACTIVE: {CATEGORY_BUTTONS.find(c => c.id === activeCategory)?.label || ''}

{/* 3. Controls / Legend */}

{CATEGORY_BUTTONS.map((btn) => { const isActive = activeCategory === btn.id; return ( ); })}

{/* Decorative Corners */}

{/* Random Data Readout */}

SYS.O2 // STABLE
RENDER.RAF // ACTIVE

); } // ---------------------------------------------------------------------- // SUB-COMPONENTS // ---------------------------------------------------------------------- // Separated to prevent full React re-renders, updated via Ref if we were using Canvas, // but for SVG simplicity we use a simple wrapper that forces update via requestRef if needed. // Here we use a simple functional component that renders once, as particles are handled via CSS or complex React state is avoided. // To make particles move effectively in pure React SVG without heavy state updates, we can use a small trick: // We actually want the particles to move. The main component loop updates the ref. // We need a component that reads the ref and updates its own attributes. const ParticleOverlay = ({ particlesRef }) => { const [tick, setTick] = useState(0); useEffect(() => { let frame; const loop = () => { setTick(t => t + 1); // Trigger render frame = requestAnimationFrame(loop); }; frame = requestAnimationFrame(loop); return () => cancelAnimationFrame(frame); }, []); return ( {particlesRef.current.map((p, i) => ( ))} ); };