Spaces:

dvc890
/

stud-manager

Sleeping

App Files Files Community

dvc890 commited on Nov 30, 2025

Commit

a01dcda

verified ·

1 Parent(s): 8661c24

Upload 25 files

Browse files

Files changed (7) hide show

App.tsx +62 -3
index.html +4 -4
pages/ScoreList.tsx +57 -27
server.js +2 -1
services/api.ts +8 -4
types.ts +1 -0
vite.config.ts +11 -1

App.tsx CHANGED Viewed

@@ -1,4 +1,3 @@
 import React, { useState, useEffect } from 'react';
 import { Sidebar } from './components/Sidebar';
 import { Header } from './components/Header';
@@ -14,8 +13,60 @@ import { UserList } from './pages/UserList';
 import { Login } from './pages/Login';
 import { User, UserRole } from './types';
 import { api } from './services/api';
-const App: React.FC = () => {
   const [isAuthenticated, setIsAuthenticated] = useState(false);
   const [currentUser, setCurrentUser] = useState<User | null>(null);
   const [currentView, setCurrentView] = useState('dashboard');
@@ -94,4 +145,12 @@ const App: React.FC = () => {
   );
 };
-export default App;

 import React, { useState, useEffect } from 'react';
 import { Sidebar } from './components/Sidebar';
 import { Header } from './components/Header';
 import { Login } from './pages/Login';
 import { User, UserRole } from './types';
 import { api } from './services/api';
+import { AlertTriangle } from 'lucide-react';
+// Error Boundary Component
+class ErrorBoundary extends React.Component<{children: React.ReactNode}, {hasError: boolean, error: Error | null}> {
+  constructor(props: any) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+  static getDerivedStateFromError(error: Error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error("Uncaught error:", error, errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="min-h-screen flex items-center justify-center bg-gray-50 p-4">
+          <div className="bg-white p-8 rounded-xl shadow-lg max-w-lg w-full text-center">
+            <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-red-100 mb-4">
+              <AlertTriangle className="h-8 w-8 text-red-600" />
+            </div>
+            <h2 className="text-2xl font-bold text-gray-900 mb-2">哎呀，页面出错了</h2>
+            <p className="text-gray-500 mb-6">系统遇到了一些非预期的问题。通常这可能是网络波动或缓存问题导致的。</p>
+            <div className="bg-gray-50 p-4 rounded text-left text-xs text-red-500 overflow-auto max-h-40 mb-6 border border-red-100 font-mono">
+              {this.state.error?.message || 'Unknown Error'}
+            </div>
+            <button
+              onClick={() => window.location.reload()}
+              className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium"
+            >
+              刷新页面重试
+            </button>
+            <button
+              onClick={() => { localStorage.clear(); window.location.reload(); }}
+              className="mt-3 w-full text-sm text-gray-400 hover:text-gray-600 underline"
+            >
+              清除缓存并重置 (解决白屏)
+            </button>
+          </div>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+const AppContent: React.FC = () => {
   const [isAuthenticated, setIsAuthenticated] = useState(false);
   const [currentUser, setCurrentUser] = useState<User | null>(null);
   const [currentView, setCurrentView] = useState('dashboard');
   );
 };
+const App: React.FC = () => {
+  return (
+    <ErrorBoundary>
+      <AppContent />
+    </ErrorBoundary>
+  );
+};
+export default App;

index.html CHANGED Viewed

@@ -37,8 +37,8 @@
     "react/": "https://aistudiocdn.com/react@^19.2.0/",
     "lucide-react": "https://aistudiocdn.com/lucide-react@^0.555.0",
     "recharts": "https://aistudiocdn.com/recharts@^3.5.1",
-    "@vitejs/plugin-react": "https://aistudiocdn.com/@vitejs/plugin-react@^5.1.1",
-    "vite": "https://aistudiocdn.com/vite@^7.2.4"
   }
 }
 </script>
@@ -46,6 +46,6 @@
 </head>
   <body>
     <div id="root"></div>
-  <script type="module" src="/index.tsx"></script>
-</body>
 </html>

     "react/": "https://aistudiocdn.com/react@^19.2.0/",
     "lucide-react": "https://aistudiocdn.com/lucide-react@^0.555.0",
     "recharts": "https://aistudiocdn.com/recharts@^3.5.1",
+    "vite": "https://aistudiocdn.com/vite@^7.2.4",
+    "@vitejs/plugin-react": "https://aistudiocdn.com/@vitejs/plugin-react@^5.1.1"
   }
 }
 </script>
 </head>
   <body>
     <div id="root"></div>
+    <script type="module" src="/index.tsx"></script>
+  </body>
 </html>

pages/ScoreList.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { api } from '../services/api';
-import { Score, Student, Subject } from '../types';
 import { Loader2, Plus, Trash2, Award, FileSpreadsheet, X, Upload } from 'lucide-react';
 export const ScoreList: React.FC = () => {
@@ -9,33 +9,40 @@ export const ScoreList: React.FC = () => {
   const [activeSubject, setActiveSubject] = useState('');
   const [scores, setScores] = useState<Score[]>([]);
   const [students, setStudents] = useState<Student[]>([]);
   const [loading, setLoading] = useState(true);
-  const [selectedGrade, setSelectedGrade] = useState('六年级');
-  const [selectedClass, setSelectedClass] = useState('(1)班');
   const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
   const [isAddOpen, setIsAddOpen] = useState(false);
   const [isImportOpen, setIsImportOpen] = useState(false);
   const [importFile, setImportFile] = useState<File | null>(null);
   const [submitting, setSubmitting] = useState(false);
   const [importSemester, setImportSemester] = useState('2023-2024学年 第一学期');
   const [importType, setImportType] = useState('Final');
-  const [formData, setFormData] = useState({ studentId: '', score: '', type: 'Final' });
   const loadData = async () => {
     setLoading(true);
     try {
-      const [subs, scs, stus] = await Promise.all([
         api.subjects.getAll(),
         api.scores.getAll(),
-        api.students.getAll()
       ]);
       setSubjects(subs);
       if (subs.length > 0 && !activeSubject) setActiveSubject(subs[0].name);
       setScores(scs);
       setStudents(stus);
     } catch (e) { console.error(e); }
     finally { setLoading(false); }
   };
@@ -45,7 +52,12 @@ export const ScoreList: React.FC = () => {
   const filteredScores = scores.filter(s => {
     if (s.courseName !== activeSubject) return false;
     const stu = students.find(st => st.studentNo === s.studentNo);
-    return stu && stu.className === (selectedGrade + selectedClass);
   });
   const handleBatchDelete = async () => {
@@ -65,10 +77,12 @@ export const ScoreList: React.FC = () => {
       studentNo: stu.studentNo,
       courseName: activeSubject,
       score: Number(formData.score),
-      semester: '2023-Fall',
-      type: formData.type
     });
     setIsAddOpen(false);
     loadData();
   };
@@ -108,14 +122,12 @@ export const ScoreList: React.FC = () => {
         const promises: Promise<any>[] = [];
         jsonData.forEach((row: any) => {
-           // Create a clean row object with trimmed keys
            const cleanRow: any = {};
            Object.keys(row).forEach(k => cleanRow[k.trim()] = row[k]);
            const studentName = cleanRow['姓名'] || cleanRow['Name'];
            if (!studentName) return;
-           // Try to find student
            const student = students.find(s => s.name === studentName);
            if (student) {
@@ -129,7 +141,8 @@ export const ScoreList: React.FC = () => {
                           courseName: sub.name,
                           score: Number(scoreVal),
                           semester: importSemester,
-                          type: importType
                        }).then(() => successCount++)
                     );
                  }
@@ -141,6 +154,7 @@ export const ScoreList: React.FC = () => {
         alert(`成功导入 ${successCount} 条成绩记录`);
         setIsImportOpen(false);
         setImportFile(null);
         loadData();
       } catch (err) {
         console.error(err);
@@ -159,6 +173,9 @@ export const ScoreList: React.FC = () => {
      setSelectedIds(newSet);
   };
   return (
     <div className="space-y-6">
        <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden min-h-[500px]">
@@ -178,11 +195,13 @@ export const ScoreList: React.FC = () => {
              </div>
              <div className="flex gap-4 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)}>
-                   {['一年级','二年级','三年级','四年级','五年级','六年级'].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)}>
-                   {['(1)班','(2)班','(3)班'].map(c=><option key={c} value={c}>{c}</option>)}
                 </select>
              </div>
           </div>
@@ -209,6 +228,7 @@ export const ScoreList: React.FC = () => {
                       }} checked={filteredScores.length > 0 && selectedIds.size === filteredScores.length}/>
                    </th>
                    <th className="px-6 py-3">姓名</th>
                    <th className="px-6 py-3">分数</th>
                    <th className="px-6 py-3 text-right">操作</th>
                 </tr>
@@ -218,11 +238,12 @@ export const ScoreList: React.FC = () => {
                    <tr key={s._id || s.id} className="hover:bg-gray-50">
                       <td className="px-6 py-3"><input type="checkbox" checked={selectedIds.has(s._id||String(s.id))} onChange={()=>toggleSelect(s._id||String(s.id))}/></td>
                       <td className="px-6 py-3 font-medium text-gray-800">{s.studentName}</td>
                       <td className="px-6 py-3 font-bold text-blue-600">{s.score}</td>
                       <td className="px-6 py-3 text-right"><button onClick={async()=>{await api.scores.delete(s._id||String(s.id));loadData();}} className="text-red-400 hover:text-red-600"><Trash2 size={16}/></button></td>
                    </tr>
                 )) : (
-                   <tr><td colSpan={4} className="text-center py-10 text-gray-400">该班级暂无 {activeSubject} 成绩</td></tr>
                 )}
              </tbody>
           </table>
@@ -243,8 +264,14 @@ export const ScoreList: React.FC = () => {
                 <form onSubmit={handleSubmit} className="space-y-4">
                    <select className="w-full border p-2 rounded" value={formData.studentId} onChange={e=>setFormData({...formData, studentId:e.target.value})} required>
                       <option value="">选择学生</option>
-                      {students.filter(s=>s.className===selectedGrade+selectedClass).map(s=><option key={s._id||s.id} value={s._id||s.id}>{s.name}</option>)}
                    </select>
                    <input type="number" className="w-full border p-2 rounded" placeholder="分数" value={formData.score} onChange={e=>setFormData({...formData, score:e.target.value})} required/>
                    <div className="flex gap-2">
                       <button type="submit" className="flex-1 bg-blue-600 text-white py-2 rounded">保存</button>
@@ -266,21 +293,24 @@ export const ScoreList: React.FC = () => {
                 <div className="space-y-4">
                    <div>
-                      <label className="text-sm font-bold text-gray-600">选择考试类型</label>
-                      <div className="grid grid-cols-2 gap-2 mt-1">
-                         <select className="border border-gray-300 p-2 rounded text-sm text-gray-900 focus:ring-2 focus:ring-blue-500" value={importType} onChange={e=>setImportType(e.target.value)}>
-                            <option value="Final">期末考试</option>
-                            <option value="Midterm">期中考试</option>
-                            <option value="Quiz">平时测验</option>
-                         </select>
-                         <input className="border border-gray-300 p-2 rounded text-sm text-gray-900" value={importSemester} onChange={e=>setImportSemester(e.target.value)} placeholder="学期" />
                       </div>
                    </div>
                    <div className="relative border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:bg-gray-50 transition-colors">
                       <Upload className="mx-auto h-10 w-10 text-gray-400" />
                       <p className="mt-2 text-sm text-gray-600">点击上传 .xlsx 文件</p>
-                      <p className="text-xs text-gray-400 mt-1">系统将自动识别表头中的学科列(如: 语文, 数学)</p>
                       <input
                         type="file"
                         accept=".xlsx, .xls"

 import React, { useState, useEffect } from 'react';
 import { api } from '../services/api';
+import { Score, Student, Subject, ClassInfo } from '../types';
 import { Loader2, Plus, Trash2, Award, FileSpreadsheet, X, Upload } from 'lucide-react';
 export const ScoreList: React.FC = () => {
   const [activeSubject, setActiveSubject] = useState('');
   const [scores, setScores] = useState<Score[]>([]);
   const [students, setStudents] = useState<Student[]>([]);
+  const [classList, setClassList] = useState<ClassInfo[]>([]);
   const [loading, setLoading] = useState(true);
+  const [selectedGrade, setSelectedGrade] = useState('All');
+  const [selectedClass, setSelectedClass] = useState('All');
   const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
   const [isAddOpen, setIsAddOpen] = useState(false);
   const [isImportOpen, setIsImportOpen] = useState(false);
   const [importFile, setImportFile] = useState<File | null>(null);
   const [submitting, setSubmitting] = useState(false);
+  // Import Config
   const [importSemester, setImportSemester] = useState('2023-2024学年 第一学期');
   const [importType, setImportType] = useState('Final');
+  const [importExamName, setImportExamName] = useState(''); // New: Exam Name for import
+  // Manual Add Form
+  const [formData, setFormData] = useState({ studentId: '', score: '', type: 'Final', examName: '' });
   const loadData = async () => {
     setLoading(true);
     try {
+      const [subs, scs, stus, cls] = await Promise.all([
         api.subjects.getAll(),
         api.scores.getAll(),
+        api.students.getAll(),
+        api.classes.getAll()
       ]);
       setSubjects(subs);
       if (subs.length > 0 && !activeSubject) setActiveSubject(subs[0].name);
       setScores(scs);
       setStudents(stus);
+      setClassList(cls);
     } catch (e) { console.error(e); }
     finally { setLoading(false); }
   };
   const filteredScores = scores.filter(s => {
     if (s.courseName !== activeSubject) return false;
     const stu = students.find(st => st.studentNo === s.studentNo);
+    if (!stu) return false;
+    // Filter by grade and class
+    const matchesGrade = selectedGrade === 'All' || stu.className.includes(selectedGrade);
+    const matchesClass = selectedClass === 'All' || stu.className.includes(selectedClass);
+    return matchesGrade && matchesClass;
   });
   const handleBatchDelete = async () => {
       studentNo: stu.studentNo,
       courseName: activeSubject,
       score: Number(formData.score),
+      semester: '2023-2024学年 第一学期',
+      type: formData.type,
+      examName: formData.examName
     });
     setIsAddOpen(false);
+    setFormData({ studentId: '', score: '', type: 'Final', examName: '' });
     loadData();
   };
         const promises: Promise<any>[] = [];
         jsonData.forEach((row: any) => {
            const cleanRow: any = {};
            Object.keys(row).forEach(k => cleanRow[k.trim()] = row[k]);
            const studentName = cleanRow['姓名'] || cleanRow['Name'];
            if (!studentName) return;
            const student = students.find(s => s.name === studentName);
            if (student) {
                           courseName: sub.name,
                           score: Number(scoreVal),
                           semester: importSemester,
+                          type: importType,
+                          examName: importExamName || '批量导入'
                        }).then(() => successCount++)
                     );
                  }
         alert(`成功导入 ${successCount} 条成绩记录`);
         setIsImportOpen(false);
         setImportFile(null);
+        setImportExamName('');
         loadData();
       } catch (err) {
         console.error(err);
      setSelectedIds(newSet);
   };
+  const uniqueGrades = Array.from(new Set(classList.map(c => c.grade))).sort();
+  const uniqueClasses = Array.from(new Set(classList.map(c => c.className))).sort();
   return (
     <div className="space-y-6">
        <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden min-h-[500px]">
              </div>
              <div className="flex gap-4 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 min-w-[120px]" value={selectedGrade} onChange={e=>setSelectedGrade(e.target.value)}>
+                   <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 min-w-[120px]" value={selectedClass} onChange={e=>setSelectedClass(e.target.value)}>
+                   <option value="All">所有班级</option>
+                   {uniqueClasses.map(c=><option key={c} value={c}>{c}</option>)}
                 </select>
              </div>
           </div>
                       }} checked={filteredScores.length > 0 && selectedIds.size === filteredScores.length}/>
                    </th>
                    <th className="px-6 py-3">姓名</th>
+                   <th className="px-6 py-3">考试名称</th>
                    <th className="px-6 py-3">分数</th>
                    <th className="px-6 py-3 text-right">操作</th>
                 </tr>
                    <tr key={s._id || s.id} className="hover:bg-gray-50">
                       <td className="px-6 py-3"><input type="checkbox" checked={selectedIds.has(s._id||String(s.id))} onChange={()=>toggleSelect(s._id||String(s.id))}/></td>
                       <td className="px-6 py-3 font-medium text-gray-800">{s.studentName}</td>
+                      <td className="px-6 py-3 text-sm text-gray-500">{s.examName || s.type}</td>
                       <td className="px-6 py-3 font-bold text-blue-600">{s.score}</td>
                       <td className="px-6 py-3 text-right"><button onClick={async()=>{await api.scores.delete(s._id||String(s.id));loadData();}} className="text-red-400 hover:text-red-600"><Trash2 size={16}/></button></td>
                    </tr>
                 )) : (
+                   <tr><td colSpan={5} className="text-center py-10 text-gray-400">该班级暂无 {activeSubject} 成绩</td></tr>
                 )}
              </tbody>
           </table>
                 <form onSubmit={handleSubmit} className="space-y-4">
                    <select className="w-full border p-2 rounded" value={formData.studentId} onChange={e=>setFormData({...formData, studentId:e.target.value})} required>
                       <option value="">选择学生</option>
+                      {/* Filter students in dropdown based on selected grade/class if specific ones selected, else show all */}
+                      {students.filter(s => {
+                         if (selectedGrade !== 'All' && !s.className.includes(selectedGrade)) return false;
+                         if (selectedClass !== 'All' && !s.className.includes(selectedClass)) return false;
+                         return true;
+                      }).map(s=><option key={s._id||s.id} value={s._id||s.id}>{s.name} - {s.className}</option>)}
                    </select>
+                   <input className="w-full border p-2 rounded" placeholder="考试名称 (如: 期中测验)" value={formData.examName} onChange={e=>setFormData({...formData, examName:e.target.value})} required/>
                    <input type="number" className="w-full border p-2 rounded" placeholder="分数" value={formData.score} onChange={e=>setFormData({...formData, score:e.target.value})} required/>
                    <div className="flex gap-2">
                       <button type="submit" className="flex-1 bg-blue-600 text-white py-2 rounded">保存</button>
                 <div className="space-y-4">
                    <div>
+                      <label className="text-sm font-bold text-gray-600">考试信息</label>
+                      <div className="space-y-2 mt-1">
+                         <input className="w-full border border-gray-300 p-2 rounded text-sm text-gray-900" value={importExamName} onChange={e=>setImportExamName(e.target.value)} placeholder="自定义考试名称 (如: 第三次月考)" />
+                         <div className="grid grid-cols-2 gap-2">
+                            <select className="border border-gray-300 p-2 rounded text-sm text-gray-900" value={importType} onChange={e=>setImportType(e.target.value)}>
+                               <option value="Final">期末考试</option>
+                               <option value="Midterm">期中考试</option>
+                               <option value="Quiz">平时测验</option>
+                            </select>
+                            <input className="border border-gray-300 p-2 rounded text-sm text-gray-900" value={importSemester} onChange={e=>setImportSemester(e.target.value)} placeholder="学期" />
+                         </div>
                       </div>
                    </div>
                    <div className="relative border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:bg-gray-50 transition-colors">
                       <Upload className="mx-auto h-10 w-10 text-gray-400" />
                       <p className="mt-2 text-sm text-gray-600">点击上传 .xlsx 文件</p>
+                      <p className="text-xs text-gray-400 mt-1">系统将自动识别表头中的学科列</p>
                       <input
                         type="file"
                         accept=".xlsx, .xls"

server.js CHANGED Viewed

@@ -94,7 +94,8 @@ const ScoreSchema = new mongoose.Schema({
   courseName: String,
   score: Number,
   semester: String,
-  type: String
 });
 const Score = mongoose.model('Score', ScoreSchema);

   courseName: String,
   score: Number,
   semester: String,
+  type: String,
+  examName: String
 });
 const Score = mongoose.model('Score', ScoreSchema);

services/api.ts CHANGED Viewed

@@ -1,4 +1,3 @@
 /// <reference types="vite/client" />
 import { User, ClassInfo, SystemConfig, Subject } from '../types';
@@ -54,8 +53,13 @@ export const api = {
     },
     getCurrentUser: (): User | null => {
       if (typeof window !== 'undefined') {
-        const stored = localStorage.getItem('user');
-        if (stored) return JSON.parse(stored);
       }
       return null;
     }
@@ -110,4 +114,4 @@ export const api = {
   batchDelete: (type: 'student' | 'score' | 'user', ids: string[]) => {
     return request('/batch-delete', { method: 'POST', body: JSON.stringify({ type, ids }) });
   }
-};

 /// <reference types="vite/client" />
 import { User, ClassInfo, SystemConfig, Subject } from '../types';
     },
     getCurrentUser: (): User | null => {
       if (typeof window !== 'undefined') {
+        try {
+          const stored = localStorage.getItem('user');
+          if (stored) return JSON.parse(stored);
+        } catch (e) {
+          console.error("Error parsing user from localStorage", e);
+          localStorage.removeItem('user'); // Clean up corrupted data
+        }
       }
       return null;
     }
   batchDelete: (type: 'student' | 'score' | 'user', ids: string[]) => {
     return request('/batch-delete', { method: 'POST', body: JSON.stringify({ type, ids }) });
   }
+};

types.ts CHANGED Viewed

@@ -81,6 +81,7 @@ export interface Score {
   score: number;
   semester: string;
   type: 'Midterm' | 'Final' | 'Quiz';
 }
 export interface ApiResponse<T> {

   score: number;
   semester: string;
   type: 'Midterm' | 'Final' | 'Quiz';
+  examName?: string; // e.g. "期中限时练习"
 }
 export interface ApiResponse<T> {

vite.config.ts CHANGED Viewed

@@ -6,6 +6,16 @@ export default defineConfig({
   plugins: [react()],
   build: {
     outDir: 'dist', // 确保编译输出到 dist 目录
-    emptyOutDir: true
   }
 });

   plugins: [react()],
   build: {
     outDir: 'dist', // 确保编译输出到 dist 目录
+    emptyOutDir: true,
+    chunkSizeWarningLimit: 1000,
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          vendor: ['react', 'react-dom'],
+          charts: ['recharts'],
+          utils: ['lucide-react']
+        }
+      }
+    }
   }
 });