Update pages/Reports.tsx

pages/Reports.tsx

@@ -1,55 +1,44 @@
 import React, { useState, useEffect } from 'react';
 import { 
   BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, 
-  LineChart, Line, AreaChart, Area, RadarChart, Radar, PolarGrid, PolarAngleAxis, PolarRadiusAxis 
+  LineChart, Line, AreaChart, Area, PieChart as RePieChart, Pie, Cell, 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, 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 });
+import { Score, Student, ClassInfo, Subject, Exam } from '../types';
 
 export const Reports: React.FC = () => {
   const [loading, setLoading] = useState(true);
   const [activeTab, setActiveTab] = useState<'overview' | 'grade' | 'trend' | 'matrix' | 'student'>('overview');
   
-  // Raw Data
-  const [rawScores, setRawScores] = useState<Score[]>([]);
+  // Data
+  const [scores, setScores] = useState<Score[]>([]);
   const [students, setStudents] = useState<Student[]>([]);
-  const [rawClasses, setRawClasses] = useState<ClassInfo[]>([]);
+  const [classes, setClasses] = 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>(''); 
-  const [selectedSubject, setSelectedSubject] = useState<string>(''); 
+  const [selectedGrade, setSelectedGrade] = useState<string>('六年级');
+  const [selectedClass, setSelectedClass] = useState<string>(''); // For Trend/Student
+  const [selectedSubject, setSelectedSubject] = useState<string>(''); // For Trend
 
-  // Computed Chart Data
+  // Computed 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: [] });
-
-  // Student Focus
-  const [selectedStudent, setSelectedStudent] = useState<Student | null>(null);
 
-  const currentUser = api.auth.getCurrentUser();
-  const isTeacher = currentUser?.role === UserRole.TEACHER;
+  // Overview Data
+  const [overviewData, setOverviewData] = useState<{
+     totalStudents: number;
+     avgScore: number;
+     passRate: number;
+     gradeLadder: any[];
+     subjectDist: any[];
+  }>({ totalStudents: 0, avgScore: 0, passRate: 0, gradeLadder: [], subjectDist: [] });
 
-  useEffect(() => {
-    // If teacher, default to 'grade' view as 'overview' is hidden
-    if (isTeacher && activeTab === 'overview') {
-       setActiveTab('grade');
-    }
-  }, [isTeacher]);
+  // Student Focus State
+  const [selectedStudent, setSelectedStudent] = useState<Student | null>(null);
 
   useEffect(() => {
     const loadData = async () => {
@@ -62,115 +51,65 @@ export const Reports: React.FC = () => {
           api.subjects.getAll(),
           api.exams.getAll()
         ]);
-        setRawScores(scs);
+        setScores(scs);
         setStudents(stus);
-        setRawClasses(cls);
+        setClasses(cls);
         setSubjects(subs);
         setExams(exs);
         
-        // Initial Defaults
+        // Set Defaults
+        if (cls.length > 0) setSelectedClass(cls[0].grade + cls[0].className);
         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();
   }, []);
 
-  // Filter Data based on Role
+  // Compute Metrics whenever filters or data change
   useEffect(() => {
-     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);
-
-        filteredClasses = rawClasses.filter(c => relevantClassNames.has(c.grade + c.className));
-     }
-
-     setScores(filteredScores);
-     setClasses(filteredClasses);
+    if (scores.length === 0 || students.length === 0) return;
 
-     // 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]);
+    // --- 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)) };
+    });
 
+    // 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 };
+    });
 
-  // Compute Metrics
-  useEffect(() => {
-    if (scores.length === 0 && !isTeacher) return; // Allow teachers to see empty states
+    setOverviewData({
+       totalStudents: students.length,
+       avgScore: Number(totalAvg.toFixed(1)),
+       passRate: Number(passRate.toFixed(1)),
+       gradeLadder: ladderData,
+       subjectDist: subDist
+    });
 
-    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 ---
+    // --- 1. Grade Analysis (Horizontal Class Comparison) ---
     const gradeClasses = classes.filter(c => c.grade === selectedGrade);
     const gaData = gradeClasses.map(cls => {
       const fullClassName = cls.grade + cls.className;
-      const classStudents = students.filter(s => s.className === fullClassName);
-      const classStudentIds = classStudents.map(s => s.studentNo);
+      const classStudentIds = students.filter(s => s.className === fullClassName).map(s => s.studentNo);
       
       const classScores = scores.filter(s => classStudentIds.includes(s.studentNo) && s.status === 'Normal');
       
@@ -181,27 +120,32 @@ 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,
+        name: cls.className, // Label X-axis with just class name to save space
         fullName: fullClassName,
         平均分: Number(avg.toFixed(1)),
         及格率: Number(passRate.toFixed(1)),
         优秀率: Number(excellentRate.toFixed(1)),
-        studentCount: classStudents.length
+        studentCount: classStudentIds.length
       };
     });
     setGradeAnalysisData(gaData);
 
-    // --- Trend ---
+
+    // --- 2. Trend Analysis (Time/Exam based) ---
+    // Group by Exam Name or Type. Sort using Exam Dates if available.
     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';
@@ -209,31 +153,48 @@ 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;
 
-         // 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.
+         // Grade Avg (for comparison)
          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);
     }
 
-    // --- Matrix ---
+    // --- 3. Subject Matrix (Heatmap Table) ---
     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));
        });
@@ -241,7 +202,7 @@ export const Reports: React.FC = () => {
     });
     setMatrixData(mData);
 
-  }, [scores, students, classes, subjects, exams, selectedGrade, selectedClass, selectedSubject, isTeacher]);
+  }, [scores, students, classes, subjects, exams, selectedGrade, selectedClass, selectedSubject]);
 
 
   const exportExcel = () => {
@@ -249,14 +210,23 @@ export const Reports: React.FC = () => {
     if (!window.XLSX) return alert('Excel 组件未加载');
     // @ts-ignore
     const XLSX = window.XLSX;
-    let dataToExport: any[] = activeTab === 'grade' ? gradeAnalysisData : (activeTab === 'trend' ? trendData : matrixData);
+
+    // 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
+
     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}.xlsx`);
+    XLSX.writeFile(wb, `Report_${activeTab}_${new Date().toISOString().slice(0,10)}.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) => {
@@ -264,6 +234,7 @@ 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 };
@@ -281,11 +252,16 @@ 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(sortGrades);
-  const allClasses = classes.map(c => c.grade + c.className).sort(sortClasses);
+  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 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>;
@@ -295,7 +271,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} 条成绩数据分析 {isTeacher && '(仅展示您相关班级/科目)'}</p>
+            <p className="text-sm text-gray-500">基于 {scores.length} 条成绩数据分析</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">
@@ -304,14 +280,15 @@ 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, hidden: isTeacher },
-            { id: 'grade', label: '年级分析', icon: BarChart2 },
-            { id: 'trend', label: '教学趋势', icon: TrendingUp },
-            { id: 'matrix', label: '质量透视', icon: Grid },
+            { 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 },
-         ].filter(t => !t.hidden).map(tab => (
+         ].map(tab => (
             <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id as any)}
@@ -325,20 +302,23 @@ 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" 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 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>
                 )}
 
                 {(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.length > 0 ? allClasses.map(c => <option key={c} value={c}>{c}</option>) : <option value="">暂无相关数据</option>}
+                    {allClasses.map(c => <option key={c} value={c}>{c}</option>)}
                 </select>
                 )}
                 
@@ -350,9 +330,10 @@ export const Reports: React.FC = () => {
             </div>
          )}
 
-         {/* Overview - Admin Only */}
-         {activeTab === 'overview' && !isTeacher && (
+         {/* --- 0. Overview View --- */}
+         {activeTab === 'overview' && (
              <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>
@@ -367,107 +348,256 @@ 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">
-                    <div className="bg-white p-4 rounded-lg border border-gray-100 shadow-sm h-72">
+                    {/* Grade Ladder */}
+                    <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>
-                       <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 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 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>
+
+                    {/* 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>
                  </div>
              </div>
          )}
 
-         {/* Grade Analysis */}
+         {/* --- 1. Grade Analysis View --- */}
          {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 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 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>
-                  <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 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>
                </div>
-               )}
             </div>
          )}
 
-         {/* Trend Analysis */}
+         {/* --- 2. Trend Analysis View --- */}
          {activeTab === 'trend' && (
             <div className="animate-in fade-in space-y-6">
-               <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 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>
             </div>
          )}
 
-         {/* Matrix */}
+         {/* --- 3. Subject Matrix View --- */}
          {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">班级</th>{subjects.map(s => <th key={s._id} className="px-6 py-4">{s.name}</th>)}</tr>
+                     <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>
                   </thead>
                   <tbody className="divide-y divide-gray-100">
                      {matrixData.map((row, idx) => (
-                        <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>
+                        <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>
                      ))}
                   </tbody>
                </table>
             </div>
          )}
 
-         {/* Student Focus */}
+         {/* --- 4. Student Focus View --- */}
          {activeTab === 'student' && (
-             <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 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>
          )}
       </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 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="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="grid grid-cols-1 md:grid-cols-2 gap-8">
-                  <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>
+                  {/* 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>
             </div>
          </div>