Update pages/Reports.tsx

pages/Reports.tsx

@@ -1,45 +1,56 @@
 import React, { useState, useEffect } from 'react';
 import { 
   BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, 
-  LineChart, Line, AreaChart, Area, PieChart as RePieChart, Pie, Cell, RadarChart, Radar, PolarGrid, PolarAngleAxis, PolarRadiusAxis 
+  LineChart, Line, AreaChart, Area, RadarChart, Radar, PolarGrid, PolarAngleAxis, PolarRadiusAxis 
 } from 'recharts';
 import { api } from '../services/api';
 import { Loader2, Download, Filter, TrendingUp, Grid, BarChart2, User, PieChart as PieChartIcon } from 'lucide-react';
-import { Score, Student, ClassInfo, Subject, Exam } from '../types';
+import { Score, Student, ClassInfo, Subject, Exam, UserRole } from '../types';
+
+// 排序辅助
+const gradeOrder: Record<string, number> = { '一年级': 1, '二年级': 2, '三年级': 3, '四年级': 4, '五年级': 5, '六年级': 6, '初一': 7, '七年级': 7, '初二': 8, '八年级': 8, '初三': 9, '九年级': 9, '高一': 10, '高二': 11, '高三': 12 };
+const sortGrades = (a: string, b: string) => (gradeOrder[a] || 99) - (gradeOrder[b] || 99);
+const sortClasses = (a: string, b: string) => a.localeCompare(b, 'zh-CN', { numeric: true });
 
 export const Reports: React.FC = () => {
   const [loading, setLoading] = useState(true);
   const [activeTab, setActiveTab] = useState<'overview' | 'grade' | 'trend' | 'matrix' | 'student'>('overview');
   
-  // Data
-  const [scores, setScores] = useState<Score[]>([]);
+  // Raw Data
+  const [rawScores, setRawScores] = useState<Score[]>([]);
   const [students, setStudents] = useState<Student[]>([]);
-  const [classes, setClasses] = useState<ClassInfo[]>([]);
+  const [rawClasses, setRawClasses] = useState<ClassInfo[]>([]);
   const [subjects, setSubjects] = useState<Subject[]>([]);
   const [exams, setExams] = useState<Exam[]>([]);
 
+  // Derived/Filtered Data for Display
+  const [scores, setScores] = useState<Score[]>([]);
+  const [classes, setClasses] = useState<ClassInfo[]>([]);
+
   // Filters
-  const [selectedGrade, setSelectedGrade] = useState<string>('六年级');
-  const [selectedClass, setSelectedClass] = useState<string>(''); // For Trend/Student
-  const [selectedSubject, setSelectedSubject] = useState<string>(''); // For Trend
+  const [selectedGrade, setSelectedGrade] = useState<string>('');
+  const [selectedClass, setSelectedClass] = useState<string>(''); 
+  const [selectedSubject, setSelectedSubject] = useState<string>(''); 
 
-  // Computed Data
+  // Computed Chart Data
   const [gradeAnalysisData, setGradeAnalysisData] = useState<any[]>([]);
   const [trendData, setTrendData] = useState<any[]>([]);
   const [matrixData, setMatrixData] = useState<any[]>([]);
+  const [overviewData, setOverviewData] = useState<any>({ totalStudents: 0, avgScore: 0, passRate: 0, gradeLadder: [], subjectDist: [] });
 
-  // Overview Data
-  const [overviewData, setOverviewData] = useState<{
-     totalStudents: number;
-     avgScore: number;
-     passRate: number;
-     gradeLadder: any[];
-     subjectDist: any[];
-  }>({ totalStudents: 0, avgScore: 0, passRate: 0, gradeLadder: [], subjectDist: [] });
-
-  // Student Focus State
+  // Student Focus
   const [selectedStudent, setSelectedStudent] = useState<Student | null>(null);
 
+  const currentUser = api.auth.getCurrentUser();
+  const isTeacher = currentUser?.role === UserRole.TEACHER;
+
+  useEffect(() => {
+    // If teacher, default to 'grade' view as 'overview' is hidden
+    if (isTeacher && activeTab === 'overview') {
+       setActiveTab('grade');
+    }
+  }, [isTeacher]);
+
   useEffect(() => {
     const loadData = async () => {
       setLoading(true);
@@ -51,65 +62,115 @@ export const Reports: React.FC = () => {
           api.subjects.getAll(),
           api.exams.getAll()
         ]);
-        setScores(scs);
+        setRawScores(scs);
         setStudents(stus);
-        setClasses(cls);
+        setRawClasses(cls);
         setSubjects(subs);
         setExams(exs);
         
-        // Set Defaults
-        if (cls.length > 0) setSelectedClass(cls[0].grade + cls[0].className);
+        // Initial Defaults
         if (subs.length > 0) setSelectedSubject(subs[0].name);
-      } catch (e) {
-        console.error(e);
-      } finally {
-        setLoading(false);
-      }
+      } catch (e) { console.error(e); } 
+      finally { setLoading(false); }
     };
     loadData();
   }, []);
 
-  // Compute Metrics whenever filters or data change
+  // Filter Data based on Role
   useEffect(() => {
-    if (scores.length === 0 || students.length === 0) return;
+     if (rawScores.length === 0 || rawClasses.length === 0) return;
+
+     let filteredScores = rawScores;
+     let filteredClasses = rawClasses;
+
+     if (isTeacher) {
+        // Teacher Filter Logic:
+        // 1. Scores where student is in Homeroom Class
+        // 2. Scores where subject is Teaching Subject
+        const mySubject = currentUser.teachingSubject;
+        const myHomeroom = currentUser.homeroomClass;
+
+        filteredScores = rawScores.filter(s => {
+           // Find student to check class
+           const stu = students.find(st => st.studentNo === s.studentNo);
+           if (!stu) return false;
+           
+           const isMyHomeroomStudent = myHomeroom && stu.className === myHomeroom;
+           const isMySubjectScore = mySubject && s.courseName === mySubject;
+           
+           return isMyHomeroomStudent || isMySubjectScore;
+        });
+
+        // Determine relevant classes based on filtered scores + homeroom
+        const relevantClassNames = new Set(filteredScores.map(s => {
+           const stu = students.find(st => st.studentNo === s.studentNo);
+           return stu ? stu.className : null;
+        }).filter(Boolean));
+        
+        if (myHomeroom) relevantClassNames.add(myHomeroom);
 
-    // --- 0. Overview Calculations ---
-    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;
-    
-    // Grade Ladder (Avg score by grade)
-    const uniqueGradesList = Array.from(new Set(classes.map(c => c.grade))).sort();
-    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)) };
-    });
+        filteredClasses = rawClasses.filter(c => relevantClassNames.has(c.grade + c.className));
+     }
 
-    // Subject Distribution
-    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 };
-    });
+     setScores(filteredScores);
+     setClasses(filteredClasses);
 
-    setOverviewData({
-       totalStudents: students.length,
-       avgScore: Number(totalAvg.toFixed(1)),
-       passRate: Number(passRate.toFixed(1)),
-       gradeLadder: ladderData,
-       subjectDist: subDist
-    });
+     // Set default filters if not set or invalid
+     const validGrades = Array.from(new Set(filteredClasses.map(c => c.grade))).sort(sortGrades);
+     if (!selectedGrade || !validGrades.includes(selectedGrade)) {
+        if (validGrades.length > 0) setSelectedGrade(validGrades[0]);
+     }
+
+     const validClasses = filteredClasses.map(c => c.grade + c.className);
+     if (!selectedClass || !validClasses.includes(selectedClass)) {
+        if (validClasses.length > 0) setSelectedClass(validClasses[0]);
+     }
 
+  }, [rawScores, rawClasses, students, isTeacher]);
+
+
+  // Compute Metrics
+  useEffect(() => {
+    if (scores.length === 0 && !isTeacher) return; // Allow teachers to see empty states
 
-    // --- 1. Grade Analysis (Horizontal Class Comparison) ---
+    const normalScores = scores.filter(s => s.status === 'Normal');
+    
+    // --- Overview (Admin Only) ---
+    if (!isTeacher) {
+        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(sortGrades);
+        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 classStudents = students.filter(s => s.className === fullClassName);
+      const classStudentIds = classStudents.map(s => s.studentNo);
       
       const classScores = scores.filter(s => classStudentIds.includes(s.studentNo) && s.status === 'Normal');
       
@@ -120,32 +181,27 @@ export const Reports: React.FC = () => {
       const passRate = classScores.length ? (passed / classScores.length) * 100 : 0;
       
       const excellent = classScores.filter(s => {
-         // Find subject threshold
          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, // Label X-axis with just class name to save space
+        name: cls.className,
         fullName: fullClassName,
         平均分: Number(avg.toFixed(1)),
         及格率: Number(passRate.toFixed(1)),
         优秀率: Number(excellentRate.toFixed(1)),
-        studentCount: classStudentIds.length
+        studentCount: classStudents.length
       };
     });
     setGradeAnalysisData(gaData);
 
-
-    // --- 2. Trend Analysis (Time/Exam based) ---
-    // Group by Exam Name or Type. Sort using Exam Dates if available.
+    // --- Trend ---
     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)));
       
-      // Sort exams by date
       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';
@@ -153,48 +209,31 @@ export const Reports: React.FC = () => {
       });
 
       const tData = uniqueExamNames.map(exam => {
-         const examScores = scores.filter(s => 
-            (s.examName === exam || s.type === exam) && 
-            s.courseName === selectedSubject &&
-            s.status === 'Normal'
-         );
+         const examScores = scores.filter(s => (s.examName === exam || s.type === exam) && s.courseName === selectedSubject && s.status === 'Normal');
          
-         // Class Avg
          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 classAvg = classExamScores.length ? classExamScores.reduce((a,b)=>a+b.score,0) / classExamScores.length : 0;
 
-         // Grade Avg (for comparison)
+         // For Teacher, Grade Average might be restricted, but useful for comparison if allowed
+         // We calculate Grade Avg based on filtered scores (so only scores visible to teacher)
+         // If teacher sees all scores of subject, this is valid grade avg for that subject.
          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))
-         };
+         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);
     }
 
-    // --- 3. Subject Matrix (Heatmap Table) ---
+    // --- Matrix ---
     const mData = gradeClasses.map(cls => {
        const fullClassName = cls.grade + cls.className;
        const classStudentIds = students.filter(s => s.className === fullClassName).map(s => s.studentNo);
-       
        const row: any = { className: cls.className, fullName: fullClassName };
-       
        subjects.forEach(sub => {
-          const subScores = scores.filter(s => 
-             s.courseName === sub.name && 
-             classStudentIds.includes(s.studentNo) && 
-             s.status === 'Normal'
-          );
+          const subScores = scores.filter(s => s.courseName === sub.name && classStudentIds.includes(s.studentNo) && s.status === 'Normal');
           const avg = subScores.length ? subScores.reduce((a,b)=>a+b.score,0)/subScores.length : 0;
           row[sub.name] = Number(avg.toFixed(1));
        });
@@ -202,7 +241,7 @@ export const Reports: React.FC = () => {
     });
     setMatrixData(mData);
 
-  }, [scores, students, classes, subjects, exams, selectedGrade, selectedClass, selectedSubject]);
+  }, [scores, students, classes, subjects, exams, selectedGrade, selectedClass, selectedSubject, isTeacher]);
 
 
   const exportExcel = () => {
@@ -210,23 +249,14 @@ export const Reports: React.FC = () => {
     if (!window.XLSX) return alert('Excel 组件未加载');
     // @ts-ignore
     const XLSX = window.XLSX;
-
-    // Export current active tab data
-    let dataToExport: any[] = [];
-    if (activeTab === 'grade') dataToExport = gradeAnalysisData;
-    else if (activeTab === 'trend') dataToExport = trendData;
-    else if (activeTab === 'matrix') dataToExport = matrixData;
-    else dataToExport = gradeAnalysisData; // Default
-
+    let dataToExport: any[] = activeTab === 'grade' ? gradeAnalysisData : (activeTab === 'trend' ? trendData : matrixData);
     const ws = XLSX.utils.json_to_sheet(dataToExport);
     const wb = XLSX.utils.book_new();
     XLSX.utils.book_append_sheet(wb, ws, "Report");
-    XLSX.writeFile(wb, `Report_${activeTab}_${new Date().toISOString().slice(0,10)}.xlsx`);
+    XLSX.writeFile(wb, `Report_${activeTab}.xlsx`);
   };
 
-  // Helper for Student Focus
   const getStudentTrend = (studentNo: string) => {
-     // Get all scores for this student, grouped by exam, sorted by date
      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) => {
@@ -234,7 +264,6 @@ export const Reports: React.FC = () => {
         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 };
@@ -252,16 +281,11 @@ export const Reports: React.FC = () => {
 
   const getStudentAttendance = (studentNo: string) => {
       const all = scores.filter(s => s.studentNo === studentNo);
-      return {
-         absent: all.filter(s => s.status === 'Absent').length,
-         leave: all.filter(s => s.status === 'Leave').length
-      };
+      return { absent: all.filter(s => s.status === 'Absent').length, leave: all.filter(s => s.status === 'Leave').length };
   };
 
-  const uniqueGrades = Array.from(new Set(classes.map(c => c.grade))).sort();
-  const allClasses = classes.map(c => c.grade + c.className);
-  
-  // Student List for Focus Tab
+  const uniqueGrades = Array.from(new Set(classes.map(c => c.grade))).sort(sortGrades);
+  const allClasses = classes.map(c => c.grade + c.className).sort(sortClasses);
   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>;
@@ -271,7 +295,7 @@ export const Reports: React.FC = () => {
       <div className="flex flex-col md:flex-row justify-between items-center gap-4">
          <div>
             <h2 className="text-xl font-bold text-gray-800">教务数据分析中心</h2>
-            <p className="text-sm text-gray-500">基于 {scores.length} 条成绩数据分析</p>
+            <p className="text-sm text-gray-500">基于 {scores.length} 条成绩数据分析 {isTeacher && '(仅展示您相关班级/科目)'}</p>
          </div>
          <div className="flex gap-2">
             <button onClick={exportExcel} className="flex items-center space-x-2 px-4 py-2 bg-emerald-50 text-emerald-600 border border-emerald-200 rounded-lg text-sm hover:bg-emerald-100 transition-colors">
@@ -280,15 +304,14 @@ export const Reports: React.FC = () => {
          </div>
       </div>
 
-      {/* Tabs */}
       <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: 'overview', label: '全校概览', icon: PieChartIcon, hidden: isTeacher },
+            { id: 'grade', label: '年级分析', icon: BarChart2 },
+            { id: 'trend', label: '教学趋势', icon: TrendingUp },
+            { id: 'matrix', label: '质量透视', icon: Grid },
             { id: 'student', label: '学生个像', icon: User },
-         ].map(tab => (
+         ].filter(t => !t.hidden).map(tab => (
             <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id as any)}
@@ -302,23 +325,20 @@ export const Reports: React.FC = () => {
          ))}
       </div>
 
-      {/* Content Area */}
       <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 min-h-[500px]">
-         
-         {/* Filter Bar */}
          {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>
+                <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 focus:ring-2 focus:ring-blue-500" value={selectedGrade} onChange={e => setSelectedGrade(e.target.value)}>
-                    {uniqueGrades.map(g => <option key={g} value={g}>{g}</option>)}
+                <select className="border border-gray-300 p-2 rounded text-sm text-gray-800" value={selectedGrade} onChange={e => setSelectedGrade(e.target.value)}>
+                    {uniqueGrades.length > 0 ? uniqueGrades.map(g => <option key={g} value={g}>{g}</option>) : <option value="">暂无相关数据</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>)}
+                    {allClasses.length > 0 ? allClasses.map(c => <option key={c} value={c}>{c}</option>) : <option value="">暂无相关数据</option>}
                 </select>
                 )}
                 
@@ -330,10 +350,9 @@ export const Reports: React.FC = () => {
             </div>
          )}
 
-         {/* --- 0. Overview View --- */}
-         {activeTab === 'overview' && (
+         {/* Overview - Admin Only */}
+         {activeTab === 'overview' && !isTeacher && (
              <div className="animate-in fade-in space-y-8">
-                 {/* KPI Cards */}
                  <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>
@@ -348,256 +367,107 @@ export const Reports: React.FC = () => {
                        <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-8">
-                    {/* Grade Ladder */}
-                    <div className="bg-white p-4 rounded-lg border border-gray-100 shadow-sm">
+                    <div className="bg-white p-4 rounded-lg border border-gray-100 shadow-sm h-72">
                        <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>
+                       <ResponsiveContainer width="100%" height="100%">
+                          <AreaChart data={overviewData.gradeLadder}>
+                             <XAxis dataKey="name" /> <YAxis domain={[0, 100]}/> <Tooltip /> <Area type="monotone" dataKey="平均分" stroke="#8884d8" fill="#8884d8" fillOpacity={0.3} />
+                          </AreaChart>
+                       </ResponsiveContainer>
                     </div>
-
-                    {/* Subject Distribution */}
-                    <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%">
-                             <RadarChart cx="50%" cy="50%" outerRadius="80%" data={overviewData.subjectDist}>
-                                <PolarGrid />
-                                <PolarAngleAxis dataKey="name" />
-                                <PolarRadiusAxis angle={30} domain={[0, 100]} />
-                                <Radar name="平均分" dataKey="value" stroke="#82ca9d" fill="#82ca9d" fillOpacity={0.6} />
-                                <Tooltip />
-                             </RadarChart>
-                          </ResponsiveContainer>
-                       </div>
+                    <div className="bg-white p-4 rounded-lg border border-gray-100 shadow-sm h-72">
+                       <h3 className="font-bold text-gray-800 mb-4 text-center">全校学科分布</h3>
+                       <ResponsiveContainer width="100%" height="100%">
+                          <RadarChart cx="50%" cy="50%" outerRadius="80%" data={overviewData.subjectDist}>
+                             <PolarGrid /> <PolarAngleAxis dataKey="name" /> <PolarRadiusAxis angle={30} domain={[0, 100]} /> <Radar name="平均分" dataKey="value" stroke="#82ca9d" fill="#82ca9d" fillOpacity={0.6} /> <Tooltip />
+                          </RadarChart>
+                       </ResponsiveContainer>
                     </div>
                  </div>
              </div>
          )}
 
-         {/* --- 1. Grade Analysis View --- */}
+         {/* Grade Analysis */}
          {activeTab === 'grade' && (
             <div className="space-y-10 animate-in fade-in">
+               {gradeAnalysisData.length === 0 ? <div className="text-center py-20 text-gray-400">该年级暂无数据或无权查看</div> : (
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-                  <div className="bg-white p-4 rounded-lg border border-gray-100">
-                     <h3 className="font-bold text-gray-800 mb-4 flex items-center">
-                        <span className="w-1 h-6 bg-blue-500 mr-2 rounded-full"></span>
-                        {selectedGrade} - 各班平均分对比
-                     </h3>
-                     <div className="h-80">
-                        <ResponsiveContainer width="100%" height="100%">
-                           <BarChart data={gradeAnalysisData} layout="vertical" margin={{ left: 20 }}>
-                              <CartesianGrid strokeDasharray="3 3" horizontal={true} vertical={false}/>
-                              <XAxis type="number" domain={[0, 100]} hide/>
-                              <YAxis dataKey="name" type="category" width={80} tick={{fontSize: 12}}/>
-                              <Tooltip cursor={{fill: '#f3f4f6'}} contentStyle={{borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)'}}/>
-                              <Bar dataKey="平均分" fill="#3b82f6" radius={[0, 4, 4, 0]} barSize={20} label={{ position: 'right', fill: '#666', fontSize: 12 }}/>
-                           </BarChart>
-                        </ResponsiveContainer>
-                     </div>
+                  <div className="bg-white p-4 rounded-lg border border-gray-100 h-80">
+                     <h3 className="font-bold text-gray-800 mb-4">{selectedGrade} - 各班平均分</h3>
+                     <ResponsiveContainer width="100%" height="100%">
+                        <BarChart data={gradeAnalysisData} layout="vertical" margin={{ left: 20 }}>
+                           <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} label={{ position: 'right' }}/>
+                        </BarChart>
+                     </ResponsiveContainer>
                   </div>
-
-                  <div className="bg-white p-4 rounded-lg border border-gray-100">
-                     <h3 className="font-bold text-gray-800 mb-4 flex items-center">
-                        <span className="w-1 h-6 bg-emerald-500 mr-2 rounded-full"></span>
-                        {selectedGrade} - 优良率 vs 及格率
-                     </h3>
-                     <div className="h-80">
-                        <ResponsiveContainer width="100%" height="100%">
-                           <BarChart data={gradeAnalysisData}>
-                              <CartesianGrid strokeDasharray="3 3" vertical={false}/>
-                              <XAxis dataKey="name" tick={{fontSize: 12}}/>
-                              <YAxis domain={[0, 100]}/>
-                              <Tooltip contentStyle={{borderRadius: '8px'}}/>
-                              <Legend />
-                              <Bar dataKey="及格率" fill="#10b981" radius={[4, 4, 0, 0]} />
-                              <Bar dataKey="优秀率" fill="#f59e0b" radius={[4, 4, 0, 0]} />
-                           </BarChart>
-                        </ResponsiveContainer>
-                     </div>
+                  <div className="bg-white p-4 rounded-lg border border-gray-100 h-80">
+                     <h3 className="font-bold text-gray-800 mb-4">优良率 vs 及格率</h3>
+                     <ResponsiveContainer width="100%" height="100%">
+                        <BarChart data={gradeAnalysisData}>
+                           <CartesianGrid strokeDasharray="3 3" vertical={false}/> <XAxis dataKey="name"/> <YAxis domain={[0, 100]}/> <Tooltip/> <Legend /> <Bar dataKey="及格率" fill="#10b981" /> <Bar dataKey="优秀率" fill="#f59e0b" />
+                        </BarChart>
+                     </ResponsiveContainer>
                   </div>
                </div>
+               )}
             </div>
          )}
 
-         {/* --- 2. Trend Analysis View --- */}
+         {/* Trend Analysis */}
          {activeTab === 'trend' && (
             <div className="animate-in fade-in space-y-6">
-               <div className="bg-white p-4 rounded-lg border border-gray-100">
-                  <h3 className="font-bold text-gray-800 mb-6 text-center">
-                     {selectedClass} {selectedSubject} - 成绩成长轨迹
-                  </h3>
-                  <div className="h-96">
-                     <ResponsiveContainer width="100%" height="100%">
-                        <LineChart data={trendData} margin={{ top: 20, right: 30, left: 20, bottom: 20 }}>
-                           <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f0f0f0"/>
-                           <XAxis dataKey="name" axisLine={false} tickLine={false} dy={10}/>
-                           <YAxis domain={[0, 100]} axisLine={false} tickLine={false}/>
-                           <Tooltip contentStyle={{borderRadius: '8px', boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.1)'}}/>
-                           <Legend verticalAlign="top" height={36}/>
-                           <Line type="monotone" dataKey="班级平均" stroke="#3b82f6" strokeWidth={3} dot={{r: 6}} activeDot={{r: 8}} />
-                           <Line type="monotone" dataKey="年级平均" stroke="#94a3b8" strokeWidth={2} strokeDasharray="5 5" dot={{r: 4}} />
-                        </LineChart>
-                     </ResponsiveContainer>
-                  </div>
+               <div className="bg-white p-4 rounded-lg border border-gray-100 h-96">
+                  <h3 className="font-bold text-gray-800 mb-6 text-center">{selectedClass} {selectedSubject} - 成绩轨迹</h3>
+                  <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="#3b82f6" strokeWidth={3} /> <Line type="monotone" dataKey="年级平均" stroke="#94a3b8" strokeWidth={2} strokeDasharray="5 5" />
+                     </LineChart>
+                  </ResponsiveContainer>
                </div>
             </div>
          )}
 
-         {/* --- 3. Subject Matrix View --- */}
+         {/* Matrix */}
          {activeTab === 'matrix' && (
             <div className="animate-in fade-in overflow-x-auto">
-               <h3 className="font-bold text-gray-800 mb-6">
-                  {selectedGrade} - 学科质量透视矩阵
-               </h3>
                <table className="w-full text-sm text-left">
                   <thead className="bg-gray-50 text-gray-500 uppercase">
-                     <tr>
-                        <th className="px-6 py-4 rounded-tl-lg">班级</th>
-                        {subjects.map(s => <th key={s._id} className="px-6 py-4 font-bold text-gray-700">{s.name}</th>)}
-                     </tr>
+                     <tr><th className="px-6 py-4">班级</th>{subjects.map(s => <th key={s._id} className="px-6 py-4">{s.name}</th>)}</tr>
                   </thead>
                   <tbody className="divide-y divide-gray-100">
                      {matrixData.map((row, idx) => (
-                        <tr key={idx} className="hover:bg-gray-50 transition-colors">
-                           <td className="px-6 py-4 font-bold text-gray-800 bg-gray-50/50">{row.className}</td>
-                           {subjects.map(sub => {
-                              const val = row[sub.name];
-                              let colorClass = 'text-gray-800';
-                              let bgClass = '';
-                              if (val >= (sub.excellenceThreshold || 90)) { colorClass = 'text-green-700 font-bold'; bgClass = 'bg-green-50'; }
-                              else if (val < 60) { colorClass = 'text-red-600 font-bold'; bgClass = 'bg-red-50'; }
-                              
-                              return (
-                                 <td key={sub.name} className={`px-6 py-4 ${bgClass}`}>
-                                    <span className={colorClass}>{val}</span>
-                                 </td>
-                              );
-                           })}
-                        </tr>
+                        <tr key={idx} className="hover:bg-gray-50"><td className="px-6 py-4 font-bold bg-gray-50/50">{row.className}</td>{subjects.map(sub => <td key={sub.name} className="px-6 py-4">{row[sub.name] || '-'}</td>)}</tr>
                      ))}
                   </tbody>
                </table>
             </div>
          )}
 
-         {/* --- 4. Student Focus View --- */}
+         {/* Student Focus */}
          {activeTab === 'student' && (
-             <div className="animate-in fade-in">
-                <h3 className="font-bold text-gray-800 mb-4">{selectedClass} - 学生个像分析</h3>
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-                   {focusStudents.map(s => {
-                      const trend = getStudentTrend(s.studentNo);
-                      return (
-                         <div 
-                           key={s._id || 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>
-                            {/* Mini Sparkline */}
-                            <div className="h-16 w-full">
-                               <ResponsiveContainer width="100%" height="100%">
-                                  <LineChart data={trend}>
-                                     <Line type="monotone" dataKey="score" stroke="#94a3b8" strokeWidth={2} dot={false} />
-                                  </LineChart>
-                               </ResponsiveContainer>
-                            </div>
-                         </div>
-                      );
-                   })}
-                </div>
+             <div className="animate-in fade-in grid grid-cols-1 md:grid-cols-3 xl:grid-cols-4 gap-4">
+                {focusStudents.map(s => (
+                   <div key={s._id} onClick={() => setSelectedStudent(s)} className="bg-white border p-4 rounded-xl cursor-pointer hover:shadow-lg hover:border-blue-400 transition-all">
+                      <div className="flex items-center space-x-3 mb-3">
+                         <div className={`w-10 h-10 rounded-full flex items-center justify-center text-white ${s.gender==='Female'?'bg-pink-400':'bg-blue-400'}`}>{s.name[0]}</div>
+                         <div><h4 className="font-bold">{s.name}</h4><p className="text-xs text-gray-500">{s.studentNo}</p></div>
+                      </div>
+                      <div className="h-16"><ResponsiveContainer><LineChart data={getStudentTrend(s.studentNo)}><Line type="monotone" dataKey="score" stroke="#94a3b8" dot={false} /></LineChart></ResponsiveContainer></div>
+                   </div>
+                ))}
              </div>
          )}
       </div>
 
-      {/* Student Details Modal */}
       {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>
-                           <span className="font-mono">{selectedStudent.studentNo}</span>
-                        </div>
-                     </div>
-                  </div>
-                  <button onClick={() => setSelectedStudent(null)} className="p-2 hover:bg-gray-100 rounded-full transition-colors"><Grid size={20}/></button>
-               </div>
-               
-               <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
-                  <div className="bg-blue-50 p-4 rounded-xl border border-blue-100">
-                     <p className="text-blue-600 text-sm font-bold mb-1">考勤状况</p>
-                     <div className="flex justify-between items-end">
-                        <span className="text-3xl font-bold text-blue-800">{getStudentAttendance(selectedStudent.studentNo).absent}</span>
-                        <span className="text-xs text-blue-400 mb-1">次缺考</span>
-                     </div>
-                  </div>
-                  {/* Add more stats here if needed */}
-               </div>
-
+            <div className="bg-white rounded-2xl p-6 w-full max-w-4xl max-h-[90vh] overflow-y-auto shadow-2xl relative">
+               <button onClick={() => setSelectedStudent(null)} className="absolute top-4 right-4 p-2 hover:bg-gray-100 rounded-full"><Grid size={20}/></button>
+               <h2 className="text-2xl font-bold mb-6">{selectedStudent.name} <span className="text-sm font-normal text-gray-500">{selectedStudent.className}</span></h2>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-                  {/* Radar */}
-                  <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>
-
-                  {/* Trend */}
-                  <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 className="h-64 border rounded p-4"><h3 className="text-center font-bold mb-4">能力模型</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-64 border rounded p-4"><h3 className="text-center font-bold mb-4">成绩走势</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>