'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // 颜色定义 const COLORS = { bg: '#0f172a', primary: '#38bdf8', // 天蓝 - 电流/科技 accent: '#facc15', // 黄色 - 切割/高能 danger: '#f43f5e', // 红色 - 凝血/热量 text: '#e2e8f0', grid: '#1e293b', tissue: '#fda4af', // 组织粉色 tissueDark: '#be123c', // 烧焦色 pad: '#94a3b8', // 负极板 }; // 粒子系统 helper const createParticle = (x: number, y: number, type: 'spark' | 'smoke') => ({ id: Math.random(), x, y, vx: (Math.random() - 0.5) * (type === 'spark' ? 10 : 2), vy: (Math.random() - 0.5) * (type === 'spark' ? 10 : 2) - (type === 'smoke' ? 2 : 0), life: 1.0, type, }); export const ElectrosurgicalUnitView = () => { const [phase, setPhase] = useState<'circuit' | 'cut' | 'coag'>('circuit'); const [time, setTime] = useState(0); // 动画循环 useEffect(() => { let frameId: number; const animate = () => { setTime(t => t + 0.05); frameId = requestAnimationFrame(animate); }; frameId = requestAnimationFrame(animate); return () => cancelAnimationFrame(frameId); }, []); // 阶段切换逻辑 useEffect(() => { const cycle = async () => { while (true) { setPhase('circuit'); await new Promise(r => setTimeout(r, 8000)); // 宏观电路原理 8s setPhase('cut'); await new Promise(r => setTimeout(r, 7000)); // 切割模式 7s setPhase('coag'); await new Promise(r => setTimeout(r, 7000)); // 凝血模式 7s } }; cycle(); }, []); return (

); }; // --- 子组件：宏观电路视图 --- const CircuitView = ({ time }: { time: number }) => { // 模拟电流流动的虚线偏移 const dashOffset = -time * 50; return ( {/* 1. 主机 Generator */} Generator (主机) {/* 屏幕读数 */} 300 kHz {/* 接口 */} {/* 2. 人体 Patient */} {/* 身体轮廓 */} Patient Body (人体组织) {/* 负极板 Return Electrode */} Return Electrode (负极板) {/* 3. 电刀笔 Active Electrode */} Active Electrode (电刀笔) {/* 4. 连线与电流动画 */} {/* 主机 -> 电刀笔 (高密度电流) */} {/* 负极板 -> 主机 (安全回路) */} {/* 电流密度可视化 */} {/* 笔尖：高密度，高热 */} High Density (高密度/产热) {/* 负极板：低密度，安全 */} Low Density (低密度/安全) ); }; // --- 子组件：微观组织视图 --- const MicroView = ({ mode, time }: { mode: 'cut' | 'coag', time: number }) => { const [particles, setParticles] = useState[]>([]); const isCut = mode === 'cut'; // 模拟组织细胞网格 const cells = useMemo(() => { const arr = []; for(let i=0; i<8; i++) { for(let j=0; j<15; j++) { arr.push({id: `${i}-${j}`, x: 200 + j*40, y: 250 + i*35 + (j%2)*17 }); } } return arr; }, []); // 粒子生成逻辑 useEffect(() => { if (Math.random() > 0.3) { const type = isCut ? 'smoke' : 'spark'; const newP = createParticle(500, 300, type); // 在刀头位置生成 setParticles(prev => [...prev.slice(-30), newP]); // 保持粒子数量不过多 } }, [time, isCut]); // 更新粒子位置 const activeParticles = particles.map(p => ({ ...p, x: p.x + p.vx, y: p.y + p.vy, life: p.life - 0.05 })).filter(p => p.life > 0); return ( {isCut ? "Cell Vaporization (细胞气化/爆裂)" : "Protein Denaturation (蛋白变性/凝固)"} {/* 组织层 */} {cells.map((cell) => { // 计算细胞与刀头(500, 300)的距离 const dx = cell.x - 500; const dy = cell.y - 300; const dist = Math.sqrt(dx*dx + dy*dy); let state = 'normal'; let scale = 1; let opacity = 1; let color = "url(#tissueGrad)"; if (dist < 80) { if (isCut) { // 切割模式：中心气化消失，边缘整齐 if (dist < 40) opacity = 0; // 气化 else scale = 0.9; } else { // 凝血模式：中心变色收缩，形成焦痂 color = COLORS.tissueDark; scale = 0.7 + Math.sin(time * 10) * 0.05; // 脉冲式收缩 } } return ( ); })} {/* 刀头 */} {/* 电弧效果 */} 0.2 ? 1 : 0} /> {/* 粒子渲染 */} {activeParticles.map(p => ( ))} {/* 标注说明 */} {isCut ? "Waveform: Continuous Sine" : "Waveform: Interrupted/Pulsed"} {isCut ? "高频连续正弦波 -> 快速升温 -> 气化" : "间断脉冲波 -> 缓慢升温 -> 脱水凝固"} ); }; // --- 子组件：示波器波形 --- const Oscilloscope = ({ time, mode }: { time: number, mode: string }) => { const points = []; const width = 800; const startX = 100; const centerY = 520; // 生成波形数据 for (let i = 0; i < width; i+=2) { const x = startX + i; // 模拟波形移动 const t = i * 0.1 - time * 10; let y = 0; if (mode === 'circuit' || mode === 'cut') { // 纯正弦波 (切割/连续) y = Math.sin(t) * 30; } else if (mode === 'coag') { // 阻尼/脉冲波 (凝血) // 简单的模拟：正弦波 * 方波包络 const envelope = Math.sin(t * 0.1) > 0 ? 1 : 0.1; y = Math.sin(t * 2) * 30 * envelope; } points.push(`${x},${centerY + y}`); } return ( {/* 示波器背景框 */} OSCILLOSCOPE (波形监控) {/* 动态波形 */} {/* 动态参数 */} V_peak: {mode === 'coag' ? '2000V' : '500V'} Duty: {mode === 'coag' ? '6%' : '100%'} ); }; export default ElectrosurgicalUnitView;