Upload 41 files

pages/AchievementTeacher.tsx

@@ -46,10 +46,15 @@ export const AchievementTeacher: React.FC = () => {
                 api.config.getPublic() as Promise<SystemConfig>
             ]);
             
-            // Filter students for homeroom & Sort by name
+            // Filter students for homeroom & Sort by SeatNo > Name
             const sortedStudents = stus
                 .filter((s: Student) => s.className === homeroomClass)
-                .sort((a: Student, b: Student) => a.name.localeCompare(b.name, 'zh-CN'));
+                .sort((a: Student, b: Student) => {
+                    const seatA = parseInt(a.seatNo || '99999');
+                    const seatB = parseInt(b.seatNo || '99999');
+                    if (seatA !== seatB) return seatA - seatB;
+                    return a.name.localeCompare(b.name, 'zh-CN');
+                });
                 
             setStudents(sortedStudents);
             
@@ -209,7 +214,7 @@ export const AchievementTeacher: React.FC = () => {
                                         }}
                                         className={`p-2 rounded border cursor-pointer flex items-center justify-between ${selectedStudents.has(s._id || String(s.id)) ? 'bg-blue-50 border-blue-400' : 'bg-white border-gray-200 hover:bg-gray-50'}`}
                                     >
-                                        <span className="text-sm font-medium">{s.name}</span>
+                                        <span className="text-sm font-medium">{s.seatNo ? s.seatNo+'.':''}{s.name}</span>
                                         {selectedStudents.has(s._id || String(s.id)) && <CheckCircle size={16} className="text-blue-500"/>}
                                     </div>
                                 ))}
@@ -309,7 +314,7 @@ export const AchievementTeacher: React.FC = () => {
                             <tbody className="divide-y divide-gray-100">
                                 {students.map(s => (
                                     <tr key={s._id} className="hover:bg-gray-50">
-                                        <td className="p-4 font-bold text-gray-700">{s.name}</td>
+                                        <td className="p-4 font-bold text-gray-700">{s.seatNo ? s.seatNo+'.':''}{s.name}</td>
                                         <td className="p-4">
                                             <span className="text-amber-600 font-bold bg-amber-50 px-2 py-1 rounded border border-amber-100">
                                                 {s.flowerBalance || 0} 🌺

pages/Attendance.tsx

@@ -22,6 +22,15 @@ export const AttendancePage: React.FC = () => {
          api.attendance.get({ className: targetClass, date })
       ]);
       const classStudents = stus.filter((s: Student) => s.className === targetClass);
+      
+      // SORTING LOGIC: Seat No > Name
+      classStudents.sort((a: Student, b: Student) => {
+          const seatA = parseInt(a.seatNo || '99999');
+          const seatB = parseInt(b.seatNo || '99999');
+          if (seatA !== seatB) return seatA - seatB;
+          return a.name.localeCompare(b.name, 'zh-CN');
+      });
+
       setStudents(classStudents);
       
       const map: Record<string, Attendance> = {};
@@ -138,7 +147,7 @@ export const AttendancePage: React.FC = () => {
                         </div>
                         <div className="text-center">
                             <p className="font-bold text-gray-800 text-sm">{s.name}</p>
-                            <p className="text-[10px] text-gray-400">{s.studentNo}</p>
+                            <p className="text-[10px] text-gray-400">{s.seatNo ? `${s.seatNo}号` : s.studentNo}</p>
                         </div>
                         <div className={`flex items-center gap-1 text-xs font-bold ${textColor}`}>
                             {icon} {text}

pages/ClassList.tsx

@@ -1,8 +1,18 @@
 
 import React, { useState, useEffect } from 'react';
-import { Plus, Trash2, Users, School, Loader2, User as UserIcon, Edit, Check, X, ShieldAlert } from 'lucide-react';
+import { Plus, Trash2, Users, School, Loader2, User as UserIcon, Edit, Check, X, ShieldAlert, ChevronDown, ChevronRight } from 'lucide-react';
 import { api } from '../services/api';
 import { ClassInfo, User } from '../types';
+import { gradeOrder, sortGrades } from './Dashboard';
+
+// Helper to sort classes within a grade (numerically)
+const sortClassesInGrade = (a: ClassInfo, b: ClassInfo) => {
+    const getNum = (s: string) => {
+        const match = s.match(/(\d+)/);
+        return match ? parseInt(match[1]) : 0;
+    };
+    return getNum(a.className) - getNum(b.className);
+};
 
 export const ClassList: React.FC = () => {
   const [classes, setClasses] = useState<ClassInfo[]>([]);
@@ -14,6 +24,9 @@ export const ClassList: React.FC = () => {
   const [submitting, setSubmitting] = useState(false);
   const [editClassId, setEditClassId] = useState<string | null>(null);
 
+  // Expanded/Collapsed State for Grades
+  const [expandedGrades, setExpandedGrades] = useState<Set<string>>(new Set());
+
   // Form
   const [grade, setGrade] = useState('一年级');
   const [className, setClassName] = useState('(1)班');
@@ -32,14 +45,23 @@ export const ClassList: React.FC = () => {
       const [clsData, userData] = await Promise.all([
           api.classes.getAll(),
           api.users.getAll({ role: 'TEACHER', global: true }) // Get filtered users
-      ]);
+      ]) as [ClassInfo[], User[]];
       setClasses(clsData);
-      setTeachers(userData); // Now only contains teachers
+      
+      // Sort teachers alphabetically (Pinyin)
+      const sortedTeachers = userData.sort((a: User, b: User) => 
+          (a.trueName || a.username).localeCompare(b.trueName || b.username, 'zh-CN')
+      );
+      setTeachers(sortedTeachers);
       
       // Filter users with pending class applications
       const apps = userData.filter((u: User) => u.classApplication && u.classApplication.status === 'PENDING');
       setPendingApps(apps);
 
+      // Auto expand all grades initially
+      const allGrades = new Set<string>(clsData.map((c: ClassInfo) => c.grade));
+      setExpandedGrades(allGrades);
+
     } catch (e) {
       console.error(e);
     } finally {
@@ -80,9 +102,7 @@ export const ClassList: React.FC = () => {
     try {
       const payload = { grade, className, teacherName };
       if (editClassId) {
-          // Update
-          // Use a direct fetch or update api method to handle PUT
-          // The api.classes.add uses POST, we need a custom call or add method update
+          // Update via PUT
           await fetch(`/api/classes/${editClassId}`, {
               method: 'PUT',
               headers: { 
@@ -118,6 +138,22 @@ export const ClassList: React.FC = () => {
       } catch(e) { alert('操作失败'); }
   };
 
+  const toggleGradeExpand = (g: string) => {
+      const newSet = new Set(expandedGrades);
+      if (newSet.has(g)) newSet.delete(g);
+      else newSet.add(g);
+      setExpandedGrades(newSet);
+  };
+
+  // Group Classes by Grade
+  const groupedClasses = classes.reduce((acc, cls) => {
+      if (!acc[cls.grade]) acc[cls.grade] = [];
+      acc[cls.grade].push(cls);
+      return acc;
+  }, {} as Record<string, ClassInfo[]>);
+
+  const sortedGradeKeys = Object.keys(groupedClasses).sort(sortGrades);
+
   return (
     <div className="space-y-6">
       
@@ -174,53 +210,62 @@ export const ClassList: React.FC = () => {
 
       {loading ? (
         <div className="flex justify-center py-10"><Loader2 className="animate-spin text-blue-600" /></div>
+      ) : sortedGradeKeys.length === 0 ? (
+        <div className="text-center py-20 text-gray-400 border-2 border-dashed rounded-xl">暂无班级数据，请点击“新增班级”</div>
       ) : (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          {classes.map((cls) => (
-            <div key={cls._id || cls.id} className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 flex flex-col justify-between hover:shadow-md transition-shadow group">
-               <div className="flex justify-between items-start">
-                 <div className="flex items-center space-x-3">
-                    <div className="p-3 bg-blue-50 text-blue-600 rounded-lg">
-                       <School size={24} />
-                    </div>
-                    <div>
-                       <h3 className="text-lg font-bold text-gray-800">{cls.grade}{cls.className}</h3>
-                       <p className="text-sm text-gray-500 flex items-center mt-1">
-                           <UserIcon size={14} className="mr-1"/>
-                           {cls.teacherName ? (
-                               <span className="text-blue-600 font-bold bg-blue-50 px-1.5 py-0.5 rounded text-xs">{cls.teacherName}</span>
-                           ) : (
-                               <span className="text-gray-400 text-xs">未任命班主��</span>
-                           )}
-                       </p>
+        <div className="space-y-6">
+            {sortedGradeKeys.map(gradeKey => {
+                const gradeClasses = groupedClasses[gradeKey].sort(sortClassesInGrade);
+                const isExpanded = expandedGrades.has(gradeKey);
+                
+                return (
+                    <div key={gradeKey} className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
+                        <div 
+                            className="p-4 bg-gray-50 flex items-center justify-between cursor-pointer hover:bg-gray-100 transition-colors"
+                            onClick={() => toggleGradeExpand(gradeKey)}
+                        >
+                            <h3 className="font-bold text-gray-800 flex items-center">
+                                {isExpanded ? <ChevronDown size={20} className="mr-2 text-gray-500"/> : <ChevronRight size={20} className="mr-2 text-gray-500"/>}
+                                {gradeKey}
+                                <span className="ml-2 text-xs bg-white border px-2 py-0.5 rounded-full text-gray-500 font-normal">{gradeClasses.length} 个班级</span>
+                            </h3>
+                        </div>
+                        
+                        {isExpanded && (
+                            <div className="p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 animate-in slide-in-from-top-2 duration-300">
+                                {gradeClasses.map(cls => (
+                                    <div key={cls._id || cls.id} className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow relative group bg-white">
+                                        <div className="flex justify-between items-start mb-2">
+                                            <div className="flex items-center gap-2">
+                                                <div className="p-2 bg-blue-50 text-blue-600 rounded-lg">
+                                                    <School size={20} />
+                                                </div>
+                                                <h4 className="font-bold text-gray-800 text-lg">{cls.className}</h4>
+                                            </div>
+                                            <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                                                <button onClick={(e) => {e.stopPropagation(); openEditModal(cls);}} className="p-1 text-gray-400 hover:text-blue-500 hover:bg-blue-50 rounded"><Edit size={16}/></button>
+                                                <button onClick={(e) => {e.stopPropagation(); handleDelete(cls._id || cls.id!);}} className="p-1 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded"><Trash2 size={16}/></button>
+                                            </div>
+                                        </div>
+                                        <div className="flex justify-between items-center text-sm mt-3">
+                                            <div className="flex items-center text-gray-500" title="班主任">
+                                                <UserIcon size={14} className="mr-1"/>
+                                                {cls.teacherName ? (
+                                                    <span className="font-bold text-gray-700">{cls.teacherName}</span>
+                                                ) : <span className="text-gray-300">未设置</span>}
+                                            </div>
+                                            <div className="flex items-center text-gray-500" title="学生人数">
+                                                <Users size={14} className="mr-1"/>
+                                                <span>{cls.studentCount || 0}</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        )}
                     </div>
-                 </div>
-                 <div className="flex gap-1 opacity-100 md:opacity-0 group-hover:opacity-100 transition-opacity">
-                     <button 
-                        onClick={() => openEditModal(cls)}
-                        className="p-1.5 text-gray-400 hover:text-blue-500 hover:bg-blue-50 rounded transition-colors"
-                        title="编辑班级信息"
-                     >
-                        <Edit size={18} />
-                     </button>
-                     <button 
-                        onClick={() => handleDelete(cls._id || cls.id!)}
-                        className="p-1.5 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded transition-colors"
-                        title="删除班级"
-                     >
-                        <Trash2 size={18} />
-                     </button>
-                 </div>
-               </div>
-               
-               <div className="mt-6 pt-4 border-t border-gray-50 flex items-center justify-between text-sm">
-                  <span className="text-gray-500 flex items-center">
-                    <Users size={16} className="mr-2" /> 学生人数
-                  </span>
-                  <span className="font-bold text-gray-800">{cls.studentCount || 0} 人</span>
-               </div>
-            </div>
-          ))}
+                );
+            })}
         </div>
       )}
 
@@ -241,10 +286,10 @@ export const ClassList: React.FC = () => {
                 <input required type="text" value={className} onChange={e => setClassName(e.target.value)} className="w-full mt-1 px-3 py-2 border rounded-lg" placeholder="(1)班" />
               </div>
               <div>
-                <label className="text-sm font-medium text-gray-700">指定班主任</label>
+                <label className="text-sm font-medium text-gray-700">指定班主任 (按姓名排序)</label>
                 <select value={teacherName} onChange={e => setTeacherName(e.target.value)} className="w-full mt-1 px-3 py-2 border rounded-lg bg-white">
                     <option value="">-- 暂不指定 --</option>
-                    {teachers.sort((a,b)=>(a.trueName||a.username).localeCompare(b.trueName||b.username, 'zh-CN')).map(t => (
+                    {teachers.map(t => (
                         <option key={t._id} value={t.trueName || t.username}>
                             {t.trueName || t.username} {t.homeroomClass ? `(已任: ${t.homeroomClass})` : ''}
                         </option>

pages/CourseList.tsx

@@ -1,14 +1,18 @@
 
 import React, { useEffect, useState } from 'react';
-import { Plus, Clock, Loader2, Edit, Trash2, X } from 'lucide-react';
+import { Plus, Clock, Loader2, Edit, Trash2, X, Filter } from 'lucide-react';
 import { api } from '../services/api';
 import { Course, Subject, User } from '../types';
 
 export const CourseList: React.FC = () => {
   const [courses, setCourses] = useState<Course[]>([]);
   const [subjects, setSubjects] = useState<Subject[]>([]);
-  const [teachers, setTeachers] = useState<User[]>([]); // New: List of teachers
+  const [teachers, setTeachers] = useState<User[]>([]); 
   const [loading, setLoading] = useState(true);
+  
+  // Filter state
+  const [filterSubject, setFilterSubject] = useState('All');
+
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [formData, setFormData] = useState({ courseCode: '', courseName: '', teacherName: '', credits: 2, capacity: 45 });
   const [editId, setEditId] = useState<string | null>(null);
@@ -19,7 +23,7 @@ export const CourseList: React.FC = () => {
       const [c, s, t] = await Promise.all([
          api.courses.getAll(), 
          api.subjects.getAll(),
-         api.users.getAll({ role: 'TEACHER' }) // Fetch teachers
+         api.users.getAll({ role: 'TEACHER' }) 
       ]);
       setCourses(c);
       setSubjects(s);
@@ -41,45 +45,72 @@ export const CourseList: React.FC = () => {
     if(confirm('删除课程？')) { await api.courses.delete(id); loadData(); }
   };
 
+  const filteredCourses = courses.filter(c => filterSubject === 'All' || c.courseName === filterSubject);
+
   return (
     <div className="space-y-6">
-       <div className="flex justify-between items-center">
-          <h2 className="text-xl font-bold">课程列表</h2>
-          <button onClick={() => { setEditId(null); setIsModalOpen(true); }} className="px-4 py-2 bg-indigo-600 text-white rounded-lg flex items-center text-sm"><Plus size={16} className="mr-1"/> 新增课程</button>
+       <div className="flex flex-col md:flex-row justify-between items-center gap-4">
+          <h2 className="text-xl font-bold text-gray-800">课程列表</h2>
+          
+          <div className="flex items-center gap-3 w-full md:w-auto">
+              <div className="flex items-center bg-white border rounded-lg px-2 py-1.5 flex-1 md:flex-none">
+                  <Filter size={16} className="text-gray-400 mr-2"/>
+                  <select 
+                    className="bg-transparent text-sm outline-none text-gray-700 min-w-[100px]"
+                    value={filterSubject}
+                    onChange={e => setFilterSubject(e.target.value)}
+                  >
+                      <option value="All">所有科目</option>
+                      {subjects.map(s => <option key={s._id} value={s.name}>{s.name}</option>)}
+                  </select>
+              </div>
+              <button onClick={() => { setEditId(null); setIsModalOpen(true); }} className="px-4 py-2 bg-indigo-600 text-white rounded-lg flex items-center text-sm hover:bg-indigo-700 transition-colors whitespace-nowrap">
+                  <Plus size={16} className="mr-1"/> 新增课程
+              </button>
+          </div>
        </div>
 
-       {loading ? <Loader2 className="animate-spin"/> : (
-         <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-            {courses.map(c => (
-               <div key={c._id || c.id} className="bg-white p-6 rounded-xl border shadow-sm">
-                  <h3 className="font-bold text-lg">{c.courseName}</h3>
-                  <p className="text-sm text-gray-500">教师: {c.teacherName}</p>
-                  <div className="mt-4 flex gap-2">
-                     <button onClick={() => { setFormData({ courseCode: c.courseCode, courseName: c.courseName, teacherName: c.teacherName, credits: c.credits, capacity: c.capacity }); setEditId(c._id || String(c.id)); setIsModalOpen(true); }} className="flex-1 bg-gray-50 text-blue-600 py-1 rounded text-sm">编辑</button>
-                     <button onClick={() => handleDelete(c._id || String(c.id))} className="flex-1 bg-gray-50 text-red-600 py-1 rounded text-sm">删除</button>
-                  </div>
-               </div>
-            ))}
-         </div>
+       {loading ? <div className="flex justify-center py-10"><Loader2 className="animate-spin text-indigo-600"/></div> : (
+         filteredCourses.length > 0 ? (
+             <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                {filteredCourses.map(c => (
+                   <div key={c._id || c.id} className="bg-white p-6 rounded-xl border shadow-sm hover:shadow-md transition-shadow">
+                      <h3 className="font-bold text-lg text-gray-800 mb-1">{c.courseName}</h3>
+                      <p className="text-sm text-gray-500 mb-4 flex items-center gap-2">
+                          <span className="bg-gray-100 px-2 py-0.5 rounded text-xs">{c.courseCode || 'No Code'}</span>
+                          <span>教师: {c.teacherName}</span>
+                      </p>
+                      <div className="flex gap-2 pt-2 border-t border-gray-50">
+                         <button onClick={() => { setFormData({ courseCode: c.courseCode, courseName: c.courseName, teacherName: c.teacherName, credits: c.credits, capacity: c.capacity }); setEditId(c._id || String(c.id)); setIsModalOpen(true); }} className="flex-1 bg-gray-50 text-blue-600 py-1.5 rounded text-sm hover:bg-blue-50 transition-colors font-medium">编辑</button>
+                         <button onClick={() => handleDelete(c._id || String(c.id))} className="flex-1 bg-gray-50 text-red-600 py-1.5 rounded text-sm hover:bg-red-50 transition-colors font-medium">删除</button>
+                      </div>
+                   </div>
+                ))}
+             </div>
+         ) : (
+             <div className="text-center py-12 text-gray-400 bg-white rounded-xl border border-dashed border-gray-200">
+                 没有找到符合条件的课程
+             </div>
+         )
        )}
 
        {isModalOpen && (
-          <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
-             <div className="bg-white p-6 rounded-xl w-full max-w-md">
-                <h3 className="font-bold mb-4">{editId ? '编辑' : '新增'}</h3>
+          <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50 backdrop-blur-sm">
+             <div className="bg-white p-6 rounded-xl w-full max-w-md shadow-xl animate-in zoom-in-95">
+                <h3 className="font-bold mb-4 text-lg text-gray-800">{editId ? '编辑课程' : '新增课程'}</h3>
                 <form onSubmit={handleSubmit} className="space-y-4">
                    <div>
-                      <label className="text-sm font-bold text-gray-500">科目</label>
-                      <select className="w-full border p-2 rounded" value={formData.courseName} onChange={e=>setFormData({...formData, courseName:e.target.value})} required>
+                      <label className="text-sm font-bold text-gray-500 mb-1 block">科目</label>
+                      <select className="w-full border p-2 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none" value={formData.courseName} onChange={e=>setFormData({...formData, courseName:e.target.value})} required>
                          <option value="">选择科目</option>
                          {subjects.map(s=><option key={s._id} value={s.name}>{s.name}</option>)}
                       </select>
                    </div>
                    
                    <div>
-                      <label className="text-sm font-bold text-gray-500">任课教师</label>
+                      <label className="text-sm font-bold text-gray-500 mb-1 block">任课教师</label>
                       <input 
-                        className="w-full border p-2 rounded" 
+                        className="w-full border p-2 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none" 
                         placeholder="选择或输入教师姓名" 
                         value={formData.teacherName} 
                         onChange={e=>setFormData({...formData, teacherName:e.target.value})} 
@@ -91,8 +122,10 @@ export const CourseList: React.FC = () => {
                       </datalist>
                    </div>
 
-                   <button className="w-full bg-blue-600 text-white py-2 rounded">保存</button>
-                   <button type="button" onClick={()=>setIsModalOpen(false)} className="w-full border py-2 rounded">取消</button>
+                   <div className="flex gap-3 pt-2">
+                       <button type="button" onClick={()=>setIsModalOpen(false)} className="flex-1 border py-2 rounded-lg hover:bg-gray-50">取消</button>
+                       <button className="flex-1 bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700 shadow-md">保存</button>
+                   </div>
                 </form>
              </div>
           </div>

pages/Dashboard.tsx

@@ -15,13 +15,22 @@ export const gradeOrder: Record<string, number> = {
     '初一': 7, '七年级': 7, '初二': 8, '八年级': 8, '初三': 9, '九年级': 9, 
     '高一': 10, '高二': 11, '高三': 12 
 };
+
 export const sortGrades = (a: string, b: string) => (gradeOrder[a] || 99) - (gradeOrder[b] || 99);
+
 export const sortClasses = (a: string, b: string) => {
+    // 1. Sort by Grade First
     const getGrade = (s: string) => Object.keys(gradeOrder).find(g => s.startsWith(g)) || '';
     const gradeA = getGrade(a);
     const gradeB = getGrade(b);
-    if (gradeA !== gradeB) return sortGrades(gradeA, gradeB);
-    const getNum = (s: string) => parseInt(s.replace(/[^0-9]/g, '')) || 0;
+    const gradeDiff = sortGrades(gradeA, gradeB);
+    if (gradeDiff !== 0) return gradeDiff;
+
+    // 2. Sort by Class Number (extract digits)
+    const getNum = (s: string) => {
+        const match = s.match(/(\d+)/);
+        return match ? parseInt(match[1]) : 0;
+    };
     return getNum(a) - getNum(b);
 };
 

pages/GameLucky.tsx

@@ -59,7 +59,16 @@ export const GameLucky: React.FC = () => {
       if (isTeacher) {
          if (currentUser.homeroomClass) {
             targetClass = currentUser.homeroomClass;
-            setStudents(allStus.filter((s: Student) => s.className === currentUser.homeroomClass));
+            const filtered = allStus.filter((s: Student) => s.className === currentUser.homeroomClass);
+            
+            // Sort by Seat No
+            filtered.sort((a, b) => {
+                const seatA = parseInt(a.seatNo || '99999');
+                const seatB = parseInt(b.seatNo || '99999');
+                if (seatA !== seatB) return seatA - seatB;
+                return a.name.localeCompare(b.name, 'zh-CN');
+            });
+            setStudents(filtered);
          } else {
             setStudents(allStus);
          }
@@ -180,7 +189,7 @@ export const GameLucky: React.FC = () => {
                                     onChange={e => setProxyStudentId(e.target.value)}
                                 >
                                     <option value="">-- 请选择 --</option>
-                                    {students.map(s => <option key={s._id} value={s._id || String(s.id)}>{s.name} ({s.studentNo})</option>)}
+                                    {students.map(s => <option key={s._id} value={s._id || String(s.id)}>{s.seatNo ? s.seatNo+'.':''}{s.name}</option>)}
                                 </select>
                             </div>
                         </div>

pages/GameMountain.tsx

@@ -93,10 +93,12 @@ export const GameMountain: React.FC = () => {
       
       const allStudents = await api.students.getAll();
       let targetClass = '';
+      let filteredStudents: Student[] = [];
       
       if (isTeacher && currentUser.homeroomClass) {
          targetClass = currentUser.homeroomClass;
-         setStudents(allStudents.filter((s: Student) => s.className === targetClass));
+         filteredStudents = allStudents.filter((s: Student) => s.className === targetClass);
+         
          // Load Achievements for this class
          const ac = await api.achievements.getConfig(targetClass);
          setAchConfig(ac);
@@ -104,10 +106,18 @@ export const GameMountain: React.FC = () => {
          const me = allStudents.find((s: Student) => s.name === (currentUser.trueName || currentUser.username));
          if (me) targetClass = me.className;
       } else if (isAdmin) {
-         setStudents(allStudents); // Admin sees all (simplified)
-         // Ideally admin selects a class first, but for now fallback to first class or empty
+         filteredStudents = allStudents; 
       }
 
+      // Sort students
+      filteredStudents.sort((a, b) => {
+          const seatA = parseInt(a.seatNo || '99999');
+          const seatB = parseInt(b.seatNo || '99999');
+          if (seatA !== seatB) return seatA - seatB;
+          return a.name.localeCompare(b.name, 'zh-CN');
+      });
+      setStudents(filteredStudents);
+
       if (targetClass) {
          const sess = await api.games.getMountainSession(targetClass);
          if (sess) {
@@ -140,7 +150,6 @@ export const GameMountain: React.FC = () => {
     if (!session || !isTeacher) return;
     
     // We need current config to check for semester (for achievements)
-    // Assuming current semester from global config if needed, or default
     const sysConfig = await api.config.getPublic();
     const currentSemester = sysConfig?.semester || '当前学期';
 
@@ -177,7 +186,6 @@ export const GameMountain: React.FC = () => {
                    }
                 }
              });
-             // alert(`🎉 ${t.name} 到达 ${newScore} 步！奖励已发放！`); // Optional: Notification
           }
        }
        return { ...t, score: newScore };
@@ -392,7 +400,7 @@ export const GameMountain: React.FC = () => {
                                                                 }`}
                                                                 title={isInOther ? `已在 ${otherTeam?.name}` : ''}
                                                             >
-                                                                <span className="truncate font-medium">{s.name}</span>
+                                                                <span className="truncate font-medium">{s.seatNo ? s.seatNo+'.':''}{s.name}</span>
                                                                 {isInCurrent && <CheckSquare size={14} className="text-blue-200"/>}
                                                                 {isInOther && <span className="text-[10px]">{otherTeam?.avatar}</span>}
                                                             </div>

pages/GameRewards.tsx

@@ -49,7 +49,6 @@ export const GameRewards: React.FC = () => {
          }
       } else {
          // Teacher View
-         // Only fetch students for grant dropdown
          const allStus = await api.students.getAll();
          
          let targetClass = '';
@@ -60,14 +59,19 @@ export const GameRewards: React.FC = () => {
              filteredStudents = allStus.filter((s: Student) => s.className === currentUser.homeroomClass);
          }
          
-         // Fetch filtered by class directly from API
-         // Backend handles excluding CONSOLATION now
          const res = await api.rewards.getClassRewards(page, PAGE_SIZE, targetClass);
          
          setRewards(res.list || []);
          setTotal(res.total || 0);
-         // Sort students for dropdown by name (pinyin)
-         setStudents(filteredStudents.sort((a: Student, b: Student) => a.name.localeCompare(b.name, 'zh-CN')));
+         
+         // Sort students: Seat No > Name
+         filteredStudents.sort((a: Student, b: Student) => {
+             const seatA = parseInt(a.seatNo || '99999');
+             const seatB = parseInt(b.seatNo || '99999');
+             if (seatA !== seatB) return seatA - seatB;
+             return a.name.localeCompare(b.name, 'zh-CN');
+         });
+         setStudents(filteredStudents);
       }
     } catch (e) { console.error(e); } 
     finally { setLoading(false); }
@@ -116,8 +120,7 @@ export const GameRewards: React.FC = () => {
       setEditForm({ name: r.name, count: r.count || 1 });
   };
 
-  // Client-side Filtering for Type/Status/Search on the current page data
-  // (In a full prod app, these would be API params, but okay for small page sizes)
+  // Client-side Filtering
   const displayRewards = rewards.filter(r => {
       if (filterType !== 'ALL' && r.rewardType !== filterType) return false;
       if (filterStatus !== 'ALL' && r.status !== filterStatus) return false;
@@ -271,7 +274,7 @@ export const GameRewards: React.FC = () => {
                         <label className="block text-xs font-bold text-gray-500 uppercase mb-1">选择学生</label>
                         <select className="w-full border border-gray-300 p-2 rounded-lg bg-gray-50 focus:bg-white text-sm" value={grantForm.studentId} onChange={e=>setGrantForm({...grantForm, studentId: e.target.value})}>
                         <option value="">-- 请选择 --</option>
-                        {students.map(s => <option key={s._id} value={s._id || String(s.id)}>{s.name} ({s.studentNo})</option>)}
+                        {students.map(s => <option key={s._id} value={s._id || String(s.id)}>{s.seatNo ? s.seatNo+'.':''}{s.name}</option>)}
                         </select>
                     </div>
                     <div>

pages/ScoreList.tsx

@@ -2,27 +2,30 @@
 import React, { useState, useEffect } from 'react';
 import { api } from '../services/api';
 import { Score, Student, Subject, ClassInfo, ExamStatus, Exam, SystemConfig } from '../types';
-import { Loader2, Plus, Trash2, Award, FileSpreadsheet, X, Upload, Edit, Save, Calendar } from 'lucide-react';
+import { Loader2, Plus, Trash2, Award, FileSpreadsheet, X, Upload, Edit, Save, Calendar, Filter, ChevronLeft, ChevronRight } from 'lucide-react';
 
-// Reuse sort helper
 const localSortGrades = (a: string, b: string) => {
     const order: Record<string, number> = { '一年级': 1, '二年级': 2, '三年级': 3, '四年级': 4, '五年级': 5, '六年级': 6, '初一': 7, '七年级': 7, '初二': 8, '八年级': 8, '初三': 9, '九年级': 9, '高一': 10, '高二': 11, '高三': 12 };
     return (order[a] || 99) - (order[b] || 99);
 };
 
 export const ScoreList: React.FC = () => {
-  // ... state ...
   const [subjects, setSubjects] = useState<Subject[]>([]);
   const [activeSubject, setActiveSubject] = useState(''); 
   const [scores, setScores] = useState<Score[]>([]);
   const [students, setStudents] = useState<Student[]>([]);
   const [classList, setClassList] = useState<ClassInfo[]>([]);
   const [exams, setExams] = useState<Exam[]>([]);
-  const [semesters, setSemesters] = useState<string[]>([]); // New State
+  const [semesters, setSemesters] = useState<string[]>([]); 
   const [loading, setLoading] = useState(true);
   
+  // Filters & Pagination
   const [selectedGrade, setSelectedGrade] = useState('All');
   const [selectedClass, setSelectedClass] = useState('All');
+  const [selectedExam, setSelectedExam] = useState('All'); // New Exam Filter
+  const [page, setPage] = useState(1);
+  const pageSize = 15;
+
   const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
   
   const [isAddOpen, setIsAddOpen] = useState(false);
@@ -30,7 +33,7 @@ export const ScoreList: React.FC = () => {
   const [isExamModalOpen, setIsExamModalOpen] = useState(false);
   const [importFile, setImportFile] = useState<File | null>(null);
   const [submitting, setSubmitting] = useState(false);
-  const [importSemester, setImportSemester] = useState(''); // Default empty, wait for fetch
+  const [importSemester, setImportSemester] = useState(''); 
   const [importType, setImportType] = useState('Final');
   const [importExamName, setImportExamName] = useState(''); 
   const [formData, setFormData] = useState({ studentId: '', score: '', type: 'Final', examName: '', status: 'Normal' });
@@ -49,7 +52,7 @@ export const ScoreList: React.FC = () => {
         api.students.getAll(),
         api.classes.getAll(),
         api.exams.getAll(),
-        api.config.getPublic() // Fetch config for semesters
+        api.config.getPublic() 
       ]);
       setSubjects(subs);
       if (subs.length > 0 && !activeSubject) setActiveSubject(subs[0].name);
@@ -57,7 +60,6 @@ export const ScoreList: React.FC = () => {
       setStudents(stus);
       setClassList(cls);
       setExams(exs);
-      // Set Semesters
       if (cfg && cfg.semesters) {
          setSemesters(cfg.semesters);
          if (cfg.semester) setImportSemester(cfg.semester);
@@ -69,24 +71,39 @@ export const ScoreList: React.FC = () => {
 
   useEffect(() => { loadData(); }, []);
 
+  // Reset page when filters change
+  useEffect(() => { setPage(1); }, [activeSubject, selectedGrade, selectedClass, selectedExam]);
+
   const hasPermission = (studentClass: string) => {
      if (currentUser?.role === 'ADMIN') return true;
      if (currentUser?.role === 'TEACHER' && currentUser.homeroomClass === studentClass) return true;
      return false;
   };
 
-  // ... (Permission Checks same as before) ...
   const canModify = currentUser?.role === 'ADMIN' || !!currentUser?.homeroomClass;
 
+  // Filter Logic
   const filteredScores = scores.filter(s => {
     if (s.courseName !== activeSubject) return false;
+    
+    // Exam Filter
+    if (selectedExam !== 'All') {
+        const sExamName = s.examName || s.type;
+        if (sExamName !== selectedExam) return false;
+    }
+
     const stu = students.find(st => st.studentNo === s.studentNo);
     if (!stu) return false;
+    
     const matchesGrade = selectedGrade === 'All' || stu.className.includes(selectedGrade);
     const matchesClass = selectedClass === 'All' || stu.className.includes(selectedClass);
     return matchesGrade && matchesClass;
   });
 
+  // Pagination Logic
+  const totalPages = Math.ceil(filteredScores.length / pageSize);
+  const paginatedScores = filteredScores.slice((page - 1) * pageSize, page * pageSize);
+
   const handleBatchDelete = async () => {
     if (confirm(`删除 ${selectedIds.size} 条记录？`)) {
       await api.batchDelete('score', Array.from(selectedIds));
@@ -106,7 +123,7 @@ export const ScoreList: React.FC = () => {
       studentNo: stu.studentNo,
       courseName: activeSubject,
       score: formData.status === 'Normal' ? Number(formData.score) : 0,
-      semester: importSemester, // Use global semester state or form specific
+      semester: importSemester,
       type: formData.type,
       examName: formData.examName,
       status: formData.status
@@ -116,7 +133,6 @@ export const ScoreList: React.FC = () => {
     loadData();
   };
 
-  // ... (startEditing, saveEdit logic same) ...
   const startEditing = (s: Score) => {
     const stu = students.find(st => st.studentNo === s.studentNo);
     if (stu && !hasPermission(stu.className)) return alert('无权编辑');
@@ -190,17 +206,18 @@ export const ScoreList: React.FC = () => {
   
   const toggleSelect = (id: string) => { const newSet = new Set(selectedIds); if (newSet.has(id)) newSet.delete(id); else newSet.add(id); setSelectedIds(newSet); };
   
-  // SORTED Grades
+  // SORTED Grades & Classes
   const uniqueGrades = Array.from(new Set(classList.map(c => c.grade))).sort(localSortGrades);
-  
   const filteredClasses = classList.filter(c => selectedGrade === 'All' || c.grade === selectedGrade);
   const uniqueClasses = Array.from(new Set(filteredClasses.map(c => c.className))).sort();
-  const uniqueExamNames = Array.from(new Set(scores.map(s => s.examName || s.type)));
+  
+  // Unique Exam Names for Filter (Filtered by subject potentially, but simpler to show all known for now)
+  const uniqueExamNames = Array.from(new Set(scores.filter(s => s.courseName === activeSubject).map(s => s.examName || s.type)));
 
   return (
     <div className="space-y-6">
        {/* ... Header and Filters ... */}
-       <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden min-h-[500px]">
+       <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden flex flex-col min-h-[600px]">
           {loading && <div className="p-10 text-center"><Loader2 className="animate-spin inline"/></div>}
           
           <div className="p-4 md:p-6 border-b border-gray-100">
@@ -220,15 +237,22 @@ export const ScoreList: React.FC = () => {
                 </div>
                 )}
              </div>
-             <div className="flex flex-col md:flex-row gap-2 md:gap-4 items-stretch md:items-center bg-gray-50 p-3 rounded-lg">
-                <select className="border border-gray-300 p-2 rounded text-sm text-gray-900 focus:ring-2 focus:ring-blue-500" value={selectedGrade} onChange={e => { setSelectedGrade(e.target.value); setSelectedClass('All'); }}>
+             
+             {/* Filter Bar */}
+             <div className="flex flex-wrap gap-2 items-center bg-gray-50 p-3 rounded-lg">
+                <div className="flex items-center text-gray-500 text-sm font-bold mr-2"><Filter size={16} className="mr-1"/> 筛选:</div>
+                <select className="border border-gray-300 p-2 rounded text-sm text-gray-900 focus:ring-2 focus:ring-blue-500 outline-none bg-white" value={selectedGrade} onChange={e => { setSelectedGrade(e.target.value); setSelectedClass('All'); }}>
                    <option value="All">所有年级</option>
                    {uniqueGrades.map(g=><option key={g} value={g}>{g}</option>)}
                 </select>
-                <select className="border border-gray-300 p-2 rounded text-sm text-gray-900 focus:ring-2 focus:ring-blue-500" value={selectedClass} onChange={e=>setSelectedClass(e.target.value)}>
+                <select className="border border-gray-300 p-2 rounded text-sm text-gray-900 focus:ring-2 focus:ring-blue-500 outline-none bg-white" value={selectedClass} onChange={e=>setSelectedClass(e.target.value)}>
                    <option value="All">所有班级</option>
                    {uniqueClasses.map(c=><option key={c} value={c}>{c}</option>)}
                 </select>
+                <select className="border border-gray-300 p-2 rounded text-sm text-gray-900 focus:ring-2 focus:ring-blue-500 outline-none bg-white" value={selectedExam} onChange={e=>setSelectedExam(e.target.value)}>
+                   <option value="All">所有考试</option>
+                   {uniqueExamNames.map(e=><option key={e} value={e}>{e}</option>)}
+                </select>
              </div>
           </div>
 
@@ -243,15 +267,12 @@ export const ScoreList: React.FC = () => {
           </div>
 
           {/* Table ... */}
-          <div className="overflow-x-auto">
+          <div className="flex-1 overflow-x-auto">
             <table className="w-full text-left min-w-[800px]">
-               <thead className="bg-gray-50 text-xs text-gray-500 uppercase">
+               <thead className="bg-gray-50 text-xs text-gray-500 uppercase sticky top-0">
                   <tr>
                      <th className="px-6 py-3 w-10">
-                        {canModify && <input type="checkbox" onChange={e => {
-                           if(e.target.checked) setSelectedIds(new Set(filteredScores.map(s=>s._id||String(s.id))));
-                           else setSelectedIds(new Set());
-                        }} checked={filteredScores.length > 0 && selectedIds.size === filteredScores.length}/>}
+                        {canModify && <input type="checkbox" disabled/>} {/* Batch delete logic simplified for pagination */}
                      </th>
                      <th className="px-6 py-3">姓名</th>
                      <th className="px-6 py-3">考试名称</th>
@@ -260,7 +281,7 @@ export const ScoreList: React.FC = () => {
                   </tr>
                </thead>
                <tbody>
-                  {filteredScores.map(s => {
+                  {paginatedScores.length > 0 ? paginatedScores.map(s => {
                      const isEditing = editingId === (s._id || String(s.id));
                      const displayScore = s.status === 'Normal' ? s.score : (s.status === 'Absent' ? '缺考' : s.status === 'Leave' ? '请假' : '作弊');
                      const scoreColor = s.status !== 'Normal' ? 'text-gray-400' : (s.score < 60 ? 'text-red-500' : 'text-blue-600');
@@ -300,10 +321,24 @@ export const ScoreList: React.FC = () => {
                           </td>
                        </tr>
                      );
-                  })}
+                  }) : (
+                      <tr><td colSpan={5} className="text-center py-10 text-gray-400">没有找到成绩记录</td></tr>
+                  )}
                </tbody>
             </table>
           </div>
+
+          {/* Pagination Footer */}
+          {totalPages > 1 && (
+              <div className="p-4 border-t border-gray-100 flex items-center justify-between bg-gray-50">
+                  <span className="text-xs text-gray-500">共 {filteredScores.length} 条</span>
+                  <div className="flex items-center gap-2">
+                      <button onClick={()=>setPage(Math.max(1, page-1))} disabled={page===1} className="p-1 rounded hover:bg-gray-200 disabled:opacity-30"><ChevronLeft size={16}/></button>
+                      <span className="text-sm font-medium text-gray-700">第 {page} / {totalPages} 页</span>
+                      <button onClick={()=>setPage(Math.min(totalPages, page+1))} disabled={page>=totalPages} className="p-1 rounded hover:bg-gray-200 disabled:opacity-30"><ChevronRight size={16}/></button>
+                  </div>
+              </div>
+          )}
        </div>
 
        {selectedIds.size > 0 && (
@@ -346,7 +381,7 @@ export const ScoreList: React.FC = () => {
           </div>
        )}
 
-       {/* Exam Schedule Modal (Enhanced with Type) */}
+       {/* Exam Schedule Modal */}
        {isExamModalOpen && (
           <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
              <div className="bg-white rounded-xl p-6 w-full max-w-lg max-h-[80vh] overflow-y-auto">
@@ -406,7 +441,6 @@ export const ScoreList: React.FC = () => {
                                <option value="Midterm">期中考试</option>
                                <option value="Quiz">平时测验</option>
                             </select>
-                            {/* Updated Semester Selection */}
                             <select className="border border-gray-300 p-2 rounded text-sm text-gray-900" value={importSemester} onChange={e=>setImportSemester(e.target.value)}>
                                {semesters.map(s => <option key={s} value={s}>{s}</option>)}
                             </select>