Upload 45 files

components/Emoji.tsx

@@ -0,0 +1,58 @@
+
+import React, { memo } from 'react';
+
+interface EmojiProps {
+  symbol: string;
+  className?: string;
+  size?: number | string;
+}
+
+// 将 Unicode 转换为 Twemoji 兼容的 Hex 文件名
+const getEmojiHex = (emoji: string) => {
+  try {
+    const codePoints = Array.from(emoji).map(char => char.codePointAt(0)!.toString(16));
+    // Twemoji 文件名规范：小写，去除 fe0f (变体选择符)，用 - 连接
+    return codePoints.filter(c => c !== 'fe0f').join('-');
+  } catch (e) {
+    return null;
+  }
+};
+
+export const Emoji: React.FC<EmojiProps> = memo(({ symbol, className = '', size }) => {
+  // 如果不是 Emoji (比如纯数字或字母)，直接渲染文本
+  const isEmoji = /\p{Emoji}/u.test(symbol);
+  
+  if (!isEmoji) {
+    return <span className={className} style={{ fontSize: size }}>{symbol}</span>;
+  }
+
+  const hex = getEmojiHex(symbol);
+  
+  // 备用方案：如果转换失败，回退到原生显示
+  if (!hex) {
+    return <span className={className} style={{ fontSize: size }}>{symbol}</span>;
+  }
+
+  const url = `https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/${hex}.svg`;
+
+  return (
+    <img 
+      src={url} 
+      alt={symbol} 
+      className={`inline-block align-middle select-none pointer-events-none object-contain ${className}`}
+      style={{ 
+        width: size || '1em', 
+        height: size || '1em',
+        verticalAlign: '-0.1em' // 微调对齐
+      }}
+      onError={(e) => {
+        // 加载失败时隐藏图片，显示原生字符
+        e.currentTarget.style.display = 'none';
+        const span = document.createElement('span');
+        span.innerText = symbol;
+        span.className = className || '';
+        e.currentTarget.parentElement?.insertBefore(span, e.currentTarget);
+      }}
+    />
+  );
+});

pages/AchievementStudent.tsx

@@ -3,6 +3,7 @@ import React, { useState, useEffect } from 'react';
 import { api } from '../services/api';
 import { AchievementConfig, AchievementItem, Student, StudentAchievement, SystemConfig } from '../types';
 import { Award, ShoppingBag, Loader2, Calendar, Lock } from 'lucide-react';
+import { Emoji } from '../components/Emoji';
 
 export const AchievementStudent: React.FC = () => {
     const [loading, setLoading] = useState(true);
@@ -123,7 +124,7 @@ export const AchievementStudent: React.FC = () => {
                 <div className="flex items-center gap-4 bg-white p-3 rounded-xl shadow-sm border border-orange-100">
                     <div className="text-right">
                         <div className="text-xs text-gray-500 font-bold uppercase">当前小红花</div>
-                        <div className="text-2xl font-black text-amber-600">{student.flowerBalance || 0} 🌺</div>
+                        <div className="text-2xl font-black text-amber-600">{student.flowerBalance || 0} <Emoji symbol="🌺" size={20}/></div>
                     </div>
                 </div>
             </div>
@@ -161,7 +162,7 @@ export const AchievementStudent: React.FC = () => {
                                 return (
                                     <div key={ach.id} className={`relative aspect-square rounded-xl border flex flex-col items-center justify-center p-4 transition-all ${isUnlocked ? 'bg-white border-amber-200 shadow-sm' : 'bg-gray-50 border-gray-200 grayscale opacity-70'}`}>
                                         <div className={`text-5xl mb-3 transition-transform ${isUnlocked ? 'scale-110 drop-shadow-md' : 'scale-90 opacity-50'}`}>
-                                            {ach.icon}
+                                            <Emoji symbol={ach.icon} size={48} />
                                         </div>
                                         <div className={`font-bold text-center ${isUnlocked ? 'text-gray-800' : 'text-gray-400'}`}>
                                             {ach.name}
@@ -176,7 +177,7 @@ export const AchievementStudent: React.FC = () => {
                                             </div>
                                         )}
                                         <div className={`mt-1 text-xs font-medium px-2 rounded ${isHistoric ? 'text-gray-500 bg-gray-100' : 'text-amber-600 bg-amber-50'}`}>
-                                            {isHistoric ? '历史记录' : `${ach.points} 🌺`}
+                                            {isHistoric ? '历史记录' : <span>{ach.points} <Emoji symbol="🌺" size={10}/></span>}
                                         </div>
                                     </div>
                                 );
@@ -193,7 +194,7 @@ export const AchievementStudent: React.FC = () => {
                             return (
                                 <div key={rule.id} className="bg-white rounded-xl border border-gray-200 shadow-sm p-5 flex flex-col items-center text-center hover:shadow-md transition-shadow relative overflow-hidden">
                                     <div className="w-16 h-16 bg-gradient-to-br from-green-100 to-emerald-100 rounded-full flex items-center justify-center mb-3 text-3xl shadow-inner">
-                                        {rule.rewardType === 'DRAW_COUNT' ? '🎲' : '🎁'}
+                                        <Emoji symbol={rule.rewardType === 'DRAW_COUNT' ? '🎲' : '🎁'} size={32} />
                                     </div>
                                     <h3 className="font-bold text-gray-800 text-lg mb-1">{rule.rewardName}</h3>
                                     <p className="text-sm text-gray-500 mb-4">包含数量: x{rule.rewardValue}</p>
@@ -204,7 +205,7 @@ export const AchievementStudent: React.FC = () => {
                                         className={`mt-auto w-full py-2.5 rounded-lg font-bold flex items-center justify-center gap-2 transition-all ${canAfford ? 'bg-amber-500 text-white hover:bg-amber-600 shadow-md hover:shadow-lg active:scale-95' : 'bg-gray-100 text-gray-400 cursor-not-allowed'}`}
                                     >
                                         <ShoppingBag size={16}/>
-                                        {rule.cost} 🌺 兑换
+                                        {rule.cost} <Emoji symbol="🌺" size={14} /> 兑换
                                     </button>
                                 </div>
                             );
@@ -219,4 +220,4 @@ export const AchievementStudent: React.FC = () => {
             </div>
         </div>
     );
-};
+};

pages/AchievementTeacher.tsx

@@ -3,6 +3,7 @@ import React, { useState, useEffect } from 'react';
 import { api } from '../services/api';
 import { AchievementConfig, AchievementItem, ExchangeRule, Student, SystemConfig } from '../types';
 import { Plus, Trash2, Edit, Save, Gift, Award, Coins, Users, Search, Loader2, CheckCircle } from 'lucide-react';
+import { Emoji } from '../components/Emoji';
 
 const PRESET_ICONS = [
     { icon: '🏆', label: '冠军杯' }, { icon: '🥇', label: '金牌' }, { icon: '🥈', label: '银牌' }, { icon: '🥉', label: '铜牌' },
@@ -178,10 +179,10 @@ export const AchievementTeacher: React.FC = () => {
                         <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                             {config?.achievements.map(ach => (
                                 <div key={ach.id} className="border border-gray-200 rounded-xl p-4 flex flex-col items-center relative group hover:shadow-md transition-all bg-white">
-                                    <div className="text-4xl mb-2">{ach.icon}</div>
+                                    <div className="text-4xl mb-2"><Emoji symbol={ach.icon} /></div>
                                     <div className="font-bold text-gray-800 text-center">{ach.name}</div>
                                     <div className="text-xs text-amber-600 font-bold bg-amber-50 px-2 py-0.5 rounded-full mt-1 border border-amber-100">
-                                        {ach.points} 🌺
+                                        {ach.points} <Emoji symbol="🌺" size={14}/>
                                     </div>
                                     <button onClick={() => deleteAchievement(ach.id)} className="absolute top-2 right-2 text-gray-300 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity">
                                         <Trash2 size={16}/>
@@ -231,9 +232,9 @@ export const AchievementTeacher: React.FC = () => {
                                         onClick={() => setSelectedAchieveId(ach.id)}
                                         className={`p-4 rounded-xl border cursor-pointer text-center transition-all ${selectedAchieveId === ach.id ? 'bg-amber-50 border-amber-400 ring-2 ring-amber-200' : 'bg-white border-gray-200 hover:bg-gray-50'}`}
                                     >
-                                        <div className="text-3xl mb-1">{ach.icon}</div>
+                                        <div className="text-3xl mb-1"><Emoji symbol={ach.icon} /></div>
                                         <div className="font-bold text-sm text-gray-800">{ach.name}</div>
-                                        <div className="text-xs text-gray-500">+{ach.points} 🌺</div>
+                                        <div className="text-xs text-gray-500">+{ach.points} <Emoji symbol="🌺" size={12}/></div>
                                     </div>
                                 ))}
                             </div>
@@ -257,7 +258,7 @@ export const AchievementTeacher: React.FC = () => {
                         <div className="bg-green-50 p-4 rounded-xl border border-green-100 flex flex-col md:flex-row gap-4 items-end">
                             <div className="w-full md:w-32">
                                 <label className="text-xs font-bold text-gray-500 uppercase mb-1 block">消耗小红花</label>
-                                <input type="number" className="w-full border rounded p-2" value={newRule.cost} onChange={e => setNewRule({...newRule, cost: Number(e.target.value)})}/>
+                                <input type="number" className="w-full border rounded p-2" value={newRule.cost} onChange={e => setNewRule({...newRule,cost: Number(e.target.value)})}/>
                             </div>
                             <div className="w-full md:w-32">
                                 <label className="text-xs font-bold text-gray-500 uppercase mb-1 block">奖励类型</label>
@@ -282,11 +283,11 @@ export const AchievementTeacher: React.FC = () => {
                                 <div key={rule.id} className="flex items-center justify-between p-4 bg-white border border-gray-200 rounded-xl hover:shadow-sm">
                                     <div className="flex items-center gap-4">
                                         <div className="bg-amber-100 text-amber-700 font-bold px-3 py-1 rounded-lg border border-amber-200">
-                                            {rule.cost} 🌺
+                                            {rule.cost} <Emoji symbol="🌺" size={14}/>
                                         </div>
                                         <div className="text-gray-400">➡️</div>
                                         <div className="flex items-center gap-2">
-                                            <span className="text-2xl">{rule.rewardType === 'DRAW_COUNT' ? '🎲' : '🎁'}</span>
+                                            <span className="text-2xl"><Emoji symbol={rule.rewardType === 'DRAW_COUNT' ? '🎲' : '🎁'} /></span>
                                             <div>
                                                 <div className="font-bold text-gray-800">{rule.rewardName}</div>
                                                 <div className="text-xs text-gray-500">x{rule.rewardValue}</div>
@@ -317,7 +318,7 @@ export const AchievementTeacher: React.FC = () => {
                                         <td className="p-4 font-bold text-gray-700">{s.seatNo ? s.seatNo+'.':''}{s.name}</td>
                                         <td className="p-4">
                                             <span className="text-amber-600 font-bold bg-amber-50 px-2 py-1 rounded border border-amber-100">
-                                                {s.flowerBalance || 0} 🌺
+                                                {s.flowerBalance || 0} <Emoji symbol="🌺" size={14}/>
                                             </span>
                                         </td>
                                         <td className="p-4 text-right">

pages/GameLucky.tsx

@@ -4,6 +4,7 @@ import { createPortal } from 'react-dom';
 import { api } from '../services/api';
 import { LuckyDrawConfig, Student, LuckyPrize } from '../types';
 import { Gift, Settings, Loader2, Save, Trash2, X, UserCircle, RefreshCcw, HelpCircle, Maximize, Minimize } from 'lucide-react';
+import { Emoji } from '../components/Emoji';
 
 const FlipCard = ({ index, prize, onFlip, isRevealed, activeIndex }: { index: number, prize: string, onFlip: (idx: number) => void, isRevealed: boolean, activeIndex: number | null }) => {
   const showBack = isRevealed && activeIndex === index;
@@ -14,13 +15,13 @@ const FlipCard = ({ index, prize, onFlip, isRevealed, activeIndex }: { index: nu
         {/* Front */}
         <div className="absolute w-full h-full backface-hidden bg-gradient-to-br from-red-500 to-red-600 rounded-xl flex flex-col items-center justify-center border-4 border-yellow-400 shadow-inner">
            <div className="w-10 h-10 md:w-14 md:h-14 bg-yellow-100 rounded-full flex items-center justify-center mb-2 shadow-lg border-2 border-yellow-300">
-              <span className="text-xl md:text-2xl">🧧</span>
+              <span className="text-xl md:text-2xl"><Emoji symbol="🧧"/></span>
            </div>
            <span className="text-yellow-100 font-black text-lg md:text-xl tracking-widest drop-shadow-md">開</span>
         </div>
         {/* Back */}
         <div className="absolute w-full h-full backface-hidden bg-white rounded-xl flex flex-col items-center justify-center border-4 border-red-200 rotate-y-180 shadow-inner p-2">
-           <span className="text-3xl mb-2 animate-bounce">🎁</span>
+           <span className="text-3xl mb-2 animate-bounce"><Emoji symbol="🎁"/></span>
            <span className="text-red-600 font-bold text-xs md:text-sm break-words leading-tight text-center px-1">{prize}</span>
         </div>
       </div>

pages/GameMonster.tsx

@@ -1,8 +1,10 @@
+
 import React, { useState, useEffect, useRef, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 import { api } from '../services/api';
 import { AchievementConfig, Student } from '../types';
 import { Play, Pause, Settings, Maximize, Minimize, Gift, Trophy, Package, Volume2, Keyboard, Award, RotateCcw, UserX } from 'lucide-react';
+import { Emoji } from '../components/Emoji';
 
 // Monster visual assets
 const MONSTER_TYPES = ['👾', '👹', '👺', '👻', '💀', '👽'];
@@ -218,12 +220,6 @@ export const GameMonster: React.FC = () => {
             analyserRef.current.getByteFrequencyData(dataArrayRef.current as any);
             const avg = dataArrayRef.current.reduce((a,b)=>a+b) / dataArrayRef.current.length;
             
-            // ADJUSTMENT: Moderate Gain Factor
-            // Raw 0-255 -> 0-127 mapped to 0-100 approx.
-            // Avg 40 (Noise) -> 20.
-            // Avg 100 (Talk) -> 50.
-            // Avg 180 (Loud) -> 90.
-            // This provides a much better dynamic range than *2.5 (too loud) or /2.5 (too quiet).
             currentVol = Math.min(100, Math.floor(avg / 2));
             
             volumeRef.current = currentVol;
@@ -399,7 +395,7 @@ export const GameMonster: React.FC = () => {
         {/* Game Area */}
         <div className="flex-1 relative z-10 flex flex-col justify-end pb-24 pointer-events-auto" onClick={handleManualInput}>
             <div className="absolute bottom-0 left-0 w-[15%] h-[80%] bg-gradient-to-r from-blue-900/30 to-transparent flex flex-col justify-end items-center pb-20 border-r border-blue-500/30">
-                <div className="text-6xl animate-bounce mb-4">🏰</div>
+                <div className="mb-4"><Emoji symbol="🏰" size={70} /></div>
             </div>
 
             <div 
@@ -421,7 +417,7 @@ export const GameMonster: React.FC = () => {
                     {monsterArmy.map((m) => (
                         <div 
                             key={m.id}
-                            className="absolute text-7xl filter drop-shadow-2xl transition-transform"
+                            className="absolute transition-transform"
                             style={{
                                 left: `${m.leftPercent}%`,
                                 bottom: `${m.bottomPercent}%`,
@@ -430,10 +426,10 @@ export const GameMonster: React.FC = () => {
                                 animation: `monsterWalk 1s infinite alternate ${m.id * 0.2}s`
                             }}
                         >
-                            {m.emoji}
+                            <Emoji symbol={m.emoji} size={70} />
                         </div>
                     ))}
-                    {isHit && <div className="absolute top-0 left-1/2 text-8xl animate-ping z-50">💥</div>}
+                    {isHit && <div className="absolute top-0 left-1/2 z-50"><Emoji symbol="💥" size={90}/></div>}
                 </div>
             </div>
         </div>
@@ -610,8 +606,8 @@ export const GameMonster: React.FC = () => {
         {gameState !== 'IDLE' && gameState !== 'PLAYING' && !isConfigOpen && (
             <div className="absolute inset-0 bg-black/90 z-[110] flex items-center justify-center p-4 backdrop-blur-lg animate-in zoom-in">
                 <div className="text-center w-full max-w-lg">
-                    <div className="text-9xl mb-6 animate-bounce drop-shadow-[0_0_25px_rgba(255,255,255,0.5)]">
-                        {gameState === 'VICTORY' ? '🏆' : '💀'}
+                    <div className="mb-6 animate-bounce drop-shadow-[0_0_25px_rgba(255,255,255,0.5)]">
+                        <Emoji symbol={gameState === 'VICTORY' ? '🏆' : '💀'} size={100} />
                     </div>
                     <h2 className={`text-6xl font-black mb-2 tracking-tight ${gameState==='VICTORY' ? 'text-transparent bg-clip-text bg-gradient-to-b from-yellow-300 to-yellow-600' : 'text-gray-400'}`}>
                         {gameState === 'VICTORY' ? '守卫成功!' : '防线沦陷...'}
@@ -662,4 +658,4 @@ export const GameMonster: React.FC = () => {
 
 const TicketIcon = () => (
     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z"/><path d="M13 5v2"/><path d="M13 17v2"/><path d="M13 11v2"/></svg>
-);
+);

pages/GameMountain.tsx

@@ -4,6 +4,7 @@ import { createPortal } from 'react-dom';
 import { api } from '../services/api';
 import { GameSession, GameTeam, Student, GameRewardConfig, AchievementConfig } from '../types';
 import { Settings, Plus, Minus, Users, CheckSquare, Loader2, Trash2, X, Flag, Gift, Star, Trophy, Maximize, Minimize } from 'lucide-react';
+import { Emoji } from '../components/Emoji';
 
 // --- CSS Animations for Clouds and Bounce ---
 const styles = `
@@ -72,12 +73,12 @@ const generatePathString = () => {
 };
 
 const CelebrationEffects = () => (
-    <div className="absolute -top-10 left-1/2 -translate-x-1/2 w-full h-full pointer-events-none z-50">
-        <div className="absolute top-0 left-1/4 text-2xl animate-confetti" style={{animationDelay: '0.1s'}}>🎉</div>
-        <div className="absolute top-2 right-1/4 text-2xl animate-confetti" style={{animationDelay: '0.3s'}}>✨</div>
-        <div className="absolute top-0 left-1/2 text-2xl animate-confetti" style={{animationDelay: '0.5s'}}>🎊</div>
-        <div className="absolute -top-4 right-1/3 text-xl animate-confetti" style={{animationDelay: '0.2s'}}>🎈</div>
-        <div className="absolute -top-2 left-1/3 text-xl animate-confetti" style={{animationDelay: '0.4s'}}>🌟</div>
+    <div className="absolute -top-16 left-1/2 -translate-x-1/2 w-40 h-40 pointer-events-none z-50">
+        <div className="absolute top-10 left-1/4 text-2xl animate-confetti" style={{animationDelay: '0.1s'}}><Emoji symbol="🎉"/></div>
+        <div className="absolute top-12 right-1/4 text-2xl animate-confetti" style={{animationDelay: '0.3s'}}><Emoji symbol="✨"/></div>
+        <div className="absolute top-8 left-1/2 text-2xl animate-confetti" style={{animationDelay: '0.5s'}}><Emoji symbol="🎊"/></div>
+        <div className="absolute top-0 right-1/3 text-xl animate-confetti" style={{animationDelay: '0.2s'}}><Emoji symbol="🎈"/></div>
+        <div className="absolute top-4 left-1/3 text-xl animate-confetti" style={{animationDelay: '0.4s'}}><Emoji symbol="🌟"/></div>
     </div>
 );
 
@@ -184,8 +185,8 @@ const MountainStage = ({ team, index, rewardsConfig, maxSteps, onScoreChange, is
                       <Icon size={12} className={isUnlocked ? 'text-amber-600' : 'text-gray-400'} />
                       {isUnlocked && <div className="absolute inset-0 bg-yellow-400 rounded-full blur-sm opacity-50 animate-pulse"></div>}
                   </div>
-                  {/* Reward Name Label - Now visible */}
-                  <div className={`mt-1 px-1.5 py-0.5 rounded text-[10px] font-bold shadow-sm whitespace-nowrap border max-w-[80px] truncate transition-colors ${isUnlocked ? 'bg-yellow-50 text-yellow-700 border-yellow-200' : 'bg-white/90 text-gray-500 border-gray-200'}`}>
+                  {/* Reward Name Label - Always Visible */}
+                  <div className={`mt-1 px-2 py-0.5 rounded text-[10px] font-bold shadow-sm whitespace-nowrap border max-w-[100px] truncate transition-colors ${isUnlocked ? 'bg-yellow-50 text-yellow-700 border-yellow-200' : 'bg-white/90 text-gray-500 border-gray-200'}`}>
                       {reward.rewardName}
                   </div>
                </div>
@@ -202,11 +203,11 @@ const MountainStage = ({ team, index, rewardsConfig, maxSteps, onScoreChange, is
             w-12 h-12 md:w-14 md:h-14 bg-white rounded-full border-4 shadow-xl flex items-center justify-center transition-transform relative
             ${isFinished ? 'animate-bounce border-yellow-400' : 'hover:scale-110'}
          `} style={{ borderColor: isFinished ? '#facc15' : team.color }}>
-            <span className="text-2xl md:text-3xl">{team.avatar || '🧗'}</span>
+            <span className="text-2xl md:text-3xl"><Emoji symbol={team.avatar || '🧗'} /></span>
             
             {isFinished && (
                 <>
-                    <div className="absolute -right-4 -top-6 text-3xl drop-shadow-md origin-bottom-left animate-wave">🚩</div>
+                    <div className="absolute -right-4 -top-6 text-3xl drop-shadow-md origin-bottom-left animate-wave"><Emoji symbol="🚩"/></div>
                     <CelebrationEffects />
                 </>
             )}
@@ -232,13 +233,13 @@ const GameToast = ({ title, message, type, onClose }: { title: string, message:
     }, [onClose]);
 
     return (
-        <div className="fixed top-8 left-1/2 -translate-x-1/2 z-[10000] animate-in slide-in-from-top-5 fade-in duration-300">
-            <div className={`flex items-center gap-3 px-6 py-4 rounded-xl shadow-2xl border-2 backdrop-blur-md ${type === 'success' ? 'bg-yellow-50/90 border-yellow-400 text-yellow-800' : 'bg-white/90 border-blue-200 text-slate-800'}`}>
+        <div className="fixed top-20 left-1/2 -translate-x-1/2 z-[10000] animate-in slide-in-from-top-5 fade-in duration-300">
+            <div className={`flex items-center gap-3 px-6 py-4 rounded-xl shadow-2xl border-2 backdrop-blur-md ${type === 'success' ? 'bg-yellow-50/95 border-yellow-400 text-yellow-900' : 'bg-white/95 border-blue-200 text-slate-800'}`}>
                 <div className={`p-2 rounded-full ${type === 'success' ? 'bg-yellow-400 text-white' : 'bg-blue-500 text-white'}`}>
                     {type === 'success' ? <Trophy size={24} /> : <Gift size={24} />}
                 </div>
                 <div>
-                    <h4 className="font-black text-lg">{title}</h4>
+                    <h4 className="font-black text-lg leading-tight">{title}</h4>
                     <p className="text-sm opacity-90 font-medium">{message}</p>
                 </div>
             </div>
@@ -330,16 +331,13 @@ export const GameMountain: React.FC = () => {
        if (t.id !== teamId) return t;
        const newScore = Math.max(0, Math.min(session.maxSteps, t.score + delta));
        
-       // Detect Reward Trigger
+       // Detect Reward Trigger or Summit
        if (delta > 0 && newScore > t.score) {
           const reward = session.rewardsConfig.find(r => r.scoreThreshold === newScore);
           
-          // Toast for Summit
           if (newScore === session.maxSteps) {
               setToast({ title: `🏆 巅峰时刻!`, message: `恭喜 [${t.name}] 成功登顶！`, type: 'success' });
-          }
-          // Toast for Reward
-          else if (reward) {
+          } else if (reward) {
               setToast({ title: `🎉 触发奖励!`, message: `[${t.name}] 获得：${reward.rewardName}`, type: 'info' });
           }
 
@@ -406,10 +404,10 @@ export const GameMountain: React.FC = () => {
         {/* Background Elements */}
         <div className="absolute inset-0 pointer-events-none overflow-hidden">
             <div className="absolute top-10 right-20 w-24 h-24 bg-yellow-300 rounded-full blur-xl opacity-60 animate-pulse"></div>
-            <div className="absolute top-16 -left-20 text-white/60 text-9xl select-none animate-drift-slow opacity-80" style={{filter: 'blur(2px)'}}>☁️</div>
-            <div className="absolute top-32 -left-40 text-white/40 text-8xl select-none animate-drift-medium opacity-60" style={{animationDelay: '5s'}}>☁️</div>
-            <div className="absolute top-10 -left-10 text-white/50 text-[10rem] select-none animate-drift-fast opacity-40" style={{animationDelay: '15s'}}>☁️</div>
-            <div className="absolute top-24 left-1/4 text-slate-600/30 text-2xl animate-bounce-slow">🕊️</div>
+            <div className="absolute top-16 -left-20 text-white/60 text-9xl select-none animate-drift-slow opacity-80" style={{filter: 'blur(2px)'}}><Emoji symbol="☁️"/></div>
+            <div className="absolute top-32 -left-40 text-white/40 text-8xl select-none animate-drift-medium opacity-60" style={{animationDelay: '5s'}}><Emoji symbol="☁️"/></div>
+            <div className="absolute top-10 -left-10 text-white/50 text-[10rem] select-none animate-drift-fast opacity-40" style={{animationDelay: '15s'}}><Emoji symbol="☁️"/></div>
+            <div className="absolute top-24 left-1/4 text-slate-600/30 text-2xl animate-bounce-slow"><Emoji symbol="🕊️"/></div>
         </div>
 
         {/* Toast Overlay */}
@@ -576,7 +574,7 @@ export const GameMountain: React.FC = () => {
                                             <>
                                                 <div className="text-sm font-bold text-gray-700 mb-3 flex justify-between items-center border-b border-gray-200 pb-2">
                                                     <span className="flex items-center gap-2">
-                                                        <span className="text-xl">{session.teams.find(t => t.id === selectedTeamId)?.avatar}</span>
+                                                        <span className="text-xl"><Emoji symbol={session.teams.find(t => t.id === selectedTeamId)?.avatar || '🚩'} /></span>
                                                         配置 [{session.teams.find(t => t.id === selectedTeamId)?.name}] 成员
                                                     </span>
                                                     <span className="text-xs text-gray-400 bg-white px-2 py-1 rounded border">点击添加/移除</span>
@@ -599,7 +597,7 @@ export const GameMountain: React.FC = () => {
                                                             >
                                                                 <span className="truncate font-medium">{s.seatNo ? s.seatNo+'.':''}{s.name}</span>
                                                                 {isInCurrent && <CheckSquare size={14} className="text-blue-200"/>}
-                                                                {isInOther && <span className="text-[10px]">{otherTeam?.avatar}</span>}
+                                                                {isInOther && <span className="text-[10px]"><Emoji symbol={otherTeam?.avatar || '🚩'} size={12}/></span>}
                                                             </div>
                                                         );
                                                     })}
@@ -632,4 +630,3 @@ export const GameMountain: React.FC = () => {
   }
   return GameContent;
 };
-    

pages/GameRandom.tsx

@@ -4,6 +4,7 @@ import { createPortal } from 'react-dom';
 import { api } from '../services/api';
 import { Student, GameSession, GameTeam, AchievementConfig } from '../types';
 import { Loader2, User, Users, Play, Pause, Gift, CheckCircle, XCircle, Award, Volume2, Settings, Maximize, Minimize, UserX, RotateCcw, Repeat } from 'lucide-react';
+import { Emoji } from '../components/Emoji';
 
 export const GameRandom: React.FC = () => {
   const [loading, setLoading] = useState(true);
@@ -323,7 +324,7 @@ export const GameRandom: React.FC = () => {
                                     <div className={`rounded-full bg-blue-100 flex items-center justify-center text-blue-600 ${isFullscreen ? 'w-24 h-24 text-4xl' : 'w-12 h-12 text-lg'}`}>
                                         {name[0]}
                                     </div>
-                                ) : avatar}
+                                ) : <Emoji symbol={avatar} />}
                             </div>
                             <div className={`font-bold text-gray-800 text-center truncate w-full px-2 ${isFullscreen ? 'text-2xl' : 'text-base'}`}>{name}</div>
                             <div className="text-xs text-gray-400">{subText}</div>
@@ -386,7 +387,7 @@ export const GameRandom: React.FC = () => {
             <div className="fixed inset-0 bg-black/60 z-[110] flex items-center justify-center p-4 backdrop-blur-sm animate-in fade-in">
                 <div className="bg-white rounded-3xl p-8 w-full max-w-md text-center shadow-2xl relative animate-in zoom-in-95">
                     <div className="absolute -top-12 left-1/2 -translate-x-1/2 w-24 h-24 bg-yellow-400 rounded-full flex items-center justify-center border-4 border-white shadow-lg">
-                        <span className="text-5xl">✨</span>
+                        <span className="text-5xl"><Emoji symbol="✨"/></span>
                     </div>
                     
                     <h2 className="mt-10 text-gray-500 text-sm font-bold uppercase tracking-widest">选中对象</h2>

pages/GameZen.tsx

@@ -4,6 +4,7 @@ import { createPortal } from 'react-dom';
 import { api } from '../services/api';
 import { AchievementConfig, Student } from '../types';
 import { Play, Pause, Settings, Maximize, Minimize, Gift, Trophy, Package, Moon, UserX, CheckCircle, Volume2 } from 'lucide-react';
+import { Emoji } from '../components/Emoji';
 
 export const GameZen: React.FC = () => {
   const currentUser = api.auth.getCurrentUser();
@@ -366,10 +367,10 @@ export const GameZen: React.FC = () => {
 
             {/* Monk/Visual */}
             <div 
-                className={`text-[150px] transition-all duration-1000 ease-in-out relative z-20 drop-shadow-2xl ${currentState === 'CHAOS' ? 'animate-bounce' : currentState === 'RESTLESS' ? 'animate-pulse' : ''}`}
+                className={`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})` }}
             >
-                {currentVisual.monk}
+                <Emoji symbol={currentVisual.monk} size={150} />
             </div>
             
             {/* Levitation Base (Shadow) */}
@@ -566,8 +567,8 @@ export const GameZen: React.FC = () => {
         {gameState === 'FINISHED' && !isConfigOpen && (
             <div className="absolute inset-0 bg-black/90 z-[110] flex items-center justify-center p-4 backdrop-blur-lg animate-in zoom-in">
                 <div className="text-center w-full max-w-lg">
-                    <div className="text-9xl mb-6 animate-bounce drop-shadow-[0_0_25px_rgba(255,255,255,0.5)]">
-                        {calculatedScore >= passRate ? '🌸' : '🍂'}
+                    <div className="mb-6 animate-bounce drop-shadow-[0_0_25px_rgba(255,255,255,0.5)]">
+                        <Emoji symbol={calculatedScore >= passRate ? '🌸' : '🍂'} size={100} />
                     </div>
                     <h2 className={`text-5xl font-black mb-2 tracking-tight ${calculatedScore >= passRate ? 'text-transparent bg-clip-text bg-gradient-to-b from-green-300 to-emerald-600' : 'text-gray-400'}`}>
                         {calculatedScore >= passRate ? '修行圆满' : '心浮气躁'}