Upload 53 files

components/ConfirmModal.tsx

@@ -1,6 +1,6 @@
 
 import React from 'react';
-import { X, AlertTriangle, Info } from 'lucide-react';
+import { AlertTriangle, Info } from 'lucide-react';
 
 interface ConfirmModalProps {
   isOpen: boolean;
@@ -11,7 +11,7 @@ interface ConfirmModalProps {
   confirmText?: string;
   cancelText?: string;
   isDanger?: boolean;
-  type?: 'confirm' | 'alert'; // Added type
+  type?: 'confirm' | 'alert'; 
 }
 
 export const ConfirmModal: React.FC<ConfirmModalProps> = ({ 
@@ -20,6 +20,11 @@ export const ConfirmModal: React.FC<ConfirmModalProps> = ({
 }) => {
   if (!isOpen) return null;
 
+  const handleConfirm = () => {
+      onConfirm();
+      onClose(); // Automatically close modal after confirmation
+  };
+
   return (
     <div className="fixed inset-0 bg-black/60 z-[99999] flex items-center justify-center p-4 backdrop-blur-sm animate-in fade-in">
       <div className="bg-white rounded-2xl shadow-2xl max-w-sm w-full overflow-hidden animate-in zoom-in-95 border border-gray-100">
@@ -28,7 +33,7 @@ export const ConfirmModal: React.FC<ConfirmModalProps> = ({
             {isDanger ? <AlertTriangle size={24} /> : <Info size={24} />}
           </div>
           <h3 className="text-lg font-bold text-gray-900 mb-2">{title}</h3>
-          <p className="text-sm text-gray-500 leading-relaxed">{message}</p>
+          <p className="text-sm text-gray-500 leading-relaxed whitespace-pre-wrap">{message}</p>
         </div>
         <div className="bg-gray-50 px-6 py-4 flex gap-3">
           {type === 'confirm' && (
@@ -40,7 +45,7 @@ export const ConfirmModal: React.FC<ConfirmModalProps> = ({
             </button>
           )}
           <button 
-            onClick={() => { onConfirm(); if(type==='alert') onClose(); }} // Close automatically for alert, parent handles confirm for logic
+            onClick={handleConfirm} 
             className={`flex-1 py-2.5 rounded-xl text-sm font-bold text-white shadow-md transition-colors ${isDanger ? 'bg-red-600 hover:bg-red-700' : 'bg-blue-600 hover:bg-blue-700'}`}
           >
             {confirmText}

pages/Attendance.tsx

@@ -3,6 +3,8 @@ import React, { useState, useEffect } from 'react';
 import { api } from '../services/api';
 import { Student, Attendance, SchoolCalendarEntry } from '../types';
 import { Calendar, CheckCircle, Clock, AlertCircle, Loader2, UserX, CalendarOff, Settings, Plus, Trash2, Sun, Briefcase } from 'lucide-react';
+import { ConfirmModal } from '../components/ConfirmModal';
+import { Toast, ToastState } from '../components/Toast';
 
 export const AttendancePage: React.FC = () => {
   const [students, setStudents] = useState<Student[]>([]);
@@ -18,6 +20,11 @@ export const AttendancePage: React.FC = () => {
   const [excludeWeekends, setExcludeWeekends] = useState(true); 
   const [newHoliday, setNewHoliday] = useState({ name: '', startDate: '', endDate: '' });
 
+  const [toast, setToast] = useState<ToastState>({ show: false, message: '', type: 'success' });
+  const [confirmModal, setConfirmModal] = useState<{isOpen: boolean, title: string, message: string, onConfirm: () => void, isDanger?: boolean}>({
+      isOpen: false, title: '', message: '', onConfirm: () => {}
+  });
+
   const currentUser = api.auth.getCurrentUser();
   const targetClass = currentUser?.homeroomClass;
 
@@ -85,10 +92,20 @@ export const AttendancePage: React.FC = () => {
   useEffect(() => { checkIsHoliday(date, calendarEntries); }, [excludeWeekends]);
 
   const handleBatchCheckIn = async () => {
-      if (isHoliday) return alert('当前是非考勤日，无法执行全勤操作');
-      if (!confirm(`确定要将所有未打卡学生标记为“出勤”吗？`)) return;
-      await api.attendance.batch({ className: targetClass!, date });
-      loadData();
+      if (isHoliday) {
+          setToast({ show: true, message: '当前是非考勤日，无法执行全勤操作', type: 'error' });
+          return;
+      }
+      setConfirmModal({
+          isOpen: true,
+          title: '一键全勤',
+          message: '确定要将所有未打卡学生标记为“出勤”吗？',
+          onConfirm: async () => {
+              await api.attendance.batch({ className: targetClass!, date });
+              setToast({ show: true, message: '操作成功', type: 'success' });
+              loadData();
+          }
+      });
   };
 
   const toggleStatus = async (studentId: string) => {
@@ -104,7 +121,10 @@ export const AttendancePage: React.FC = () => {
   };
 
   const handleAddHoliday = async () => {
-      if (!newHoliday.name || !newHoliday.startDate || !newHoliday.endDate) return alert('请填写完整');
+      if (!newHoliday.name || !newHoliday.startDate || !newHoliday.endDate) {
+          setToast({ show: true, message: '请填写完整假期信息', type: 'error' });
+          return;
+      }
       await api.calendar.add({
           schoolId: currentUser?.schoolId!,
           className: targetClass,
@@ -112,42 +132,62 @@ export const AttendancePage: React.FC = () => {
           ...newHoliday
       });
       setNewHoliday({ name: '', startDate: '', endDate: '' });
+      setToast({ show: true, message: '日程已添加', type: 'success' });
       loadData();
   };
 
   const handleDeleteHoliday = async (id: string) => {
-      if(confirm('删除此设置？')) {
-          await api.calendar.delete(id);
-          loadData();
-      }
+      setConfirmModal({
+          isOpen: true,
+          title: '删除日程',
+          message: '确定删除这条日程设置吗？',
+          isDanger: true,
+          onConfirm: async () => {
+              await api.calendar.delete(id);
+              loadData();
+          }
+      });
   };
 
   // Toggle Day Type (Workday <-> Holiday/Off)
   const toggleDayType = async () => {
       if (isHoliday) {
           // Current is Holiday -> Set to Workday
-          if (!confirm(`确定将 ${date} 设为“工作日”并开启考勤吗？`)) return;
-          await api.calendar.add({
-              schoolId: currentUser?.schoolId!,
-              className: targetClass,
-              type: 'WORKDAY',
-              startDate: date,
-              endDate: date,
-              name: '补班/工作日'
+          setConfirmModal({
+              isOpen: true,
+              title: '开启考勤',
+              message: `确定将 ${date} 设为“工作日”并开启考勤吗？\n(此操作将覆盖周末或假期的免打卡状态)`,
+              onConfirm: async () => {
+                  await api.calendar.add({
+                      schoolId: currentUser?.schoolId!,
+                      className: targetClass,
+                      type: 'WORKDAY',
+                      startDate: date,
+                      endDate: date,
+                      name: '补班/工作日'
+                  });
+                  loadData();
+              }
           });
       } else {
           // Current is Workday -> Set to Off
-          if (!confirm(`确定将 ${date} 标记为“休息日”并免除考勤吗？`)) return;
-          await api.calendar.add({
-              schoolId: currentUser?.schoolId!,
-              className: targetClass,
-              type: 'OFF',
-              startDate: date,
-              endDate: date,
-              name: '休息/停课'
+          setConfirmModal({
+              isOpen: true,
+              title: '关闭考勤',
+              message: `确定将 ${date} 标记为“休息日”并免除考勤吗？`,
+              onConfirm: async () => {
+                  await api.calendar.add({
+                      schoolId: currentUser?.schoolId!,
+                      className: targetClass,
+                      type: 'OFF',
+                      startDate: date,
+                      endDate: date,
+                      name: '休息/停课'
+                  });
+                  loadData();
+              }
           });
       }
-      loadData();
   };
 
   if (!targetClass) return <div className="p-10 text-center text-gray-500">您不是班主任，无法管理考勤。</div>;
@@ -162,6 +202,16 @@ export const AttendancePage: React.FC = () => {
 
   return (
     <div className="space-y-6">
+       {toast.show && <Toast message={toast.message} type={toast.type} onClose={()=>setToast({...toast, show: false})}/>}
+       <ConfirmModal 
+            isOpen={confirmModal.isOpen} 
+            title={confirmModal.title} 
+            message={confirmModal.message} 
+            onClose={()=>setConfirmModal({...confirmModal, isOpen: false})} 
+            onConfirm={confirmModal.onConfirm}
+            isDanger={confirmModal.isDanger}
+       />
+
        <div className="flex flex-col md:flex-row justify-between items-center bg-white p-4 rounded-xl shadow-sm border border-gray-100 gap-4">
           <div className="flex items-center gap-4 w-full md:w-auto">
              <h2 className="text-xl font-bold text-gray-800">考勤管理</h2>
@@ -181,10 +231,10 @@ export const AttendancePage: React.FC = () => {
              {/* Dynamic Toggle Button */}
              <button 
                 onClick={toggleDayType} 
-                className={`px-3 py-2 rounded-lg text-sm whitespace-nowrap flex items-center ${isHoliday ? 'bg-green-100 text-green-700 hover:bg-green-200' : 'bg-orange-100 text-orange-700 hover:bg-orange-200'}`}
+                className={`px-3 py-2 rounded-lg text-sm whitespace-nowrap flex items-center shadow-sm font-bold ${isHoliday ? 'bg-green-100 text-green-700 hover:bg-green-200' : 'bg-orange-100 text-orange-700 hover:bg-orange-200'}`}
                 title={isHoliday ? "设为工作日 (开启考勤)" : "设为休息日 (免打卡)"}
              >
-                 {isHoliday ? <Briefcase size={18}/> : <CalendarOff size={18}/>}
+                 {isHoliday ? <><Briefcase size={18} className="mr-1"/> 开启考勤</> : <><CalendarOff size={18} className="mr-1"/> 设为休息</>}
              </button>
 
              {!isHoliday && (

pages/GameLucky.tsx

@@ -4,8 +4,10 @@ import { api } from '../services/api';
 import { LuckyDrawConfig, Student, LuckyPrize, User } from '../types';
 import { Gift, Settings, Loader2, Save, Trash2, X, UserCircle, RefreshCcw, HelpCircle, Maximize, Minimize, Disc, LayoutGrid, ArrowDown, ChevronDown } from 'lucide-react';
 import { Emoji } from '../components/Emoji';
+import { NumberInput } from '../components/NumberInput';
+import { Toast, ToastState } from '../components/Toast';
 
-// ... (Keep FlipCard and LuckyWheel Components Unchanged - omitted for brevity) ...
+// ... (Keep FlipCard and LuckyWheel Components Unchanged)
 const FlipCard = ({ index, prize, onFlip, isRevealed, activeIndex }: { index: number, prize: string, onFlip: (idx: number) => void, isRevealed: boolean, activeIndex: number | null }) => {
   const showBack = isRevealed && activeIndex === index;
   return (
@@ -79,6 +81,8 @@ export const GameLucky: React.FC<{className?: string}> = ({ className }) => {
   
   const [activeCardIndex, setActiveCardIndex] = useState<number | null>(null);
   const [isWheelSpinning, setIsWheelSpinning] = useState(false);
+  
+  const [toast, setToast] = useState<ToastState>({ show: false, message: '', type: 'success' });
 
   const currentUser = api.auth.getCurrentUser();
   const isTeacher = currentUser?.role === 'TEACHER';
@@ -91,8 +95,6 @@ export const GameLucky: React.FC<{className?: string}> = ({ className }) => {
       if (!t) return '未知老师';
       const name = t.trueName || t.username;
       const surname = name.charAt(0);
-      // Use teachingSubject if available, otherwise just Surname + Teacher. 
-      // Do not default to "科任".
       const subject = t.teachingSubject;
       return subject ? `${subject}-${surname}老师` : `${surname}老师`;
   };
@@ -176,8 +178,8 @@ export const GameLucky: React.FC<{className?: string}> = ({ className }) => {
      if (isBusy) return;
 
      const targetId = isTeacher ? proxyStudentId : (studentInfo?._id || String(studentInfo?.id));
-     if (!targetId) return alert(isTeacher ? '请先在右侧选择要代抽的学生' : '学生信息未加载');
-     if (!studentInfo || (studentInfo.drawAttempts || 0) <= 0) return alert('抽奖次数不足！');
+     if (!targetId) return setToast({ show: true, message: isTeacher ? '请先在右侧选择要代抽的学生' : '学生信息未加载', type: 'error' });
+     if (!studentInfo || (studentInfo.drawAttempts || 0) <= 0) return setToast({ show: true, message: '抽奖次数不足！', type: 'error' });
 
      if (viewMode === 'CARD' && triggerIndex !== undefined) setActiveCardIndex(triggerIndex);
      if (viewMode === 'WHEEL') setIsWheelSpinning(true);
@@ -191,14 +193,18 @@ export const GameLucky: React.FC<{className?: string}> = ({ className }) => {
 
         setTimeout(() => {
            const msg = res.rewardType !== 'CONSOLATION' ? `🎁 恭喜！抽中了：${res.prize}` : `💪 ${res.prize}`;
-           alert(msg);
-           setDrawResult(null);
-           setActiveCardIndex(null);
-           setIsWheelSpinning(false);
+           // Use Toast for quick feedback instead of blocking alert
+           setToast({ show: true, message: msg, type: res.rewardType !== 'CONSOLATION' ? 'success' : 'error' });
+           // Delay clearing result slightly longer for user to see
+           setTimeout(() => {
+               setDrawResult(null);
+               setActiveCardIndex(null);
+               setIsWheelSpinning(false);
+           }, 1000);
         }, delay);
 
      } catch (e: any) {
-        alert(e.message || '抽奖失败，请稍后重试');
+        setToast({ show: true, message: e.message || '抽奖失败，请稍后重试', type: 'error' });
         setActiveCardIndex(null);
         setIsWheelSpinning(false);
      }
@@ -207,6 +213,7 @@ export const GameLucky: React.FC<{className?: string}> = ({ className }) => {
   const saveSettings = async () => {
      if (luckyConfig) await api.games.saveLuckyConfig(luckyConfig);
      setIsSettingsOpen(false);
+     setToast({ show: true, message: '配置已保存', type: 'success' });
   };
 
   if (loading && availableTeachers.length === 0 && !hasFetchedTeachers) return <div className="h-full flex items-center justify-center"><Loader2 className="animate-spin text-blue-600"/></div>;
@@ -218,6 +225,8 @@ export const GameLucky: React.FC<{className?: string}> = ({ className }) => {
 
   return (
     <div className={`${isFullscreen ? 'fixed inset-0 z-[9999]' : 'h-full relative'} flex flex-col md:flex-row bg-gradient-to-br from-red-50 to-orange-50 overflow-hidden`}>
+        {toast.show && <Toast message={toast.message} type={toast.type} onClose={()=>setToast({...toast, show: false})}/>}
+        
         <button onClick={() => setIsFullscreen(!isFullscreen)} className="absolute top-4 right-4 z-50 p-2 rounded-full bg-white/50 hover:bg-white backdrop-blur shadow-sm border transition-colors md:top-4 md:left-4 md:right-auto">
             {isFullscreen ? <Minimize size={20} className="text-gray-700"/> : <Maximize size={20} className="text-gray-700"/>}
         </button>
@@ -354,11 +363,11 @@ export const GameLucky: React.FC<{className?: string}> = ({ className }) => {
                             <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
                                 <div className="bg-white p-4 rounded-xl border shadow-sm">
                                     <label className="text-xs font-bold text-gray-500 uppercase block mb-2">每日抽奖上限</label>
-                                    <input type="number" className="w-full border rounded-lg px-3 py-2 font-bold text-lg text-center focus:ring-2 focus:ring-blue-500 outline-none" value={config.dailyLimit} onChange={e => setLuckyConfig({...config, dailyLimit: Number(e.target.value)})}/>
+                                    <NumberInput value={config.dailyLimit} onChange={v => setLuckyConfig({...config, dailyLimit: v})} min={1} max={99}/>
                                 </div>
                                 <div className="bg-white p-4 rounded-xl border shadow-sm">
                                     <label className="text-xs font-bold text-gray-500 uppercase block mb-2">红包显示数量</label>
-                                    <input type="number" min={4} max={20} className="w-full border rounded-lg px-3 py-2 font-bold text-lg text-center focus:ring-2 focus:ring-blue-500 outline-none" value={config.cardCount || 9} onChange={e => setLuckyConfig({...config, cardCount: Number(e.target.value)})}/>
+                                    <NumberInput value={config.cardCount || 9} onChange={v => setLuckyConfig({...config, cardCount: v})} min={4} max={20}/>
                                 </div>
                                 <div className="bg-white p-4 rounded-xl border shadow-sm">
                                     <label className="text-xs font-bold text-gray-500 uppercase block mb-2">安慰奖文案</label>
@@ -366,7 +375,7 @@ export const GameLucky: React.FC<{className?: string}> = ({ className }) => {
                                 </div>
                                 <div className="bg-white p-4 rounded-xl border shadow-sm">
                                     <label className="text-xs font-bold text-gray-500 uppercase block mb-2">安慰奖权重</label>
-                                    <input type="number" min={0} className="w-full border rounded-lg px-3 py-2 font-bold text-lg text-center focus:ring-2 focus:ring-blue-500 outline-none" value={config.consolationWeight || 0} onChange={e => setLuckyConfig({...config, consolationWeight: Number(e.target.value)})}/>
+                                    <NumberInput value={config.consolationWeight || 0} onChange={v => setLuckyConfig({...config, consolationWeight: v})} min={0} max={100}/>
                                     <p className="text-[10px] text-gray-400 mt-1 text-center">数值越大越难中奖</p>
                                 </div>
                             </div>
@@ -390,15 +399,17 @@ export const GameLucky: React.FC<{className?: string}> = ({ className }) => {
                                                     const np = [...config.prizes]; np[idx].name = e.target.value; setLuckyConfig({...config, prizes: np});
                                                 }} className="w-full border-b border-transparent focus:border-blue-500 bg-transparent outline-none py-1"/>
                                             </td>
-                                            <td className="p-3">
-                                                <input type="number" value={p.probability} onChange={e => {
-                                                    const np = [...config.prizes]; np[idx].probability = Number(e.target.value); setLuckyConfig({...config, prizes: np});
-                                                }} className="w-full text-center border rounded bg-gray-50 py-1 focus:bg-white font-mono"/>
+                                            <td className="p-3 flex justify-center">
+                                                <NumberInput className="w-32" value={p.probability} onChange={v => {
+                                                    const np = [...config.prizes]; np[idx].probability = v; setLuckyConfig({...config, prizes: np});
+                                                }} min={1}/>
                                             </td>
                                             <td className="p-3">
-                                                <input type="number" value={p.count} onChange={e => {
-                                                    const np = [...config.prizes]; np[idx].count = Number(e.target.value); setLuckyConfig({...config, prizes: np});
-                                                }} className="w-full text-center border rounded bg-gray-50 py-1 focus:bg-white"/>
+                                                <div className="flex justify-center">
+                                                    <NumberInput className="w-24" value={p.count} onChange={v => {
+                                                        const np = [...config.prizes]; np[idx].count = v; setLuckyConfig({...config, prizes: np});
+                                                    }} min={0}/>
+                                                </div>
                                             </td>
                                             <td className="p-3 text-right">
                                                 <button onClick={() => {

pages/Profile.tsx

@@ -3,6 +3,7 @@ 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';
+import { Toast, ToastState } from '../components/Toast';
 
 const AVATAR_PRESETS = [
   'https://api.dicebear.com/7.x/avataaars/svg?seed=Felix',
@@ -48,6 +49,8 @@ export const Profile: React.FC = () => {
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
   
+  const [toast, setToast] = useState<ToastState>({ show: false, message: '', type: 'success' });
+
   // Forms
   const [profileForm, setProfileForm] = useState({ trueName: '', phone: '', avatar: '' });
   const [passwordForm, setPasswordForm] = useState({ currentPassword: '', newPassword: '', confirmPassword: '' });
@@ -83,16 +86,18 @@ export const Profile: React.FC = () => {
               userId: user?._id || user?.id,
               ...profileForm
           });
-          alert('个人资料更新成功！');
+          setToast({ show: true, message: '个人资料更新成功！', type: 'success' });
           loadUser();
-      } catch(e: any) { alert('更新失败: ' + e.message); } 
+      } catch(e: any) { 
+          setToast({ show: true, message: '更新失败: ' + e.message, type: 'error' });
+      } 
       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位');
+      if (!passwordForm.currentPassword || !passwordForm.newPassword) return setToast({ show: true, message: '请填写完整', type: 'error' });
+      if (passwordForm.newPassword !== passwordForm.confirmPassword) return setToast({ show: true, message: '两次输入的新密码不一致', type: 'error' });
+      if (passwordForm.newPassword.length < 6) return setToast({ show: true, message: '新密码长度不能少于6位', type: 'error' });
 
       setSaving(true);
       try {
@@ -101,11 +106,11 @@ export const Profile: React.FC = () => {
               currentPassword: passwordForm.currentPassword,
               newPassword: passwordForm.newPassword
           });
-          alert('密码修改成功！下次登录请使用新密码。');
+          setToast({ show: true, message: '密码修改成功！下次登录请使用新密码。', type: 'success' });
           setPasswordForm({ currentPassword: '', newPassword: '', confirmPassword: '' });
       } catch(e: any) { 
-          if (e.message === 'INVALID_PASSWORD') alert('当前密码错误，请重试');
-          else alert('修改失败: ' + e.message); 
+          if (e.message === 'INVALID_PASSWORD') setToast({ show: true, message: '当前密码错误，请重试', type: 'error' });
+          else setToast({ show: true, message: '修改失败: ' + e.message, type: 'error' }); 
       } finally { setSaving(false); }
   };
 
@@ -113,6 +118,8 @@ export const Profile: React.FC = () => {
 
   return (
     <div className="max-w-4xl mx-auto space-y-6 animate-in fade-in">
+        {toast.show && <Toast message={toast.message} type={toast.type} onClose={()=>setToast({...toast, show: false})}/>}
+        
         {/* 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">

pages/SubjectList.tsx

@@ -3,6 +3,7 @@ import React, { useState, useEffect } from 'react';
 import { Subject } from '../types';
 import { api } from '../services/api';
 import { Loader2, Plus, Trash2, Palette, Edit, Save, X, Lock, Settings } from 'lucide-react';
+import { ConfirmModal } from '../components/ConfirmModal';
 
 const ALL_GRADES = [
     '一年级', '二年级', '三年级', '四年级', '五年级', '六年级',
@@ -23,6 +24,9 @@ export const SubjectList: React.FC = () => {
   const [editForm, setEditForm] = useState<Subject>({ name: '', code: '', color: '', excellenceThreshold: 90, thresholds: {} });
   
   const [showThresholdModal, setShowThresholdModal] = useState(false);
+  const [confirmModal, setConfirmModal] = useState<{isOpen: boolean, title: string, message: string, onConfirm: () => void, isDanger?: boolean}>({
+      isOpen: false, title: '', message: '', onConfirm: () => {}
+  });
 
   const loadSubjects = async () => {
     setLoading(true);
@@ -60,10 +64,16 @@ export const SubjectList: React.FC = () => {
   };
 
   const handleDelete = async (id: string) => {
-    if(confirm('删除学科可能会影响相关成绩数据，确定继续吗？')) {
-      await api.subjects.delete(id);
-      loadSubjects();
-    }
+    setConfirmModal({
+        isOpen: true,
+        title: '删除学科',
+        message: '删除学科可能会影响相关成绩数据，确定继续吗？',
+        isDanger: true,
+        onConfirm: async () => {
+            await api.subjects.delete(id);
+            loadSubjects();
+        }
+    });
   };
 
   // Permission Check for Teachers
@@ -85,6 +95,15 @@ export const SubjectList: React.FC = () => {
 
   return (
     <div className="space-y-6">
+      <ConfirmModal 
+            isOpen={confirmModal.isOpen} 
+            title={confirmModal.title} 
+            message={confirmModal.message} 
+            onClose={()=>setConfirmModal({...confirmModal, isOpen: false})} 
+            onConfirm={confirmModal.onConfirm}
+            isDanger={confirmModal.isDanger}
+      />
+
       <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
          <h2 className="text-xl font-bold text-gray-800 mb-6 flex items-center">
            <Palette className="mr-2 text-purple-600" />
@@ -251,4 +270,4 @@ export const SubjectList: React.FC = () => {
       )}
     </div>
   );
-};
+};

pages/UserList.tsx

@@ -3,6 +3,8 @@ import React, { useState, useEffect } from 'react';
 import { User, UserRole, UserStatus, School, ClassInfo } from '../types';
 import { api } from '../services/api';
 import { Loader2, Check, X, Trash2, Edit, Briefcase, GraduationCap, AlertCircle, Bot } from 'lucide-react';
+import { ConfirmModal } from '../components/ConfirmModal';
+import { Toast, ToastState } from '../components/Toast';
 
 export const UserList: React.FC = () => {
   const [users, setUsers] = useState<User[]>([]);
@@ -14,10 +16,15 @@ export const UserList: React.FC = () => {
   const [isApplyOpen, setIsApplyOpen] = useState(false);
   const [applyTarget, setApplyTarget] = useState('');
 
+  const [toast, setToast] = useState<ToastState>({ show: false, message: '', type: 'success' });
+  const [confirmModal, setConfirmModal] = useState<{isOpen: boolean, title: string, message: string, onConfirm: () => void, isDanger?: boolean}>({
+      isOpen: false, title: '', message: '', onConfirm: () => {}
+  });
+
   const currentUser = api.auth.getCurrentUser();
   const isAdmin = currentUser?.role === UserRole.ADMIN;
   const isPrincipal = currentUser?.role === UserRole.PRINCIPAL;
-  const isTeacher = currentUser?.role === UserRole.TEACHER;
+  const isTeacher = currentUser?.role === 'TEACHER';
 
   const loadData = async () => {
     setLoading(true);
@@ -37,23 +44,37 @@ export const UserList: React.FC = () => {
   useEffect(() => { loadData(); }, []);
 
   const handleApprove = async (user: User) => {
-    if (confirm(`确认批准 ${user.trueName || user.username} 的注册申请？`)) {
-      await api.users.update(user._id || String(user.id), { status: UserStatus.ACTIVE });
-      loadData();
-    }
+    setConfirmModal({
+        isOpen: true,
+        title: '批准注册',
+        message: `确认批准 ${user.trueName || user.username} 的注册申请？`,
+        onConfirm: async () => {
+            await api.users.update(user._id || String(user.id), { status: UserStatus.ACTIVE });
+            setToast({ show: true, message: '已批准', type: 'success' });
+            loadData();
+        }
+    });
   };
 
   const handleDelete = async (user: User) => {
-    if (user.role === UserRole.ADMIN && user.username === 'admin') return alert('无法删除超级管理员');
-    if (confirm(`警告：确定要删除用户 ${user.username} 吗？`)) {
-      await api.users.delete(user._id || String(user.id));
-      loadData();
-    }
+    if (user.role === UserRole.ADMIN && user.username === 'admin') return setToast({ show: true, message: '无法删除超级管理员', type: 'error' });
+    
+    setConfirmModal({
+        isOpen: true,
+        title: '删除用户',
+        message: `警告：确定要删除用户 ${user.username} 吗？此操作不可恢复。`,
+        isDanger: true,
+        onConfirm: async () => {
+            await api.users.delete(user._id || String(user.id));
+            setToast({ show: true, message: '用户已删除', type: 'success' });
+            loadData();
+        }
+    });
   };
 
   const handleRoleChange = async (user: User, newRole: UserRole) => {
-    if (user.username === 'admin') return alert('无法修改超级管理员');
-    if (isPrincipal && newRole === UserRole.ADMIN) return alert('权限不足：校长无法将用户提升为超级管理员');
+    if (user.username === 'admin') return setToast({ show: true, message: '无法修改超级管理员', type: 'error' });
+    if (isPrincipal && newRole === UserRole.ADMIN) return setToast({ show: true, message: '权限不足：校长无法将用户提升为超级管理员', type: 'error' });
     
     await api.users.update(user._id || String(user.id), { role: newRole });
     loadData();
@@ -67,10 +88,16 @@ export const UserList: React.FC = () => {
 
   const handleAIToggle = async (user: User) => {
       const newVal = !user.aiAccess;
-      if (confirm(`确认${newVal ? '开通' : '关闭'} ${user.trueName || user.username} 的 AI 助教权限？`)) {
-          await api.users.update(user._id || String(user.id), { aiAccess: newVal });
-          loadData();
-      }
+      setConfirmModal({
+          isOpen: true,
+          title: 'AI 权限变更',
+          message: `确认${newVal ? '开通' : '关闭'} ${user.trueName || user.username} 的 AI 助教权限？`,
+          onConfirm: async () => {
+              await api.users.update(user._id || String(user.id), { aiAccess: newVal });
+              setToast({ show: true, message: '权限已更新', type: 'success' });
+              loadData();
+          }
+      });
   };
 
   const submitClassApply = async () => {
@@ -83,21 +110,27 @@ export const UserList: React.FC = () => {
               action: 'APPLY' 
           });
           setIsApplyOpen(false);
-          alert('申请已提交，请等待管理员审核');
+          setToast({ show: true, message: '申请已提交，请等待管理员审核', type: 'success' });
           loadData(); 
-      } catch(e) { alert('申请失败'); }
+      } catch(e) { setToast({ show: true, message: '申请失败', type: 'error' }); }
   };
   
   const submitResign = async () => {
-      if(!confirm('确定申请卸任班主任吗？')) return;
-      try {
-          await api.users.applyClass({ 
-              userId: currentUser?._id!, 
-              type: 'RESIGN', 
-              action: 'APPLY' 
-          });
-          alert('卸任申请已提交');
-      } catch(e) { alert('提交失败'); }
+      setConfirmModal({
+          isOpen: true,
+          title: '申请卸任',
+          message: '确定申请卸任班主任吗？',
+          onConfirm: async () => {
+              try {
+                  await api.users.applyClass({ 
+                      userId: currentUser?._id!, 
+                      type: 'RESIGN', 
+                      action: 'APPLY' 
+                  });
+                  setToast({ show: true, message: '卸任申请已提交', type: 'success' });
+              } catch(e) { setToast({ show: true, message: '提交失败', type: 'error' }); }
+          }
+      });
   };
 
   const getSchoolName = (id?: string) => schools.find(s => s._id === id)?.name || '未分配';
@@ -128,6 +161,16 @@ export const UserList: React.FC = () => {
 
   return (
     <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+      {toast.show && <Toast message={toast.message} type={toast.type} onClose={()=>setToast({...toast, show: false})}/>}
+      <ConfirmModal 
+            isOpen={confirmModal.isOpen} 
+            title={confirmModal.title} 
+            message={confirmModal.message} 
+            onClose={()=>setConfirmModal({...confirmModal, isOpen: false})} 
+            onConfirm={confirmModal.onConfirm}
+            isDanger={confirmModal.isDanger}
+      />
+
       <div className="flex justify-between items-center mb-4">
          <div className="flex items-center gap-4">
             <h2 className="text-xl font-bold text-gray-800">用户权限与账号审核</h2>