Update pages/GameZen.tsx

pages/GameZen.tsx

@@ -176,6 +176,7 @@ export const GameZen: React.FC = () => {
         // Game Logic
         if (delta > 0) {
             setTotalSeconds(prev => prev + delta);
+            // Count as quiet only if below threshold (Levels 1 & 2)
             if (vol < threshold) {
                 setQuietSeconds(prev => prev + delta);
             }
@@ -194,7 +195,16 @@ export const GameZen: React.FC = () => {
 
   // Score Calculation
   const calculatedScore = totalSeconds > 0 ? Math.round((quietSeconds / totalSeconds) * 100) : 100;
-  const isQuiet = currentVolume < threshold;
+
+  // Determine Current State (4 Levels)
+  const getZenState = () => {
+      if (currentVolume < threshold * 0.5) return 'DEEP';
+      if (currentVolume < threshold) return 'FOCUSED';
+      if (currentVolume < threshold * 1.5) return 'RESTLESS';
+      return 'CHAOS';
+  };
+
+  const currentState = getZenState();
 
   const handleBatchGrant = async () => {
       const targets = students.filter(s => !excludedStudentIds.has(s._id || String(s.id)));
@@ -232,43 +242,67 @@ export const GameZen: React.FC = () => {
       width: '100vw',
       height: '100vh',
       zIndex: 999999,
-      backgroundColor: '#0f766e', 
   } : {};
 
-  // Zen Visuals
-  const monkY = isQuiet ? -20 : 0; 
-  const monkScale = isQuiet ? 1.1 : 1;
-  const glowOpacity = isQuiet ? 0.6 : 0;
+  // Visual Parameters Mapping
+  const visualParams = {
+      DEEP: { 
+          bg: 'bg-gradient-to-b from-teal-900 to-teal-800', 
+          monk: '🧘', monkY: -50, monkScale: 1.2, 
+          text: '🌿 极静 · 入定', badge: 'bg-teal-500/20 text-teal-200 border-teal-500/50',
+          auraColor: 'bg-emerald-300', auraOpacity: 0.6, auraScale: 1.5
+      },
+      FOCUSED: { 
+          bg: 'bg-gradient-to-b from-emerald-800 to-emerald-600', 
+          monk: '🧘', monkY: 0, monkScale: 1.0, 
+          text: '🍃 专注 · 宁静', badge: 'bg-emerald-500/20 text-emerald-100 border-emerald-500/50',
+          auraColor: 'bg-emerald-200', auraOpacity: 0.3, auraScale: 1.1
+      },
+      RESTLESS: { 
+          bg: 'bg-gradient-to-b from-amber-800 to-orange-700', 
+          monk: '😰', monkY: 10, monkScale: 0.95, 
+          text: '🍂 浮躁 · 波动', badge: 'bg-amber-500/20 text-amber-100 border-amber-500/50',
+          auraColor: 'bg-orange-400', auraOpacity: 0.2, auraScale: 0.9
+      },
+      CHAOS: { 
+          bg: 'bg-gradient-to-b from-red-900 to-red-700', 
+          monk: '😖', monkY: 20, monkScale: 0.9, 
+          text: '🔥 喧哗 · 破功', badge: 'bg-red-500/20 text-red-100 border-red-500/50',
+          auraColor: 'bg-red-500', auraOpacity: 0.1, auraScale: 0.8
+      }
+  };
+
+  const currentVisual = visualParams[currentState];
 
   const GameContent = (
     <div 
-        className={`${isFullscreen ? '' : 'h-full w-full relative'} flex flex-col bg-teal-800 overflow-hidden select-none transition-all duration-300 font-sans`}
+        className={`${isFullscreen ? '' : 'h-full w-full relative'} flex flex-col overflow-hidden select-none transition-all duration-1000 ease-in-out font-sans ${currentVisual.bg}`}
         style={containerStyle}
     >
-        {/* Background */}
-        <div className="absolute inset-0 bg-gradient-to-b from-teal-900 to-teal-700 opacity-90 pointer-events-none"></div>
-        <div className="absolute inset-0 flex items-center justify-center pointer-events-none opacity-10">
-            <div className={`w-[800px] h-[800px] border-[50px] rounded-full border-white transition-all duration-1000 ${isQuiet ? 'scale-100' : 'scale-90 border-red-500'}`}></div>
+        {/* Background Overlay */}
+        <div className="absolute inset-0 bg-black/10 pointer-events-none"></div>
+        <div className="absolute inset-0 flex items-center justify-center pointer-events-none opacity-20">
+            <div className={`w-[800px] h-[800px] border-[50px] rounded-full border-white transition-all duration-1000 ${currentState === 'DEEP' ? 'scale-110 opacity-50' : 'scale-90 opacity-20'}`}></div>
         </div>
 
         {/* HUD */}
         <div className="absolute top-4 left-4 z-50 flex gap-3">
-            <div className="bg-black/30 border border-teal-300/30 rounded-xl p-3 min-w-[120px] text-center backdrop-blur-md">
-                <span className="text-[10px] text-teal-200 font-bold uppercase block">倒计时</span>
+            <div className="bg-black/30 border border-white/20 rounded-xl p-3 min-w-[120px] text-center backdrop-blur-md">
+                <span className="text-[10px] text-gray-300 font-bold uppercase block">倒计时</span>
                 <span className="text-3xl font-mono font-black text-white">
                     {Math.floor(timeLeft / 60)}:{String(Math.floor(timeLeft % 60)).padStart(2, '0')}
                 </span>
             </div>
-            <div className="bg-black/30 border border-teal-300/30 rounded-xl p-3 min-w-[120px] text-center backdrop-blur-md">
-                <span className="text-[10px] text-teal-200 font-bold uppercase block">专注评分</span>
+            <div className="bg-black/30 border border-white/20 rounded-xl p-3 min-w-[120px] text-center backdrop-blur-md">
+                <span className="text-[10px] text-gray-300 font-bold uppercase block">专注评分</span>
                 <span className={`text-3xl font-mono font-black ${calculatedScore >= passRate ? 'text-green-400' : 'text-red-400'}`}>{calculatedScore}</span>
             </div>
         </div>
 
         {/* Status Indicator */}
         <div className="absolute top-4 right-4 z-50">
-             <div className={`px-4 py-2 rounded-full font-bold shadow-lg backdrop-blur-md transition-colors ${isQuiet ? 'bg-green-500/20 text-green-300 border border-green-500/50' : 'bg-red-500/20 text-red-300 border border-red-500/50'}`}>
-                 {isQuiet ? '🌿 极静 · 专注' : '⚠️ 喧哗 · 浮躁'}
+             <div className={`px-6 py-3 rounded-full font-bold text-lg shadow-lg backdrop-blur-md transition-all duration-500 border ${currentVisual.badge}`}>
+                 {currentVisual.text}
              </div>
         </div>
 
@@ -311,20 +345,20 @@ export const GameZen: React.FC = () => {
         <div className="flex-1 relative z-10 flex flex-col items-center justify-center pb-20">
             {/* Aura */}
             <div 
-                className="absolute w-64 h-64 bg-yellow-200 rounded-full blur-[80px] transition-all duration-1000"
-                style={{ opacity: glowOpacity, transform: `scale(${isQuiet ? 1.5 : 0.5})` }}
+                className={`absolute w-64 h-64 rounded-full blur-[80px] transition-all duration-1000 ${currentVisual.auraColor}`}
+                style={{ opacity: currentVisual.auraOpacity, transform: `scale(${currentVisual.auraScale})` }}
             ></div>
 
             {/* Monk/Visual */}
             <div 
-                className="text-[150px] transition-all duration-1000 ease-in-out relative z-20 drop-shadow-2xl"
-                style={{ transform: `translateY(${monkY}px) scale(${monkScale})` }}
+                className={`text-[150px] transition-all duration-1000 ease-in-out relative z-20 drop-shadow-2xl ${currentState === 'CHAOS' ? 'animate-bounce' : currentState === 'RESTLESS' ? 'animate-pulse' : ''}`}
+                style={{ transform: `translateY(${currentVisual.monkY}px) scale(${currentVisual.monkScale})` }}
             >
-                {isQuiet ? '🧘' : '😖'}
+                {currentVisual.monk}
             </div>
             
-            {/* Levitation Base */}
-            <div className={`w-40 h-10 bg-black/20 rounded-[100%] blur-md transition-all duration-1000 ${isQuiet ? 'scale-75 opacity-50' : 'scale-100 opacity-80'}`}></div>
+            {/* Levitation Base (Shadow) */}
+            <div className={`w-40 h-10 bg-black/30 rounded-[100%] blur-md transition-all duration-1000 ${currentState === 'DEEP' ? 'scale-50 opacity-40 translate-y-10' : 'scale-100 opacity-80'}`}></div>
         </div>
 
         {/* Config Modal */}
@@ -346,24 +380,36 @@ export const GameZen: React.FC = () => {
                                             <span>阈值设定: {threshold}</span>
                                         </div>
                                         <div className="w-full h-6 bg-gray-800 rounded-full overflow-hidden relative border border-gray-600">
+                                            {/* Threshold Marker */}
                                             <div className="absolute top-0 bottom-0 w-0.5 bg-yellow-500 z-10 shadow-[0_0_5px_yellow]" style={{left: `${threshold}%`}}></div>
+                                            
+                                            {/* Current Vol Bar */}
                                             <div 
-                                                className={`h-full transition-all duration-75 ${currentVolume < threshold ? 'bg-green-500' : 'bg-red-500'}`}
+                                                className={`h-full transition-all duration-75 ${
+                                                    currentVolume < threshold * 0.5 ? 'bg-teal-500' : 
+                                                    currentVolume < threshold ? 'bg-emerald-500' :
+                                                    currentVolume < threshold * 1.5 ? 'bg-orange-500' : 'bg-red-600'
+                                                }`}
                                                 style={{width: `${Math.min(currentVolume, 100)}%`}}
                                             ></div>
                                         </div>
-                                        <div className="mt-2">
+                                        <div className="mt-2 flex justify-between text-[10px] text-gray-500 px-1">
+                                            <span>静</span>
+                                            <span>↑ 阈值</span>
+                                            <span>闹</span>
+                                        </div>
+                                        <div className="mt-1">
                                             <input type="range" min="1" max="100" className="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer" value={threshold} onChange={e=>setThreshold(Number(e.target.value))}/>
                                         </div>
                                     </div>
                                     <button 
-                                        onClick={() => { startAudio(); setThreshold(currentVolume + 5); }} 
+                                        onClick={() => { startAudio(); setThreshold(currentVolume + 10); }} 
                                         className="px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg text-xs font-bold whitespace-nowrap border border-slate-600"
                                     >
                                         <Volume2 size={14} className="inline mr-1"/> 自动设定
                                     </button>
                                 </div>
-                                <p className="text-[10px] text-gray-500 mt-2">* 点击“自动设定”前请让教室保持您期望的安静状态，系统将自动设置合适的阈值。</p>
+                                <p className="text-[10px] text-gray-500 mt-2">* 绿色区域为安静(计分)，橙色/红色区域为喧哗(不计分)。请在安静环境下点击自动设定。</p>
                             </div>
 
                             <div>