'use client'; import React, { useState, useEffect, useMemo, useRef } from 'react'; // --- 常量与配置 --- const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // 配色方案：深色科技风 const THEME = { bg: '#0f172a', // Slate 900 panel: '#1e293b', // Slate 800 grid: '#334155', // Slate 700 primary: '#0ea5e9', // Sky 500 (常规/电路) cut: '#facc15', // Yellow 400 (切割 - 纯净) coag: '#f97316', // Orange 500 (凝血 - 热力) text: '#f1f5f9', // Slate 100 textDim: '#94a3b8', // Slate 400 danger: '#ef4444', // Red 500 tissue: '#fb7185', // Rose 400 tissueBurn: '#881337', // Rose 900 pad: '#64748b', // Return electrode }; // 粒子类型定义 type Particle = { id: number; x: number; y: number; vx: number; vy: number; life: number; color: string; size: number; }; // --- 辅助函数 --- const generateId = () => Math.random().toString(36).substr(2, 9); // 贝塞尔曲线生成闪电/电弧 const generateLightningPath = (x1: number, y1: number, x2: number, y2: number, segments: number = 8, amp: number = 10) => { let d = `M ${x1} ${y1}`; let cx = x1; let cy = y1; for (let i = 1; i <= segments; i++) { const t = i / segments; const tx = x1 + (x2 - x1) * t; const ty = y1 + (y2 - y1) * t; // 添加随机抖动 const nx = tx + (Math.random() - 0.5) * amp; const ny = ty + (Math.random() - 0.5) * amp; d += ` L ${nx} ${ny}`; cx = nx; cy = ny; } return d; }; // --- 主组件 --- export default function ElectrosurgeryAnimation() { const [phase, setPhase] = useState<'circuit' | 'cut' | 'coag'>('circuit'); const [time, setTime] = useState(0); const requestRef = useRef(); // 动画循环 const animate = (t: number) => { setTime(t / 1000); // 转换为秒 requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current!); }, []); // 阶段自动切换控制器 useEffect(() => { const sequence = async () => { while (true) { setPhase('circuit'); await wait(8000); // 8秒电路原理 setPhase('cut'); await wait(7000); // 7秒切割 setPhase('coag'); await wait(7000); // 7秒凝血 } }; sequence(); }, []); const wait = (ms: number) => new Promise(resolve => setTimeout(resolve, ms)); return (

); } // --- SVG 定义与滤镜 --- const Definitions = () => ( {/* 辉光滤镜 */} {/* 组织渐变 */} {/* 烧焦渐变 */} {/* 扫描线图案 */} {/* 网格图案 */} ); // --- 背景组件 --- const BackgroundGrid = () => ( {/* 装饰性UI元素 */} ); // --- 宏观电路视图 --- const MacroCircuitView = ({ time }: { time: number }) => { const dashOffset = -time * 200; // 电流流动速度 return ( {/* 标题 */} MONOPOLAR CIRCUIT PRINCIPLE (单极回路原理) {/* 1. 高频发生器 (Generator) */} 300 kHz Generator 主机/发生器 {/* 输出端口 */} Active Return {/* 2. 人体模型 (Patient) */} {/* 抽象身体 */} PATIENT TISSUE (人体组织) {/* 负极板 (Return Electrode) */} Return Electrode (负极板) {/* 负极板说明 */} Low Current Density (低密度-安全) {/* 3. 电刀笔 (Active Electrode) */} Active Electrode (电刀笔) {/* 笔尖高密度区 */} High Density (高密度-产热) {/* 4. 连接线与电流动画 */} {/* 红色：主机 -> 笔 (Active) */} {/* 蓝色：负极板 -> 主机 (Return) */} {/* 电流方向箭头 (模拟) */} ); }; // --- 微观组织视图 --- const MicroTissueView = ({ mode, time }: { mode: 'cut' | 'coag', time: number }) => { const isCut = mode === 'cut'; const color = isCut ? THEME.cut : THEME.coag; const [particles, setParticles] = useState([]); // 生成六边形细胞网格 const cells = useMemo(() => { const arr = []; const rows = 10; const cols = 20; for (let r = 0; r < rows; r++) { for (let c = 0; c < cols; c++) { const xOffset = r % 2 === 0 ? 0 : 20; arr.push({ id: `cell-${r}-${c}`, cx: 250 + c * 35 + xOffset, cy: 250 + r * 30, r: 14 }); } } return arr; }, []); // 粒子系统逻辑 useEffect(() => { // 限制粒子生成频率 if (Math.random() > 0.4) { const type = isCut ? 'vapor' : 'smoke'; const count = isCut ? 3 : 1; const newParticles: Particle[] = Array.from({ length: count }).map(() => ({ id: Math.random(), x: 500 + (Math.random() - 0.5) * 20, y: 280, vx: (Math.random() - 0.5) * (isCut ? 8 : 3), vy: -Math.random() * (isCut ? 8 : 4) - 2, life: 1.0, color: isCut ? '#e0f2fe' : '#94a3b8', size: isCut ? Math.random() * 4 + 2 : Math.random() * 6 + 4 })); setParticles(prev => [...prev.slice(-40), ...newParticles]); } }, [time, isCut]); // 更新粒子 const activeParticles = particles.map(p => ({ ...p, x: p.x + p.vx, y: p.y + p.vy, life: p.life - 0.04 })).filter(p => p.life > 0); // 电弧路径动态生成 const arcPath = useMemo(() => { if (Math.random() > 0.7) return ''; // 闪烁效果 return generateLightningPath(500, 200, 500, 280, 6, 15); }, [time]); return ( {/* 标题 */} {isCut ? 'CUTTING MODE (切割模式)' : 'COAGULATION MODE (凝血模式)'} {isCut ? 'Continuous Wave → Rapid Heating → Vaporization' : 'Pulsed Wave → Slow Heating → Desiccation'} {isCut ? '连续波 → 快速升温 → 细胞气化爆裂' : '脉冲波 → 缓慢升温 → 蛋白变性凝固'} {/* 细胞层 */} {cells.map(cell => { const dx = cell.cx - 500; const dy = cell.cy - 280; const dist = Math.sqrt(dx*dx + dy*dy); let fill = "url(#tissue-gradient)"; let opacity = 1; let scale = 1; let stroke = "#be123c"; // 作用域半径 if (dist < 100) { if (isCut) { // 切割：中心完全气化，边缘受损 if (dist < 40) { opacity = 0; // 气化消失 } else if (dist < 60) { scale = 0.5; fill = THEME.tissueBurn; } } else { // 凝血：中心焦痂，周围脱水 if (dist < 60) { fill = "url(#char-gradient)"; scale = 0.8 + Math.sin(time * 10) * 0.05; // 收缩脉动 stroke = "#000"; } else { fill = THEME.tissueBurn; } } } return ( ); })} {/* 刀头 (Electrode Tip) */} {/* 电弧 (Arc) */} {/* 粒子效果 (Smoke/Steam) */} {activeParticles.map(p => ( ))} {/* 右侧原理说明框 */} Effect / 效应: {isCut ? '爆炸性分离' : '干燥与收缩'} {isCut ? 'Explosive Separation' : 'Desiccation & Shrinkage'} Temp: {isCut ? '> 100°C' : '< 100°C'} ); }; // --- 示波器面板 --- const OscilloscopePanel = ({ phase, time }: { phase: string, time: number }) => { const points = []; const width = 800; const startX = 100; const centerY = 520; // 生成波形 for (let i = 0; i < width; i += 3) { const x = startX + i; const t = i * 0.15 - time * 15; // 波形移动 let y = 0; if (phase === 'circuit' || phase === 'cut') { // 纯正弦波 (连续) y = Math.sin(t) * 35; } else if (phase === 'coag') { // 阻尼正弦波/脉冲 (间断) // 模拟：高电压，低占空比 (Duty Cycle) const burstFreq = 0.05; // 脉冲频率 const carrierFreq = 2.0; // 载波频率 // 包络线：每隔一段时间产生一个脉冲 const envelope = Math.pow(Math.sin(t * burstFreq), 60); y = Math.sin(t * carrierFreq) * 50 * envelope; } points.push(`${x},${centerY + y}`); } const color = phase === 'coag' ? THEME.coag : (phase === 'cut' ? THEME.cut : THEME.primary); return ( {/* 示波器外框 */} {/* 刻度网格 */} OSCILLOSCOPE / 波形监控 {/* 波形 */} {/* 实时参数读数 */} V_peak: {phase === 'coag' ? '3000 V' : '500 V'} Crest : {phase === 'coag' ? 'High' : 'Low'} Duty : {phase === 'coag' ? '6%' : '100%'} Freq : 500 kHz ); }; // --- HUD 界面 --- const HUDInterface = ({ phase, time }: { phase: string, time: number }) => { // 模拟运行时间 const runTime = (time % 100).toFixed(2); return ( {/* 四角装饰 */} {/* 顶部状态栏 */} SYSTEM ACTIVE T: {runTime}s {/* 模式指示灯 */} STBY CUT COAG ); };