Update pages/GameLucky.tsx

pages/GameLucky.tsx

@@ -1,8 +1,9 @@
 
 import React, { useState, useEffect } from 'react';
+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 } from 'lucide-react';
+import { Gift, Settings, Loader2, Save, Trash2, X, UserCircle, RefreshCcw, HelpCircle, Maximize, Minimize } 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;
@@ -35,6 +36,7 @@ export const GameLucky: React.FC = () => {
   const [students, setStudents] = useState<Student[]>([]);
   const [proxyStudentId, setProxyStudentId] = useState<string>('');
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+  const [isFullscreen, setIsFullscreen] = useState(false);
 
   const [drawResult, setDrawResult] = useState<{prize: string, rewardType?: string} | null>(null);
   const [activeCardIndex, setActiveCardIndex] = useState<number | null>(null);
@@ -133,13 +135,26 @@ export const GameLucky: React.FC = () => {
   if (loading) return <div className="h-full flex items-center justify-center"><Loader2 className="animate-spin text-blue-600"/></div>;
   if (!luckyConfig) return <div className="h-full flex items-center justify-center text-gray-400">配置加载失败</div>;
 
-  return (
-    <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">
-        <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'
+  const GameContent = (
+    <div className={`${isFullscreen ? 'fixed inset-0 z-[9999]' : 'h-full relative'} flex flex-col md:flex-row bg-gradient-to-br from-red-50 to-orange-50 overflow-hidden`}>
+        {/* Floating Fullscreen Button */}
+        <button 
+            onClick={() => setIsFullscreen(!isFullscreen)} 
+            className="absolute top-4 right-4 z-50 p-2 rounded-full bg-white/50 hover:bg-white backdrop-blur shadow-sm border transition-colors md:top-4 md:left-4 md:right-auto"
+            title={isFullscreen ? "退出全屏" : "全屏"}
+        >
+            {isFullscreen ? <Minimize size={20} className="text-gray-700"/> : <Maximize size={20} className="text-gray-700"/>}
+        </button>
+
+        {/* Left: Red Packet Grid */}
+        <div className="flex-1 overflow-y-auto p-4 md:p-8 custom-scrollbar order-1 md:order-1">
+            <div className={`grid gap-3 md:gap-6 w-full max-w-5xl mx-auto transition-all ${
+                // Mobile Grids (2 cols usually)
+                'grid-cols-2 ' +
+                // Desktop Grids
+                ((luckyConfig.cardCount || 9) <= 4 ? 'md:grid-cols-3' :
+                (luckyConfig.cardCount || 9) <= 6 ? 'md:grid-cols-3 lg:grid-cols-4' :
+                'md:grid-cols-4 lg:grid-cols-5')
             }`}>
                 {Array.from({ length: luckyConfig.cardCount || 9 }).map((_, i) => (
                     <FlipCard 
@@ -154,31 +169,37 @@ export const GameLucky: React.FC = () => {
             </div>
         </div>
 
-        <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">班级专属奖池 | {currentClassName}</p>
+        {/* Right/Bottom: Controls */}
+        <div className="w-full md:w-80 bg-white border-t md:border-t-0 md:border-l border-gray-200 shadow-xl flex flex-col shrink-0 z-20 order-2 md:order-2">
+            <div className="p-4 md:p-6 border-b border-gray-100 bg-red-600 text-white relative overflow-hidden shrink-0">
+                <div className="relative z-10 flex justify-between items-center md:block">
+                    <div>
+                        <h3 className="text-lg md:text-xl font-bold flex items-center"><Gift className="mr-2"/> 幸运抽奖</h3>
+                        <p className="text-red-100 text-xs mt-1">班级专属奖池 | {currentClassName}</p>
+                    </div>
                 </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">
-                <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 className="p-4 md:p-6 flex-1 overflow-y-auto space-y-4 md:space-y-6">
+                <div className="bg-gradient-to-r from-amber-50 to-orange-50 p-4 rounded-xl border border-orange-100 text-center flex md:block justify-between items-center">
+                    <div className="text-left md:text-center">
+                        <p className="text-xs font-bold text-amber-700 uppercase tracking-wider mb-1 md:mb-2">当前抽奖人</p>
+                        <div className="text-base md:text-lg font-bold text-gray-800 truncate">
+                            {isTeacher && proxyStudentId ? (studentInfo?.name || '加载中...') : (isTeacher ? '未选择' : '我')}
+                        </div>
                     </div>
-                    <div className="border-t border-orange-200 pt-4">
+                    <div className="h-8 w-px bg-orange-200 md:hidden"></div>
+                    <div className="text-right md:text-center md:border-t md:border-orange-200 md: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'}`}>
+                        <p className={`text-2xl md:text-4xl font-black ${studentInfo?.drawAttempts ? 'text-red-600' : 'text-gray-400'}`}>
                             {studentInfo?.drawAttempts || 0}
                         </p>
                     </div>
                 </div>
 
                 {isTeacher && (
-                    <div className="space-y-4">
+                    <div className="space-y-3 md:space-y-4">
                         <div>
                             <label className="text-xs font-bold text-gray-500 uppercase block mb-1">选择代抽学生</label>
                             <div className="relative">
@@ -204,8 +225,9 @@ export const GameLucky: React.FC = () => {
             </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">
+            <div className="fixed inset-0 bg-black/60 z-[1000] flex items-center justify-center p-4 backdrop-blur-sm">
                 <div className="bg-white rounded-2xl w-full max-w-4xl h-[90vh] flex flex-col shadow-2xl animate-in zoom-in-95">
                     <div className="p-6 border-b border-gray-100 flex justify-between items-center">
                         <h3 className="text-xl font-bold text-gray-800">红包奖池配置 - {currentClassName}</h3>
@@ -299,4 +321,9 @@ export const GameLucky: React.FC = () => {
         )}
     </div>
   );
+
+  if (isFullscreen) {
+      return createPortal(GameContent, document.body);
+  }
+  return GameContent;
 };