Upload 53 files

components/ConfirmModal.tsx

@@ -1,6 +1,6 @@
 
 import React from 'react';
-import { X, AlertTriangle } from 'lucide-react';
+import { X, AlertTriangle, Info } from 'lucide-react';
 
 interface ConfirmModalProps {
   isOpen: boolean;
@@ -11,38 +11,37 @@ interface ConfirmModalProps {
   confirmText?: string;
   cancelText?: string;
   isDanger?: boolean;
+  type?: 'confirm' | 'alert'; // Added type
 }
 
 export const ConfirmModal: React.FC<ConfirmModalProps> = ({ 
-  isOpen, onClose, onConfirm, title = "确认操作", message, 
-  confirmText = "确定", cancelText = "取消", isDanger = false 
+  isOpen, onClose, onConfirm, title = "提示", message, 
+  confirmText = "确定", cancelText = "取消", isDanger = false, type = 'confirm' 
 }) => {
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 bg-black/60 z-[9999] flex items-center justify-center p-4 backdrop-blur-sm animate-in fade-in">
-      <div className="bg-white rounded-xl shadow-2xl max-w-sm w-full overflow-hidden animate-in zoom-in-95">
-        <div className="p-5">
-          <div className="flex items-start gap-4">
-            <div className={`p-3 rounded-full shrink-0 ${isDanger ? 'bg-red-100 text-red-600' : 'bg-blue-100 text-blue-600'}`}>
-              <AlertTriangle size={24} />
-            </div>
-            <div>
-              <h3 className="text-lg font-bold text-gray-900 mb-1">{title}</h3>
-              <p className="text-sm text-gray-500 leading-relaxed">{message}</p>
-            </div>
+    <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">
+        <div className="p-6 text-center">
+          <div className={`mx-auto w-12 h-12 rounded-full flex items-center justify-center mb-4 ${isDanger ? 'bg-red-100 text-red-600' : 'bg-blue-100 text-blue-600'}`}>
+            {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>
         </div>
-        <div className="bg-gray-50 px-5 py-3 flex justify-end gap-3">
+        <div className="bg-gray-50 px-6 py-4 flex gap-3">
+          {type === 'confirm' && (
+            <button 
+              onClick={onClose}
+              className="flex-1 py-2.5 rounded-xl text-sm font-bold text-gray-600 hover:bg-gray-200 transition-colors border border-gray-200 bg-white"
+            >
+              {cancelText}
+            </button>
+          )}
           <button 
-            onClick={onClose}
-            className="px-4 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-200 transition-colors"
-          >
-            {cancelText}
-          </button>
-          <button 
-            onClick={() => { onConfirm(); onClose(); }}
-            className={`px-4 py-2 rounded-lg text-sm font-bold text-white shadow-sm transition-colors ${isDanger ? 'bg-red-600 hover:bg-red-700' : 'bg-blue-600 hover:bg-blue-700'}`}
+            onClick={() => { onConfirm(); if(type==='alert') onClose(); }} // Close automatically for alert, parent handles confirm for logic
+            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}
           </button>

components/NumberInput.tsx

@@ -0,0 +1,59 @@
+
+import React from 'react';
+import { Minus, Plus } from 'lucide-react';
+
+interface NumberInputProps {
+  value: number;
+  onChange: (val: number) => void;
+  min?: number;
+  max?: number;
+  className?: string;
+}
+
+export const NumberInput: React.FC<NumberInputProps> = ({ value, onChange, min = 0, max = 9999, className = '' }) => {
+  const handleDec = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (value > min) onChange(value - 1);
+  };
+  const handleInc = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (value < max) onChange(value + 1);
+  };
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    let val = parseInt(e.target.value);
+    if (isNaN(val)) val = min;
+    if (val < min) val = min;
+    if (val > max) val = max;
+    onChange(val);
+  };
+
+  return (
+    <div className={`flex items-center border border-gray-300 rounded-lg overflow-hidden bg-white shadow-sm shrink-0 ${className}`}>
+      <button 
+        type="button"
+        onClick={handleDec} 
+        disabled={value <= min}
+        className="p-2 md:p-1.5 bg-gray-50 text-gray-600 hover:bg-gray-100 disabled:opacity-30 border-r border-gray-200 active:bg-gray-200 transition-colors touch-manipulation"
+      >
+        <Minus size={14} strokeWidth={3} />
+      </button>
+      <input 
+        type="number" 
+        className="w-10 md:w-12 text-center text-sm font-bold text-gray-800 outline-none p-1 appearance-none bg-transparent"
+        value={value}
+        onChange={handleChange}
+        style={{MozAppearance: 'textfield'}} 
+      />
+      <button 
+        type="button"
+        onClick={handleInc} 
+        disabled={value >= max}
+        className="p-2 md:p-1.5 bg-gray-50 text-gray-600 hover:bg-gray-100 disabled:opacity-30 border-l border-gray-200 active:bg-gray-200 transition-colors touch-manipulation"
+      >
+        <Plus size={14} strokeWidth={3} />
+      </button>
+    </div>
+  );
+};

components/Toast.tsx

@@ -0,0 +1,32 @@
+
+import React, { useEffect } from 'react';
+import { CheckCircle, AlertCircle, X } from 'lucide-react';
+
+export interface ToastState {
+  show: boolean;
+  message: string;
+  type: 'success' | 'error';
+}
+
+interface ToastProps {
+  message: string;
+  type?: 'success' | 'error';
+  onClose: () => void;
+}
+
+export const Toast: React.FC<ToastProps> = ({ message, type = 'success', onClose }) => {
+  useEffect(() => {
+    const timer = setTimeout(onClose, 3000);
+    return () => clearTimeout(timer);
+  }, [onClose]);
+
+  return (
+    <div className="fixed top-20 left-1/2 -translate-x-1/2 z-[99999] animate-in slide-in-from-top-5 fade-in duration-300 w-max max-w-[90vw]">
+      <div className={`flex items-center gap-3 px-6 py-3 rounded-xl shadow-2xl border backdrop-blur-md ${type === 'success' ? 'bg-white/95 border-green-200 text-green-800' : 'bg-white/95 border-red-200 text-red-800'}`}>
+        {type === 'success' ? <CheckCircle size={20} className="text-green-500 shrink-0" /> : <AlertCircle size={20} className="text-red-500 shrink-0" />}
+        <span className="font-bold text-sm">{message}</span>
+        <button onClick={onClose} className="ml-2 opacity-50 hover:opacity-100 p-1"><X size={16}/></button>
+      </div>
+    </div>
+  );
+};

pages/GameMountain.tsx

@@ -5,6 +5,9 @@ import { api } from '../services/api';
 import { GameSession, GameTeam, Student, GameRewardConfig, AchievementConfig, ClassInfo } from '../types';
 import { Settings, Plus, Minus, Users, CheckSquare, Loader2, Trash2, X, Flag, Gift, Star, Trophy, Maximize, Minimize, Lock } from 'lucide-react';
 import { Emoji } from '../components/Emoji';
+import { NumberInput } from '../components/NumberInput';
+import { Toast, ToastState } from '../components/Toast';
+import { ConfirmModal } from '../components/ConfirmModal';
 
 // ... (Styles and Animations kept same)
 const styles = `
@@ -53,7 +56,6 @@ const CelebrationEffects = () => (
     </div>
 );
 
-// ... (MountainStage Component - Keep mostly same, update display for count)
 const MountainStage = ({ team, index, rewardsConfig, maxSteps, onScoreChange, isFullscreen }: { 
     team: GameTeam, 
     index: number, 
@@ -141,21 +143,8 @@ const MountainStage = ({ team, index, rewardsConfig, maxSteps, onScoreChange, is
   );
 };
 
-// ... (GameToast - Keep same)
-const GameToast = ({ title, message, type, onClose }: { title: string, message: string, type: 'success' | 'info', onClose: () => void }) => {
-    useEffect(() => { const timer = setTimeout(onClose, 3000); return () => clearTimeout(timer); }, [onClose]);
-    return (
-        <div className="fixed top-20 left-1/2 -translate-x-1/2 z-[10000] animate-in slide-in-from-top-5 fade-in duration-300">
-            <div className={`flex items-center gap-3 px-6 py-4 rounded-xl shadow-2xl border-2 backdrop-blur-md ${type === 'success' ? 'bg-yellow-50/95 border-yellow-400 text-yellow-900' : 'bg-white/95 border-blue-200 text-slate-800'}`}>
-                <div className={`p-2 rounded-full ${type === 'success' ? 'bg-yellow-400 text-white' : 'bg-blue-500 text-white'}`}>{type === 'success' ? <Trophy size={24} /> : <Gift size={24} />}</div>
-                <div><h4 className="font-black text-lg leading-tight">{title}</h4><p className="text-sm opacity-90 font-medium">{message}</p></div>
-            </div>
-        </div>
-    );
-};
-
+// Replaced local GameToast with global Toast component state
 export const GameMountain: React.FC<{className?: string}> = ({ className }) => {
-  // ... (State - Keep same)
   const [session, setSession] = useState<GameSession | null>(null);
   const [loading, setLoading] = useState(true);
   const [students, setStudents] = useState<Student[]>([]);
@@ -164,7 +153,9 @@ export const GameMountain: React.FC<{className?: string}> = ({ className }) => {
   const [selectedTeamId, setSelectedTeamId] = useState<string | null>(null);
   const [achConfig, setAchConfig] = useState<AchievementConfig | null>(null);
   const [canEdit, setCanEdit] = useState(false);
-  const [toast, setToast] = useState<{title: string, message: string, type: 'success' | 'info'} | null>(null);
+  
+  const [toast, setToast] = useState<ToastState>({ show: false, message: '', type: 'success' });
+  const [confirmModal, setConfirmModal] = useState<{isOpen: boolean, title: string, message: string, onConfirm: () => void}>({ isOpen: false, title: '', message: '', onConfirm: () => {} });
 
   const currentUser = api.auth.getCurrentUser();
   const isTeacher = currentUser?.role === 'TEACHER';
@@ -247,9 +238,9 @@ export const GameMountain: React.FC<{className?: string}> = ({ className }) => {
        if (delta > 0 && newScore > t.score) {
           const reward = session.rewardsConfig.find(r => r.scoreThreshold === newScore);
           if (newScore === session.maxSteps) {
-              setToast({ title: `🏆 巅峰时刻!`, message: `恭喜 [${t.name}] 成功登顶！`, type: 'success' });
+              setToast({ show: true, title: `🏆 巅峰时刻!`, message: `恭喜 [${t.name}] 成功登顶！`, type: 'success' } as any);
           } else if (reward) {
-              setToast({ title: `🎉 触发奖励!`, message: `[${t.name}] 获得：${reward.rewardName} x${reward.rewardValue || 1}`, type: 'info' });
+              setToast({ show: true, title: `🎉 触发奖励!`, message: `[${t.name}] 获得：${reward.rewardName} x${reward.rewardValue || 1}`, type: 'success' } as any);
           }
 
           if (reward) {
@@ -269,7 +260,7 @@ export const GameMountain: React.FC<{className?: string}> = ({ className }) => {
                           studentName: stu.name,
                           rewardType: reward.rewardType as any,
                           name: reward.rewardName,
-                          count: reward.rewardValue || 1, // USE REWARD VALUE
+                          count: reward.rewardValue || 1, 
                           status: 'PENDING',
                           source: `群岳争锋 - ${t.name} ${newScore}步`
                        });
@@ -287,7 +278,7 @@ export const GameMountain: React.FC<{className?: string}> = ({ className }) => {
     try {
         await api.games.saveMountainSession(newSession);
     } catch(e) {
-        alert('保存失败：您可能没有权限修改此班级数据');
+        setToast({ show: true, message: '保存失败：您可能没有权限修改此班级数据', type: 'error' });
         loadData();
     }
   };
@@ -297,7 +288,8 @@ export const GameMountain: React.FC<{className?: string}> = ({ className }) => {
          try {
              await api.games.saveMountainSession(session);
              setIsSettingsOpen(false);
-         } catch(e) { alert('保存失败'); }
+             setToast({ show: true, message: '游戏设置已保存', type: 'success' });
+         } catch(e) { setToast({ show: true, message: '保存失败', type: 'error' }); }
      }
   };
 
@@ -316,19 +308,31 @@ export const GameMountain: React.FC<{className?: string}> = ({ className }) => {
      setSession({ ...session, teams: newTeams });
   };
 
+  const deleteTeam = (id: string) => {
+      setConfirmModal({
+          isOpen: true,
+          title: '删除队伍',
+          message: '确定要删除这个队伍吗？',
+          onConfirm: () => {
+              if (session) setSession({...session, teams: session.teams.filter(tm => tm.id !== id)});
+          }
+      });
+  };
+
   if (loading) return <div className="h-full flex items-center justify-center"><Loader2 className="animate-spin text-blue-600"/></div>;
   if (!session) return <div className="h-full flex items-center justify-center text-gray-400">暂无数据</div>;
 
   const GameContent = (
     <div className={`${isFullscreen ? 'fixed inset-0 z-[9999] w-screen h-screen' : 'h-full w-full relative'} flex flex-col bg-gradient-to-b from-sky-300 via-sky-100 to-emerald-50 overflow-hidden`}>
         <style>{styles}</style>
-        {/* Background */}
         <div className="absolute inset-0 pointer-events-none overflow-hidden">
             <div className="absolute top-10 right-20 w-24 h-24 bg-yellow-300 rounded-full blur-xl opacity-60 animate-pulse"></div>
             <div className="absolute top-16 -left-20 text-white/60 text-9xl select-none animate-drift-slow opacity-80" style={{filter: 'blur(2px)'}}><Emoji symbol="☁️"/></div>
             <div className="absolute top-32 -left-40 text-white/40 text-8xl select-none animate-drift-medium opacity-60" style={{animationDelay: '5s'}}><Emoji symbol="☁️"/></div>
         </div>
-        {toast && <GameToast title={toast.title} message={toast.message} type={toast.type} onClose={() => setToast(null)} />}
+        {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}/>
+        
         {/* Toolbar */}
         <div className="absolute top-4 right-4 z-50 flex gap-2">
             {!canEdit && isTeacher && <div className="px-3 py-1.5 bg-gray-100/80 backdrop-blur rounded-full text-xs font-bold text-gray-500 flex items-center border border-gray-200"><Lock size={14} className="mr-1"/> 只读模式 (非班主任)</div>}
@@ -359,39 +363,32 @@ export const GameMountain: React.FC<{className?: string}> = ({ className }) => {
                             <section className="bg-white p-5 rounded-xl border border-gray-200 shadow-sm">
                                 <h4 className="font-bold text-gray-700 mb-4 flex items-center text-sm uppercase tracking-wide"><Flag size={16} className="mr-2 text-indigo-500"/> 基础规则</h4>
                                 <div className="flex items-center gap-4">
-                                    <div>
-                                        <label className="text-xs text-gray-500 block mb-1">山峰高度 (步数)</label>
-                                        <input type="number" className="border rounded-lg px-3 py-2 w-24 text-center font-bold text-lg focus:ring-2 focus:ring-blue-500 outline-none" value={session.maxSteps} onChange={e => setSession({...session, maxSteps: Number(e.target.value)})} min={5} max={50}/>
-                                    </div>
+                                    <label className="text-xs text-gray-500 block">山峰高度 (步数)</label>
+                                    <NumberInput value={session.maxSteps} onChange={v => setSession({...session, maxSteps: v})} min={5} max={50} />
                                 </div>
                             </section>
-                            {/* Rewards Config - ADDED QUANTITY INPUT */}
+                            {/* Rewards Config */}
                             <section className="bg-white p-5 rounded-xl border border-gray-200 shadow-sm row-span-2">
                                 <h4 className="font-bold text-gray-700 mb-4 flex items-center text-sm uppercase tracking-wide"><Gift size={16} className="mr-2 text-amber-500"/> 奖励节点</h4>
                                 <div className="space-y-2 max-h-64 overflow-y-auto pr-1 custom-scrollbar">
                                     {session.rewardsConfig.sort((a,b) => a.scoreThreshold - b.scoreThreshold).map((rc, idx) => (
                                         <div key={idx} className="flex flex-col gap-2 bg-gray-50 p-2 rounded-lg border border-gray-100 group hover:border-blue-200 transition-colors">
                                             <div className="flex items-center gap-2">
-                                                <div className="flex items-center bg-white border px-2 py-1 rounded">
-                                                    <span className="text-xs text-gray-400 mr-1">第</span>
-                                                    <input type="number" min={1} max={session.maxSteps} className="w-8 text-center font-bold text-sm outline-none" value={rc.scoreThreshold} onChange={e => {
-                                                        const newArr = [...session.rewardsConfig]; newArr[idx].scoreThreshold = Number(e.target.value); setSession({...session, rewardsConfig: newArr});
-                                                    }}/>
-                                                    <span className="text-xs text-gray-400 ml-1">步</span>
+                                                <div className="flex items-center gap-1 bg-white border px-1 py-1 rounded">
+                                                    <span className="text-xs text-gray-400">第</span>
+                                                    <NumberInput value={rc.scoreThreshold} onChange={v => { const newArr = [...session.rewardsConfig]; newArr[idx].scoreThreshold = v; setSession({...session, rewardsConfig: newArr}); }} min={1} max={session.maxSteps} />
+                                                    <span className="text-xs text-gray-400">步</span>
                                                 </div>
-                                                <select className="border-none bg-transparent text-sm font-medium text-gray-700 focus:ring-0 flex-1" value={rc.rewardType} onChange={e => {
+                                                <select className="border-none bg-transparent text-sm font-medium text-gray-700 focus:ring-0 flex-1 w-20" value={rc.rewardType} onChange={e => {
                                                     const newArr = [...session.rewardsConfig]; newArr[idx].rewardType = e.target.value as any; setSession({...session, rewardsConfig: newArr});
                                                 }}>
                                                     <option value="DRAW_COUNT">🎲 抽奖券</option>
                                                     <option value="ITEM">🎁 实物</option>
-                                                    <option value="ACHIEVEMENT">🏆 奖状/成就</option>
+                                                    <option value="ACHIEVEMENT">🏆 奖状</option>
                                                 </select>
-                                                {/* QUANTITY INPUT */}
-                                                <div className="flex items-center gap-1 bg-white border px-2 py-1 rounded">
+                                                <div className="flex items-center gap-1 bg-white border px-1 py-1 rounded">
                                                     <span className="text-xs text-gray-400">x</span>
-                                                    <input type="number" min={1} className="w-8 text-center font-bold text-sm outline-none" value={rc.rewardValue || 1} onChange={e => {
-                                                        const newArr = [...session.rewardsConfig]; newArr[idx].rewardValue = Number(e.target.value); setSession({...session, rewardsConfig: newArr});
-                                                    }}/>
+                                                    <NumberInput value={rc.rewardValue || 1} onChange={v => { const newArr = [...session.rewardsConfig]; newArr[idx].rewardValue = v; setSession({...session, rewardsConfig: newArr}); }} min={1} />
                                                 </div>
                                                 <button onClick={() => {
                                                     const newArr = session.rewardsConfig.filter((_, i) => i !== idx); setSession({...session, rewardsConfig: newArr});
@@ -440,10 +437,7 @@ export const GameMountain: React.FC<{className?: string}> = ({ className }) => {
                                                         const updated = session.teams.map(tm => tm.id === t.id ? {...tm, name: e.target.value} : tm);
                                                         setSession({...session, teams: updated});
                                                     }} className="bg-transparent font-bold text-gray-800 w-24 outline-none border-b border-transparent focus:border-blue-300 hover:border-gray-300" onClick={e=>e.stopPropagation()}/>
-                                                    <button onClick={(e) => {
-                                                        e.stopPropagation();
-                                                        if(confirm('删除队伍?')) setSession({...session, teams: session.teams.filter(tm => tm.id !== t.id)});
-                                                    }} className="text-gray-300 hover:text-red-500"><Trash2 size={14}/></button>
+                                                    <button onClick={(e) => { e.stopPropagation(); deleteTeam(t.id); }} className="text-gray-300 hover:text-red-500"><Trash2 size={14}/></button>
                                                 </div>
                                                 <div className="flex gap-2 pl-3 items-center">
                                                     <input type="color" value={t.color} onChange={e => {

pages/Settings.tsx

@@ -3,6 +3,8 @@ import React, { useState, useEffect } from 'react';
 import { Save, Bell, Lock, Database, Loader2, Plus, X, Trash2, Globe, Edit, Calendar, GraduationCap } from 'lucide-react';
 import { api } from '../services/api';
 import { SystemConfig, UserRole } from '../types';
+import { Toast, ToastState } from '../components/Toast';
+import { ConfirmModal } from '../components/ConfirmModal';
 
 export const Settings: React.FC = () => {
   const [loading, setLoading] = useState(false);
@@ -25,6 +27,9 @@ export const Settings: React.FC = () => {
   const [editVal, setEditVal] = useState('');
   const [teacherFollows, setTeacherFollows] = useState(false);
   const [promoting, setPromoting] = useState(false);
+  
+  const [toast, setToast] = useState<ToastState>({ show: false, message: '', type: 'success' });
+  const [confirmModal, setConfirmModal] = useState<{isOpen: boolean, title: string, message: string, onConfirm: () => void, type?: 'confirm' | 'alert'}>({ isOpen: false, title: '', message: '', onConfirm: () => {} });
 
   const currentUser = api.auth.getCurrentUser();
   const isAdmin = currentUser?.role === UserRole.ADMIN;
@@ -45,8 +50,10 @@ export const Settings: React.FC = () => {
     setLoading(true);
     try {
       await api.config.save(config);
-      alert('全局系统配置已保存！');
-    } catch (e) { alert('保存失败'); } finally { setLoading(false); }
+      setToast({ show: true, message: '全局系统配置已保存', type: 'success' });
+    } catch (e) { 
+        setToast({ show: true, message: '保存失败', type: 'error' });
+    } finally { setLoading(false); }
   };
 
   const addSemester = () => {
@@ -61,7 +68,16 @@ export const Settings: React.FC = () => {
 
   const removeSemester = (idx: number) => {
     const list = [...(config.semesters || [])];
-    if (config.semester === list[idx]) return alert('无法删除当前正在使用的学期。');
+    if (config.semester === list[idx]) {
+        setConfirmModal({
+            isOpen: true,
+            title: '操作无法完成',
+            message: '无法删除当前正在使用的学期。请先切换学期后再试。',
+            type: 'alert',
+            onConfirm: () => {}
+        });
+        return;
+    }
     list.splice(idx, 1);
     setConfig(prev => ({ ...prev, semesters: list }));
   };
@@ -81,19 +97,36 @@ export const Settings: React.FC = () => {
   };
 
   const handlePromotion = async () => {
-      if (!confirm(`⚠️ 高风险操作警告！\n\n1. 所有学生年级将+1 (如: 一年级&rarr;二年级)\n2. 六年级/初三/高三学生将标记为“毕业”\n3. ${teacherFollows ? '班主任将随班升级 (继续带该班)' : '班主任将留在原年级 (班级变空)'}\n\n确定要执行全校升学吗？`)) return;
-      setPromoting(true);
-      try {
-          const res = await api.students.promote({ teacherFollows });
-          alert(`升学操作完成！\n共处理学生: ${res.count} 人。`);
-      } catch (e: any) { alert('操作失败: ' + e.message); } 
-      finally { setPromoting(false); }
+      setConfirmModal({
+          isOpen: true,
+          title: '高风险操作警告',
+          message: `1. 所有学生年级将+1 (如: 一年级→二年级)\n2. 六年级/初三/高三学生将标记为“毕业”\n3. ${teacherFollows ? '班主任将随班升级 (继续带该班)' : '班主任将留在原年级 (班级变空)'}\n\n确定要执行全校升学吗？`,
+          onConfirm: async () => {
+              setPromoting(true);
+              try {
+                  const res = await api.students.promote({ teacherFollows });
+                  setToast({ show: true, message: `升学操作完成！共处理学生: ${res.count} 人。`, type: 'success' });
+              } catch (e: any) { 
+                  setToast({ show: true, message: '操作失败: ' + e.message, type: 'error' });
+              } finally { setPromoting(false); }
+          }
+      });
   };
 
   if (fetching) return <div className="p-10 text-center text-gray-500">加载配置中...</div>;
 
   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}
+        type={confirmModal.type || 'confirm'}
+      />
+
       <div className="flex items-center space-x-2 bg-blue-50 text-blue-800 p-4 rounded-xl border border-blue-100">
          <Globe size={20}/>
          <span className="font-bold">全局系统配置中心</span>
@@ -278,4 +311,4 @@ export const Settings: React.FC = () => {
       </div>
     </div>
   );
-};
+};

pages/TeacherDashboard.tsx

@@ -2,9 +2,10 @@
 import React, { useEffect, useState } from 'react';
 import { api } from '../services/api';
 import { Schedule, Student, Attendance, PeriodConfig, Subject, User, ClassInfo } from '../types';
-import { Calendar, UserX, AlertTriangle, Activity, Plus, X, Trash2, Settings, Save, Clock, ChevronDown, ChevronUp } from 'lucide-react';
+import { Calendar, UserX, AlertTriangle, Activity, Plus, X, Trash2, Settings, Save, Clock, ChevronDown, ChevronUp, Edit2 } from 'lucide-react';
 import { TodoList } from '../components/TodoList';
 import { ConfirmModal } from '../components/ConfirmModal';
+import { Toast, ToastState } from '../components/Toast';
 
 const COLORS = ['#dbeafe', '#dcfce7', '#fef9c3', '#fee2e2', '#f3e8ff', '#ffedd5', '#e0e7ff', '#ecfccb'];
 const stringToColor = (str: string) => {
@@ -45,13 +46,16 @@ export const TeacherDashboard: React.FC = () => {
   // Modals & Editing
   const [editingCell, setEditingCell] = useState<{day: number, period: number} | null>(null);
   const [editForm, setEditForm] = useState<{ _id?: string, subject: string, teacherName: string, weekType: string }>({ subject: '', teacherName: '', weekType: 'ALL' });
+  const [isCustomSubject, setIsCustomSubject] = useState(false); // Toggle for custom input
+
   const [isPeriodSettingsOpen, setIsPeriodSettingsOpen] = useState(false);
   const [tempPeriodConfig, setTempPeriodConfig] = useState<PeriodConfig[]>([]);
 
-  // Confirm Modal State
+  // Confirm Modal & Toast
   const [confirmModal, setConfirmModal] = useState<{isOpen: boolean, title: string, message: string, onConfirm: () => void, isDanger?: boolean}>({
       isOpen: false, title: '', message: '', onConfirm: () => {}
   });
+  const [toast, setToast] = useState<ToastState>({ show: false, message: '', type: 'success' });
 
   const currentUser = api.auth.getCurrentUser();
   const homeroomClass = currentUser?.homeroomClass;
@@ -71,7 +75,7 @@ export const TeacherDashboard: React.FC = () => {
             homeroomClass ? api.attendance.get({ className: homeroomClass, date: todayStr }) : Promise.resolve([]),
             api.subjects.getAll(),
             api.users.getAll({ role: 'TEACHER' }),
-            api.classes.getAll() // Fetch all classes to find ID and specific config
+            api.classes.getAll() 
         ]);
 
         if (homeroomClass) {
@@ -79,8 +83,6 @@ export const TeacherDashboard: React.FC = () => {
             setSchedules(scheds);
             setAttendance(atts);
 
-            // Find current class to get its specific period config
-            // Normalize names to match safely
             const matchedClass = (allClassData as ClassInfo[]).find(c => 
                 (c.grade + c.className) === homeroomClass || c.className === homeroomClass
             );
@@ -114,19 +116,26 @@ export const TeacherDashboard: React.FC = () => {
               teacherName: specificSchedule.teacherName,
               weekType: specificSchedule.weekType || 'ALL'
           });
+          // Check if subject is in standard list
+          const exists = subjects.some(s => s.name === specificSchedule.subject);
+          setIsCustomSubject(!exists);
       } else {
-          // Add new schedule (default to current view mode, or ALL if in ALL view)
+          // Add new schedule
           setEditForm({ 
               subject: '', 
               teacherName: '', 
               weekType: weekType === 'ALL' ? 'ALL' : weekType 
           });
+          setIsCustomSubject(false);
       }
   };
 
   const handleSaveSchedule = async () => {
       if (!homeroomClass || !editingCell) return;
-      if (!editForm.subject) return alert('请选择科目');
+      if (!editForm.subject) {
+          setToast({ show: true, message: '请填写科目名称', type: 'error' });
+          return;
+      }
       
       try {
           const payload = {
@@ -156,7 +165,10 @@ export const TeacherDashboard: React.FC = () => {
           setEditingCell(null);
           const updated = await api.schedules.get({ className: homeroomClass });
           setSchedules(updated);
-      } catch(e) { alert('保存失败'); }
+          setToast({ show: true, message: '课程保存成功', type: 'success' });
+      } catch(e) { 
+          setToast({ show: true, message: '保存失败', type: 'error' });
+      }
   };
 
   const handleDeleteSchedule = async (s: Schedule) => {
@@ -174,6 +186,7 @@ export const TeacherDashboard: React.FC = () => {
               }
               const updated = await api.schedules.get({ className: homeroomClass });
               setSchedules(updated);
+              setToast({ show: true, message: '课程已删除', type: 'success' });
           }
       });
   };
@@ -185,12 +198,16 @@ export const TeacherDashboard: React.FC = () => {
   };
 
   const savePeriodSettings = async () => {
-      // Validate
-      if (tempPeriodConfig.some(p => !p.name.trim())) return alert('节次名称不能为空');
-      if (!currentClassId) return alert('无法保存：找不到当前班级ID');
+      if (tempPeriodConfig.some(p => !p.name.trim())) {
+          setToast({ show: true, message: '节次名称不能为空', type: 'error' });
+          return;
+      }
+      if (!currentClassId) {
+          setToast({ show: true, message: '无法保存：找不到当前班级ID', type: 'error' });
+          return;
+      }
 
       try {
-          // Update the SPECIFIC CLASS, not the global config
           await fetch(`/api/classes/${currentClassId}`, {
               method: 'PUT',
               headers: { 
@@ -202,9 +219,9 @@ export const TeacherDashboard: React.FC = () => {
 
           setPeriodConfig(tempPeriodConfig);
           setIsPeriodSettingsOpen(false);
-          alert('班级节次设置已保存');
+          setToast({ show: true, message: '班级节次设置已保存', type: 'success' });
       } catch (e) {
-          alert('保存失败');
+          setToast({ show: true, message: '保存失败', type: 'error' });
       }
   };
 
@@ -237,6 +254,7 @@ export const TeacherDashboard: 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} 
@@ -259,7 +277,6 @@ export const TeacherDashboard: React.FC = () => {
         </div>
 
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-            {/* Left Column: Stats */}
             <div className="lg:col-span-2 space-y-6">
                 {homeroomClass && (
                     <div className="bg-white p-6 rounded-xl border border-gray-100 shadow-sm">
@@ -310,7 +327,6 @@ export const TeacherDashboard: React.FC = () => {
                 )}
             </div>
 
-            {/* Right Column: Todo List */}
             <div className="h-[500px]">
                 <TodoList />
             </div>
@@ -359,7 +375,6 @@ export const TeacherDashboard: React.FC = () => {
                                             <div className="text-[10px] text-gray-400 font-normal mt-1">{pConfig.startTime ? `${pConfig.startTime}-${pConfig.endTime}` : ''}</div>
                                         </td>
                                         {[1,2,3,4,5].map(day => {
-                                            // Enhanced filter: support displaying simultaneous odd/even records
                                             const slotItems = schedules.filter(s => 
                                                 s.dayOfWeek === day && 
                                                 s.period === pConfig.period
@@ -412,16 +427,35 @@ export const TeacherDashboard: React.FC = () => {
                     <h4 className="font-bold mb-4 text-gray-800 text-lg border-b pb-2">{editForm._id ? '编辑课程信息' : '新增课程信息'}</h4>
                     <div className="space-y-4">
                         <div>
-                            <label className="text-xs font-bold text-gray-500 uppercase block mb-1">科目</label>
-                            <select 
-                                className="w-full border border-gray-300 rounded-lg p-2.5 text-sm bg-white focus:ring-2 focus:ring-blue-500 outline-none"
-                                value={editForm.subject}
-                                onChange={e=>setEditForm({...editForm, subject: e.target.value})}
-                                autoFocus
-                            >
-                                <option value="">-- 请选择科目 --</option>
-                                {subjects.map(s => <option key={s._id} value={s.name}>{s.name}</option>)}
-                            </select>
+                            <div className="flex justify-between items-center mb-1">
+                                <label className="text-xs font-bold text-gray-500 uppercase">科目</label>
+                                <button 
+                                    onClick={() => { setIsCustomSubject(!isCustomSubject); setEditForm({...editForm, subject: ''}); }}
+                                    className="text-[10px] text-blue-600 hover:underline flex items-center"
+                                >
+                                    {isCustomSubject ? '选择现有科目' : '自定义输入'} <Edit2 size={10} className="ml-1"/>
+                                </button>
+                            </div>
+                            
+                            {isCustomSubject ? (
+                                <input 
+                                    className="w-full border border-blue-300 rounded-lg p-2.5 text-sm bg-blue-50 focus:ring-2 focus:ring-blue-500 outline-none placeholder-blue-300"
+                                    placeholder="输入自定义科目 (如: 体育)"
+                                    value={editForm.subject}
+                                    onChange={e=>setEditForm({...editForm, subject: e.target.value})}
+                                    autoFocus
+                                />
+                            ) : (
+                                <select 
+                                    className="w-full border border-gray-300 rounded-lg p-2.5 text-sm bg-white focus:ring-2 focus:ring-blue-500 outline-none"
+                                    value={editForm.subject}
+                                    onChange={e=>setEditForm({...editForm, subject: e.target.value})}
+                                    autoFocus
+                                >
+                                    <option value="">-- 请选择科目 --</option>
+                                    {subjects.map(s => <option key={s._id} value={s.name}>{s.name}</option>)}
+                                </select>
+                            )}
                         </div>
                         <div>
                             <label className="text-xs font-bold text-gray-500 uppercase block mb-1">任课教师 (可选)</label>
@@ -478,7 +512,6 @@ export const TeacherDashboard: React.FC = () => {
                                         onChange={e => updateTempPeriod(idx, 'name', e.target.value)}
                                         placeholder="节次名称"
                                     />
-                                    {/* Optional Time Inputs */}
                                     <div className="flex items-center gap-1">
                                         <Clock size={12} className="text-gray-400"/>
                                         <input