Upload 41 files

App.tsx

@@ -15,6 +15,7 @@ const UserList = React.lazy(() => import('./pages/UserList').then(module => ({ d
 const SchoolList = React.lazy(() => import('./pages/SchoolList').then(module => ({ default: module.SchoolList })));
 const Games = React.lazy(() => import('./pages/Games').then(module => ({ default: module.Games })));
 const AttendancePage = React.lazy(() => import('./pages/Attendance').then(module => ({ default: module.AttendancePage })));
+const Profile = React.lazy(() => import('./pages/Profile').then(module => ({ default: module.Profile })));
 
 import { Login } from './pages/Login';
 import { User, UserRole } from './types';
@@ -121,6 +122,7 @@ const AppContent: React.FC = () => {
       case 'schools': return <SchoolList />; 
       case 'games': return <Games />; 
       case 'attendance': return <AttendancePage />;
+      case 'profile': return <Profile />;
       default: return <Dashboard onNavigate={(view) => setCurrentView(view)} />;
     }
   };
@@ -137,7 +139,8 @@ const AppContent: React.FC = () => {
     users: '用户权限管理',
     schools: '学校维度管理',
     games: '互动教学中心',
-    attendance: '考勤管理'
+    attendance: '考勤管理',
+    profile: '个人中心'
   };
 
   if (loading) return <div className="min-h-screen flex items-center justify-center bg-gray-50 text-blue-600">加载中...</div>;
@@ -175,4 +178,4 @@ const App: React.FC = () => {
   );
 };
 
-export default App;
+export default App;

components/Sidebar.tsx

@@ -1,6 +1,6 @@
 
 import React from 'react';
-import { LayoutDashboard, Users, BookOpen, GraduationCap, Settings, LogOut, FileText, School, UserCog, Palette, X, Building, Gamepad2, CalendarCheck } from 'lucide-react';
+import { LayoutDashboard, Users, BookOpen, GraduationCap, Settings, LogOut, FileText, School, UserCog, Palette, X, Building, Gamepad2, CalendarCheck, UserCircle } from 'lucide-react';
 import { UserRole } from '../types';
 
 interface SidebarProps {
@@ -27,6 +27,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ currentView, onChangeView, use
     { id: 'reports', label: '报表统计', icon: FileText, roles: [UserRole.ADMIN, UserRole.PRINCIPAL, UserRole.TEACHER, UserRole.STUDENT] },
     { id: 'subjects', label: '学科设置', icon: Palette, roles: [UserRole.ADMIN, UserRole.PRINCIPAL, UserRole.TEACHER] },
     { id: 'users', label: '用户管理', icon: UserCog, roles: [UserRole.ADMIN, UserRole.PRINCIPAL, UserRole.TEACHER] }, 
+    { id: 'profile', label: '个人中心', icon: UserCircle, roles: [UserRole.ADMIN, UserRole.PRINCIPAL, UserRole.TEACHER, UserRole.STUDENT] },
     { id: 'settings', label: '系统设置', icon: Settings, roles: [UserRole.ADMIN, UserRole.PRINCIPAL] },
   ];
 

pages/Login.tsx

@@ -10,7 +10,10 @@ interface LoginProps {
 
 const AVATAR_SEEDS = [
   'Felix', 'Aneka', 'Zoe', 'Jack', 'Precious', 'Bandit', 'Bubba', 'Cuddles', 
-  'Miss kitty', 'Loki', 'Sassy', 'Simba', 'Oliver', 'Princess', 'Garfield', 'Salem'
+  'Miss%20kitty', 'Loki', 'Sassy', 'Simba', 'Oliver', 'Princess', 'Garfield', 'Salem',
+  'Misty', 'Tigger', 'Bella', 'Pepper', 'Milo', 'Oscar', 'Lily', 'Cookie', 
+  'Daisy', 'Molly', 'Jasper', 'George', 'Smokey', 'Pumpkin', 'Bear', 'Sam',
+  'Max', 'Buddy', 'Charlie', 'Rocky'
 ];
 
 const gradeOrder: Record<string, number> = {
@@ -315,7 +318,7 @@ export const Login: React.FC<LoginProps> = ({ onLogin }) => {
   const renderStep3 = () => (
     <div className="space-y-4 animate-in fade-in">
       <h3 className="text-center font-bold text-gray-700">第三步: 选择头像</h3>
-      <div className="grid grid-cols-4 gap-2 max-h-48 overflow-y-auto p-2 border rounded bg-gray-50">
+      <div className="grid grid-cols-4 sm:grid-cols-6 gap-2 max-h-48 overflow-y-auto p-2 border rounded bg-gray-50 custom-scrollbar">
         {AVATAR_SEEDS.map(seed => {
           const url = `https://api.dicebear.com/7.x/avataaars/svg?seed=${seed}`;
           const isSelected = regForm.avatar === url;

pages/Profile.tsx

@@ -0,0 +1,236 @@
+
+import React, { useState, useEffect } from 'react';
+import { api } from '../services/api';
+import { User } from '../types';
+import { Save, Lock, User as UserIcon, Camera, Loader2, Link } from 'lucide-react';
+
+const AVATAR_PRESETS = [
+  'https://api.dicebear.com/7.x/avataaars/svg?seed=Felix',
+  'https://api.dicebear.com/7.x/avataaars/svg?seed=Aneka',
+  'https://api.dicebear.com/7.x/avataaars/svg?seed=Zoe',
+  'https://api.dicebear.com/7.x/avataaars/svg?seed=Jack',
+  'https://api.dicebear.com/7.x/avataaars/svg?seed=Precious',
+  'https://api.dicebear.com/7.x/avataaars/svg?seed=Bandit',
+  'https://api.dicebear.com/7.x/avataaars/svg?seed=Bubba',
+  'https://api.dicebear.com/7.x/avataaars/svg?seed=Cuddles',
+  'https://api.dicebear.com/7.x/bottts/svg?seed=Ginger',
+  'https://api.dicebear.com/7.x/bottts/svg?seed=Lucky',
+  'https://api.dicebear.com/7.x/bottts/svg?seed=Sassy',
+  'https://api.dicebear.com/7.x/bottts/svg?seed=Loki',
+  'https://api.dicebear.com/7.x/thumbs/svg?seed=Bandit',
+  'https://api.dicebear.com/7.x/thumbs/svg?seed=Miss%20kitty',
+  'https://api.dicebear.com/7.x/thumbs/svg?seed=Garfield',
+  'https://api.dicebear.com/7.x/fun-emoji/svg?seed=Simba',
+  'https://api.dicebear.com/7.x/fun-emoji/svg?seed=Misty',
+  'https://api.dicebear.com/7.x/fun-emoji/svg?seed=Tigger',
+  'https://api.dicebear.com/7.x/adventurer/svg?seed=Oliver',
+  'https://api.dicebear.com/7.x/adventurer/svg?seed=Bella',
+  'https://api.dicebear.com/7.x/adventurer/svg?seed=Pepper',
+  'https://api.dicebear.com/7.x/big-ears/svg?seed=Milo',
+  'https://api.dicebear.com/7.x/big-ears/svg?seed=Oscar',
+  'https://api.dicebear.com/7.x/big-ears/svg?seed=Lily',
+  'https://api.dicebear.com/7.x/micah/svg?seed=Bubba',
+  'https://api.dicebear.com/7.x/micah/svg?seed=Cookie',
+  'https://api.dicebear.com/7.x/micah/svg?seed=Daisy',
+  'https://api.dicebear.com/7.x/notionists/svg?seed=Molly',
+  'https://api.dicebear.com/7.x/notionists/svg?seed=Jasper',
+  'https://api.dicebear.com/7.x/notionists/svg?seed=George',
+  'https://api.dicebear.com/7.x/pixel-art/svg?seed=Smokey',
+  'https://api.dicebear.com/7.x/pixel-art/svg?seed=Pumpkin',
+  'https://api.dicebear.com/7.x/lorelei/svg?seed=Bear',
+  'https://api.dicebear.com/7.x/lorelei/svg?seed=Sam',
+  'https://api.dicebear.com/7.x/open-peeps/svg?seed=Max',
+  'https://api.dicebear.com/7.x/open-peeps/svg?seed=Buddy'
+];
+
+export const Profile: React.FC = () => {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  
+  // Forms
+  const [profileForm, setProfileForm] = useState({ trueName: '', phone: '', avatar: '' });
+  const [passwordForm, setPasswordForm] = useState({ currentPassword: '', newPassword: '', confirmPassword: '' });
+  
+  // UI State
+  const [customAvatar, setCustomAvatar] = useState('');
+  const [activeTab, setActiveTab] = useState<'info' | 'password'>('info');
+
+  useEffect(() => {
+    loadUser();
+  }, []);
+
+  const loadUser = async () => {
+    setLoading(true);
+    try {
+        const u = await api.auth.refreshSession();
+        if (u) {
+            setUser(u);
+            setProfileForm({
+                trueName: u.trueName || '',
+                phone: u.phone || '',
+                avatar: u.avatar || ''
+            });
+        }
+    } catch(e) { console.error(e); } 
+    finally { setLoading(false); }
+  };
+
+  const handleProfileUpdate = async () => {
+      setSaving(true);
+      try {
+          await api.auth.updateProfile({
+              userId: user?._id || user?.id,
+              ...profileForm
+          });
+          alert('个人资料更新成功！');
+          loadUser();
+      } catch(e: any) { alert('更新失败: ' + e.message); } 
+      finally { setSaving(false); }
+  };
+
+  const handlePasswordUpdate = async () => {
+      if (!passwordForm.currentPassword || !passwordForm.newPassword) return alert('请填写完整');
+      if (passwordForm.newPassword !== passwordForm.confirmPassword) return alert('两次输入的新密码不一致');
+      if (passwordForm.newPassword.length < 6) return alert('新密码长度不能少于6位');
+
+      setSaving(true);
+      try {
+          await api.auth.updateProfile({
+              userId: user?._id || user?.id,
+              currentPassword: passwordForm.currentPassword,
+              newPassword: passwordForm.newPassword
+          });
+          alert('密码修改成功！下次登录请使用新密码。');
+          setPasswordForm({ currentPassword: '', newPassword: '', confirmPassword: '' });
+      } catch(e: any) { 
+          if (e.message === 'INVALID_PASSWORD') alert('当前密码错误，请重试');
+          else alert('修改失败: ' + e.message); 
+      } finally { setSaving(false); }
+  };
+
+  if (loading || !user) return <div className="flex justify-center p-10"><Loader2 className="animate-spin text-blue-600"/></div>;
+
+  return (
+    <div className="max-w-4xl mx-auto space-y-6 animate-in fade-in">
+        {/* Header Card */}
+        <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100 flex flex-col md:flex-row items-center gap-6">
+            <div className="relative group">
+                <img src={profileForm.avatar || user.avatar} alt="Avatar" className="w-24 h-24 rounded-full border-4 border-white shadow-lg object-cover"/>
+                <div className="absolute inset-0 bg-black/40 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer text-white text-xs font-bold" onClick={()=>document.getElementById('avatar-section')?.scrollIntoView({behavior:'smooth'})}>
+                    <Camera size={24}/>
+                </div>
+            </div>
+            <div className="text-center md:text-left flex-1">
+                <h2 className="text-2xl font-bold text-gray-800">{user.trueName || user.username}</h2>
+                <p className="text-gray-500">@{user.username} | {user.role === 'ADMIN' ? '管理员' : user.role === 'PRINCIPAL' ? '校长' : user.role === 'TEACHER' ? '教师' : '学生'}</p>
+                {user.schoolId && <p className="text-xs text-blue-600 bg-blue-50 inline-block px-2 py-1 rounded mt-2">ID: {user.schoolId}</p>}
+            </div>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            {/* Sidebar Tabs */}
+            <div className="md:col-span-1 space-y-2">
+                <button onClick={()=>setActiveTab('info')} className={`w-full text-left px-4 py-3 rounded-lg flex items-center gap-3 transition-colors ${activeTab==='info' ? 'bg-blue-600 text-white shadow-md' : 'bg-white text-gray-600 hover:bg-gray-50 border border-gray-100'}`}>
+                    <UserIcon size={18}/> 基本资料 & 头像
+                </button>
+                <button onClick={()=>setActiveTab('password')} className={`w-full text-left px-4 py-3 rounded-lg flex items-center gap-3 transition-colors ${activeTab==='password' ? 'bg-blue-600 text-white shadow-md' : 'bg-white text-gray-600 hover:bg-gray-50 border border-gray-100'}`}>
+                    <Lock size={18}/> 安全设置 (修改密码)
+                </button>
+            </div>
+
+            {/* Content Area */}
+            <div className="md:col-span-2 bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+                {activeTab === 'info' && (
+                    <div className="space-y-6">
+                        <h3 className="font-bold text-lg text-gray-800 border-b pb-2">基本资料</h3>
+                        <div className="grid grid-cols-1 gap-4">
+                            <div>
+                                <label className="block text-sm font-medium text-gray-700 mb-1">真实姓名</label>
+                                <input className="w-full border rounded-lg p-2" value={profileForm.trueName} onChange={e=>setProfileForm({...profileForm, trueName:e.target.value})}/>
+                            </div>
+                            <div>
+                                <label className="block text-sm font-medium text-gray-700 mb-1">手机号码</label>
+                                <input className="w-full border rounded-lg p-2" value={profileForm.phone} onChange={e=>setProfileForm({...profileForm, phone:e.target.value})}/>
+                            </div>
+                        </div>
+
+                        <div id="avatar-section" className="pt-4 border-t border-gray-100">
+                            <h3 className="font-bold text-lg text-gray-800 mb-4">头像设置</h3>
+                            
+                            {/* Custom URL Input */}
+                            <div className="mb-4">
+                                <label className="block text-xs font-bold text-gray-500 uppercase mb-1">使用网络图片链接</label>
+                                <div className="flex gap-2">
+                                    <div className="relative flex-1">
+                                        <Link size={16} className="absolute left-3 top-3 text-gray-400"/>
+                                        <input 
+                                            className="w-full border rounded-lg pl-9 pr-3 py-2 text-sm" 
+                                            placeholder="https://example.com/avatar.png"
+                                            value={customAvatar}
+                                            onChange={e=>setCustomAvatar(e.target.value)}
+                                        />
+                                    </div>
+                                    <button 
+                                        onClick={() => { if(customAvatar) setProfileForm({...profileForm, avatar: customAvatar}); }}
+                                        className="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 text-sm font-medium"
+                                    >
+                                        应用
+                                    </button>
+                                </div>
+                            </div>
+
+                            {/* Preset Grid */}
+                            <label className="block text-xs font-bold text-gray-500 uppercase mb-2">或选择预设头像</label>
+                            <div className="grid grid-cols-6 sm:grid-cols-8 gap-2 max-h-60 overflow-y-auto p-2 border rounded-lg bg-gray-50">
+                                {AVATAR_PRESETS.map((url, idx) => (
+                                    <div 
+                                        key={idx} 
+                                        onClick={() => setProfileForm({...profileForm, avatar: url})}
+                                        className={`cursor-pointer rounded-full p-1 border-2 transition-all ${profileForm.avatar === url ? 'border-blue-500 scale-110 bg-blue-100 shadow-sm' : 'border-transparent hover:bg-white hover:shadow-sm'}`}
+                                    >
+                                        <img src={url} className="w-full h-auto rounded-full" loading="lazy"/>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+
+                        <div className="pt-4">
+                            <button onClick={handleProfileUpdate} disabled={saving} className="bg-blue-600 text-white px-6 py-2 rounded-lg font-bold hover:bg-blue-700 disabled:opacity-50 flex items-center gap-2">
+                                {saving ? <Loader2 className="animate-spin" size={18}/> : <Save size={18}/>}
+                                保存修改
+                            </button>
+                        </div>
+                    </div>
+                )}
+
+                {activeTab === 'password' && (
+                    <div className="space-y-6">
+                        <h3 className="font-bold text-lg text-gray-800 border-b pb-2">修改密码</h3>
+                        <div className="space-y-4 max-w-md">
+                            <div>
+                                <label className="block text-sm font-medium text-gray-700 mb-1">当前密码</label>
+                                <input type="password" className="w-full border rounded-lg p-2" value={passwordForm.currentPassword} onChange={e=>setPasswordForm({...passwordForm, currentPassword:e.target.value})}/>
+                            </div>
+                            <div>
+                                <label className="block text-sm font-medium text-gray-700 mb-1">新密码 (至少6位)</label>
+                                <input type="password" className="w-full border rounded-lg p-2" value={passwordForm.newPassword} onChange={e=>setPasswordForm({...passwordForm, newPassword:e.target.value})}/>
+                            </div>
+                            <div>
+                                <label className="block text-sm font-medium text-gray-700 mb-1">确认新密码</label>
+                                <input type="password" className="w-full border rounded-lg p-2" value={passwordForm.confirmPassword} onChange={e=>setPasswordForm({...passwordForm, confirmPassword:e.target.value})}/>
+                            </div>
+                            <div className="pt-2">
+                                <button onClick={handlePasswordUpdate} disabled={saving} className="bg-blue-600 text-white px-6 py-2 rounded-lg font-bold hover:bg-blue-700 disabled:opacity-50 flex items-center gap-2">
+                                    {saving ? <Loader2 className="animate-spin" size={18}/> : <Save size={18}/>}
+                                    确认修改
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    </div>
+  );
+};

pages/StudentReports.tsx

@@ -11,6 +11,7 @@ import { Score, Student, Subject, Exam } from '../types';
 // Custom Tick for XAxis to highlight exams
 const CustomizedAxisTick = (props: any) => {
     const { x, y, payload, exams } = props;
+    if (!payload || !payload.value) return null;
     const examInfo = exams.find((e: any) => (e.name || e.type) === payload.value);
     const isMajor = examInfo?.type === 'Midterm' || examInfo?.type === 'Final' || payload.value.includes('期中') || payload.value.includes('期末');
     

server.js

@@ -104,6 +104,50 @@ app.get('/api/auth/me', async (req, res) => {
     res.json(user);
 });
 
+app.post('/api/auth/update-profile', async (req, res) => {
+    const { userId, trueName, phone, avatar, currentPassword, newPassword } = req.body;
+    
+    try {
+        const user = await User.findById(userId);
+        if (!user) return res.status(404).json({ error: 'User not found' });
+
+        // If changing password, verify old one
+        if (newPassword) {
+            if (user.password !== currentPassword) {
+                return res.status(401).json({ error: 'INVALID_PASSWORD', message: '旧密码错误' });
+            }
+            user.password = newPassword;
+        }
+
+        if (trueName) user.trueName = trueName;
+        if (phone) user.phone = phone;
+        if (avatar) user.avatar = avatar;
+
+        await user.save();
+
+        // If user is a student, sync profile data to Student collection
+        if (user.role === 'STUDENT') {
+            await Student.findOneAndUpdate(
+                { studentNo: user.studentNo },
+                { name: user.trueName || user.username, phone: user.phone }
+            );
+        }
+        // If user is a teacher, sync name to Class collection
+        if (user.role === 'TEACHER' && user.homeroomClass) {
+             const cls = await ClassModel.findOne({ schoolId: user.schoolId, $expr: { $eq: [{ $concat: ["$grade", "$className"] }, user.homeroomClass] } });
+             if (cls) {
+                 cls.teacherName = user.trueName || user.username;
+                 await cls.save();
+             }
+        }
+
+        res.json({ success: true, user });
+    } catch (e) {
+        console.error(e);
+        res.status(500).json({ error: e.message });
+    }
+});
+
 app.post('/api/auth/register', async (req, res) => {
     const { role, username, password, schoolId, trueName, seatNo } = req.body;
     const className = req.body.className || req.body.homeroomClass; 

services/api.ts

@@ -47,6 +47,7 @@ async function request(endpoint: string, options: RequestInit = {}) {
     if (errorData.error === 'PENDING_APPROVAL') throw new Error('PENDING_APPROVAL');
     if (errorData.error === 'BANNED') throw new Error('BANNED');
     if (errorData.error === 'CONFLICT') throw new Error(errorData.message); 
+    if (errorData.error === 'INVALID_PASSWORD') throw new Error('INVALID_PASSWORD');
     throw new Error(errorMessage);
   }
   return res.json();
@@ -76,6 +77,9 @@ export const api = {
     register: async (data: any): Promise<User> => {
       return await request('/auth/register', { method: 'POST', body: JSON.stringify(data) });
     },
+    updateProfile: async (data: any): Promise<any> => {
+      return await request('/auth/update-profile', { method: 'POST', body: JSON.stringify(data) });
+    },
     logout: () => {
       if (typeof window !== 'undefined') {
         localStorage.removeItem('user');
@@ -228,4 +232,4 @@ export const api = {
   batchDelete: (type: 'student' | 'score' | 'user', ids: string[]) => {
     return request('/batch-delete', { method: 'POST', body: JSON.stringify({ type, ids }) });
   }
-};
+};