```javascript 'use client'; import React, { useState, useEffect, useRef } from 'react'; const VIEW_WIDTH = 800; const VIEW_HEIGHT = 450; const BG_COLOR = "#0f172a"; const PRIMARY_COLOR = "#38bdf8"; // Sky 400 const ACCENT_COLOR = "#f472b6"; // Pink 400 const SUCCESS_COLOR = "#4ade80"; // Green 400 const WARNING_COLOR = "#fbbf24"; // Amber 400 const DANGER_COLOR = "#f87171"; // Red 400 // 动画阶段定义 const PHASES = { IDLE: 0, SAMPLING: 1, // 取样 RINSING: 2, // 漂洗 LYSIS_ADD: 3, // 加蛋白酶K LYSIS_HEAT: 4, // 56度水浴 SPIN_1: 5, // 涡旋+瞬时离心 BOIL: 6, // 沸水浴 SPIN_2: 7, // 再次离心 RESULT: 8 // 结果保存 }; export const DNAExtractionView = () => { const [phase, setPhase] = useState(PHASES.IDLE); const [timerText, setTimerText] = useState(""); const [tempText, setTempText] = useState("25°C"); const [rpmText, setRpmText] = useState("0 RPM"); const [infoText, setInfoText] = useState("准备就绪"); // 动画状态引用 const tubeRef = useRef(null); // 主控流程 useEffect(() => { let mounted = true; const runSequence = async () => { while (mounted) { // --- 1. 取样 --- setPhase(PHASES.SAMPLING); setInfoText("步骤一：口腔取样 (Sampling)"); setTempText("37°C"); await wait(4000); // --- 2. 漂洗 --- setPhase(PHASES.RINSING); setInfoText("步骤二：Chelex 缓冲液漂洗"); setTempText("25°C"); await wait(3000); // --- 3. 加蛋白酶K --- setPhase(PHASES.LYSIS_ADD); setInfoText("步骤三：加入蛋白酶 K (Proteinase K)"); await wait(2000); // --- 4. 56度水浴 --- setPhase(PHASES.LYSIS_HEAT); setInfoText("步骤四：56°C 水浴消化 (30min)"); setTempText("56°C"); // 模拟加速时间 await animateValue(setTimerText, 0, 30, 2000, "min"); // --- 5. 涡旋 + 瞬时离心 --- setPhase(PHASES.SPIN_1); setTempText("25°C"); setInfoText("冷却，涡旋振荡 & 瞬时离心"); setRpmText("VORTEX"); await wait(1500); setRpmText("13200 RPM"); await wait(1500); setRpmText("0 RPM"); // --- 6. 沸水浴 --- setPhase(PHASES.BOIL); setInfoText("步骤五：沸水浴灭活 (8min)"); setTempText("100°C"); await animateValue(setTimerText, 0, 8, 2000, "min"); // --- 7. 最终离心 --- setPhase(PHASES.SPIN_2); setTempText("25°C"); setInfoText("涡旋 & 高速离心 (3min)"); setRpmText("13200 RPM"); await wait(2000); setRpmText("0 RPM"); // --- 8. 结果 --- setPhase(PHASES.RESULT); setInfoText("步骤六：提取完成，4°C保存"); setTempText("4°C"); await wait(5000); // 重置 setPhase(PHASES.IDLE); await wait(1000); } }; runSequence(); return () => { mounted = false; }; }, []); // 辅助函数 const wait = (ms) => new Promise(r => setTimeout(r, ms)); const animateValue = async (setter, start, end, duration, suffix = "") => { const steps = 20; const stepTime = duration / steps; for (let i = 0; i <= steps; i++) { const val = Math.round(start + (end - start) * (i / steps)); setter(`${val} ${suffix}`); await wait(stepTime); } }; // 计算动画变量 const isHeating = phase === PHASES.LYSIS_HEAT; const isBoiling = phase === PHASES.BOIL; const isVortexing = (phase === PHASES.SPIN_1 || phase === PHASES.SPIN_2) && rpmText === "VORTEX"; const isSpinning = (phase === PHASES.SPIN_1 || phase === PHASES.SPIN_2) && rpmText.includes("RPM") && rpmText !== "0 RPM"; // 试管位置逻辑 let tubeTransform = "translate(400, 250)"; // Default center let tubeRotation = 0; if (phase === PHASES.SAMPLING) tubeTransform = "translate(400, 550)"; // Hide tube if (phase === PHASES.RINSING) tubeTransform = "translate(400, 250)"; // 试管内液体颜色 let liquidColor = "#60a5fa"; // Blueish default if (isHeating) liquidColor = "#fb923c"; // Orange if (isBoiling) liquidColor = "#ef4444"; // Red if (phase === PHASES.RESULT) liquidColor = "#a5f3fc"; // Clear/Cyan return (

{/* CSS 动画定义 */}

); }; // --- 子组件 --- const GridBackground = () => ( {Array.from({ length: 9 }).map((_, i) => ( ))} {Array.from({ length: 5 }).map((_, i) => ( ))} ); const MouthCheek = () => ( {/* Cells on cheek */} {Array.from({length: 10}).map((_, i) => ( ))} 口腔上皮 (Oral Epithelium) ); const ToothPick = ({ animate }) => ( {animate && } {/* Cells collected */} ); const Tube = ({ liquidColor, hasCells, hasDNA, isBoiling, showPellet }) => { return ( {/* 盖子 */} {/* 管身玻璃 */} {/* 液体 */} {/* 气泡 (沸腾时) */} {isBoiling && Array.from({length: 8}).map((_, i) => ( ))} {/* 细胞 / 沉淀 */} {hasCells && !showPellet && !hasDNA && Array.from({length: 15}).map((_, i) => ( ))} {/* 沉淀 Pellet */} {showPellet && ( )} {/* DNA 释放 */} {hasDNA && !showPellet && ( )} {/* 高光 */} ); }; const Pipette = ({ drop }) => ( {/* Tip */} {drop && ( )} ); const DNAHelix = () => ( {/* Simplified Double Helix Visualization */} {[0, 10, 20, 30, 40].map((y, i) => ( ))} Genomic DNA ); const OverlayUI = ({ step, temp, rpm, timer, phase }) => { return ( {/* Top Bar */} {/* Step Info */} {step} {/* Stats Panel (Right) */} {/* Temp */} TEMP {temp} {/* RPM */} SPEED {rpm} {/* Timer */} {timer && ( TIME {timer} )} {/* Progress Bar */} {/* Tech Corners */} ); }; ```