Update pages/Reports.tsx

pages/Reports.tsx

@@ -1,354 +1,358 @@
 
 import React, { useState, useEffect } from 'react';
 import { 
-  BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, 
-  RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, 
-  PieChart, Pie, Cell, Legend
+  BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, 
+  LineChart, Line, AreaChart, Area, PieChart as RePieChart, Pie, Cell 
 } from 'recharts';
-import { Loader2, Download, Filter, TrendingUp, Users, BookOpen, Award, PieChart as PieChartIcon } from 'lucide-react';
 import { api } from '../services/api';
-import { Score, Subject, Student, ClassInfo } from '../types';
-
-// UI Components
-const Card: React.FC<{ title: string; subtitle?: string; children: React.ReactNode; className?: string }> = ({ title, subtitle, children, className = '' }) => (
-  <div className={`bg-white p-6 rounded-xl border border-gray-100 shadow-sm hover:shadow-md transition-shadow ${className}`}>
-    <div className="mb-6">
-      <h3 className="text-lg font-bold text-gray-800">{title}</h3>
-      {subtitle && <p className="text-sm text-gray-400 mt-1">{subtitle}</p>}
-    </div>
-    {children}
-  </div>
-);
-
-const StatBox: React.FC<{ label: string; value: string | number; color: string; icon: React.ElementType }> = ({ label, value, color, icon: Icon }) => (
-  <div className="bg-white p-5 rounded-xl border border-gray-100 shadow-sm flex items-center space-x-4">
-    <div className={`p-3 rounded-lg ${color} bg-opacity-10 text-${color.split('-')[1]}-600`}>
-      <Icon size={24} className={color.replace('bg-', 'text-')} />
-    </div>
-    <div>
-      <p className="text-sm text-gray-500">{label}</p>
-      <p className="text-2xl font-bold text-gray-800">{value}</p>
-    </div>
-  </div>
-);
+import { Loader2, Download, Filter, TrendingUp, Users, BookOpen, PieChart as PieChartIcon, Grid, BarChart2 } from 'lucide-react';
+import { Score, Student, ClassInfo, Subject } from '../types';
+import * as XLSX from 'xlsx';
 
 export const Reports: React.FC = () => {
   const [loading, setLoading] = useState(true);
-  const [activeTab, setActiveTab] = useState<'overview' | 'class' | 'subject'>('overview');
-  const [selectedGrade, setSelectedGrade] = useState('All');
+  const [activeTab, setActiveTab] = useState<'overview' | 'grade' | 'trend' | 'matrix'>('grade');
   
-  // Raw Data
+  // Data
   const [scores, setScores] = useState<Score[]>([]);
-  const [subjects, setSubjects] = useState<Subject[]>([]);
   const [students, setStudents] = useState<Student[]>([]);
   const [classes, setClasses] = useState<ClassInfo[]>([]);
+  const [subjects, setSubjects] = useState<Subject[]>([]);
+
+  // Filters
+  const [selectedGrade, setSelectedGrade] = useState<string>('六年级');
+  const [selectedClass, setSelectedClass] = useState<string>(''); // For Trend
+  const [selectedSubject, setSelectedSubject] = useState<string>(''); // For Trend
 
-  // Derived Data for Charts
-  const [stats, setStats] = useState({ avg: 0, max: 0, passRate: 0, excellentRate: 0 });
-  const [classComparisonData, setClassComparisonData] = useState<any[]>([]);
-  const [subjectRadarData, setSubjectRadarData] = useState<any[]>([]);
-  const [gradeDistData, setGradeDistData] = useState<any[]>([]);
+  // Computed Data
+  const [gradeAnalysisData, setGradeAnalysisData] = useState<any[]>([]);
+  const [trendData, setTrendData] = useState<any[]>([]);
+  const [matrixData, setMatrixData] = useState<any[]>([]);
 
   useEffect(() => {
-    const load = async () => {
+    const loadData = async () => {
+      setLoading(true);
       try {
-        const [sc, su, st, cl] = await Promise.all([
-          api.scores.getAll(), 
-          api.subjects.getAll(),
+        const [scs, stus, cls, subs] = await Promise.all([
+          api.scores.getAll(),
           api.students.getAll(),
-          api.classes.getAll()
-        ]) as [Score[], Subject[], Student[], ClassInfo[]];
+          api.classes.getAll(),
+          api.subjects.getAll()
+        ]);
+        setScores(scs);
+        setStudents(stus);
+        setClasses(cls);
+        setSubjects(subs);
         
-        setScores(sc);
-        setSubjects(su);
-        setStudents(st);
-        setClasses(cl);
-      } catch (e) { console.error(e); } 
-      finally { setLoading(false); }
+        // 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);
+      }
     };
-    load();
+    loadData();
   }, []);
 
-  // Recalculate when data or filter changes
+  // Compute Metrics whenever filters or data change
   useEffect(() => {
-    if (loading) return;
+    if (scores.length === 0 || students.length === 0) return;
 
-    // Filter Scores based on Grade
-    let filteredScores: Score[] = scores;
-    
-    if (selectedGrade !== 'All') {
-      filteredScores = scores.filter((s: Score) => {
-        const student = students.find((st: Student) => st.studentNo === s.studentNo);
-        return student && student.className.includes(selectedGrade);
-      });
-    }
+    // --- 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 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 => {
+         // 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;
 
-    // Only count Normal exams for average/max statistics
-    const validScores = filteredScores.filter((s: Score) => s.status === 'Normal');
-
-    // 1. Basic Stats
-    const totalScore = validScores.reduce((sum: number, s: Score) => sum + (s.score || 0), 0);
-    const avg = validScores.length ? Math.round(totalScore / validScores.length) : 0;
-    const max = validScores.length ? Math.max(...validScores.map((s: Score) => s.score || 0)) : 0;
-    const passCount = validScores.filter((s: Score) => (s.score || 0) >= 60).length;
-    
-    // Dynamic Excellence Calculation based on subject threshold
-    let excellentCount = 0;
-    validScores.forEach((s: Score) => {
-       const sub = subjects.find(su => su.name === s.courseName);
-       const threshold = sub?.excellenceThreshold || 90;
-       if (s.score >= threshold) excellentCount++;
-    });
-    
-    setStats({
-      avg,
-      max,
-      passRate: validScores.length ? Math.round((passCount / validScores.length) * 100) : 0,
-      excellentRate: validScores.length ? Math.round((excellentCount / validScores.length) * 100) : 0
-    });
-
-    // 2. Class Comparison Data (Bar Chart)
-    const classMap = new Map<string, number[]>();
-    filteredScores.forEach((s: Score) => {
-      if (s.status !== 'Normal') return; // Skip abnormal for class avg
-      const stu = students.find((st: Student) => st.studentNo === s.studentNo);
-      if (stu) {
-        const clsName = stu.className;
-        if (!classMap.has(clsName)) classMap.set(clsName, []);
-        classMap.get(clsName)?.push(s.score || 0);
-      }
-    });
-
-    const clsData: any[] = [];
-    classMap.forEach((scores, name) => {
-      const clsAvg = Math.round(scores.reduce((a, b) => a + b, 0) / scores.length);
-      clsData.push({ name, avg: clsAvg, count: scores.length });
-    });
-    setClassComparisonData(clsData.sort((a, b) => b.avg - a.avg)); 
-
-    // 3. Subject Radar Data
-    const subData: any[] = subjects.map((sub: Subject) => {
-      const subScores = validScores.filter((s: Score) => s.courseName === sub.name);
-      const subTotal = subScores.reduce((sum: number, s: Score) => sum + (s.score || 0), 0);
       return {
-        subject: sub.name,
-        A: subScores.length ? Math.round(subTotal / subScores.length) : 0,
-        fullMark: 100,
-        threshold: sub.excellenceThreshold || 90
+        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: classStudentIds.length
       };
     });
-    setSubjectRadarData(subData);
+    setGradeAnalysisData(gaData);
 
-    // 4. Distribution Pie (Use valid scores)
-    setGradeDistData([
-      { name: '优秀', value: excellentCount, color: '#10b981' },
-      { name: '良好', value: validScores.filter((s: Score) => {
-         const threshold = subjects.find(sub => sub.name === s.courseName)?.excellenceThreshold || 90;
-         return s.score >= 80 && s.score < threshold;
-      }).length, color: '#3b82f6' },
-      { name: '及格', value: validScores.filter((s: Score) => s.score >= 60 && s.score < 80).length, color: '#f59e0b' },
-      { name: '不及格', value: validScores.filter((s: Score) => s.score < 60).length, color: '#ef4444' }
-    ]);
 
-  }, [scores, students, selectedGrade, loading, subjects]);
+    // --- 2. Trend Analysis (Time/Exam based) ---
+    // Group by Exam Name or Type. Since we don't have real dates, we'll use examName as categories.
+    // Filter for selectedClass and selectedSubject
+    if (selectedClass && selectedSubject) {
+      const classStudentIds = students.filter(s => s.className === selectedClass).map(s => s.studentNo);
+      
+      // Get all unique exam names in database order (assuming insertion order implies time for mock)
+      // In real app, sort by exam date.
+      const uniqueExams = Array.from(new Set(scores.map(s => s.examName || s.type)));
+      
+      const tData = uniqueExams.map(exam => {
+         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 handleExport = () => {
-    // @ts-ignore
-    if (!window.XLSX) return alert('Excel 组件未加载，请检查网络');
+         // Grade Avg (for comparison)
+         // Find grade of selected class
+         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;
 
-    try {
-       // @ts-ignore
-       const wb = window.XLSX.utils.book_new();
-       
-       const statsData = [{
-         '年级': selectedGrade,
-         '平均分': stats.avg,
-         '最高分': stats.max,
-         '及格率': stats.passRate + '%',
-         '优秀率': stats.excellentRate + '%'
-       }];
-       // @ts-ignore
-       const wsStats = window.XLSX.utils.json_to_sheet(statsData);
-       // @ts-ignore
-       window.XLSX.utils.book_append_sheet(wb, wsStats, "概览");
+         return {
+            name: exam,
+            班级平均: Number(classAvg.toFixed(1)),
+            年级平均: Number(gradeAvg.toFixed(1))
+         };
+      });
+      setTrendData(tData);
+    }
 
-       // @ts-ignore
-       const wsClass = window.XLSX.utils.json_to_sheet(classComparisonData.map((c: any) => ({
-         '班级': c.name,
-         '平均分': c.avg,
-         '参考人数': c.count
-       })));
-       // @ts-ignore
-       window.XLSX.utils.book_append_sheet(wb, wsClass, "班级排名");
+    // --- 3. Subject Matrix (Heatmap Table) ---
+    // Rows: Classes in selectedGrade. Cols: Subjects.
+    const mData = gradeClasses.map(cls => {
+       const fullClassName = cls.grade + cls.className;
+       const classStudentIds = students.filter(s => s.className === fullClassName).map(s => s.studentNo);
        
-       // @ts-ignore
-       window.XLSX.writeFile(wb, `教学报表_${selectedGrade}_${new Date().toLocaleDateString()}.xlsx`);
-    } catch (e) {
-      alert('导出失败，请重试');
-      console.error(e);
-    }
-  };
+       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 avg = subScores.length ? subScores.reduce((a,b)=>a+b.score,0)/subScores.length : 0;
+          row[sub.name] = Number(avg.toFixed(1));
+       });
+       return row;
+    });
+    setMatrixData(mData);
 
-  if (loading) return <div className="flex justify-center py-20"><Loader2 className="animate-spin text-blue-600" /></div>;
+  }, [scores, students, classes, subjects, selectedGrade, selectedClass, selectedSubject]);
 
+
+  const exportExcel = () => {
+    // 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}_${new Date().toISOString().slice(0,10)}.xlsx`);
+  };
+
+  const COLORS = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'];
   const uniqueGrades = Array.from(new Set(classes.map(c => c.grade))).sort();
+  const allClasses = classes.map(c => c.grade + c.className);
+
+  if (loading) return <div className="flex justify-center py-20"><Loader2 className="animate-spin text-blue-600"/></div>;
 
   return (
     <div className="space-y-6">
-      {/* Header & Filter */}
-      <div className="flex flex-col md:flex-row justify-between items-center bg-white p-5 rounded-xl border border-gray-100 shadow-sm">
-        <div>
-          <h2 className="text-xl font-bold text-gray-800">教务数据分析中心</h2>
-          <p className="text-sm text-gray-500 mt-1">基于 {scores.length} 条成绩数据分析</p>
-        </div>
-        <div className="flex items-center gap-3 mt-4 md:mt-0">
-           <div className="flex items-center bg-gray-50 px-3 py-2 rounded-lg border border-gray-200">
-              <Filter size={16} className="text-gray-500 mr-2" />
-              <select 
-                value={selectedGrade} 
-                onChange={e => setSelectedGrade(e.target.value)}
-                className="bg-transparent text-sm font-medium text-gray-700 focus:outline-none"
-              >
-                <option value="All">所有年级</option>
-                {uniqueGrades.map(g => <option key={g} value={g}>{g}</option>)}
-              </select>
-           </div>
-           <button onClick={handleExport} className="btn-secondary flex items-center gap-2 text-sm px-4 py-2 border rounded-lg hover:bg-emerald-50 text-emerald-600 border-emerald-200 transition-colors">
-             <Download size={16} /> 导出报表
-           </button>
-        </div>
-      </div>
-
-      {/* Overview Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
-        <StatBox label="平均分" value={stats.avg} icon={Award} color="bg-blue-100 text-blue-600" />
-        <StatBox label="最高分" value={stats.max} icon={TrendingUp} color="bg-emerald-100 text-emerald-600" />
-        <StatBox label="及格率" value={`${stats.passRate}%`} icon={BookOpen} color="bg-amber-100 text-amber-600" />
-        <StatBox label="优秀率" value={`${stats.excellentRate}%`} icon={Users} color="bg-indigo-100 text-indigo-600" />
+      <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>
+         </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">
+               <Download size={16}/><span>导出报表</span>
+            </button>
+         </div>
       </div>
 
-      {/* Tab Navigation */}
-      <div className="border-b border-gray-200">
-        <div className="flex space-x-8">
-          {[
-            { id: 'overview', label: '全校概览' },
-            { id: 'class', label: '班级对比' },
-            { id: 'subject', label: '学科分析' }
-          ].map(tab => (
+      {/* Tabs */}
+      <div className="flex space-x-1 bg-gray-100 p-1 rounded-xl w-full md:w-auto overflow-x-auto">
+         {[
+            { id: 'grade', label: '年级横向分析', icon: BarChart2 },
+            { id: 'trend', label: '教学成长轨迹', icon: TrendingUp },
+            { id: 'matrix', label: '学科质量透视', icon: Grid },
+            { id: 'overview', label: '全校概览', icon: PieChartIcon },
+         ].map(tab => (
             <button
-              key={tab.id}
-              onClick={() => setActiveTab(tab.id as any)}
-              className={`py-4 text-sm font-medium border-b-2 transition-colors ${
-                activeTab === tab.id
-                  ? 'border-blue-600 text-blue-600'
-                  : 'border-transparent text-gray-500 hover:text-gray-700'
-              }`}
+               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.label}
+               <tab.icon size={16}/>
+               <span>{tab.label}</span>
             </button>
-          ))}
-        </div>
+         ))}
       </div>
 
-      {/* Tab Content */}
-      <div className="animate-in fade-in slide-in-from-bottom-4 duration-500">
-        
-        {/* OVERVIEW TAB */}
-        {activeTab === 'overview' && (
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <Card title="成绩等级分布" subtitle="剔除缺考数据">
-              <div className="h-80">
-                {scores.length > 0 ? (
-                  <ResponsiveContainer width="100%" height="100%">
-                    <PieChart>
-                      <Pie data={gradeDistData} cx="50%" cy="50%" innerRadius={80} outerRadius={110} paddingAngle={5} dataKey="value">
-                        {gradeDistData.map((entry: any, index: number) => (
-                          <Cell key={`cell-${index}`} fill={entry.color} />
-                        ))}
-                      </Pie>
-                      <Tooltip />
-                      <Legend verticalAlign="bottom" height={36} iconType="circle"/>
-                    </PieChart>
-                  </ResponsiveContainer>
-                ) : (
-                  <div className="h-full flex flex-col items-center justify-center text-gray-400">
-                    <PieChartIcon size={48} className="mb-2 opacity-20" />
-                    <p>暂无数据</p>
+      {/* Content Area */}
+      <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 min-h-[500px]">
+         
+         {/* Filter Bar */}
+         <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 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' && (
+               <>
+                  <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>
+                  <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. Grade Analysis View --- */}
+         {activeTab === 'grade' && (
+            <div className="space-y-10 animate-in fade-in">
+               <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>
-                )}
-              </div>
-            </Card>
 
-            <Card title="学科综合能力雷达" subtitle="各学科平均分维度分析">
-              <div className="h-80">
-                 {scores.length > 0 ? (
-                  <ResponsiveContainer width="100%" height="100%">
-                    <RadarChart cx="50%" cy="50%" outerRadius="70%" data={subjectRadarData}>
-                      <PolarGrid />
-                      <PolarAngleAxis dataKey="subject" />
-                      <PolarRadiusAxis angle={30} domain={[0, 100]} />
-                      <Radar name="平均分" dataKey="A" stroke="#8b5cf6" fill="#8b5cf6" fillOpacity={0.5} />
-                      <Tooltip />
-                    </RadarChart>
-                  </ResponsiveContainer>
-                 ) : (
-                   <div className="h-full flex flex-col items-center justify-center text-gray-400">
-                     <p>暂无数据</p>
-                   </div>
-                 )}
-              </div>
-            </Card>
-          </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>
+               </div>
+            </div>
+         )}
 
-        {/* CLASS TAB */}
-        {activeTab === 'class' && (
-          <Card title="班级成绩对比" subtitle="按班级平均分排序">
-            <div className="h-96">
-              {classComparisonData.length > 0 ? (
-                <ResponsiveContainer width="100%" height="100%">
-                  <BarChart data={classComparisonData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
-                    <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f0f0f0" />
-                    <XAxis dataKey="name" axisLine={false} tickLine={false} />
-                    <YAxis axisLine={false} tickLine={false} />
-                    <Tooltip cursor={{ fill: '#f9fafb' }} contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)' }} />
-                    <Bar dataKey="avg" name="平均分" fill="#3b82f6" radius={[4, 4, 0, 0]} barSize={40} />
-                  </BarChart>
-                </ResponsiveContainer>
-              ) : (
-                <div className="h-full flex items-center justify-center text-gray-400">暂无班级数据</div>
-              )}
+         {/* --- 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">
+                  <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>
-          </Card>
-        )}
+         )}
 
-        {/* SUBJECT TAB */}
-        {activeTab === 'subject' && (
-           <div className="grid grid-cols-1 gap-6">
-              {subjectRadarData.map((sub: any) => (
-                 <div key={sub.subject} className="bg-white p-4 rounded-lg border border-gray-100 flex items-center justify-between">
-                    <div className="flex items-center space-x-4">
-                       <div className="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center text-blue-600 font-bold">
-                         {sub.subject[0]}
-                       </div>
-                       <div>
-                          <h4 className="font-bold text-gray-800">{sub.subject}</h4>
-                          <p className="text-xs text-gray-400">平均分 | 优秀线: {sub.threshold}</p>
-                       </div>
-                    </div>
-                    <div className="text-right">
-                       <span className={`text-2xl font-bold ${sub.A >= sub.threshold ? 'text-emerald-500' : sub.A >= 60 ? 'text-blue-600' : 'text-red-500'}`}>
-                         {sub.A}
-                       </span>
-                       <span className="text-xs text-gray-400 ml-1">/ 100</span>
-                    </div>
-                    <div className="w-32 h-2 bg-gray-100 rounded-full overflow-hidden">
-                       <div className="h-full bg-blue-500" style={{ width: `${sub.A}%` }}></div>
-                    </div>
-                 </div>
-              ))}
-           </div>
-        )}
+         {/* --- 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 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 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._id} className={`px-6 py-4 ${bgClass}`}>
+                                    <span className={colorClass}>{val || '-'}</span>
+                                 </td>
+                              );
+                           })}
+                        </tr>
+                     ))}
+                  </tbody>
+               </table>
+               <p className="text-xs text-gray-400 mt-4 text-right">* 绿色底色代表优秀，红色底色代表需要关注</p>
+            </div>
+         )}
+         
+         {/* --- 4. Overview View --- */}
+         {activeTab === 'overview' && (
+             <div className="flex flex-col items-center justify-center py-20 text-gray-400">
+                <PieChartIcon size={64} className="mb-4 opacity-20"/>
+                <p>全校概览模式 - 整合所有年级的大数据分析</p>
+                <button onClick={()=>setActiveTab('grade')} className="mt-4 text-blue-600 hover:underline">查看年级详情</button>
+             </div>
+         )}
 
       </div>
     </div>