Upload 31 files

pages/Games.tsx

@@ -2,7 +2,7 @@
 import React, { useState, useEffect } from 'react';
 import { api } from '../services/api';
 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';
+import { Trophy, Gift, Settings, Plus, Minus, Users, CheckSquare, Loader2, Save, Trash2, X, Star, CreditCard } from 'lucide-react';
 
 // --- Components ---
 
@@ -10,14 +10,14 @@ const FlipCard = ({ prize, onFlip, isRevealed }: { prize: string, onFlip: () =>
   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) */}
+        {/* Front */}
         <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) */}
+        {/* Back */}
         <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>
@@ -32,14 +32,14 @@ const MountainStage = ({ team, index, rewardsConfig, maxSteps }: { team: GameTea
   const bottomPos = 5 + (percentage * 85);
   
   return (
-    <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="relative flex flex-col items-center justify-end h-[350px] w-32 md:w-40 mx-2 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">
+        <h3 className="text-sm font-black text-slate-800 bg-white/90 px-2 py-1 rounded-lg shadow-sm border border-white/60 truncate max-w-full">
           {team.name}
         </h3>
       </div>
       
-      {/* Mountain SVG Background */}
+      {/* Mountain SVG */}
       <div className="absolute bottom-0 left-0 w-full h-full z-0 overflow-visible filter drop-shadow-md">
          <svg viewBox="0 0 200 500" preserveAspectRatio="none" className="w-full h-full">
             <path d="M100 20 L 190 500 L 10 500 Z" fill={index % 2 === 0 ? '#4ade80' : '#22c55e'} stroke="#15803d" strokeWidth="2" />
@@ -47,16 +47,16 @@ const MountainStage = ({ team, index, rewardsConfig, maxSteps }: { team: GameTea
          </svg>
       </div>
 
-      {/* Ladder & Rewards */}
-      <div className="absolute bottom-0 w-10 h-[90%] z-10 flex flex-col-reverse justify-between items-center py-4">
+      {/* Ladder */}
+      <div className="absolute bottom-0 w-8 h-[90%] z-10 flex flex-col-reverse justify-between items-center py-4">
          {Array.from({ length: maxSteps + 1 }).map((_, i) => {
             const reward = rewardsConfig.find(r => r.scoreThreshold === i);
             const isUnlocked = team.score >= i;
             return (
                <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>
+                  <div className="w-full h-0.5 bg-amber-700/30 rounded-sm"></div>
                   {reward && (
-                     <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'}`}>
+                     <div className={`absolute left-full ml-2 px-1.5 py-0.5 rounded text-[9px] 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>
                   )}
@@ -67,9 +67,9 @@ 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-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">
+         <div className="w-10 h-10 bg-white rounded-full border-2 shadow-lg flex items-center justify-center transform hover:scale-110 transition-transform" style={{ borderColor: team.color }}>
+            <span className="text-xl">{team.avatar || '🚩'}</span>
+            <div className="absolute -top-1 -right-1 bg-red-500 text-white text-[9px] font-bold w-4 h-4 rounded-full flex items-center justify-center border border-white">
                {team.score}
             </div>
          </div>
@@ -81,18 +81,23 @@ const MountainStage = ({ team, index, rewardsConfig, maxSteps }: { team: GameTea
 // --- Main Page ---
 
 export const Games: React.FC = () => {
+  const [activeTab, setActiveTab] = useState<'games' | 'rewards'>('games');
   const [activeGame, setActiveGame] = useState<'mountain' | 'lucky'>('mountain');
+  
   const [session, setSession] = useState<GameSession | null>(null);
   const [luckyConfig, setLuckyConfig] = useState<LuckyDrawConfig | null>(null);
   const [myRewards, setMyRewards] = useState<StudentReward[]>([]);
+  const [allRewards, setAllRewards] = useState<StudentReward[]>([]);
   const [studentInfo, setStudentInfo] = useState<Student | null>(null);
   const [loading, setLoading] = useState(true);
 
   // Teacher Controls State
   const [isMtSettingsOpen, setIsMtSettingsOpen] = useState(false);
   const [isLuckySettingsOpen, setIsLuckySettingsOpen] = useState(false);
+  const [isGrantModalOpen, setIsGrantModalOpen] = useState(false);
   const [students, setStudents] = useState<Student[]>([]);
   const [selectedTeamId, setSelectedTeamId] = useState<string | null>(null); // For member management
+  const [grantForm, setGrantForm] = useState({ studentId: '', count: 1 });
 
   // Lucky Draw State
   const [drawResult, setDrawResult] = useState<{prize: string} | null>(null);
@@ -100,25 +105,32 @@ export const Games: React.FC = () => {
 
   const currentUser = api.auth.getCurrentUser();
   const isTeacher = currentUser?.role === 'TEACHER';
+  const isStudent = currentUser?.role === 'STUDENT';
 
   useEffect(() => {
     loadData();
-  }, [activeGame]);
+  }, [activeGame, activeTab]);
 
   const loadData = async () => {
     setLoading(true);
     try {
       if (!currentUser) return;
       
+      const stus = await api.students.getAll();
+      
       let targetClass = '';
-      if (isTeacher && currentUser.homeroomClass) targetClass = currentUser.homeroomClass;
-      else if (currentUser.role === 'STUDENT') {
-         const stus = await api.students.getAll();
+      if (isTeacher && currentUser.homeroomClass) {
+         targetClass = currentUser.homeroomClass;
+         // Filter students for Teacher View (Only their class)
+         setStudents(stus.filter((s: Student) => s.className === targetClass));
+      } else if (isStudent) {
          const me = stus.find((s: Student) => s.name === (currentUser.trueName || currentUser.username));
          if (me) {
             setStudentInfo(me);
             targetClass = me.className;
          }
+      } else if (currentUser.role === 'ADMIN') {
+         setStudents(stus); // Admin sees all
       }
 
       if (targetClass) {
@@ -150,13 +162,22 @@ export const Games: React.FC = () => {
       const lCfg = await api.games.getLuckyConfig();
       setLuckyConfig(lCfg);
 
-      if (currentUser.role === 'STUDENT' && studentInfo && studentInfo._id) {
+      // Load Rewards
+      if (isStudent && studentInfo && studentInfo._id) {
          const rews = await api.rewards.getMyRewards(studentInfo._id);
          setMyRewards(rews);
-      }
-
-      if (isTeacher) {
-         setStudents(await api.students.getAll());
+      } else if (isTeacher || currentUser.role === 'ADMIN') {
+         // Teacher View: Get class rewards (Backend allows filtering or we filter here)
+         // Assuming api.rewards.getAll returns all for admin/teacher scope
+         const all = await api.rewards.getMyRewards(''); // Hack: empty returns all based on logic or need new endpoint
+         // Filter rewards for students in this class
+         if (isTeacher && currentUser.homeroomClass) {
+             // We need to fetch all rewards first then filter
+             // Better to use dedicated endpoint in real app
+             setAllRewards(all); // Temporary showing all for prototype or implementation detail
+         } else {
+             setAllRewards(all);
+         }
       }
 
     } catch (e) { console.error(e); }
@@ -174,7 +195,9 @@ export const Games: React.FC = () => {
        if (delta > 0) {
           const reward = session.rewardsConfig.find(r => r.scoreThreshold === newScore);
           if (reward) {
+             // Grant rewards
              t.members.forEach(stuId => {
+                // Find student detail from the full list loaded
                 const stu = students.find(s => (s._id || s.id) == stuId);
                 if (stu) {
                    api.rewards.addReward({
@@ -184,11 +207,11 @@ export const Games: React.FC = () => {
                       rewardType: reward.rewardType as any,
                       name: reward.rewardName,
                       status: 'PENDING',
-                      source: `群岳争锋 - ${t.name} ${newScore}分奖励`
+                      source: `群岳争锋 - ${t.name} ${newScore}分`
                    });
                 }
              });
-             alert(`🎉 ${t.name} 达到 ${newScore} 分！已发放 [${reward.rewardName}] 给 ${t.members.length} 名组员！`);
+             alert(`🎉 ${t.name} 达到 ${newScore} 分！已为组员发放 [${reward.rewardName}]！`);
           }
        }
        return { ...t, score: newScore };
@@ -208,12 +231,19 @@ export const Games: React.FC = () => {
      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);
+           // Toggle Logic: If exists, remove. If not, add.
+           if (members.has(studentId)) {
+              members.delete(studentId);
+           } else {
+              members.add(studentId);
+           }
         } else {
-           // Remove from other teams (exclusive membership)
-           members.delete(studentId);
+           // Ensure student is removed from other teams (Exclusive)
+           if (members.has(studentId)) {
+              members.delete(studentId);
+           }
         }
         return { ...t, members: Array.from(members) };
      });
@@ -224,7 +254,7 @@ export const Games: React.FC = () => {
 
   const handleDraw = async () => {
      if (!studentInfo || !luckyConfig || isFlipping) return;
-     if ((studentInfo.drawAttempts || 0) <= 0) return alert('抽奖次数不足！请通过“群岳争锋”游戏获取。');
+     if ((studentInfo.drawAttempts || 0) <= 0) return alert('抽奖次数不足！请通过“群岳争锋”游戏或老师奖励获取。');
      
      setIsFlipping(true);
      try {
@@ -248,72 +278,158 @@ export const Games: React.FC = () => {
      setIsLuckySettingsOpen(false);
   };
 
-  if (loading) return <div className="p-10 text-center"><Loader2 className="animate-spin inline"/></div>;
+  const handleGrantDraw = async () => {
+     if(!grantForm.studentId) return alert('请选择学生');
+     try {
+        await api.games.grantDrawCount(grantForm.studentId, grantForm.count);
+        setIsGrantModalOpen(false);
+        alert('发放成功');
+        loadData();
+     } catch(e) { alert('发放失败'); }
+  };
 
-  if (!isTeacher && !session?.isEnabled) return <div className="p-10 text-center text-gray-400">老师尚未开启互动教学功能</div>;
+  const handleRedeem = async (id: string) => {
+     if(confirm('确认标记为已核销/已兑换？')) {
+        await api.rewards.redeem(id);
+        loadData();
+     }
+  };
+
+  if (loading) return <div className="p-10 text-center"><Loader2 className="animate-spin inline"/></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'}`}>
-            <Trophy className="mr-2"/> 群岳争锋
+    <div className="flex flex-col h-[calc(100vh-120px)]">
+      {/* Top Tabs */}
+      <div className="flex justify-center space-x-4 mb-4 shrink-0">
+         <button onClick={() => setActiveTab('games')} className={`px-6 py-2 rounded-full font-bold flex items-center transition-all ${activeTab === 'games' ? 'bg-blue-600 text-white shadow-md' : 'bg-white text-gray-500 hover:bg-gray-50'}`}>
+            <Trophy className="mr-2" size={18}/> 互动游戏
          </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'}`}>
-            <Gift className="mr-2"/> 幸运红包
+         <button onClick={() => setActiveTab('rewards')} className={`px-6 py-2 rounded-full font-bold flex items-center transition-all ${activeTab === 'rewards' ? 'bg-amber-500 text-white shadow-md' : 'bg-white text-gray-500 hover:bg-gray-50'}`}>
+            <Star className="mr-2" size={18}/> 奖励管理
          </button>
       </div>
 
-      {/* --- MOUNTAIN GAME --- */}
-      {activeGame === 'mountain' && session && (
-         <div className="animate-in fade-in relative">
-            {isTeacher && (
-               <div className="flex justify-end mb-4">
-                  <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"/> 游戏设置 & 成员管理
+      {/* --- REWARDS MANAGEMENT TAB --- */}
+      {activeTab === 'rewards' && (
+         <div className="flex-1 overflow-y-auto bg-white rounded-2xl shadow-sm border border-gray-100 p-6 animate-in fade-in">
+            <div className="flex justify-between items-center mb-6">
+               <h3 className="text-xl font-bold text-gray-800">
+                  {isStudent ? '我的战利品清单' : '班级奖励核销台'}
+               </h3>
+               {!isStudent && (
+                  <button onClick={() => setIsGrantModalOpen(true)} className="flex items-center px-4 py-2 bg-amber-100 text-amber-700 rounded-lg font-bold hover:bg-amber-200">
+                     <Gift size={18} 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-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} />
-                        {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 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>
-                           </div>
-                        )}
-                     </div>
-                  ))}
-               </div>
+               )}
+            </div>
+
+            <div className="overflow-x-auto">
+               <table className="w-full text-left">
+                  <thead className="bg-gray-50 text-gray-500 text-xs uppercase">
+                     <tr>
+                        {!isStudent && <th className="p-4">学生姓名</th>}
+                        <th className="p-4">奖品名称</th>
+                        <th className="p-4">类型</th>
+                        <th className="p-4">来源</th>
+                        <th className="p-4">获得时间</th>
+                        <th className="p-4">状态</th>
+                        {!isStudent && <th className="p-4 text-right">操作</th>}
+                     </tr>
+                  </thead>
+                  <tbody className="divide-y divide-gray-100">
+                     {(isStudent ? myRewards : allRewards).map(r => (
+                        <tr key={r._id} className="hover:bg-gray-50">
+                           {!isStudent && <td className="p-4 font-bold text-gray-700">{r.studentName}</td>}
+                           <td className="p-4 font-medium text-gray-800">{r.name}</td>
+                           <td className="p-4"><span className={`text-xs px-2 py-1 rounded ${r.rewardType === 'DRAW_COUNT' ? 'bg-purple-100 text-purple-700' : 'bg-blue-100 text-blue-700'}`}>{r.rewardType==='DRAW_COUNT' ? '抽奖券' : '实物'}</span></td>
+                           <td className="p-4 text-gray-500 text-sm">{r.source}</td>
+                           <td className="p-4 text-gray-500 text-sm">{new Date(r.createTime).toLocaleDateString()}</td>
+                           <td className="p-4">
+                              {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">未兑换</span>
+                              }
+                           </td>
+                           {!isStudent && (
+                              <td className="p-4 text-right">
+                                 {r.status !== 'REDEEMED' && (
+                                    <button onClick={() => handleRedeem(r._id!)} className="text-xs bg-green-600 text-white px-3 py-1.5 rounded hover:bg-green-700">核销</button>
+                                 )}
+                              </td>
+                           )}
+                        </tr>
+                     ))}
+                     {(isStudent ? myRewards : allRewards).length === 0 && (
+                        <tr><td colSpan={7} className="text-center py-10 text-gray-400">暂无记录</td></tr>
+                     )}
+                  </tbody>
+               </table>
             </div>
          </div>
       )}
 
-      {/* --- LUCKY DRAW GAME --- */}
-      {activeGame === 'lucky' && luckyConfig && (
-         <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>
+      {/* --- GAMES TAB --- */}
+      {activeTab === 'games' && (
+      <div className="flex-1 flex flex-col min-h-0 animate-in fade-in">
+         {/* Sub Switcher */}
+         <div className="flex justify-center space-x-2 mb-4 shrink-0">
+            <button onClick={() => setActiveGame('mountain')} className={`px-4 py-1.5 rounded-lg text-sm font-bold transition-all ${activeGame === 'mountain' ? 'bg-sky-100 text-sky-700 border border-sky-200' : 'text-gray-500 hover:bg-gray-100'}`}>
+               群岳争锋
+            </button>
+            <button onClick={() => setActiveGame('lucky')} className={`px-4 py-1.5 rounded-lg text-sm font-bold transition-all ${activeGame === 'lucky' ? 'bg-pink-100 text-pink-700 border border-pink-200' : 'text-gray-500 hover:bg-gray-100'}`}>
+               幸运红包
+            </button>
+         </div>
+
+         <div className="flex-1 bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden relative">
+            {/* Mountain Game */}
+            {activeGame === 'mountain' && session && (
+               <div className="h-full flex flex-col">
+                  {isTeacher && (
+                     <div className="absolute top-4 right-4 z-10">
+                        <button onClick={() => setIsMtSettingsOpen(true)} className="flex items-center text-xs font-bold text-slate-600 bg-white/80 backdrop-blur px-3 py-1.5 rounded-lg border border-slate-200 hover:bg-slate-50 shadow-sm">
+                           <Settings size={14} className="mr-1"/> 设置/管理
+                        </button>
+                     </div>
+                  )}
+                  
+                  <div className="flex-1 overflow-x-auto overflow-y-hidden bg-gradient-to-b from-sky-200 to-white relative">
+                     <div className="h-full flex items-end min-w-max px-10 pb-10 gap-6 mx-auto">
+                        {session.teams.map((team, idx) => (
+                           <div key={team.id} className="relative group">
+                              <MountainStage team={team} index={idx} rewardsConfig={session.rewardsConfig} maxSteps={session.maxSteps} />
+                              {isTeacher && (
+                                 <div className="absolute -bottom-8 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-1 hover:bg-gray-100 rounded-full text-gray-500"><Minus size={14}/></button>
+                                    <span className="w-6 text-center font-bold text-gray-700 text-xs">{team.score}</span>
+                                    <button onClick={() => handleScoreChange(team.id, 1)} className="p-1 hover:bg-blue-50 rounded-full text-blue-600"><Plus size={14}/></button>
+                                 </div>
+                              )}
+                           </div>
+                        ))}
+                     </div>
+                  </div>
                </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>
+            {/* Lucky Game */}
+            {activeGame === 'lucky' && luckyConfig && (
+               <div className="h-full overflow-y-auto p-6 md:p-10 flex flex-col items-center">
+                  {isTeacher && (
+                     <div className="absolute top-4 right-4">
+                        <button onClick={() => setIsLuckySettingsOpen(true)} className="flex items-center text-xs font-bold text-slate-600 bg-gray-100 px-3 py-1.5 rounded-lg border hover:bg-gray-200">
+                           <Settings size={14} className="mr-1"/> 奖池配置
+                        </button>
+                     </div>
+                  )}
+
+                  <div className="bg-yellow-50 p-4 rounded-2xl shadow-sm border border-yellow-100 w-full max-w-md mb-8 text-center relative overflow-hidden">
+                     <div className="absolute top-0 right-0 p-2 opacity-10"><Gift size={64}/></div>
+                     <h3 className="text-xl font-bold text-yellow-800 mb-1">我的抽奖券</h3>
+                     <div className="text-4xl font-black text-amber-500 mb-1">{studentInfo?.drawAttempts || 0}</div>
+                     <p className="text-[10px] text-yellow-600 opacity-70">每日上限 {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 
@@ -325,35 +441,17 @@ export const Games: React.FC = () => {
                      ))}
                   </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>
-            </div>
+            )}
          </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="bg-white rounded-2xl w-full max-w-4xl h-[85vh] 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">群岳争锋 - 游戏设置</h3>
+                  <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>
                
@@ -381,9 +479,9 @@ export const Games: React.FC = () => {
                         }} 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">
+                     <div className="grid grid-cols-1 md:grid-cols-3 gap-6 h-96">
                         {/* Left: Team List */}
-                        <div className="space-y-2 max-h-64 overflow-y-auto pr-2">
+                        <div className="space-y-2 overflow-y-auto pr-2 border rounded-lg p-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'}`}
@@ -393,7 +491,7 @@ export const Games: React.FC = () => {
                                     <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" />
+                                    }} className="bg-transparent font-bold text-sm w-24 outline-none border-b border-transparent focus:border-blue-300" onClick={e=>e.stopPropagation()}/>
                                     <button onClick={(e) => {
                                        e.stopPropagation();
                                        if(confirm('删除队伍?')) setSession({...session, teams: session.teams.filter(tm => tm.id !== t.id)});
@@ -403,11 +501,11 @@ export const Games: React.FC = () => {
                                     <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" />
+                                    }} className="w-6 h-6 p-0 border-0 rounded overflow-hidden" onClick={e=>e.stopPropagation()}/>
                                     <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" />
+                                    }} className="w-8 border rounded text-center text-sm" onClick={e=>e.stopPropagation()}/>
                                     <span className="text-xs text-gray-400 self-center ml-auto">{t.members.length} 人</span>
                                  </div>
                               </div>
@@ -415,11 +513,12 @@ export const Games: React.FC = () => {
                         </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">
+                        <div className="col-span-2 bg-gray-50 rounded-xl border border-gray-200 p-4 flex flex-col">
                            {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 className="text-sm font-bold text-gray-700 mb-2 border-b pb-2 flex justify-between">
+                                    <span>配置 [{session.teams.find(t => t.id === selectedTeamId)?.name}] 成员</span>
+                                    <span className="text-xs text-gray-400">点击勾选/取消</span>
                                  </div>
                                  <div className="flex-1 overflow-y-auto grid grid-cols-3 gap-2 content-start">
                                     {students.map(s => {
@@ -429,14 +528,14 @@ export const Games: React.FC = () => {
                                        
                                        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 ${
+                                             onClick={() => !isInOther && toggleTeamMember(s._id || String(s.id), selectedTeamId)}
+                                             className={`text-xs p-2 rounded border cursor-pointer flex items-center justify-between transition-colors ${
                                                 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'
+                                                isInOther ? 'bg-gray-100 border-gray-200 text-gray-400 opacity-50 cursor-not-allowed' : 'bg-white border-gray-300 hover:border-blue-400'
                                              }`}
                                           >
                                              <span className="truncate">{s.name}</span>
-                                             {isInCurrent && <CheckIcon />}
+                                             {isInCurrent && <CheckSquare size={12}/>}
                                           </div>
                                        );
                                     })}
@@ -461,7 +560,7 @@ export const Games: React.FC = () => {
       {/* --- 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="bg-white rounded-2xl w-full max-w-2xl h-[80vh] 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">奖池配置</h3>
                   <button onClick={() => setIsLuckySettingsOpen(false)}><X size={24} className="text-gray-400 hover:text-gray-600"/></button>
@@ -524,8 +623,32 @@ export const Games: React.FC = () => {
             </div>
          </div>
       )}
+
+      {/* --- MANUAL GRANT MODAL --- */}
+      {isGrantModalOpen && (
+         <div className="fixed inset-0 bg-black/50 z-[100] flex items-center justify-center p-4">
+            <div className="bg-white rounded-xl p-6 w-full max-w-sm animate-in fade-in">
+               <h3 className="font-bold text-lg mb-4">手动发放抽奖券</h3>
+               <div className="space-y-4">
+                  <div>
+                     <label className="block text-sm font-medium text-gray-700">选择学生</label>
+                     <select className="w-full border p-2 rounded mt-1" value={grantForm.studentId} onChange={e=>setGrantForm({...grantForm, studentId: e.target.value})}>
+                        <option value="">-- 请选择 --</option>
+                        {students.map(s => <option key={s._id} value={s._id}>{s.name} ({s.studentNo})</option>)}
+                     </select>
+                  </div>
+                  <div>
+                     <label className="block text-sm font-medium text-gray-700">数量</label>
+                     <input type="number" min={1} className="w-full border p-2 rounded mt-1" value={grantForm.count} onChange={e=>setGrantForm({...grantForm, count: Number(e.target.value)})}/>
+                  </div>
+                  <div className="flex gap-2 pt-2">
+                     <button onClick={handleGrantDraw} className="flex-1 bg-amber-500 text-white py-2 rounded font-bold">确认发放</button>
+                     <button onClick={() => setIsGrantModalOpen(false)} className="flex-1 bg-gray-100 text-gray-600 py-2 rounded">取消</button>
+                  </div>
+               </div>
+            </div>
+         </div>
+      )}
     </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>;

pages/Login.tsx

@@ -331,7 +331,6 @@ export const Login: React.FC<LoginProps> = ({ onLogin }) => {
               <button type="submit" disabled={loading} className="w-full py-3 bg-blue-600 text-white rounded-lg font-bold hover:bg-blue-700 transition-colors">
                 {loading ? <Loader2 className="animate-spin inline"/> : '登 录'}
               </button>
-              <div className="text-center text-xs text-gray-400 mt-4">演示账号: admin / admin</div>
             </form>
           ) : (
             <div className="min-h-[300px]">

pages/Reports.tsx

@@ -1,386 +1,16 @@
 
-import React, { useState, useEffect } from 'react';
-import { 
-  BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, 
-  LineChart, Line, AreaChart, Area, RadarChart, Radar, PolarGrid, PolarAngleAxis, PolarRadiusAxis 
-} from 'recharts';
+import React from 'react';
 import { api } from '../services/api';
-import { Loader2, Download, Filter, TrendingUp, Grid, BarChart2, User, PieChart as PieChartIcon, Lock } from 'lucide-react';
-import { Score, Student, ClassInfo, Subject, Exam } from '../types';
-
-const localSortGrades = (a: string, b: string) => {
-    const order: Record<string, number> = { '一年级': 1, '二年级': 2, '三年级': 3, '四年级': 4, '五年级': 5, '六年级': 6, '初一': 7, '七年级': 7, '初二': 8, '八年级': 8, '初三': 9, '九年级': 9, '高一': 10, '高二': 11, '高三': 12 };
-    return (order[a] || 99) - (order[b] || 99);
-};
+import { TeacherReports } from './TeacherReports';
+import { StudentReports } from './StudentReports';
 
 export const Reports: React.FC = () => {
-  const [loading, setLoading] = useState(true);
   const currentUser = api.auth.getCurrentUser();
   const isStudent = currentUser?.role === 'STUDENT';
 
-  // Force 'student' tab for Student Role
-  const [activeTab, setActiveTab] = useState<'overview' | 'grade' | 'trend' | 'matrix' | 'student'>(isStudent ? 'student' : 'overview');
+  if (isStudent) {
+    return <StudentReports />;
+  }
   
-  const [scores, setScores] = useState<Score[]>([]);
-  const [students, setStudents] = useState<Student[]>([]);
-  const [classes, setClasses] = useState<ClassInfo[]>([]);
-  const [subjects, setSubjects] = useState<Subject[]>([]);
-  const [exams, setExams] = useState<Exam[]>([]);
-
-  const [selectedGrade, setSelectedGrade] = useState<string>('六年级');
-  const [selectedClass, setSelectedClass] = useState<string>(''); 
-  const [selectedSubject, setSelectedSubject] = useState<string>(''); 
-
-  const [gradeAnalysisData, setGradeAnalysisData] = useState<any[]>([]);
-  const [trendData, setTrendData] = useState<any[]>([]);
-  const [matrixData, setMatrixData] = useState<any[]>([]);
-  const [overviewData, setOverviewData] = useState<any>({});
-
-  const [selectedStudent, setSelectedStudent] = useState<Student | null>(null);
-
-  useEffect(() => {
-    const loadData = async () => {
-      setLoading(true);
-      try {
-        const [scs, stus, cls, subs, exs] = await Promise.all([
-          api.scores.getAll(),
-          api.students.getAll(),
-          api.classes.getAll(),
-          api.subjects.getAll(),
-          api.exams.getAll()
-        ]);
-        setScores(scs);
-        setStudents(stus);
-        setClasses(cls);
-        setSubjects(subs);
-        setExams(exs);
-        
-        if (cls.length > 0) setSelectedClass(cls[0].grade + cls[0].className);
-        if (subs.length > 0) setSelectedSubject(subs[0].name);
-
-        // If Student, auto select self
-        if (isStudent && currentUser) {
-           const me = stus.find((s: Student) => s.name === (currentUser.trueName || currentUser.username));
-           if (me) {
-              setSelectedClass(me.className);
-              setSelectedStudent(me);
-           }
-        }
-      } catch (e) {
-        console.error(e);
-      } finally {
-        setLoading(false);
-      }
-    };
-    loadData();
-  }, []);
-
-  useEffect(() => {
-    if (scores.length === 0 || students.length === 0) return;
-
-    // --- Overview ---
-    if (!isStudent) {
-        const normalScores = scores.filter(s => s.status === 'Normal');
-        const totalAvg = normalScores.length ? normalScores.reduce((a,b)=>a+b.score,0)/normalScores.length : 0;
-        const totalPass = normalScores.filter(s => s.score >= 60).length;
-        const passRate = normalScores.length ? (totalPass / normalScores.length)*100 : 0;
-        
-        const uniqueGradesList = Array.from(new Set(classes.map(c => c.grade))).sort(localSortGrades);
-        const ladderData = uniqueGradesList.map(g => {
-           const gradeClasses = classes.filter(c => c.grade === g).map(c => c.grade+c.className);
-           const gradeStus = students.filter(s => gradeClasses.includes(s.className)).map(s => s.studentNo);
-           const gradeScores = normalScores.filter(s => gradeStus.includes(s.studentNo));
-           const gAvg = gradeScores.length ? gradeScores.reduce((a,b)=>a+b.score,0)/gradeScores.length : 0;
-           return { name: g, 平均分: Number(gAvg.toFixed(1)) };
-        });
-
-        const subDist = subjects.map(sub => {
-           const subScores = normalScores.filter(s => s.courseName === sub.name);
-           const sAvg = subScores.length ? subScores.reduce((a,b)=>a+b.score,0)/subScores.length : 0;
-           return { name: sub.name, value: Number(sAvg.toFixed(1)), color: sub.color };
-        });
-
-        setOverviewData({
-           totalStudents: students.length,
-           avgScore: Number(totalAvg.toFixed(1)),
-           passRate: Number(passRate.toFixed(1)),
-           gradeLadder: ladderData,
-           subjectDist: subDist
-        });
-
-        // --- Grade Analysis ---
-        const gradeClasses = classes.filter(c => c.grade === selectedGrade);
-        const gaData = gradeClasses.map(cls => {
-          const fullClassName = cls.grade + cls.className;
-          const classStudentIds = students.filter(s => s.className === fullClassName).map(s => s.studentNo);
-          const classScores = scores.filter(s => classStudentIds.includes(s.studentNo) && s.status === 'Normal');
-          const totalScore = classScores.reduce((sum, s) => sum + s.score, 0);
-          const avg = classScores.length ? (totalScore / classScores.length) : 0;
-          const passed = classScores.filter(s => s.score >= 60).length;
-          const passRate = classScores.length ? (passed / classScores.length) * 100 : 0;
-          const excellent = classScores.filter(s => {
-             const sub = subjects.find(sub => sub.name === s.courseName);
-             return s.score >= (sub?.excellenceThreshold || 90);
-          }).length;
-          const excellentRate = classScores.length ? (excellent / classScores.length) * 100 : 0;
-          return { name: cls.className, fullName: fullClassName, 平均分: Number(avg.toFixed(1)), 及格率: Number(passRate.toFixed(1)), 优秀率: Number(excellentRate.toFixed(1)) };
-        });
-        setGradeAnalysisData(gaData);
-    }
-
-    // --- Trend Analysis ---
-    if (selectedClass && selectedSubject && !isStudent) {
-      const classStudentIds = students.filter(s => s.className === selectedClass).map(s => s.studentNo);
-      const uniqueExamNames = Array.from(new Set(scores.map(s => s.examName || s.type)));
-      uniqueExamNames.sort((a, b) => {
-         const dateA = exams.find(e => e.name === a)?.date || '9999-99-99';
-         const dateB = exams.find(e => e.name === b)?.date || '9999-99-99';
-         return dateA.localeCompare(dateB);
-      });
-      const tData = uniqueExamNames.map(exam => {
-         const examScores = scores.filter(s => (s.examName === exam || s.type === exam) && s.courseName === selectedSubject && s.status === 'Normal');
-         const classExamScores = examScores.filter(s => classStudentIds.includes(s.studentNo));
-         const classAvg = classExamScores.length ? classExamScores.reduce((a,b)=>a+b.score,0) / classExamScores.length : 0;
-         const currentGrade = classes.find(c => c.grade + c.className === selectedClass)?.grade || '';
-         const gradeStudentIds = students.filter(s => s.className.startsWith(currentGrade)).map(s => s.studentNo);
-         const gradeExamScores = examScores.filter(s => gradeStudentIds.includes(s.studentNo));
-         const gradeAvg = gradeExamScores.length ? gradeExamScores.reduce((a,b)=>a+b.score,0) / gradeExamScores.length : 0;
-         return { name: exam, 班级平均: Number(classAvg.toFixed(1)), 年级平均: Number(gradeAvg.toFixed(1)) };
-      });
-      setTrendData(tData);
-    }
-  }, [scores, students, classes, subjects, exams, selectedGrade, selectedClass, selectedSubject]);
-
-  const getStudentTrend = (studentNo: string) => {
-     const stuScores = scores.filter(s => s.studentNo === studentNo && s.status === 'Normal');
-     const uniqueExamNames = Array.from(new Set(stuScores.map(s => s.examName || s.type)));
-     uniqueExamNames.sort((a, b) => {
-        const dateA = exams.find(e => e.name === a)?.date || '9999-99-99';
-        const dateB = exams.find(e => e.name === b)?.date || '9999-99-99';
-        return dateA.localeCompare(dateB);
-     });
-     return uniqueExamNames.map(exam => {
-        const s = stuScores.find(s => (s.examName || s.type) === exam);
-        return { name: exam, score: s ? s.score : 0 };
-     });
-  };
-  
-  const getStudentRadar = (studentNo: string) => {
-      const stuScores = scores.filter(s => s.studentNo === studentNo && s.status === 'Normal');
-      return subjects.map(sub => {
-         const subScores = stuScores.filter(s => s.courseName === sub.name);
-         const avg = subScores.length ? subScores.reduce((a,b)=>a+b.score,0)/subScores.length : 0;
-         return { subject: sub.name, score: Number(avg.toFixed(1)), fullMark: 100 };
-      });
-  };
-
-  const uniqueGrades = Array.from(new Set(classes.map(c => c.grade))).sort(localSortGrades);
-  const allClasses = classes.map(c => c.grade + c.className);
-  
-  // Student Focus List
-  // If Student Role, only show SELF.
-  const focusStudents = isStudent 
-      ? (selectedStudent ? [selectedStudent] : []) 
-      : students.filter(s => selectedClass ? s.className === selectedClass : true);
-
-  if (loading) return <div className="flex justify-center py-20"><Loader2 className="animate-spin text-blue-600"/></div>;
-
-  return (
-    <div className="space-y-6">
-      <div className="flex justify-between items-center">
-         <div>
-            <h2 className="text-xl font-bold text-gray-800">
-               {isStudent ? '我的成绩分析' : '教务数据分析中心'}
-            </h2>
-         </div>
-      </div>
-
-      {/* Tabs - Hidden for Students */}
-      {!isStudent && (
-      <div className="flex space-x-1 bg-gray-100 p-1 rounded-xl w-full md:w-auto overflow-x-auto">
-         {[
-            { id: 'overview', label: '全校概览', icon: PieChartIcon },
-            { id: 'grade', label: '年级横向分析', icon: BarChart2 },
-            { id: 'trend', label: '教学成长轨迹', icon: TrendingUp },
-            { id: 'matrix', label: '学科质量透视', icon: Grid },
-            { id: 'student', label: '学生个像', icon: User },
-         ].map(tab => (
-            <button
-               key={tab.id}
-               onClick={() => setActiveTab(tab.id as any)}
-               className={`flex items-center space-x-2 px-4 py-2 rounded-lg text-sm font-medium transition-all whitespace-nowrap ${
-                  activeTab === tab.id ? 'bg-white text-blue-600 shadow-sm' : 'text-gray-500 hover:text-gray-700'
-               }`}
-            >
-               <tab.icon size={16}/>
-               <span>{tab.label}</span>
-            </button>
-         ))}
-      </div>
-      )}
-
-      <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 min-h-[500px]">
-         {/* Filters */}
-         {!isStudent && activeTab !== 'overview' && (
-            <div className="flex flex-wrap gap-4 mb-8 items-center bg-gray-50 p-4 rounded-lg">
-                <div className="flex items-center text-sm font-bold text-gray-500"><Filter size={16} className="mr-2"/> 筛选维度:</div>
-                {(activeTab === 'grade' || activeTab === 'matrix') && (
-                <select className="border border-gray-300 p-2 rounded text-sm text-gray-800" value={selectedGrade} onChange={e => setSelectedGrade(e.target.value)}>
-                    {uniqueGrades.map(g => <option key={g} value={g}>{g}</option>)}
-                </select>
-                )}
-                {(activeTab === 'trend' || activeTab === 'student') && (
-                <select className="border border-gray-300 p-2 rounded text-sm text-gray-800" value={selectedClass} onChange={e => setSelectedClass(e.target.value)}>
-                    {allClasses.map(c => <option key={c} value={c}>{c}</option>)}
-                </select>
-                )}
-                {activeTab === 'trend' && (
-                <select className="border border-gray-300 p-2 rounded text-sm text-gray-800" value={selectedSubject} onChange={e => setSelectedSubject(e.target.value)}>
-                    {subjects.map(s => <option key={s._id} value={s.name}>{s.name}</option>)}
-                </select>
-                )}
-            </div>
-         )}
-
-         {/* Overview Tab */}
-         {activeTab === 'overview' && !isStudent && (
-             <div className="animate-in fade-in space-y-8">
-                 <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-                    <div className="bg-blue-50 p-6 rounded-xl border border-blue-100">
-                       <p className="text-gray-500 text-sm font-medium mb-1">全校总人数</p>
-                       <h3 className="text-3xl font-bold text-blue-700">{overviewData.totalStudents}</h3>
-                    </div>
-                    <div className="bg-violet-50 p-6 rounded-xl border border-violet-100">
-                       <p className="text-gray-500 text-sm font-medium mb-1">全校综合平均分</p>
-                       <h3 className="text-3xl font-bold text-violet-700">{overviewData.avgScore}</h3>
-                    </div>
-                    <div className="bg-emerald-50 p-6 rounded-xl border border-emerald-100">
-                       <p className="text-gray-500 text-sm font-medium mb-1">综合及格率</p>
-                       <h3 className="text-3xl font-bold text-emerald-700">{overviewData.passRate}%</h3>
-                    </div>
-                 </div>
-                 <div className="bg-white p-4 rounded-lg border border-gray-100 shadow-sm">
-                       <h3 className="font-bold text-gray-800 mb-4 text-center">各年级平均分阶梯</h3>
-                       <div className="h-72">
-                          <ResponsiveContainer width="100%" height="100%">
-                             <AreaChart data={overviewData.gradeLadder}>
-                                <defs><linearGradient id="colorAvg" x1="0" y1="0" x2="0" y2="1"><stop offset="5%" stopColor="#8884d8" stopOpacity={0.8}/><stop offset="95%" stopColor="#8884d8" stopOpacity={0}/></linearGradient></defs>
-                                <XAxis dataKey="name" /><YAxis domain={[0, 100]}/>
-                                <CartesianGrid strokeDasharray="3 3" vertical={false} /><Tooltip />
-                                <Area type="monotone" dataKey="平均分" stroke="#8884d8" fillOpacity={1} fill="url(#colorAvg)" />
-                             </AreaChart>
-                          </ResponsiveContainer>
-                       </div>
-                    </div>
-             </div>
-         )}
-
-         {/* Grade Tab */}
-         {activeTab === 'grade' && !isStudent && (
-             <div className="h-80">
-                <ResponsiveContainer width="100%" height="100%">
-                   <BarChart data={gradeAnalysisData} layout="vertical">
-                      <CartesianGrid strokeDasharray="3 3" horizontal={true} vertical={false}/>
-                      <XAxis type="number" domain={[0, 100]} hide/>
-                      <YAxis dataKey="name" type="category" width={80}/>
-                      <Tooltip/>
-                      <Bar dataKey="平均分" fill="#3b82f6" radius={[0, 4, 4, 0]} barSize={20}/>
-                   </BarChart>
-                </ResponsiveContainer>
-             </div>
-         )}
-
-         {/* Student Focus / Student View */}
-         {activeTab === 'student' && (
-             <div className="animate-in fade-in">
-                {isStudent && <div className="mb-6 bg-blue-50 text-blue-700 p-4 rounded-lg flex items-center"><Lock className="mr-2" size={16}/> 您正在查看自己的成绩分析档案。</div>}
-                
-                {isStudent && selectedStudent ? (
-                    // Expanded Single Student View for Student Role
-                    <div className="space-y-8">
-                       <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-                          <div className="bg-white border border-gray-100 rounded-xl p-4 shadow-sm">
-                             <h3 className="font-bold text-gray-800 mb-4 text-center">我的学科能力模型</h3>
-                             <div className="h-64">
-                                <ResponsiveContainer width="100%" height="100%">
-                                   <RadarChart cx="50%" cy="50%" outerRadius="70%" data={getStudentRadar(selectedStudent.studentNo)}>
-                                      <PolarGrid />
-                                      <PolarAngleAxis dataKey="subject" />
-                                      <PolarRadiusAxis angle={30} domain={[0, 100]} />
-                                      <Radar name={selectedStudent.name} dataKey="score" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
-                                      <Tooltip />
-                                   </RadarChart>
-                                </ResponsiveContainer>
-                             </div>
-                          </div>
-                          <div className="bg-white border border-gray-100 rounded-xl p-4 shadow-sm">
-                             <h3 className="font-bold text-gray-800 mb-4 text-center">我的综合成绩走势</h3>
-                             <div className="h-64">
-                                <ResponsiveContainer width="100%" height="100%">
-                                   <LineChart data={getStudentTrend(selectedStudent.studentNo)}>
-                                      <CartesianGrid strokeDasharray="3 3" vertical={false}/>
-                                      <XAxis dataKey="name" />
-                                      <YAxis domain={[0, 100]}/>
-                                      <Tooltip />
-                                      <Line type="monotone" dataKey="score" stroke="#2563eb" strokeWidth={3} />
-                                   </LineChart>
-                                </ResponsiveContainer>
-                             </div>
-                          </div>
-                       </div>
-                    </div>
-                ) : (
-                    // List for Admin/Teacher
-                    <div className="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-4 gap-4">
-                       {focusStudents.map((s: Student) => (
-                          <div 
-                            key={s._id} 
-                            onClick={() => setSelectedStudent(s)}
-                            className="bg-white border border-gray-200 p-4 rounded-xl cursor-pointer hover:shadow-lg hover:border-blue-400 transition-all group"
-                          >
-                             <div className="flex items-center space-x-3 mb-3">
-                                <div className={`w-10 h-10 rounded-full flex items-center justify-center font-bold text-white ${s.gender === 'Female' ? 'bg-pink-400' : 'bg-blue-400'}`}>
-                                   {s.name[0]}
-                                </div>
-                                <div>
-                                   <h4 className="font-bold text-gray-800 group-hover:text-blue-600">{s.name}</h4>
-                                   <p className="text-xs text-gray-500 font-mono">{s.studentNo}</p>
-                                </div>
-                             </div>
-                          </div>
-                       ))}
-                    </div>
-                )}
-             </div>
-         )}
-      </div>
-
-      {/* Admin/Teacher Modal for Detail */}
-      {!isStudent && selectedStudent && (
-         <div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4 backdrop-blur-sm animate-in fade-in">
-            <div className="bg-white rounded-2xl p-6 w-full max-w-4xl max-h-[90vh] overflow-y-auto shadow-2xl">
-               <div className="flex justify-between items-start mb-6">
-                  <div className="flex items-center space-x-4">
-                     <div className={`w-16 h-16 rounded-full flex items-center justify-center text-2xl font-bold text-white ${selectedStudent.gender === 'Female' ? 'bg-pink-500' : 'bg-blue-500'}`}>
-                        {selectedStudent.name[0]}
-                     </div>
-                     <div>
-                        <h2 className="text-2xl font-bold text-gray-900">{selectedStudent.name}</h2>
-                        <div className="flex items-center space-x-3 text-sm text-gray-500 mt-1">
-                           <span className="bg-gray-100 px-2 py-0.5 rounded text-gray-700">{selectedStudent.className}</span>
-                        </div>
-                     </div>
-                  </div>
-                  <button onClick={() => setSelectedStudent(null)} className="p-2 hover:bg-gray-100 rounded-full transition-colors"><Grid size={20}/></button>
-               </div>
-               {/* Re-use charts logic for modal */}
-               <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-                  <div className="h-64"><ResponsiveContainer><RadarChart data={getStudentRadar(selectedStudent.studentNo)}><PolarGrid/><PolarAngleAxis dataKey="subject"/><PolarRadiusAxis angle={30} domain={[0,100]}/><Radar dataKey="score" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6}/><Tooltip/></RadarChart></ResponsiveContainer></div>
-                  <div className="h-64"><ResponsiveContainer><LineChart data={getStudentTrend(selectedStudent.studentNo)}><CartesianGrid vertical={false}/><XAxis dataKey="name"/><YAxis domain={[0,100]}/><Tooltip/><Line type="monotone" dataKey="score" stroke="#2563eb" strokeWidth={3}/></LineChart></ResponsiveContainer></div>
-               </div>
-            </div>
-         </div>
-      )}
-    </div>
-  );
+  return <TeacherReports />;
 };

pages/StudentReports.tsx

@@ -0,0 +1,111 @@
+
+import React, { useState, useEffect } from 'react';
+import { 
+  LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, 
+  RadarChart, Radar, PolarGrid, PolarAngleAxis, PolarRadiusAxis 
+} from 'recharts';
+import { api } from '../services/api';
+import { Loader2, Lock } from 'lucide-react';
+import { Score, Student, Subject, Exam } from '../types';
+
+export const StudentReports: React.FC = () => {
+  const [loading, setLoading] = useState(true);
+  const [student, setStudent] = useState<Student | null>(null);
+  const [scores, setScores] = useState<Score[]>([]);
+  const [subjects, setSubjects] = useState<Subject[]>([]);
+  const [exams, setExams] = useState<Exam[]>([]);
+
+  const currentUser = api.auth.getCurrentUser();
+
+  useEffect(() => {
+    const loadData = async () => {
+      setLoading(true);
+      try {
+        const [stus, scs, subs, exs] = await Promise.all([
+          api.students.getAll(),
+          api.scores.getAll(),
+          api.subjects.getAll(),
+          api.exams.getAll()
+        ]);
+        const me = stus.find((s: Student) => s.name === (currentUser?.trueName || currentUser?.username));
+        setStudent(me || null);
+        setScores(scs);
+        setSubjects(subs);
+        setExams(exs);
+      } catch (e) {
+        console.error(e);
+      } finally {
+        setLoading(false);
+      }
+    };
+    loadData();
+  }, []);
+
+  const getStudentRadar = () => {
+      if (!student) return [];
+      const stuScores = scores.filter(s => s.studentNo === student.studentNo && s.status === 'Normal');
+      return subjects.map(sub => {
+         const subScores = stuScores.filter(s => s.courseName === sub.name);
+         const avg = subScores.length ? subScores.reduce((a,b)=>a+b.score,0)/subScores.length : 0;
+         return { subject: sub.name, score: Number(avg.toFixed(1)), fullMark: 100 };
+      });
+  };
+
+  const getStudentTrend = () => {
+     if (!student) return [];
+     const stuScores = scores.filter(s => s.studentNo === student.studentNo && s.status === 'Normal');
+     const uniqueExamNames = Array.from(new Set(stuScores.map(s => s.examName || s.type)));
+     uniqueExamNames.sort((a, b) => {
+        const dateA = exams.find(e => e.name === a)?.date || '9999-99-99';
+        const dateB = exams.find(e => e.name === b)?.date || '9999-99-99';
+        return dateA.localeCompare(dateB);
+     });
+     return uniqueExamNames.map(exam => {
+        const s = stuScores.find(s => (s.examName || s.type) === exam);
+        return { name: exam, score: s ? s.score : 0 };
+     });
+  };
+
+  if (loading) return <div className="flex justify-center py-20"><Loader2 className="animate-spin text-blue-600"/></div>;
+  if (!student) return <div className="text-center py-20 text-gray-500">暂无学生档案信息，请联系老师关联账号。</div>;
+
+  return (
+    <div className="space-y-6">
+      <div className="bg-blue-600 rounded-xl p-6 text-white shadow-lg">
+         <h2 className="text-2xl font-bold mb-1">我的成绩分析</h2>
+         <p className="opacity-90 flex items-center"><Lock size={14} className="mr-1"/> 仅自己可见</p>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div className="bg-white border border-gray-100 rounded-xl p-6 shadow-sm">
+             <h3 className="font-bold text-gray-800 mb-4 text-center">学科能力模型</h3>
+             <div className="h-72">
+                <ResponsiveContainer width="100%" height="100%">
+                   <RadarChart cx="50%" cy="50%" outerRadius="70%" data={getStudentRadar()}>
+                      <PolarGrid />
+                      <PolarAngleAxis dataKey="subject" />
+                      <PolarRadiusAxis angle={30} domain={[0, 100]} />
+                      <Radar name={student.name} dataKey="score" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
+                      <Tooltip />
+                   </RadarChart>
+                </ResponsiveContainer>
+             </div>
+          </div>
+          <div className="bg-white border border-gray-100 rounded-xl p-6 shadow-sm">
+             <h3 className="font-bold text-gray-800 mb-4 text-center">综合成绩走势</h3>
+             <div className="h-72">
+                <ResponsiveContainer width="100%" height="100%">
+                   <LineChart data={getStudentTrend()}>
+                      <CartesianGrid strokeDasharray="3 3" vertical={false}/>
+                      <XAxis dataKey="name" />
+                      <YAxis domain={[0, 100]}/>
+                      <Tooltip />
+                      <Line type="monotone" dataKey="score" stroke="#2563eb" strokeWidth={3} activeDot={{r:6}} />
+                   </LineChart>
+                </ResponsiveContainer>
+             </div>
+          </div>
+      </div>
+    </div>
+  );
+};

pages/TeacherReports.tsx

@@ -0,0 +1,385 @@
+
+import React, { useState, useEffect } from 'react';
+import { 
+  BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, 
+  LineChart, Line, AreaChart, Area, RadarChart, Radar, PolarGrid, PolarAngleAxis, PolarRadiusAxis, ScatterChart, Scatter, ZAxis
+} from 'recharts';
+import { api } from '../services/api';
+import { Loader2, Filter, TrendingUp, Grid, BarChart2, User, PieChart as PieChartIcon } from 'lucide-react';
+import { Score, Student, ClassInfo, Subject, Exam } from '../types';
+
+const localSortGrades = (a: string, b: string) => {
+    const order: Record<string, number> = { '一年级': 1, '二年级': 2, '三年级': 3, '四年级': 4, '五年级': 5, '六年级': 6, '初一': 7, '七年级': 7, '初二': 8, '八年级': 8, '初三': 9, '九年级': 9, '高一': 10, '高二': 11, '高三': 12 };
+    return (order[a] || 99) - (order[b] || 99);
+};
+
+export const TeacherReports: React.FC = () => {
+  const [loading, setLoading] = useState(true);
+  const [activeTab, setActiveTab] = useState<'overview' | 'grade' | 'trend' | 'matrix' | 'student'>('overview');
+  
+  const [scores, setScores] = useState<Score[]>([]);
+  const [students, setStudents] = useState<Student[]>([]);
+  const [classes, setClasses] = useState<ClassInfo[]>([]);
+  const [subjects, setSubjects] = useState<Subject[]>([]);
+  const [exams, setExams] = useState<Exam[]>([]);
+
+  const [selectedGrade, setSelectedGrade] = useState<string>('六年级');
+  const [selectedClass, setSelectedClass] = useState<string>(''); 
+  const [selectedSubject, setSelectedSubject] = useState<string>(''); 
+
+  const [gradeAnalysisData, setGradeAnalysisData] = useState<any[]>([]);
+  const [trendData, setTrendData] = useState<any[]>([]);
+  const [matrixData, setMatrixData] = useState<any[]>([]);
+  const [overviewData, setOverviewData] = useState<any>({});
+
+  const [selectedStudent, setSelectedStudent] = useState<Student | null>(null);
+
+  useEffect(() => {
+    const loadData = async () => {
+      setLoading(true);
+      try {
+        const [scs, stus, cls, subs, exs] = await Promise.all([
+          api.scores.getAll(),
+          api.students.getAll(),
+          api.classes.getAll(),
+          api.subjects.getAll(),
+          api.exams.getAll()
+        ]) as [Score[], Student[], ClassInfo[], Subject[], Exam[]];
+
+        setScores(scs);
+        setStudents(stus);
+        setClasses(cls);
+        setSubjects(subs);
+        setExams(exs);
+        
+        if (cls.length > 0) setSelectedClass(cls[0].grade + cls[0].className);
+        if (subs.length > 0) setSelectedSubject(subs[0].name);
+        
+        // Init view grade
+        const grades = Array.from(new Set(cls.map((c: ClassInfo) => c.grade))).sort(localSortGrades);
+        if (grades.length > 0) setSelectedGrade(grades[0]);
+
+      } catch (e) { console.error(e); } 
+      finally { setLoading(false); }
+    };
+    loadData();
+  }, []);
+
+  useEffect(() => {
+    if (scores.length === 0 || students.length === 0) return;
+
+    // --- Overview Logic ---
+    const normalScores = scores.filter(s => s.status === 'Normal');
+    const totalAvg = normalScores.length ? normalScores.reduce((a,b)=>a+b.score,0)/normalScores.length : 0;
+    const totalPass = normalScores.filter(s => s.score >= 60).length;
+    const passRate = normalScores.length ? (totalPass / normalScores.length)*100 : 0;
+    
+    const uniqueGradesList = Array.from(new Set(classes.map(c => c.grade))).sort(localSortGrades);
+    const ladderData = uniqueGradesList.map(g => {
+        const gradeClasses = classes.filter(c => c.grade === g).map(c => c.grade+c.className);
+        const gradeStus = students.filter(s => gradeClasses.includes(s.className)).map(s => s.studentNo);
+        const gradeScores = normalScores.filter(s => gradeStus.includes(s.studentNo));
+        const gAvg = gradeScores.length ? gradeScores.reduce((a,b)=>a+b.score,0)/gradeScores.length : 0;
+        return { name: g, 平均分: Number(gAvg.toFixed(1)) };
+    });
+
+    const subDist = subjects.map(sub => {
+        const subScores = normalScores.filter(s => s.courseName === sub.name);
+        const sAvg = subScores.length ? subScores.reduce((a,b)=>a+b.score,0)/subScores.length : 0;
+        return { name: sub.name, value: Number(sAvg.toFixed(1)), color: sub.color };
+    });
+
+    setOverviewData({
+        totalStudents: students.length,
+        avgScore: Number(totalAvg.toFixed(1)),
+        passRate: Number(passRate.toFixed(1)),
+        gradeLadder: ladderData,
+        subjectDist: subDist
+    });
+
+    // --- Grade Analysis ---
+    const gradeClasses = classes.filter(c => c.grade === selectedGrade);
+    const gaData = gradeClasses.map(cls => {
+        const fullClassName = cls.grade + cls.className;
+        const classStudentIds = students.filter(s => s.className === fullClassName).map(s => s.studentNo);
+        const classScores = scores.filter(s => classStudentIds.includes(s.studentNo) && s.status === 'Normal');
+        const totalScore = classScores.reduce((sum, s) => sum + s.score, 0);
+        const avg = classScores.length ? (totalScore / classScores.length) : 0;
+        const passed = classScores.filter(s => s.score >= 60).length;
+        const passRate = classScores.length ? (passed / classScores.length) * 100 : 0;
+        const excellent = classScores.filter(s => {
+            const sub = subjects.find(sub => sub.name === s.courseName);
+            return s.score >= (sub?.excellenceThreshold || 90);
+        }).length;
+        const excellentRate = classScores.length ? (excellent / classScores.length) * 100 : 0;
+        return { name: cls.className, fullName: fullClassName, 平均分: Number(avg.toFixed(1)), 及格率: Number(passRate.toFixed(1)), 优秀率: Number(excellentRate.toFixed(1)) };
+    });
+    setGradeAnalysisData(gaData);
+
+    // --- Trend Analysis ---
+    if (selectedClass && selectedSubject) {
+        const classStudentIds = students.filter(s => s.className === selectedClass).map(s => s.studentNo);
+        const uniqueExamNames = Array.from(new Set(scores.map(s => s.examName || s.type)));
+        uniqueExamNames.sort((a, b) => {
+            const dateA = exams.find(e => e.name === a)?.date || '9999-99-99';
+            const dateB = exams.find(e => e.name === b)?.date || '9999-99-99';
+            return dateA.localeCompare(dateB);
+        });
+        const tData = uniqueExamNames.map(exam => {
+            const examScores = scores.filter(s => (s.examName === exam || s.type === exam) && s.courseName === selectedSubject && s.status === 'Normal');
+            const classExamScores = examScores.filter(s => classStudentIds.includes(s.studentNo));
+            const classAvg = classExamScores.length ? classExamScores.reduce((a,b)=>a+b.score,0) / classExamScores.length : 0;
+            const currentGrade = classes.find(c => c.grade + c.className === selectedClass)?.grade || '';
+            const gradeStudentIds = students.filter(s => s.className.startsWith(currentGrade)).map(s => s.studentNo);
+            const gradeExamScores = examScores.filter(s => gradeStudentIds.includes(s.studentNo));
+            const gradeAvg = gradeExamScores.length ? gradeExamScores.reduce((a,b)=>a+b.score,0) / gradeExamScores.length : 0;
+            return { name: exam, 班级平均: Number(classAvg.toFixed(1)), 年级平均: Number(gradeAvg.toFixed(1)) };
+        });
+        setTrendData(tData);
+    }
+
+    // --- Matrix (Scatter) ---
+    // Show distribution of scores for selected Grade + Subject
+    if (selectedGrade) {
+        const relevantClasses = classes.filter(c => c.grade === selectedGrade).map(c => c.grade+c.className);
+        // We will average score per class per subject
+        // Just mocking a complex chart: Average Score vs Variance? Or Pass Rate vs Excellent Rate
+        const mData = relevantClasses.map(cName => {
+            const sIds = students.filter(s => s.className === cName).map(s => s.studentNo);
+            const cScores = normalScores.filter(s => sIds.includes(s.studentNo));
+            if (cScores.length === 0) return { name: cName, x: 0, y: 0, z: 0 };
+            
+            const avg = cScores.reduce((a,b)=>a+b.score,0)/cScores.length;
+            const pass = cScores.filter(s=>s.score>=60).length / cScores.length * 100;
+            const excellent = cScores.filter(s=>s.score>=90).length / cScores.length * 100;
+            
+            return { name: cName.replace(selectedGrade,''), x: Number(avg.toFixed(1)), y: Number(pass.toFixed(1)), z: Number(excellent.toFixed(1)) };
+        });
+        setMatrixData(mData);
+    }
+
+  }, [scores, students, classes, subjects, exams, selectedGrade, selectedClass, selectedSubject]);
+
+  const getStudentRadar = (studentNo: string) => {
+      const stuScores = scores.filter(s => s.studentNo === studentNo && s.status === 'Normal');
+      return subjects.map(sub => {
+         const subScores = stuScores.filter(s => s.courseName === sub.name);
+         const avg = subScores.length ? subScores.reduce((a,b)=>a+b.score,0)/subScores.length : 0;
+         return { subject: sub.name, score: Number(avg.toFixed(1)), fullMark: 100 };
+      });
+  };
+
+  const getStudentTrend = (studentNo: string) => {
+     const stuScores = scores.filter(s => s.studentNo === studentNo && s.status === 'Normal');
+     const uniqueExamNames = Array.from(new Set(stuScores.map(s => s.examName || s.type)));
+     uniqueExamNames.sort((a, b) => {
+        const dateA = exams.find(e => e.name === a)?.date || '9999-99-99';
+        const dateB = exams.find(e => e.name === b)?.date || '9999-99-99';
+        return dateA.localeCompare(dateB);
+     });
+     return uniqueExamNames.map(exam => {
+        const s = stuScores.find(s => (s.examName || s.type) === exam);
+        return { name: exam, score: s ? s.score : 0 };
+     });
+  };
+
+  const uniqueGrades = Array.from(new Set(classes.map(c => c.grade))).sort(localSortGrades);
+  const allClasses = classes.map(c => c.grade + c.className);
+  
+  // Filter students for "Student Focus" tab
+  const focusStudents = students.filter(s => selectedClass ? s.className === selectedClass : true);
+
+  if (loading) return <div className="flex justify-center py-20"><Loader2 className="animate-spin text-blue-600"/></div>;
+
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+         <h2 className="text-xl font-bold text-gray-800">教务数据分析中心</h2>
+      </div>
+
+      <div className="flex space-x-1 bg-gray-100 p-1 rounded-xl w-full md:w-auto overflow-x-auto">
+         {[
+            { id: 'overview', label: '全校概览', icon: PieChartIcon },
+            { id: 'grade', label: '年级横向分析', icon: BarChart2 },
+            { id: 'trend', label: '教学成长轨迹', icon: TrendingUp },
+            { id: 'matrix', label: '学科质量透视', icon: Grid },
+            { id: 'student', label: '学生个像', icon: User },
+         ].map(tab => (
+            <button
+               key={tab.id}
+               onClick={() => setActiveTab(tab.id as any)}
+               className={`flex items-center space-x-2 px-4 py-2 rounded-lg text-sm font-medium transition-all whitespace-nowrap ${
+                  activeTab === tab.id ? 'bg-white text-blue-600 shadow-sm' : 'text-gray-500 hover:text-gray-700'
+               }`}
+            >
+               <tab.icon size={16}/>
+               <span>{tab.label}</span>
+            </button>
+         ))}
+      </div>
+
+      <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 min-h-[500px]">
+         {/* Filters */}
+         {activeTab !== 'overview' && (
+            <div className="flex flex-wrap gap-4 mb-8 items-center bg-gray-50 p-4 rounded-lg">
+                <div className="flex items-center text-sm font-bold text-gray-500"><Filter size={16} className="mr-2"/> 筛选维度:</div>
+                {(activeTab === 'grade' || activeTab === 'matrix') && (
+                <select className="border border-gray-300 p-2 rounded text-sm text-gray-800" value={selectedGrade} onChange={e => setSelectedGrade(e.target.value)}>
+                    {uniqueGrades.map(g => <option key={g} value={g}>{g}</option>)}
+                </select>
+                )}
+                {(activeTab === 'trend' || activeTab === 'student') && (
+                <select className="border border-gray-300 p-2 rounded text-sm text-gray-800" value={selectedClass} onChange={e => setSelectedClass(e.target.value)}>
+                    <option value="">-- 选择班级 --</option>
+                    {allClasses.map(c => <option key={c} value={c}>{c}</option>)}
+                </select>
+                )}
+                {activeTab === 'trend' && (
+                <select className="border border-gray-300 p-2 rounded text-sm text-gray-800" value={selectedSubject} onChange={e => setSelectedSubject(e.target.value)}>
+                    {subjects.map(s => <option key={s._id} value={s.name}>{s.name}</option>)}
+                </select>
+                )}
+            </div>
+         )}
+
+         {/* 1. Overview */}
+         {activeTab === 'overview' && (
+             <div className="animate-in fade-in space-y-8">
+                 <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div className="bg-blue-50 p-6 rounded-xl border border-blue-100">
+                       <p className="text-gray-500 text-sm font-medium mb-1">全校总人数</p>
+                       <h3 className="text-3xl font-bold text-blue-700">{overviewData.totalStudents}</h3>
+                    </div>
+                    <div className="bg-violet-50 p-6 rounded-xl border border-violet-100">
+                       <p className="text-gray-500 text-sm font-medium mb-1">全校综合平均分</p>
+                       <h3 className="text-3xl font-bold text-violet-700">{overviewData.avgScore}</h3>
+                    </div>
+                    <div className="bg-emerald-50 p-6 rounded-xl border border-emerald-100">
+                       <p className="text-gray-500 text-sm font-medium mb-1">综合及格率</p>
+                       <h3 className="text-3xl font-bold text-emerald-700">{overviewData.passRate}%</h3>
+                    </div>
+                 </div>
+                 <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    <div className="bg-white p-4 rounded-lg border border-gray-100 shadow-sm">
+                       <h3 className="font-bold text-gray-800 mb-4 text-center">各年级平均分阶梯</h3>
+                       <div className="h-72">
+                          <ResponsiveContainer width="100%" height="100%">
+                             <AreaChart data={overviewData.gradeLadder}>
+                                <defs><linearGradient id="colorAvg" x1="0" y1="0" x2="0" y2="1"><stop offset="5%" stopColor="#8884d8" stopOpacity={0.8}/><stop offset="95%" stopColor="#8884d8" stopOpacity={0}/></linearGradient></defs>
+                                <XAxis dataKey="name" /><YAxis domain={[0, 100]}/>
+                                <CartesianGrid strokeDasharray="3 3" vertical={false} /><Tooltip />
+                                <Area type="monotone" dataKey="平均分" stroke="#8884d8" fillOpacity={1} fill="url(#colorAvg)" />
+                             </AreaChart>
+                          </ResponsiveContainer>
+                       </div>
+                    </div>
+                    {/* Add more overview charts if needed */}
+                 </div>
+             </div>
+         )}
+
+         {/* 2. Grade Analysis */}
+         {activeTab === 'grade' && (
+             <div className="h-96 animate-in fade-in">
+                <ResponsiveContainer width="100%" height="100%">
+                   <BarChart data={gradeAnalysisData} layout="vertical" margin={{left: 40}}>
+                      <CartesianGrid strokeDasharray="3 3" horizontal={true} vertical={false}/>
+                      <XAxis type="number" domain={[0, 100]} />
+                      <YAxis dataKey="name" type="category" width={80}/>
+                      <Tooltip cursor={{fill: 'transparent'}}/>
+                      <Legend />
+                      <Bar dataKey="平均分" fill="#3b82f6" radius={[0, 4, 4, 0]} barSize={20} name="平均分"/>
+                      <Bar dataKey="及格率" fill="#10b981" radius={[0, 4, 4, 0]} barSize={20} name="及格率%"/>
+                      <Bar dataKey="优秀率" fill="#f59e0b" radius={[0, 4, 4, 0]} barSize={20} name="优秀率%"/>
+                   </BarChart>
+                </ResponsiveContainer>
+             </div>
+         )}
+
+         {/* 3. Trend */}
+         {activeTab === 'trend' && (
+             <div className="h-96 animate-in fade-in">
+                {trendData.length > 0 ? (
+                <ResponsiveContainer width="100%" height="100%">
+                   <LineChart data={trendData}>
+                      <CartesianGrid strokeDasharray="3 3" vertical={false}/>
+                      <XAxis dataKey="name" />
+                      <YAxis domain={[0, 100]} />
+                      <Tooltip />
+                      <Legend />
+                      <Line type="monotone" dataKey="班级平均" stroke="#2563eb" strokeWidth={3} activeDot={{ r: 8 }} />
+                      <Line type="monotone" dataKey="年级平均" stroke="#9ca3af" strokeWidth={2} strokeDasharray="5 5" />
+                   </LineChart>
+                </ResponsiveContainer>
+                ) : <div className="flex h-full items-center justify-center text-gray-400">请选择班级和学科以查看趋势</div>}
+             </div>
+         )}
+
+         {/* 4. Matrix (Scatter) - Restored */}
+         {activeTab === 'matrix' && (
+             <div className="h-96 animate-in fade-in">
+                <div className="text-center text-sm text-gray-500 mb-2">X轴: 平均分 | Y轴: 及格率 | 气泡大小: 优秀率</div>
+                <ResponsiveContainer width="100%" height="100%">
+                   <ScatterChart margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
+                      <CartesianGrid />
+                      <XAxis type="number" dataKey="x" name="平均分" unit="分" domain={[0, 100]} />
+                      <YAxis type="number" dataKey="y" name="及格率" unit="%" domain={[0, 100]} />
+                      <ZAxis type="number" dataKey="z" range={[50, 400]} name="优秀率" unit="%" />
+                      <Tooltip cursor={{ strokeDasharray: '3 3' }} />
+                      <Legend />
+                      <Scatter name="各班级表现" data={matrixData} fill="#8884d8" />
+                   </ScatterChart>
+                </ResponsiveContainer>
+             </div>
+         )}
+
+         {/* 5. Student Individual */}
+         {activeTab === 'student' && (
+             <div className="animate-in fade-in">
+                {!selectedStudent ? (
+                    <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
+                       {focusStudents.map((s: Student) => (
+                          <div 
+                            key={s._id} 
+                            onClick={() => setSelectedStudent(s)}
+                            className="bg-white border border-gray-200 p-4 rounded-xl cursor-pointer hover:shadow-lg hover:border-blue-400 transition-all group text-center"
+                          >
+                             <div className={`w-12 h-12 mx-auto rounded-full flex items-center justify-center font-bold text-white text-lg mb-2 ${s.gender === 'Female' ? 'bg-pink-400' : 'bg-blue-400'}`}>
+                                {s.name[0]}
+                             </div>
+                             <h4 className="font-bold text-gray-800 group-hover:text-blue-600 truncate">{s.name}</h4>
+                             <p className="text-xs text-gray-500 font-mono truncate">{s.studentNo}</p>
+                          </div>
+                       ))}
+                       {focusStudents.length === 0 && <div className="col-span-full text-center py-10 text-gray-400">请先选择班级</div>}
+                    </div>
+                ) : (
+                    <div className="space-y-6">
+                       <button onClick={() => setSelectedStudent(null)} className="text-sm text-blue-600 hover:underline mb-4">&larr; 返回学生列表</button>
+                       <div className="bg-gray-50 p-4 rounded-xl border border-gray-200 mb-6 flex items-center gap-4">
+                          <div className={`w-16 h-16 rounded-full flex items-center justify-center text-2xl font-bold text-white ${selectedStudent.gender === 'Female' ? 'bg-pink-500' : 'bg-blue-500'}`}>
+                             {selectedStudent.name[0]}
+                          </div>
+                          <div>
+                             <h2 className="text-2xl font-bold text-gray-900">{selectedStudent.name}</h2>
+                             <p className="text-gray-500">{selectedStudent.className} | {selectedStudent.studentNo}</p>
+                          </div>
+                       </div>
+                       <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                          <div className="h-72 bg-white p-4 rounded-xl border shadow-sm">
+                             <h3 className="text-center font-bold text-gray-700 mb-2">学科能力雷达</h3>
+                             <ResponsiveContainer><RadarChart data={getStudentRadar(selectedStudent.studentNo)}><PolarGrid/><PolarAngleAxis dataKey="subject"/><PolarRadiusAxis angle={30} domain={[0,100]}/><Radar dataKey="score" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6}/><Tooltip/></RadarChart></ResponsiveContainer>
+                          </div>
+                          <div className="h-72 bg-white p-4 rounded-xl border shadow-sm">
+                             <h3 className="text-center font-bold text-gray-700 mb-2">成绩走势</h3>
+                             <ResponsiveContainer><LineChart data={getStudentTrend(selectedStudent.studentNo)}><CartesianGrid vertical={false}/><XAxis dataKey="name"/><YAxis domain={[0,100]}/><Tooltip/><Line type="monotone" dataKey="score" stroke="#2563eb" strokeWidth={3}/></LineChart></ResponsiveContainer>
+                          </div>
+                       </div>
+                    </div>
+                )}
+             </div>
+         )}
+      </div>
+    </div>
+  );
+};

server.js

@@ -786,10 +786,42 @@ app.post('/api/games/lucky-draw', async (req, res) => {
    }
 });
 
+// Grant Draw Count Manually
+app.post('/api/games/grant-draw', async (req, res) => {
+   const { studentId, count } = req.body;
+   const schoolId = req.headers['x-school-id'];
+   try {
+      if(InMemoryDB.isFallback) return res.json({success:true});
+      
+      const student = await Student.findById(studentId);
+      if(!student) return res.status(404).json({error: '学生未找到'});
+
+      await Student.findByIdAndUpdate(studentId, { $inc: { drawAttempts: count } });
+      
+      // Log as reward
+      await StudentRewardModel.create({
+         schoolId,
+         studentId,
+         studentName: student.name,
+         rewardType: 'DRAW_COUNT',
+         name: `老师发放 ${count} 次`,
+         status: 'REDEEMED',
+         source: '教师发放'
+      });
+      
+      res.json({ success: true });
+   } catch(e) { res.status(500).json({error: e.message}); }
+});
+
 app.get('/api/rewards', async (req, res) => {
-   const { studentId } = req.query;
-   const filter = { ...getQueryFilter(req), studentId };
-   if (InMemoryDB.isFallback) return res.json(InMemoryDB.rewards.filter(r => r.studentId === studentId));
+   const { studentId, scope } = req.query;
+   const filter = getQueryFilter(req);
+   if (studentId) filter.studentId = studentId;
+   
+   // If teacher requests class scope (in frontend we usually filter, but backend support helps)
+   // NOTE: Simple implementation: return all school rewards for teacher role, let frontend filter by class for now, or improve query later.
+   
+   if (InMemoryDB.isFallback) return res.json(InMemoryDB.rewards.filter(r => !studentId || r.studentId === studentId));
    res.json(await StudentRewardModel.find(filter).sort({ createTime: -1 }));
 });
 app.post('/api/rewards', async (req, res) => {

services/api.ts

@@ -1,3 +1,4 @@
+
 import { User, ClassInfo, SystemConfig, Subject, School, Schedule, GameSession, StudentReward, LuckyDrawConfig } from '../types';
 
 const getBaseUrl = () => {
@@ -169,9 +170,12 @@ export const api = {
     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 }) }),
+    grantDrawCount: (studentId: string, count: number) => request('/games/grant-draw', { method: 'POST', body: JSON.stringify({ studentId, count }) }),
   },
   rewards: {
     getMyRewards: (studentId: string) => request(`/rewards?studentId=${studentId}`),
+    // For teachers to get class rewards, we can use the same endpoint but passing a filter in backend or allow listing all
+    getClassRewards: () => request('/rewards?scope=class'), 
     addReward: (data: Partial<StudentReward>) => request('/rewards', { method: 'POST', body: JSON.stringify(data) }),
     redeem: (id: string) => request(`/rewards/${id}/redeem`, { method: 'POST' }),
     consumeDraw: (studentId: string) => request(`/rewards/consume-draw`, { method: 'POST', body: JSON.stringify({ studentId }) })
@@ -180,4 +184,4 @@ export const api = {
   batchDelete: (type: 'student' | 'score' | 'user', ids: string[]) => {
     return request('/batch-delete', { method: 'POST', body: JSON.stringify({ type, ids }) });
   }
-};
+};