Update pages/GameLucky.tsx

pages/GameLucky.tsx

@@ -2,25 +2,25 @@
 import React, { useState, useEffect } from 'react';
 import { api } from '../services/api';
 import { LuckyDrawConfig, Student, LuckyPrize } from '../types';
-import { Gift, Settings, Loader2, Save, Trash2, X, UserCircle } from 'lucide-react';
+import { Gift, Settings, Loader2, Save, Trash2, X, UserCircle, RefreshCcw } from 'lucide-react';
 
 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;
   
   return (
-    <div className="relative w-full h-full cursor-pointer perspective-1000 group" onClick={() => !isRevealed && onFlip(index)}>
+    <div className="relative w-full aspect-[3/4] cursor-pointer perspective-1000 group" onClick={() => !isRevealed && onFlip(index)}>
       <div className={`relative w-full h-full text-center transition-transform duration-700 transform-style-3d shadow-md rounded-xl ${showBack ? 'rotate-y-180' : 'hover:scale-[1.02] active:scale-95'}`}>
         {/* 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-12 h-12 md:w-16 md:h-16 bg-yellow-100 rounded-full flex items-center justify-center mb-2 shadow-lg border-2 border-yellow-300">
-              <span className="text-2xl md:text-3xl">🧧</span>
+           <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>
            </div>
-           <span className="text-yellow-100 font-black text-xl md:text-2xl tracking-widest drop-shadow-md">開</span>
+           <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-4xl mb-2 animate-bounce">🎁</span>
-           <span className="text-red-600 font-bold text-sm md:text-lg break-words leading-tight text-center px-1">{prize}</span>
+           <span className="text-3xl mb-2 animate-bounce">🎁</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>
     </div>
@@ -48,10 +48,9 @@ export const GameLucky: React.FC = () => {
 
   useEffect(() => {
     loadData();
-  }, [proxyStudentId]); // Reload info if proxy changes
+  }, [proxyStudentId]); 
 
   const loadData = async () => {
-    // Only set loading on initial mount, not on proxy switch
     if(!luckyConfig) setLoading(true); 
     try {
       const config = await api.games.getLuckyConfig();
@@ -60,14 +59,12 @@ export const GameLucky: React.FC = () => {
       const allStus = await api.students.getAll();
       
       if (isTeacher) {
-         // Load class students for proxy list
          if (currentUser.homeroomClass) {
             setStudents(allStus.filter((s: Student) => s.className === currentUser.homeroomClass));
          } else {
             setStudents(allStus);
          }
          
-         // If proxy selected, load their attempts
          if (proxyStudentId) {
             const proxy = allStus.find((s: Student) => (s._id || String(s.id)) === proxyStudentId);
             setStudentInfo(proxy || null);
@@ -84,11 +81,9 @@ export const GameLucky: React.FC = () => {
 
   const handleDraw = async (index: number) => {
      if (isFlipping) return;
-     
-     // Determine who is drawing
      const targetId = isTeacher ? proxyStudentId : (studentInfo?._id || String(studentInfo?.id));
      
-     if (!targetId) return alert(isTeacher ? '请先选择要代抽的学生' : '学生信息未加载');
+     if (!targetId) return alert(isTeacher ? '请先在右侧选择要代抽的学生' : '学生信息未加载');
      if (!studentInfo || (studentInfo.drawAttempts || 0) <= 0) return alert('抽奖次数不足！');
 
      setIsFlipping(true);
@@ -122,58 +117,15 @@ export const GameLucky: React.FC = () => {
   if (!luckyConfig) return <div className="h-full flex items-center justify-center text-gray-400">配置加载失败</div>;
 
   return (
-    <div className="flex-1 flex flex-col h-full overflow-hidden bg-gradient-to-b from-red-50 to-white relative">
-        {/* Teacher Controls (Overlay or Top Bar) */}
-        {isTeacher && (
-            <div className="shrink-0 p-4 bg-white border-b border-gray-100 flex items-center justify-between shadow-sm z-20">
-               <div className="flex items-center gap-2">
-                  <UserCircle className="text-blue-600" size={20}/>
-                  <span className="text-sm font-bold text-gray-600">代抽模式:</span>
-                  <select 
-                     className="border border-gray-300 rounded-lg py-1.5 px-3 text-sm focus:ring-2 focus:ring-blue-500 outline-none bg-gray-50"
-                     value={proxyStudentId}
-                     onChange={e => setProxyStudentId(e.target.value)}
-                  >
-                     <option value="">-- 选择学生 --</option>
-                     {students.map(s => <option key={s._id} value={s._id || String(s.id)}>{s.name} (剩余: {s.drawAttempts||0})</option>)}
-                  </select>
-               </div>
-               <button onClick={() => setIsSettingsOpen(true)} className="flex items-center text-xs font-bold text-gray-600 bg-gray-100 px-3 py-2 rounded-lg hover:bg-gray-200 transition-colors">
-                  <Settings size={16} className="mr-1"/> 奖池配置
-               </button>
-            </div>
-        )}
-
-        <div className="flex-1 flex flex-col items-center justify-center p-4 md:p-6 min-h-0 relative">
-            {/* Header / Counter */}
-            <div className="shrink-0 mb-6 relative w-full max-w-lg">
-                <div className="bg-gradient-to-r from-yellow-100 to-amber-100 border border-yellow-200 rounded-2xl p-4 shadow-sm flex items-center justify-between">
-                    <div className="flex items-center gap-3">
-                        <div className="bg-white p-2 rounded-full shadow-inner"><Gift className="text-red-500" size={24}/></div>
-                        <div>
-                            <h3 className="font-bold text-yellow-900 text-lg leading-tight">
-                                {isTeacher && proxyStudentId ? `正在为 ${studentInfo?.name} 抽奖` : (isTeacher ? '请先选择学生' : '我的幸运抽奖')}
-                            </h3>
-                            <p className="text-xs text-yellow-700 opacity-80">每日限 {luckyConfig.dailyLimit} 次</p>
-                        </div>
-                    </div>
-                    <div className="text-right">
-                        <span className="block text-xs text-yellow-800 font-bold uppercase tracking-wider">剩余次数</span>
-                        <span className={`block text-3xl font-black ${studentInfo?.drawAttempts ? 'text-red-600' : 'text-gray-400'}`}>
-                            {studentInfo?.drawAttempts || 0}
-                        </span>
-                    </div>
-                </div>
-            </div>
-
-            {/* Responsive Grid */}
-            <div className={`w-full max-w-4xl flex-1 grid gap-3 md:gap-6 min-h-0 pb-4 ${
-                (luckyConfig.cardCount || 9) <= 4 ? 'grid-cols-2' :
-                (luckyConfig.cardCount || 9) <= 6 ? 'grid-cols-2 md:grid-cols-3' :
-                (luckyConfig.cardCount || 9) <= 9 ? 'grid-cols-3' :
-                'grid-cols-3 md:grid-cols-4'
-            }`} style={{gridAutoRows: '1fr'}}> 
-                {/* auto-rows-fr is key for filling height evenly */}
+    <div className="flex-1 flex flex-col md:flex-row h-full overflow-hidden bg-gradient-to-br from-red-50 to-orange-50 relative">
+        
+        {/* LEFT: Game Area (Scrollable) */}
+        <div className="flex-1 overflow-y-auto p-4 md:p-8 custom-scrollbar">
+            <div className={`grid gap-4 md:gap-6 w-full max-w-5xl mx-auto ${
+                (luckyConfig.cardCount || 9) <= 4 ? 'grid-cols-2 md:grid-cols-3' :
+                (luckyConfig.cardCount || 9) <= 6 ? 'grid-cols-2 md:grid-cols-3 lg:grid-cols-4' :
+                'grid-cols-3 md:grid-cols-4 lg:grid-cols-5'
+            }`}>
                 {Array.from({ length: luckyConfig.cardCount || 9 }).map((_, i) => (
                     <FlipCard 
                         key={i}
@@ -187,6 +139,62 @@ export const GameLucky: React.FC = () => {
             </div>
         </div>
 
+        {/* RIGHT: Sidebar Controls */}
+        <div className="w-full md:w-80 bg-white border-l border-gray-200 shadow-xl flex flex-col shrink-0 z-20">
+            <div className="p-6 border-b border-gray-100 bg-red-600 text-white relative overflow-hidden">
+                <div className="relative z-10">
+                    <h3 className="text-xl font-bold flex items-center"><Gift className="mr-2"/> 幸运抽奖</h3>
+                    <p className="text-red-100 text-xs mt-1">好运连连，惊喜不断</p>
+                </div>
+                <div className="absolute -right-4 -bottom-4 text-red-700 opacity-30"><Gift size={80}/></div>
+            </div>
+
+            <div className="p-6 flex-1 overflow-y-auto space-y-6">
+                {/* Stats Card */}
+                <div className="bg-gradient-to-r from-amber-50 to-orange-50 p-5 rounded-xl border border-orange-100 text-center">
+                    <p className="text-xs font-bold text-amber-700 uppercase tracking-wider mb-2">当前抽奖人</p>
+                    <div className="text-lg font-bold text-gray-800 truncate mb-4">
+                        {isTeacher && proxyStudentId ? (studentInfo?.name || '加载中...') : (isTeacher ? '未选择' : '我')}
+                    </div>
+                    
+                    <div className="border-t border-orange-200 pt-4">
+                        <p className="text-xs font-bold text-amber-700 uppercase tracking-wider mb-1">剩余次数</p>
+                        <p className={`text-4xl font-black ${studentInfo?.drawAttempts ? 'text-red-600' : 'text-gray-400'}`}>
+                            {studentInfo?.drawAttempts || 0}
+                        </p>
+                    </div>
+                </div>
+
+                {/* Teacher Controls */}
+                {isTeacher && (
+                    <div className="space-y-4">
+                        <div>
+                            <label className="text-xs font-bold text-gray-500 uppercase block mb-1">选择代抽学生</label>
+                            <div className="relative">
+                                <UserCircle className="absolute left-3 top-2.5 text-gray-400" size={18}/>
+                                <select 
+                                    className="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg text-sm outline-none focus:ring-2 focus:ring-blue-500 bg-white"
+                                    value={proxyStudentId}
+                                    onChange={e => setProxyStudentId(e.target.value)}
+                                >
+                                    <option value="">-- 请选择 --</option>
+                                    {students.map(s => <option key={s._id} value={s._id || String(s.id)}>{s.name} ({s.studentNo})</option>)}
+                                </select>
+                            </div>
+                        </div>
+                        
+                        <button onClick={() => setIsSettingsOpen(true)} className="w-full flex items-center justify-center gap-2 py-3 bg-gray-100 text-gray-700 rounded-xl font-bold hover:bg-gray-200 transition-colors">
+                            <Settings size={18}/> 奖池配置
+                        </button>
+                    </div>
+                )}
+                
+                <button onClick={loadData} className="w-full flex items-center justify-center gap-2 py-2 text-sm text-gray-400 hover:text-blue-600 transition-colors">
+                    <RefreshCcw size={14}/> 刷新数据
+                </button>
+            </div>
+        </div>
+
         {/* SETTINGS MODAL */}
         {isSettingsOpen && (
             <div className="fixed inset-0 bg-black/60 z-[100] flex items-center justify-center p-4 backdrop-blur-sm">
@@ -204,7 +212,7 @@ export const GameLucky: React.FC = () => {
                             </div>
                             <div className="bg-white p-4 rounded-xl border shadow-sm">
                                 <label className="text-xs font-bold text-gray-500 uppercase block mb-2">红包显示数量</label>
-                                <input type="number" min={4} max={12} className="w-full border rounded-lg px-3 py-2 font-bold text-lg text-center focus:ring-2 focus:ring-blue-500 outline-none" value={luckyConfig.cardCount || 9} onChange={e => setLuckyConfig({...luckyConfig, cardCount: Number(e.target.value)})}/>
+                                <input type="number" min={4} max={20} className="w-full border rounded-lg px-3 py-2 font-bold text-lg text-center focus:ring-2 focus:ring-blue-500 outline-none" value={luckyConfig.cardCount || 9} onChange={e => setLuckyConfig({...luckyConfig, cardCount: Number(e.target.value)})}/>
                             </div>
                             <div className="bg-white p-4 rounded-xl border shadow-sm">
                                 <label className="text-xs font-bold text-gray-500 uppercase block mb-2">安慰奖文案</label>