Upload 29 files

index.css

@@ -12,3 +12,30 @@ body {
   -moz-osx-font-smoothing: grayscale;
   background-color: #f9fafb;
 }
+
+/* Custom Scrollbar */
+.custom-scrollbar::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background-color: rgba(156, 163, 175, 0.5);
+  border-radius: 3px;
+}
+
+/* Card Flip Animation */
+.perspective-1000 {
+  perspective: 1000px;
+}
+.transform-style-3d {
+  transform-style: preserve-3d;
+}
+.backface-hidden {
+  backface-visibility: hidden;
+}
+.rotate-y-180 {
+  transform: rotateY(180deg);
+}

pages/Games.tsx

@@ -1,19 +1,40 @@
 
 import React, { useState, useEffect } from 'react';
 import { api } from '../services/api';
-import { GameSession, GameTeam, Student, StudentReward, LuckyDrawConfig } from '../types';
-import { Trophy, Gift, Lock, Settings, Plus, Minus, Users, RefreshCw, Star, ArrowRight, Loader2 } from 'lucide-react';
+import { GameSession, GameTeam, Student, StudentReward, LuckyDrawConfig, LuckyPrize } from '../types';
+import { Trophy, Gift, Lock, Settings, Plus, Minus, Users, RefreshCw, Star, ArrowRight, Loader2, Save, Trash2, X, AlertCircle } from 'lucide-react';
 
-// --- Mountain Game Sub-Components ---
+// --- Components ---
+
+const FlipCard = ({ prize, onFlip, isRevealed }: { prize: string, onFlip: () => void, isRevealed: boolean }) => {
+  return (
+    <div className="relative w-full aspect-[3/4] cursor-pointer perspective-1000 group" onClick={!isRevealed ? onFlip : undefined}>
+      <div className={`relative w-full h-full text-center transition-transform duration-700 transform-style-3d shadow-xl rounded-xl ${isRevealed ? 'rotate-y-180' : 'group-hover:-translate-y-2'}`}>
+        {/* Front (Red Packet) */}
+        <div className="absolute w-full h-full backface-hidden bg-gradient-to-br from-red-500 to-red-700 rounded-xl flex flex-col items-center justify-center border-4 border-yellow-300 shadow-inner">
+           <div className="w-12 h-12 bg-yellow-200 rounded-full flex items-center justify-center mb-2 shadow-md border-2 border-yellow-400">
+              <span className="text-xl">🧧</span>
+           </div>
+           <span className="text-yellow-100 font-bold text-lg tracking-widest">開</span>
+        </div>
+        {/* Back (Prize) */}
+        <div className="absolute w-full h-full backface-hidden bg-white rounded-xl flex flex-col items-center justify-center border-2 border-red-200 rotate-y-180 shadow-inner p-2">
+           <span className="text-3xl mb-2">🎁</span>
+           <span className="text-red-600 font-bold text-sm break-words leading-tight">{prize}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
 
 const MountainStage = ({ team, index, rewardsConfig, maxSteps }: { team: GameTeam, index: number, rewardsConfig: any[], maxSteps: number }) => {
   const percentage = Math.min(Math.max(team.score, 0), maxSteps) / maxSteps;
   const bottomPos = 5 + (percentage * 85);
   
   return (
-    <div className="relative flex flex-col items-center justify-end h-[400px] w-48 mx-4 flex-shrink-0 select-none group">
-      <div className="absolute -top-12 text-center w-[140%] z-20">
-        <h3 className="text-lg font-black text-slate-800 bg-white/90 px-3 py-1 rounded-xl shadow-sm border border-white/60">
+    <div className="relative flex flex-col items-center justify-end h-[400px] w-32 md:w-48 mx-2 md:mx-4 flex-shrink-0 select-none group">
+      <div className="absolute -top-12 text-center w-[140%] z-20 transition-transform hover:-translate-y-1">
+        <h3 className="text-base md:text-lg font-black text-slate-800 bg-white/90 px-3 py-1 rounded-xl shadow-sm border border-white/60 truncate max-w-full">
           {team.name}
         </h3>
       </div>
@@ -35,7 +56,7 @@ const MountainStage = ({ team, index, rewardsConfig, maxSteps }: { team: GameTea
                <div key={i} className="relative w-full h-full flex items-center justify-center">
                   <div className="w-full h-1 bg-amber-700/50 rounded-sm"></div>
                   {reward && (
-                     <div className={`absolute left-full ml-2 px-2 py-1 rounded text-[10px] font-bold whitespace-nowrap border ${isUnlocked ? 'bg-yellow-100 border-yellow-300 text-yellow-700' : 'bg-gray-100 border-gray-200 text-gray-400'}`}>
+                     <div className={`absolute left-full ml-2 px-2 py-1 rounded text-[10px] font-bold whitespace-nowrap border z-20 ${isUnlocked ? 'bg-yellow-100 border-yellow-300 text-yellow-700' : 'bg-gray-100 border-gray-200 text-gray-400'}`}>
                         {reward.rewardType === 'DRAW_COUNT' ? '🎲' : '🎁'} {reward.rewardName}
                      </div>
                   )}
@@ -46,8 +67,8 @@ const MountainStage = ({ team, index, rewardsConfig, maxSteps }: { team: GameTea
 
       {/* Climber */}
       <div className="absolute z-30 transition-all duration-700 ease-out flex flex-col items-center" style={{ bottom: `${bottomPos}%` }}>
-         <div className="w-12 h-12 bg-white rounded-full border-4 shadow-lg flex items-center justify-center transform hover:scale-110 transition-transform" style={{ borderColor: team.color }}>
-            <span className="text-2xl">{team.avatar || '🚩'}</span>
+         <div className="w-10 h-10 md:w-12 md:h-12 bg-white rounded-full border-4 shadow-lg flex items-center justify-center transform hover:scale-110 transition-transform" style={{ borderColor: team.color }}>
+            <span className="text-xl md:text-2xl">{team.avatar || '🚩'}</span>
             <div className="absolute -top-2 -right-2 bg-red-500 text-white text-[10px] font-bold w-5 h-5 rounded-full flex items-center justify-center border border-white">
                {team.score}
             </div>
@@ -57,38 +78,6 @@ const MountainStage = ({ team, index, rewardsConfig, maxSteps }: { team: GameTea
   );
 };
 
-// --- Lucky Wheel Sub-Components ---
-
-const LuckyGrid = ({ prizes, onDraw, remaining, isSpinning }: { prizes: string[], onDraw: () => void, remaining: number, isSpinning: boolean }) => {
-   return (
-      <div className="relative w-full max-w-md mx-auto aspect-square bg-red-600 rounded-3xl p-4 shadow-2xl border-4 border-yellow-400">
-         <div className="grid grid-cols-3 gap-2 h-full">
-            {/* 8 items around, center is button */}
-            {[0, 1, 2, 7, -1, 3, 6, 5, 4].map((idx, pos) => {
-               if (idx === -1) {
-                  return (
-                     <button 
-                        key="btn" 
-                        onClick={onDraw} 
-                        disabled={isSpinning || remaining <= 0}
-                        className="bg-yellow-400 hover:bg-yellow-300 active:scale-95 disabled:opacity-50 disabled:scale-100 transition-all rounded-xl flex flex-col items-center justify-center shadow-inner border-b-4 border-yellow-600"
-                     >
-                        <span className="text-2xl font-black text-red-700">抽奖</span>
-                        <span className="text-xs font-bold text-red-800">剩 {remaining} 次</span>
-                     </button>
-                  );
-               }
-               return (
-                  <div key={pos} className="bg-red-50 rounded-xl flex items-center justify-center text-center p-1 shadow-sm border border-red-100">
-                     <span className="text-sm font-bold text-red-800 break-words w-full">{prizes[idx] || '谢谢参与'}</span>
-                  </div>
-               );
-            })}
-         </div>
-      </div>
-   );
-};
-
 // --- Main Page ---
 
 export const Games: React.FC = () => {
@@ -99,9 +88,15 @@ export const Games: React.FC = () => {
   const [studentInfo, setStudentInfo] = useState<Student | null>(null);
   const [loading, setLoading] = useState(true);
 
-  // Teacher Controls
-  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+  // Teacher Controls State
+  const [isMtSettingsOpen, setIsMtSettingsOpen] = useState(false);
+  const [isLuckySettingsOpen, setIsLuckySettingsOpen] = useState(false);
   const [students, setStudents] = useState<Student[]>([]);
+  const [selectedTeamId, setSelectedTeamId] = useState<string | null>(null); // For member management
+
+  // Lucky Draw State
+  const [drawResult, setDrawResult] = useState<{prize: string} | null>(null);
+  const [isFlipping, setIsFlipping] = useState(false);
 
   const currentUser = api.auth.getCurrentUser();
   const isTeacher = currentUser?.role === 'TEACHER';
@@ -115,7 +110,6 @@ export const Games: React.FC = () => {
     try {
       if (!currentUser) return;
       
-      // Load context based on user
       let targetClass = '';
       if (isTeacher && currentUser.homeroomClass) targetClass = currentUser.homeroomClass;
       else if (currentUser.role === 'STUDENT') {
@@ -132,7 +126,7 @@ export const Games: React.FC = () => {
          const sess = await api.games.getMountainSession(targetClass);
          if (sess) setSession(sess);
          else if (isTeacher && currentUser?.schoolId) {
-            // Init default session for teacher
+            // Init default session
             const newSess: GameSession = {
                schoolId: currentUser.schoolId,
                className: targetClass,
@@ -140,11 +134,11 @@ export const Games: React.FC = () => {
                isEnabled: true,
                maxSteps: 10,
                teams: [
-                  { id: '1', name: '探索队', score: 0, avatar: '🚀', color: '#ef4444', members: [] },
-                  { id: '2', name: '雄鹰队', score: 0, avatar: '🦅', color: '#3b82f6', members: [] }
+                  { id: '1', name: '红队', score: 0, avatar: '🚀', color: '#ef4444', members: [] },
+                  { id: '2', name: '蓝队', score: 0, avatar: '🦅', color: '#3b82f6', members: [] }
                ],
                rewardsConfig: [
-                  { scoreThreshold: 5, rewardType: 'DRAW_COUNT', rewardName: '抽奖券', rewardValue: 1 },
+                  { scoreThreshold: 5, rewardType: 'DRAW_COUNT', rewardName: '抽奖券x1', rewardValue: 1 },
                   { scoreThreshold: 10, rewardType: 'ITEM', rewardName: '神秘大奖', rewardValue: 1 }
                ]
             };
@@ -156,7 +150,6 @@ export const Games: React.FC = () => {
       const lCfg = await api.games.getLuckyConfig();
       setLuckyConfig(lCfg);
 
-      // Load Rewards if Student
       if (currentUser.role === 'STUDENT' && studentInfo && studentInfo._id) {
          const rews = await api.rewards.getMyRewards(studentInfo._id);
          setMyRewards(rews);
@@ -170,17 +163,17 @@ export const Games: React.FC = () => {
     finally { setLoading(false); }
   };
 
+  // --- Mountain Logic ---
+
   const handleScoreChange = async (teamId: string, delta: number) => {
     if (!session || !isTeacher) return;
     const newTeams = session.teams.map(t => {
        if (t.id !== teamId) return t;
        const newScore = Math.max(0, Math.min(session.maxSteps, t.score + delta));
        
-       // Check for Reward Trigger (Scaling up)
        if (delta > 0) {
           const reward = session.rewardsConfig.find(r => r.scoreThreshold === newScore);
           if (reward) {
-             // Distribute Reward to all members
              t.members.forEach(stuId => {
                 const stu = students.find(s => (s._id || s.id) == stuId);
                 if (stu) {
@@ -206,81 +199,89 @@ export const Games: React.FC = () => {
     await api.games.saveMountainSession(newSession);
   };
 
-  // Lucky Draw Logic
+  const saveMountainSettings = async () => {
+     if (session) await api.games.saveMountainSession(session);
+     setIsMtSettingsOpen(false);
+  };
+
+  const toggleTeamMember = (studentId: string, teamId: string) => {
+     if (!session) return;
+     const newTeams = session.teams.map(t => {
+        const members = new Set(t.members);
+        if (t.id === teamId) {
+           // Add to target team
+           members.add(studentId);
+        } else {
+           // Remove from other teams (exclusive membership)
+           members.delete(studentId);
+        }
+        return { ...t, members: Array.from(members) };
+     });
+     setSession({ ...session, teams: newTeams });
+  };
+
+  // --- Lucky Draw Logic ---
+
   const handleDraw = async () => {
-     if (!studentInfo || !luckyConfig) return;
+     if (!studentInfo || !luckyConfig || isFlipping) return;
      if ((studentInfo.drawAttempts || 0) <= 0) return alert('抽奖次数不足！请通过“群岳争锋”游戏获取。');
      
-     // 1. Consume Attempt
-     await api.rewards.consumeDraw(studentInfo._id!);
-     setStudentInfo({ ...studentInfo, drawAttempts: (studentInfo.drawAttempts || 0) - 1 });
-     
-     // 2. Random Logic
-     const rand = Math.random();
-     const prizeIndex = Math.floor(rand * luckyConfig.prizes.length);
-     const prize = luckyConfig.prizes[prizeIndex] || luckyConfig.defaultPrize;
-     
-     // 3. Record Prize
-     await api.rewards.addReward({
-        schoolId: luckyConfig.schoolId,
-        studentId: studentInfo._id!,
-        studentName: studentInfo.name,
-        rewardType: 'ITEM',
-        name: prize,
-        status: 'PENDING',
-        source: '幸运大抽奖'
-     });
+     setIsFlipping(true);
+     try {
+        const res = await api.games.drawLucky(studentInfo._id!);
+        setDrawResult(res);
+        setStudentInfo({ ...studentInfo, drawAttempts: (studentInfo.drawAttempts || 0) - 1 });
+        setTimeout(() => {
+           alert(`🎁 恭喜！你抽中了：${res.prize}`);
+           setIsFlipping(false);
+           setDrawResult(null);
+           loadData(); // Reload rewards list
+        }, 1500);
+     } catch (e) {
+        alert('抽奖失败，请稍后重试');
+        setIsFlipping(false);
+     }
+  };
 
-     alert(`🎁 恭喜你抽中了：${prize}！请联系老师兑换。`);
-     loadData(); // Reload rewards
+  const saveLuckySettings = async () => {
+     if (luckyConfig) await api.games.saveLuckyConfig(luckyConfig);
+     setIsLuckySettingsOpen(false);
   };
 
   if (loading) return <div className="p-10 text-center"><Loader2 className="animate-spin inline"/></div>;
 
-  if (!isTeacher && !session?.isEnabled) {
-     return <div className="p-10 text-center text-gray-400">老师尚未开启互动教学功能</div>;
-  }
+  if (!isTeacher && !session?.isEnabled) return <div className="p-10 text-center text-gray-400">老师尚未开启互动教学功能</div>;
 
   return (
     <div className="space-y-6">
       {/* Game Switcher */}
       <div className="flex justify-center space-x-4 mb-6">
-         <button 
-           onClick={() => setActiveGame('mountain')} 
-           className={`px-6 py-3 rounded-2xl font-bold flex items-center transition-all ${activeGame === 'mountain' ? 'bg-gradient-to-r from-green-500 to-emerald-600 text-white shadow-lg scale-105' : 'bg-white text-gray-500 hover:bg-gray-50'}`}
-         >
+         <button onClick={() => setActiveGame('mountain')} className={`px-6 py-3 rounded-2xl font-bold flex items-center transition-all ${activeGame === 'mountain' ? 'bg-gradient-to-r from-green-500 to-emerald-600 text-white shadow-lg scale-105' : 'bg-white text-gray-500 hover:bg-gray-50'}`}>
             <Trophy className="mr-2"/> 群岳争锋
          </button>
-         <button 
-           onClick={() => setActiveGame('lucky')} 
-           className={`px-6 py-3 rounded-2xl font-bold flex items-center transition-all ${activeGame === 'lucky' ? 'bg-gradient-to-r from-red-500 to-pink-600 text-white shadow-lg scale-105' : 'bg-white text-gray-500 hover:bg-gray-50'}`}
-         >
+         <button onClick={() => setActiveGame('lucky')} className={`px-6 py-3 rounded-2xl font-bold flex items-center transition-all ${activeGame === 'lucky' ? 'bg-gradient-to-r from-red-500 to-pink-600 text-white shadow-lg scale-105' : 'bg-white text-gray-500 hover:bg-gray-50'}`}>
             <Gift className="mr-2"/> 幸运红包
          </button>
       </div>
 
       {/* --- MOUNTAIN GAME --- */}
       {activeGame === 'mountain' && session && (
-         <div className="animate-in fade-in">
+         <div className="animate-in fade-in relative">
             {isTeacher && (
                <div className="flex justify-end mb-4">
-                  <button onClick={() => setIsSettingsOpen(true)} className="flex items-center text-sm text-gray-600 bg-white px-3 py-1.5 rounded-lg border hover:bg-gray-50"><Settings size={16} className="mr-1"/> 游戏设置</button>
+                  <button onClick={() => setIsMtSettingsOpen(true)} className="flex items-center text-sm font-bold text-blue-600 bg-blue-50 px-4 py-2 rounded-lg border border-blue-200 hover:bg-blue-100 shadow-sm z-10">
+                     <Settings size={16} className="mr-2"/> 游戏设置 & 成员管理
+                  </button>
                </div>
             )}
             
             <div className="bg-gradient-to-b from-sky-200 to-white rounded-3xl p-8 overflow-x-auto min-h-[500px] border border-sky-100 shadow-inner relative">
-               <div className="flex items-end min-w-max mx-auto justify-center gap-8 pb-10">
+               <div className="flex items-end min-w-max mx-auto justify-center gap-4 pb-10">
                   {session.teams.map((team, idx) => (
                      <div key={team.id} className="relative group">
-                        <MountainStage 
-                           team={team} 
-                           index={idx} 
-                           rewardsConfig={session.rewardsConfig} 
-                           maxSteps={session.maxSteps} 
-                        />
-                        {/* Teacher Controls */}
+                        <MountainStage team={team} index={idx} rewardsConfig={session.rewardsConfig} maxSteps={session.maxSteps} />
                         {isTeacher && (
-                           <div className="absolute -bottom-12 left-1/2 -translate-x-1/2 flex items-center bg-white rounded-full shadow-lg p-1 border border-gray-100 opacity-0 group-hover:opacity-100 transition-opacity">
+                           <div className="absolute -bottom-12 left-1/2 -translate-x-1/2 flex items-center bg-white rounded-full shadow-lg p-1 border border-gray-100 opacity-0 group-hover:opacity-100 transition-opacity z-20">
                               <button onClick={() => handleScoreChange(team.id, -1)} className="p-2 hover:bg-gray-100 rounded-full text-gray-500"><Minus size={16}/></button>
                               <span className="w-8 text-center font-bold text-gray-700">{team.score}</span>
                               <button onClick={() => handleScoreChange(team.id, 1)} className="p-2 hover:bg-blue-50 rounded-full text-blue-600"><Plus size={16}/></button>
@@ -295,37 +296,230 @@ export const Games: React.FC = () => {
 
       {/* --- LUCKY DRAW GAME --- */}
       {activeGame === 'lucky' && luckyConfig && (
-         <div className="animate-in fade-in grid grid-cols-1 md:grid-cols-2 gap-8">
-            <div className="flex flex-col items-center justify-center">
-               <div className="bg-white p-6 rounded-2xl shadow-sm border w-full max-w-md mb-6 text-center">
-                  <h3 className="text-xl font-bold text-gray-800 mb-2">我的抽奖券</h3>
-                  <div className="text-4xl font-black text-amber-500 mb-2">{studentInfo?.drawAttempts || 0}</div>
-                  <p className="text-xs text-gray-400">每日上限 {luckyConfig.dailyLimit} 次</p>
+         <div className="animate-in fade-in">
+            {isTeacher && (
+               <div className="flex justify-end mb-4">
+                  <button onClick={() => setIsLuckySettingsOpen(true)} className="flex items-center text-sm font-bold text-blue-600 bg-blue-50 px-4 py-2 rounded-lg border border-blue-200 hover:bg-blue-100 shadow-sm">
+                     <Settings size={16} className="mr-2"/> 奖池配置
+                  </button>
+               </div>
+            )}
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+               <div className="flex flex-col items-center">
+                  <div className="bg-white p-4 rounded-2xl shadow-sm border w-full max-w-md mb-6 text-center">
+                     <h3 className="text-xl font-bold text-gray-800 mb-2">我的抽奖券</h3>
+                     <div className="text-4xl font-black text-amber-500 mb-2">{studentInfo?.drawAttempts || 0}</div>
+                     <p className="text-xs text-gray-400">每日上限 {luckyConfig.dailyLimit} 次 | 每次消耗 1 券</p>
+                  </div>
+                  
+                  {/* Grid Layout for Cards */}
+                  <div className="grid grid-cols-3 gap-4 w-full max-w-md">
+                     {Array.from({ length: 9 }).map((_, i) => (
+                        <FlipCard 
+                           key={i}
+                           prize={drawResult ? drawResult.prize : '???'} 
+                           onFlip={handleDraw} 
+                           isRevealed={!!drawResult}
+                        />
+                     ))}
+                  </div>
+               </div>
+               
+               {/* Rewards List */}
+               <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 h-fit">
+                  <h3 className="font-bold text-gray-800 mb-4 flex items-center"><Star className="text-yellow-400 mr-2"/> 我的战利品</h3>
+                  <div className="space-y-3 max-h-[500px] overflow-y-auto custom-scrollbar pr-2">
+                     {myRewards.length > 0 ? myRewards.map(r => (
+                        <div key={r._id} className="flex justify-between items-center p-3 bg-gray-50 rounded-lg border border-gray-100">
+                           <div>
+                              <div className="font-bold text-gray-800 text-sm">{r.name}</div>
+                              <div className="text-xs text-gray-400">{new Date(r.createTime).toLocaleDateString()} · {r.source}</div>
+                           </div>
+                           {r.status === 'REDEEMED' 
+                              ? <span className="text-xs bg-gray-200 text-gray-500 px-2 py-1 rounded">已兑换</span>
+                              : <span className="text-xs bg-green-100 text-green-700 px-2 py-1 rounded cursor-pointer border border-green-200">未兑换</span>
+                           }
+                        </div>
+                     )) : <div className="text-center text-gray-400 py-10">暂无奖品，去登山吧！</div>}
+                  </div>
                </div>
-               <LuckyGrid 
-                  prizes={luckyConfig.prizes} 
-                  onDraw={handleDraw} 
-                  remaining={studentInfo?.drawAttempts || 0}
-                  isSpinning={false} 
-               />
             </div>
-            
-            {/* Rewards List */}
-            <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
-               <h3 className="font-bold text-gray-800 mb-4 flex items-center"><Star className="text-yellow-400 mr-2"/> 我的战利品</h3>
-               <div className="space-y-3 max-h-[500px] overflow-y-auto">
-                  {myRewards.length > 0 ? myRewards.map(r => (
-                     <div key={r._id} className="flex justify-between items-center p-3 bg-gray-50 rounded-lg border border-gray-100">
-                        <div>
-                           <div className="font-bold text-gray-800">{r.name}</div>
-                           <div className="text-xs text-gray-400">{r.source}</div>
+         </div>
+      )}
+
+      {/* --- MOUNTAIN SETTINGS MODAL --- */}
+      {isMtSettingsOpen && session && (
+         <div className="fixed inset-0 bg-black/60 z-[100] flex items-center justify-center p-4 backdrop-blur-sm">
+            <div className="bg-white rounded-2xl w-full max-w-4xl h-[85vh] flex flex-col shadow-2xl">
+               <div className="p-6 border-b border-gray-100 flex justify-between items-center">
+                  <h3 className="text-xl font-bold text-gray-800">群岳争锋 - 游戏设置</h3>
+                  <button onClick={() => setIsMtSettingsOpen(false)}><X size={24} className="text-gray-400 hover:text-gray-600"/></button>
+               </div>
+               
+               <div className="flex-1 overflow-y-auto p-6 space-y-8">
+                  {/* Basic Settings */}
+                  <section>
+                     <h4 className="font-bold text-gray-700 mb-3 flex items-center"><Settings size={16} className="mr-2"/> 基础参数</h4>
+                     <div className="flex gap-4 items-center bg-gray-50 p-4 rounded-xl border border-gray-200">
+                        <label className="text-sm font-medium">山峰总高度 (步数):</label>
+                        <input type="number" className="border rounded px-2 py-1 w-20 text-center" value={session.maxSteps} onChange={e => setSession({...session, maxSteps: Number(e.target.value)})} min={5} max={50}/>
+                        <div className="w-px h-6 bg-gray-300 mx-2"></div>
+                        <label className="flex items-center text-sm cursor-pointer">
+                           <input type="checkbox" checked={session.isEnabled} onChange={e => setSession({...session, isEnabled: e.target.checked})} className="mr-2"/> 启用游戏
+                        </label>
+                     </div>
+                  </section>
+
+                  {/* Team & Member Management */}
+                  <section>
+                     <div className="flex justify-between items-center mb-3">
+                        <h4 className="font-bold text-gray-700 flex items-center"><Users size={16} className="mr-2"/> 队伍与成员管理</h4>
+                        <button onClick={() => {
+                           const newTeam: GameTeam = { id: Date.now().toString(), name: '新队伍', color: '#6366f1', avatar: '🚩', score: 0, members: [] };
+                           setSession({ ...session, teams: [...session.teams, newTeam] });
+                        }} className="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded hover:bg-blue-200">+ 新建队伍</button>
+                     </div>
+                     
+                     <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                        {/* Left: Team List */}
+                        <div className="space-y-2 max-h-64 overflow-y-auto pr-2">
+                           {session.teams.map(t => (
+                              <div key={t.id} 
+                                 className={`p-3 rounded-lg border cursor-pointer transition-all ${selectedTeamId === t.id ? 'border-blue-500 bg-blue-50 shadow-sm' : 'border-gray-200 hover:bg-gray-50'}`}
+                                 onClick={() => setSelectedTeamId(t.id)}
+                              >
+                                 <div className="flex justify-between items-center mb-2">
+                                    <input value={t.name} onChange={e => {
+                                       const updated = session.teams.map(tm => tm.id === t.id ? {...tm, name: e.target.value} : tm);
+                                       setSession({...session, teams: updated});
+                                    }} className="bg-transparent font-bold text-sm w-24 outline-none border-b border-transparent focus:border-blue-300" />
+                                    <button onClick={(e) => {
+                                       e.stopPropagation();
+                                       if(confirm('删除队伍?')) setSession({...session, teams: session.teams.filter(tm => tm.id !== t.id)});
+                                    }} className="text-gray-300 hover:text-red-500"><Trash2 size={14}/></button>
+                                 </div>
+                                 <div className="flex gap-2">
+                                    <input type="color" value={t.color} onChange={e => {
+                                       const updated = session.teams.map(tm => tm.id === t.id ? {...tm, color: e.target.value} : tm);
+                                       setSession({...session, teams: updated});
+                                    }} className="w-6 h-6 p-0 border-0 rounded overflow-hidden" />
+                                    <input value={t.avatar} onChange={e => {
+                                       const updated = session.teams.map(tm => tm.id === t.id ? {...tm, avatar: e.target.value} : tm);
+                                       setSession({...session, teams: updated});
+                                    }} className="w-8 border rounded text-center text-sm" />
+                                    <span className="text-xs text-gray-400 self-center ml-auto">{t.members.length} 人</span>
+                                 </div>
+                              </div>
+                           ))}
+                        </div>
+
+                        {/* Right: Member Shuttle */}
+                        <div className="col-span-2 bg-gray-50 rounded-xl border border-gray-200 p-4 flex flex-col h-80">
+                           {selectedTeamId ? (
+                              <>
+                                 <div className="text-sm font-bold text-gray-700 mb-2 border-b pb-2">
+                                    配置 [{session.teams.find(t => t.id === selectedTeamId)?.name}] 的成员
+                                 </div>
+                                 <div className="flex-1 overflow-y-auto grid grid-cols-3 gap-2 content-start">
+                                    {students.map(s => {
+                                       const currentTeamId = session.teams.find(t => t.members.includes(s._id || String(s.id)))?.id;
+                                       const isInCurrent = currentTeamId === selectedTeamId;
+                                       const isInOther = currentTeamId && !isInCurrent;
+                                       
+                                       return (
+                                          <div key={s._id} 
+                                             onClick={() => toggleTeamMember(s._id || String(s.id), selectedTeamId)}
+                                             className={`text-xs p-2 rounded border cursor-pointer flex items-center justify-between ${
+                                                isInCurrent ? 'bg-green-100 border-green-300 text-green-800' : 
+                                                isInOther ? 'bg-gray-100 border-gray-200 text-gray-400 opacity-60' : 'bg-white border-gray-300 hover:border-blue-400'
+                                             }`}
+                                          >
+                                             <span className="truncate">{s.name}</span>
+                                             {isInCurrent && <CheckIcon />}
+                                          </div>
+                                       );
+                                    })}
+                                 </div>
+                              </>
+                           ) : (
+                              <div className="flex items-center justify-center h-full text-gray-400">请先在左侧选择一个队伍</div>
+                           )}
                         </div>
-                        {r.status === 'REDEEMED' 
-                           ? <span className="text-xs bg-gray-200 text-gray-500 px-2 py-1 rounded">已兑换</span>
-                           : <span className="text-xs bg-green-100 text-green-700 px-2 py-1 rounded cursor-pointer">未兑换</span>
-                        }
                      </div>
-                  )) : <div className="text-center text-gray-400 py-10">暂无奖品，去登山吧！</div>}
+                  </section>
+               </div>
+
+               <div className="p-4 border-t border-gray-100 bg-gray-50 rounded-b-2xl flex justify-end gap-2">
+                  <button onClick={() => setIsMtSettingsOpen(false)} className="px-4 py-2 text-gray-600 hover:bg-gray-200 rounded-lg">取消</button>
+                  <button onClick={saveMountainSettings} className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-bold">保存设置</button>
+               </div>
+            </div>
+         </div>
+      )}
+
+      {/* --- LUCKY SETTINGS MODAL --- */}
+      {isLuckySettingsOpen && luckyConfig && (
+         <div className="fixed inset-0 bg-black/60 z-[100] flex items-center justify-center p-4 backdrop-blur-sm">
+            <div className="bg-white rounded-2xl w-full max-w-2xl h-[80vh] flex flex-col shadow-2xl">
+               <div className="p-6 border-b border-gray-100 flex justify-between items-center">
+                  <h3 className="text-xl font-bold text-gray-800">奖池配置</h3>
+                  <button onClick={() => setIsLuckySettingsOpen(false)}><X size={24} className="text-gray-400 hover:text-gray-600"/></button>
+               </div>
+               
+               <div className="flex-1 overflow-y-auto p-6">
+                  <div className="mb-6 flex gap-4 bg-yellow-50 p-4 rounded-xl border border-yellow-100">
+                     <div>
+                        <label className="text-xs font-bold text-yellow-700 uppercase block mb-1">每日抽奖上限</label>
+                        <input type="number" className="border rounded px-2 py-1 w-20 text-center" value={luckyConfig.dailyLimit} onChange={e => setLuckyConfig({...luckyConfig, dailyLimit: Number(e.target.value)})}/>
+                     </div>
+                     <div>
+                        <label className="text-xs font-bold text-yellow-700 uppercase block mb-1">默认安慰奖</label>
+                        <input className="border rounded px-2 py-1" value={luckyConfig.defaultPrize} onChange={e => setLuckyConfig({...luckyConfig, defaultPrize: e.target.value})}/>
+                     </div>
+                  </div>
+
+                  <table className="w-full text-sm text-left">
+                     <thead className="bg-gray-100 text-gray-500 uppercase text-xs">
+                        <tr>
+                           <th className="p-3 rounded-tl-lg">奖品名称</th>
+                           <th className="p-3">概率 (%)</th>
+                           <th className="p-3">库存</th>
+                           <th className="p-3 rounded-tr-lg text-right">操作</th>
+                        </tr>
+                     </thead>
+                     <tbody className="divide-y divide-gray-100">
+                        {luckyConfig.prizes.map((p, idx) => (
+                           <tr key={idx} className="group hover:bg-gray-50">
+                              <td className="p-2"><input value={p.name} onChange={e => {
+                                 const np = [...luckyConfig.prizes]; np[idx].name = e.target.value; setLuckyConfig({...luckyConfig, prizes: np});
+                              }} className="w-full border p-1 rounded"/></td>
+                              <td className="p-2"><input type="number" value={p.probability} onChange={e => {
+                                 const np = [...luckyConfig.prizes]; np[idx].probability = Number(e.target.value); setLuckyConfig({...luckyConfig, prizes: np});
+                              }} className="w-16 border p-1 rounded text-center"/></td>
+                              <td className="p-2"><input type="number" value={p.count} onChange={e => {
+                                 const np = [...luckyConfig.prizes]; np[idx].count = Number(e.target.value); setLuckyConfig({...luckyConfig, prizes: np});
+                              }} className="w-16 border p-1 rounded text-center"/></td>
+                              <td className="p-2 text-right">
+                                 <button onClick={() => {
+                                    const np = luckyConfig.prizes.filter((_, i) => i !== idx);
+                                    setLuckyConfig({...luckyConfig, prizes: np});
+                                 }} className="text-gray-300 hover:text-red-500"><Trash2 size={16}/></button>
+                              </td>
+                           </tr>
+                        ))}
+                     </tbody>
+                  </table>
+                  
+                  <button onClick={() => {
+                     const newPrize: LuckyPrize = { id: Date.now().toString(), name: '新奖品', probability: 10, count: 10 };
+                     setLuckyConfig({...luckyConfig, prizes: [...luckyConfig.prizes, newPrize]});
+                  }} className="mt-4 w-full py-2 border-2 border-dashed border-gray-300 rounded-lg text-gray-500 hover:border-blue-400 hover:text-blue-500 transition-colors">+ 添加奖品</button>
+               </div>
+
+               <div className="p-4 border-t border-gray-100 bg-gray-50 rounded-b-2xl flex justify-end gap-2">
+                  <button onClick={() => setIsLuckySettingsOpen(false)} className="px-4 py-2 text-gray-600 hover:bg-gray-200 rounded-lg">取消</button>
+                  <button onClick={saveLuckySettings} className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-bold">保存配置</button>
                </div>
             </div>
          </div>
@@ -333,3 +527,5 @@ export const Games: React.FC = () => {
     </div>
   );
 };
+
+const CheckIcon = () => <svg className="w-4 h-4 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg>;

server.js

@@ -229,11 +229,18 @@ const StudentRewardSchema = new mongoose.Schema({
 });
 const StudentRewardModel = mongoose.model('StudentReward', StudentRewardSchema);
 
+// Updated Lucky Draw Config Schema to support probability
 const LuckyDrawConfigSchema = new mongoose.Schema({
   schoolId: String,
-  prizes: [String],
+  prizes: [{
+     id: String,
+     name: String,
+     probability: Number, // 0-100
+     count: Number, // Inventory
+     icon: String
+  }],
   dailyLimit: { type: Number, default: 3 },
-  defaultPrize: { type: String, default: '谢谢参与' }
+  defaultPrize: { type: String, default: '再接再厉' }
 });
 const LuckyDrawConfigModel = mongoose.model('LuckyDrawConfig', LuckyDrawConfigSchema);
 
@@ -702,7 +709,7 @@ app.post('/api/games/mountain', async (req, res) => {
 app.get('/api/games/lucky-config', async (req, res) => {
    const filter = getQueryFilter(req);
    if (InMemoryDB.isFallback) return res.json(InMemoryDB.luckyConfig);
-   res.json(await LuckyDrawConfigModel.findOne(filter) || { prizes: ['免作业券', '文具套装'], dailyLimit: 3 });
+   res.json(await LuckyDrawConfigModel.findOne(filter) || { prizes: [], dailyLimit: 3 });
 });
 app.post('/api/games/lucky-config', async (req, res) => {
    const data = injectSchoolId(req, req.body);
@@ -711,6 +718,74 @@ app.post('/api/games/lucky-config', async (req, res) => {
    res.json({ success: true });
 });
 
+// Secure Lucky Draw Endpoint
+app.post('/api/games/lucky-draw', async (req, res) => {
+   const { studentId } = req.body;
+   const schoolId = req.headers['x-school-id'];
+   
+   try {
+      if (InMemoryDB.isFallback) return res.json({ prize: '模拟奖品' });
+
+      // 1. Get Student & Check Attempts
+      const student = await Student.findById(studentId);
+      if (!student || student.drawAttempts <= 0) return res.status(403).json({ error: '次数不足' });
+
+      // 2. Get Config
+      const config = await LuckyDrawConfigModel.findOne({ schoolId });
+      const prizes = config?.prizes || [];
+      const defaultPrize = config?.defaultPrize || '再接再厉';
+
+      // 3. Weighted Random Logic
+      let selectedPrize = defaultPrize;
+      
+      const availablePrizes = prizes.filter(p => (p.count === undefined || p.count > 0));
+      const totalWeight = availablePrizes.reduce((sum, p) => sum + (p.probability || 0), 0);
+      const random = Math.random() * Math.max(100, totalWeight); // Normalized to 100 or total
+
+      let currentWeight = 0;
+      let matchedPrize = null;
+
+      for (const p of availablePrizes) {
+         currentWeight += p.probability || 0;
+         if (random <= currentWeight) {
+            matchedPrize = p;
+            break;
+         }
+      }
+
+      if (matchedPrize) {
+         selectedPrize = matchedPrize.name;
+         // Deduct inventory
+         if (matchedPrize.count !== undefined && matchedPrize.count > 0) {
+            await LuckyDrawConfigModel.updateOne(
+               { schoolId, "prizes.id": matchedPrize.id },
+               { $inc: { "prizes.$.count": -1 } }
+            );
+         }
+      }
+
+      // 4. Consume Attempt
+      await Student.findByIdAndUpdate(studentId, { $inc: { drawAttempts: -1 } });
+
+      // 5. Record Reward
+      await StudentRewardModel.create({
+         schoolId,
+         studentId,
+         studentName: student.name,
+         rewardType: 'ITEM',
+         name: selectedPrize,
+         status: 'PENDING',
+         source: '幸运大抽奖'
+      });
+
+      res.json({ prize: selectedPrize });
+
+   } catch (e) {
+      console.error(e);
+      res.status(500).json({ error: e.message });
+   }
+});
+
 app.get('/api/rewards', async (req, res) => {
    const { studentId } = req.query;
    const filter = { ...getQueryFilter(req), studentId };

services/api.ts

@@ -1,5 +1,3 @@
-
-/// <reference types="vite/client" />
 import { User, ClassInfo, SystemConfig, Subject, School, Schedule, GameSession, StudentReward, LuckyDrawConfig } from '../types';
 
 const getBaseUrl = () => {
@@ -170,6 +168,7 @@ export const api = {
     saveMountainSession: (data: GameSession) => request('/games/mountain', { method: 'POST', body: JSON.stringify(data) }),
     getLuckyConfig: () => request('/games/lucky-config'),
     saveLuckyConfig: (data: LuckyDrawConfig) => request('/games/lucky-config', { method: 'POST', body: JSON.stringify(data) }),
+    drawLucky: (studentId: string) => request('/games/lucky-draw', { method: 'POST', body: JSON.stringify({ studentId }) }),
   },
   rewards: {
     getMyRewards: (studentId: string) => request(`/rewards?studentId=${studentId}`),
@@ -181,4 +180,4 @@ export const api = {
   batchDelete: (type: 'student' | 'score' | 'user', ids: string[]) => {
     return request('/batch-delete', { method: 'POST', body: JSON.stringify({ type, ids }) });
   }
-};
+};

types.ts

@@ -201,10 +201,18 @@ export interface StudentReward {
   createTime: string;
 }
 
+export interface LuckyPrize {
+  id: string;
+  name: string;
+  probability: number; // 0-100
+  count: number; // Inventory
+  icon?: string;
+}
+
 export interface LuckyDrawConfig {
   _id?: string;
   schoolId: string;
-  prizes: string[]; // List of prize names
+  prizes: LuckyPrize[]; 
   dailyLimit: number;
-  defaultPrize: string; // "Thank you"
+  defaultPrize: string; // "再接再厉"
 }