Upload 45 files

pages/AchievementTeacher.tsx

@@ -36,18 +36,15 @@ export const AchievementTeacher: React.FC<{className?: string}> = ({ className }
 
     useEffect(() => {
         loadData();
-    }, [className]); // Reload when className changes
+    }, [homeroomClass]); // Reload when homeroomClass changes
 
     const loadData = async () => {
         if (!homeroomClass) return;
         setLoading(true);
+        
+        // 1. Load Students (Independent)
         try {
-            const [cfg, stus, sysCfg] = await Promise.all([
-                api.achievements.getConfig(homeroomClass),
-                api.students.getAll(),
-                api.config.getPublic() as Promise<SystemConfig>
-            ]);
-            
+            const stus = await api.students.getAll();
             // Filter students for homeroom & Sort by SeatNo > Name
             const sortedStudents = stus
                 .filter((s: Student) => s.className === homeroomClass)
@@ -57,34 +54,65 @@ export const AchievementTeacher: React.FC<{className?: string}> = ({ className }
                     if (seatA !== seatB) return seatA - seatB;
                     return a.name.localeCompare(b.name, 'zh-CN');
                 });
-                
             setStudents(sortedStudents);
+        } catch (e) {
+            console.error("Failed to load students", e);
+        }
+
+        // 2. Load Config & System (Independent)
+        try {
+            // Use allSettled or catch individual promises to avoid blocking
+            const cfgPromise = api.achievements.getConfig(homeroomClass).catch(() => null);
+            const sysPromise = api.config.getPublic().catch(() => ({ semester: '当前学期' }));
+
+            const [cfg, sysCfg] = await Promise.all([cfgPromise, sysPromise]);
             
-            setConfig(cfg || { 
+            // Critical: Always ensure a config object exists, even if API returns null/error
+            const defaultConfig: AchievementConfig = { 
                 schoolId: currentUser?.schoolId || '', 
                 className: homeroomClass, 
                 achievements: [], 
                 exchangeRules: [] 
-            });
+            };
+            
+            // If cfg is null or empty, use default
+            setConfig(cfg || defaultConfig);
             
-            setSemester(sysCfg.semester || '当前学期');
+            // @ts-ignore
+            setSemester(sysCfg?.semester || '当前学期');
 
-        } catch (e) { console.error(e); } 
+        } catch (e) { 
+            console.error("Failed to load config", e); 
+            // Fallback just in case
+            setConfig({ 
+                schoolId: currentUser?.schoolId || '', 
+                className: homeroomClass, 
+                achievements: [], 
+                exchangeRules: [] 
+            });
+        } 
         finally { setLoading(false); }
     };
 
     const handleSaveConfig = async (newConfig: AchievementConfig) => {
+        // Optimistic update
+        setConfig(newConfig);
         try {
             await api.achievements.saveConfig(newConfig);
-            setConfig(newConfig);
-        } catch (e) { alert('保存失败'); }
+        } catch (e) { 
+            alert('保存失败，请检查网络'); 
+            loadData(); // Revert on fail
+        }
     };
 
     // --- Tab 1: Manage Achievements ---
     const addAchievement = () => {
-        if (!config || !newAchieve.name) return;
+        if (!config) return;
+        if (!newAchieve.name) return alert('请输入成就名称');
+        
         const newItem = { ...newAchieve, id: Date.now().toString() };
         const updated = { ...config, achievements: [...config.achievements, newItem] };
+        
         handleSaveConfig(updated);
         setNewAchieve({ id: '', name: '', icon: '🏆', points: 1 });
     };
@@ -111,9 +139,12 @@ export const AchievementTeacher: React.FC<{className?: string}> = ({ className }
 
     // --- Tab 3: Exchange Rules ---
     const addRule = () => {
-        if (!config || !newRule.rewardName) return;
+        if (!config) return;
+        if (!newRule.rewardName) return alert('请输入奖励名称');
+        
         const newItem = { ...newRule, id: Date.now().toString() };
         const updated = { ...config, exchangeRules: [...config.exchangeRules, newItem] };
+        
         handleSaveConfig(updated);
         setNewRule({ id: '', cost: 10, rewardType: 'DRAW_COUNT', rewardName: '抽奖券x1', rewardValue: 1 });
     };
@@ -137,20 +168,23 @@ export const AchievementTeacher: React.FC<{className?: string}> = ({ className }
     if (!homeroomClass) return <div className="p-10 text-center text-gray-500">您不是班主任，无法使用成就管理功能。</div>;
     if (loading) return <div className="flex justify-center p-10"><Loader2 className="animate-spin text-blue-600"/></div>;
 
+    // Safety fallback render if config is somehow still null (shouldn't happen with new logic)
+    const safeConfig = config || { achievements: [], exchangeRules: [] };
+
     return (
         <div className="h-full flex flex-col bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
             {/* Header / Tabs */}
-            <div className="flex border-b border-gray-100 bg-gray-50/50">
-                <button onClick={() => setActiveTab('manage')} className={`px-6 py-4 text-sm font-bold border-b-2 transition-colors flex items-center gap-2 ${activeTab === 'manage' ? 'border-blue-500 text-blue-600 bg-white' : 'border-transparent text-gray-500 hover:text-gray-700'}`}>
+            <div className="flex border-b border-gray-100 bg-gray-50/50 overflow-x-auto">
+                <button onClick={() => setActiveTab('manage')} className={`px-6 py-4 text-sm font-bold border-b-2 transition-colors flex items-center gap-2 whitespace-nowrap ${activeTab === 'manage' ? 'border-blue-500 text-blue-600 bg-white' : 'border-transparent text-gray-500 hover:text-gray-700'}`}>
                     <Award size={18}/> 成就库管理
                 </button>
-                <button onClick={() => setActiveTab('grant')} className={`px-6 py-4 text-sm font-bold border-b-2 transition-colors flex items-center gap-2 ${activeTab === 'grant' ? 'border-blue-500 text-blue-600 bg-white' : 'border-transparent text-gray-500 hover:text-gray-700'}`}>
+                <button onClick={() => setActiveTab('grant')} className={`px-6 py-4 text-sm font-bold border-b-2 transition-colors flex items-center gap-2 whitespace-nowrap ${activeTab === 'grant' ? 'border-blue-500 text-blue-600 bg-white' : 'border-transparent text-gray-500 hover:text-gray-700'}`}>
                     <Gift size={18}/> 发放成就
                 </button>
-                <button onClick={() => setActiveTab('exchange')} className={`px-6 py-4 text-sm font-bold border-b-2 transition-colors flex items-center gap-2 ${activeTab === 'exchange' ? 'border-blue-500 text-blue-600 bg-white' : 'border-transparent text-gray-500 hover:text-gray-700'}`}>
+                <button onClick={() => setActiveTab('exchange')} className={`px-6 py-4 text-sm font-bold border-b-2 transition-colors flex items-center gap-2 whitespace-nowrap ${activeTab === 'exchange' ? 'border-blue-500 text-blue-600 bg-white' : 'border-transparent text-gray-500 hover:text-gray-700'}`}>
                     <Coins size={18}/> 兑换规则
                 </button>
-                <button onClick={() => setActiveTab('balance')} className={`px-6 py-4 text-sm font-bold border-b-2 transition-colors flex items-center gap-2 ${activeTab === 'balance' ? 'border-blue-500 text-blue-600 bg-white' : 'border-transparent text-gray-500 hover:text-gray-700'}`}>
+                <button onClick={() => setActiveTab('balance')} className={`px-6 py-4 text-sm font-bold border-b-2 transition-colors flex items-center gap-2 whitespace-nowrap ${activeTab === 'balance' ? 'border-blue-500 text-blue-600 bg-white' : 'border-transparent text-gray-500 hover:text-gray-700'}`}>
                     <Users size={18}/> 学生积分
                 </button>
             </div>
@@ -162,35 +196,39 @@ export const AchievementTeacher: React.FC<{className?: string}> = ({ className }
                         <div className="bg-blue-50 p-4 rounded-xl border border-blue-100 flex flex-col md:flex-row gap-4 items-end">
                             <div className="flex-1 w-full">
                                 <label className="text-xs font-bold text-gray-500 uppercase mb-1 block">成就名称</label>
-                                <input className="w-full border rounded p-2" placeholder="如: 劳动小能手" value={newAchieve.name} onChange={e => setNewAchieve({...newAchieve, name: e.target.value})} />
+                                <input className="w-full border rounded p-2 text-sm" placeholder="如: 劳动小能手" value={newAchieve.name} onChange={e => setNewAchieve({...newAchieve, name: e.target.value})} />
                             </div>
                             <div className="w-full md:w-32">
                                 <label className="text-xs font-bold text-gray-500 uppercase mb-1 block">分值 (小红花)</label>
-                                <input type="number" min={1} className="w-full border rounded p-2" value={newAchieve.points} onChange={e => setNewAchieve({...newAchieve, points: Number(e.target.value)})} />
+                                <input type="number" min={1} className="w-full border rounded p-2 text-sm" value={newAchieve.points} onChange={e => setNewAchieve({...newAchieve, points: Number(e.target.value)})} />
                             </div>
                             <div className="w-full md:w-auto">
                                 <label className="text-xs font-bold text-gray-500 uppercase mb-1 block">图标预设</label>
-                                <select className="w-full border rounded p-2 min-w-[100px]" value={newAchieve.icon} onChange={e => setNewAchieve({...newAchieve, icon: e.target.value})}>
+                                <select className="w-full border rounded p-2 min-w-[100px] text-sm bg-white" value={newAchieve.icon} onChange={e => setNewAchieve({...newAchieve, icon: e.target.value})}>
                                     {PRESET_ICONS.map(p => <option key={p.label} value={p.icon}>{p.icon} {p.label}</option>)}
                                 </select>
                             </div>
-                            <button onClick={addAchievement} className="bg-blue-600 text-white px-4 py-2 rounded-lg font-bold hover:bg-blue-700 whitespace-nowrap">添加成就</button>
+                            <button onClick={addAchievement} className="bg-blue-600 text-white px-4 py-2 rounded-lg font-bold hover:bg-blue-700 whitespace-nowrap text-sm">添加成就</button>
                         </div>
 
-                        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-                            {config?.achievements.map(ach => (
-                                <div key={ach.id} className="border border-gray-200 rounded-xl p-4 flex flex-col items-center relative group hover:shadow-md transition-all bg-white">
-                                    <div className="text-4xl mb-2"><Emoji symbol={ach.icon} /></div>
-                                    <div className="font-bold text-gray-800 text-center">{ach.name}</div>
-                                    <div className="text-xs text-amber-600 font-bold bg-amber-50 px-2 py-0.5 rounded-full mt-1 border border-amber-100">
-                                        {ach.points} <Emoji symbol="🌺" size={14}/>
+                        {safeConfig.achievements.length === 0 ? (
+                            <div className="text-center text-gray-400 py-10">暂无成就，请添加</div>
+                        ) : (
+                            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                                {safeConfig.achievements.map(ach => (
+                                    <div key={ach.id} className="border border-gray-200 rounded-xl p-4 flex flex-col items-center relative group hover:shadow-md transition-all bg-white">
+                                        <div className="text-4xl mb-2"><Emoji symbol={ach.icon} /></div>
+                                        <div className="font-bold text-gray-800 text-center">{ach.name}</div>
+                                        <div className="text-xs text-amber-600 font-bold bg-amber-50 px-2 py-0.5 rounded-full mt-1 border border-amber-100">
+                                            {ach.points} <Emoji symbol="🌺" size={14}/>
+                                        </div>
+                                        <button onClick={() => deleteAchievement(ach.id)} className="absolute top-2 right-2 text-gray-300 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity">
+                                            <Trash2 size={16}/>
+                                        </button>
                                     </div>
-                                    <button onClick={() => deleteAchievement(ach.id)} className="absolute top-2 right-2 text-gray-300 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity">
-                                        <Trash2 size={16}/>
-                                    </button>
-                                </div>
-                            ))}
-                        </div>
+                                ))}
+                            </div>
+                        )}
                     </div>
                 )}
 
@@ -203,42 +241,50 @@ export const AchievementTeacher: React.FC<{className?: string}> = ({ className }
                             <button onClick={() => setSelectedStudents(new Set(selectedStudents.size === students.length ? [] : students.map(s => s._id || String(s.id))))} className="text-xs text-blue-600 mb-2 text-left hover:underline">
                                 {selectedStudents.size === students.length ? '取消全选' : '全选所有'}
                             </button>
-                            <div className="flex-1 overflow-y-auto space-y-2 pr-2 custom-scrollbar max-h-[500px]">
-                                {students.map(s => (
-                                    <div 
-                                        key={s._id} 
-                                        onClick={() => {
-                                            const newSet = new Set(selectedStudents);
-                                            const sid = s._id || String(s.id);
-                                            if (newSet.has(sid)) newSet.delete(sid);
-                                            else newSet.add(sid);
-                                            setSelectedStudents(newSet);
-                                        }}
-                                        className={`p-2 rounded border cursor-pointer flex items-center justify-between ${selectedStudents.has(s._id || String(s.id)) ? 'bg-blue-50 border-blue-400' : 'bg-white border-gray-200 hover:bg-gray-50'}`}
-                                    >
-                                        <span className="text-sm font-medium">{s.seatNo ? s.seatNo+'.':''}{s.name}</span>
-                                        {selectedStudents.has(s._id || String(s.id)) && <CheckCircle size={16} className="text-blue-500"/>}
-                                    </div>
-                                ))}
-                            </div>
+                            {students.length === 0 ? (
+                                <div className="text-sm text-gray-400">班级暂无学生数据</div>
+                            ) : (
+                                <div className="flex-1 overflow-y-auto space-y-2 pr-2 custom-scrollbar max-h-[500px]">
+                                    {students.map(s => (
+                                        <div 
+                                            key={s._id} 
+                                            onClick={() => {
+                                                const newSet = new Set(selectedStudents);
+                                                const sid = s._id || String(s.id);
+                                                if (newSet.has(sid)) newSet.delete(sid);
+                                                else newSet.add(sid);
+                                                setSelectedStudents(newSet);
+                                            }}
+                                            className={`p-2 rounded border cursor-pointer flex items-center justify-between transition-colors ${selectedStudents.has(s._id || String(s.id)) ? 'bg-blue-50 border-blue-400' : 'bg-white border-gray-200 hover:bg-gray-50'}`}
+                                        >
+                                            <span className="text-sm font-medium">{s.seatNo ? s.seatNo+'.':''}{s.name}</span>
+                                            {selectedStudents.has(s._id || String(s.id)) && <CheckCircle size={16} className="text-blue-500"/>}
+                                        </div>
+                                    ))}
+                                </div>
+                            )}
                         </div>
 
                         {/* Achievement Selector */}
                         <div className="flex-1 flex flex-col">
                             <h3 className="font-bold text-gray-700 mb-4">2. 选择要颁发的奖状</h3>
-                            <div className="grid grid-cols-2 sm:grid-cols-3 gap-3 mb-6">
-                                {config?.achievements.map(ach => (
-                                    <div 
-                                        key={ach.id} 
-                                        onClick={() => setSelectedAchieveId(ach.id)}
-                                        className={`p-4 rounded-xl border cursor-pointer text-center transition-all ${selectedAchieveId === ach.id ? 'bg-amber-50 border-amber-400 ring-2 ring-amber-200' : 'bg-white border-gray-200 hover:bg-gray-50'}`}
-                                    >
-                                        <div className="text-3xl mb-1"><Emoji symbol={ach.icon} /></div>
-                                        <div className="font-bold text-sm text-gray-800">{ach.name}</div>
-                                        <div className="text-xs text-gray-500">+{ach.points} <Emoji symbol="🌺" size={12}/></div>
-                                    </div>
-                                ))}
-                            </div>
+                            {safeConfig.achievements.length === 0 ? (
+                                <div className="text-gray-400 text-sm mb-6">暂无成就，请先去“成就库管理”添加。</div>
+                            ) : (
+                                <div className="grid grid-cols-2 sm:grid-cols-3 gap-3 mb-6 max-h-[400px] overflow-y-auto custom-scrollbar p-1">
+                                    {safeConfig.achievements.map(ach => (
+                                        <div 
+                                            key={ach.id} 
+                                            onClick={() => setSelectedAchieveId(ach.id)}
+                                            className={`p-4 rounded-xl border cursor-pointer text-center transition-all ${selectedAchieveId === ach.id ? 'bg-amber-50 border-amber-400 ring-2 ring-amber-200' : 'bg-white border-gray-200 hover:bg-gray-50'}`}
+                                        >
+                                            <div className="text-3xl mb-1"><Emoji symbol={ach.icon} /></div>
+                                            <div className="font-bold text-sm text-gray-800">{ach.name}</div>
+                                            <div className="text-xs text-gray-500">+{ach.points} <Emoji symbol="🌺" size={12}/></div>
+                                        </div>
+                                    ))}
+                                </div>
+                            )}
                             
                             <div className="mt-auto bg-gray-50 p-4 rounded-xl border border-gray-200">
                                 <div className="flex justify-between items-center mb-2">
@@ -259,28 +305,30 @@ export const AchievementTeacher: React.FC<{className?: string}> = ({ className }
                         <div className="bg-green-50 p-4 rounded-xl border border-green-100 flex flex-col md:flex-row gap-4 items-end">
                             <div className="w-full md:w-32">
                                 <label className="text-xs font-bold text-gray-500 uppercase mb-1 block">消耗小红花</label>
-                                <input type="number" className="w-full border rounded p-2" value={newRule.cost} onChange={e => setNewRule({...newRule,cost: Number(e.target.value)})}/>
+                                <input type="number" min={1} className="w-full border rounded p-2 text-sm" value={newRule.cost} onChange={e => setNewRule({...newRule,cost: Number(e.target.value)})}/>
                             </div>
                             <div className="w-full md:w-32">
                                 <label className="text-xs font-bold text-gray-500 uppercase mb-1 block">奖励类型</label>
-                                <select className="w-full border rounded p-2" value={newRule.rewardType} onChange={e => setNewRule({...newRule, rewardType: e.target.value as any})}>
+                                <select className="w-full border rounded p-2 text-sm bg-white" value={newRule.rewardType} onChange={e => setNewRule({...newRule, rewardType: e.target.value as any})}>
                                     <option value="DRAW_COUNT">🎲 抽奖券</option>
                                     <option value="ITEM">🎁 实物/特权</option>
                                 </select>
                             </div>
                             <div className="flex-1 w-full">
                                 <label className="text-xs font-bold text-gray-500 uppercase mb-1 block">奖励名称</label>
-                                <input className="w-full border rounded p-2" placeholder="如: 免作业券" value={newRule.rewardName} onChange={e => setNewRule({...newRule, rewardName: e.target.value})}/>
+                                <input className="w-full border rounded p-2 text-sm" placeholder="如: 免作业券" value={newRule.rewardName} onChange={e => setNewRule({...newRule, rewardName: e.target.value})}/>
                             </div>
                             <div className="w-24">
                                 <label className="text-xs font-bold text-gray-500 uppercase mb-1 block">数量</label>
-                                <input type="number" min={1} className="w-full border rounded p-2" value={newRule.rewardValue} onChange={e => setNewRule({...newRule, rewardValue: Number(e.target.value)})}/>
+                                <input type="number" min={1} className="w-full border rounded p-2 text-sm" value={newRule.rewardValue} onChange={e => setNewRule({...newRule, rewardValue: Number(e.target.value)})}/>
                             </div>
-                            <button onClick={addRule} className="bg-green-600 text-white px-4 py-2 rounded-lg font-bold hover:bg-green-700 whitespace-nowrap">添加规则</button>
+                            <button onClick={addRule} className="bg-green-600 text-white px-4 py-2 rounded-lg font-bold hover:bg-green-700 whitespace-nowrap text-sm">添加规则</button>
                         </div>
 
                         <div className="space-y-3">
-                            {config?.exchangeRules.map(rule => (
+                            {safeConfig.exchangeRules.length === 0 ? (
+                                <div className="text-center text-gray-400 py-4">暂无兑换规则</div>
+                            ) : safeConfig.exchangeRules.map(rule => (
                                 <div key={rule.id} className="flex items-center justify-between p-4 bg-white border border-gray-200 rounded-xl hover:shadow-sm">
                                     <div className="flex items-center gap-4">
                                         <div className="bg-amber-100 text-amber-700 font-bold px-3 py-1 rounded-lg border border-amber-200">
@@ -314,7 +362,9 @@ export const AchievementTeacher: React.FC<{className?: string}> = ({ className }
                                 </tr>
                             </thead>
                             <tbody className="divide-y divide-gray-100">
-                                {students.map(s => (
+                                {students.length === 0 ? (
+                                    <tr><td colSpan={3} className="p-4 text-center text-gray-400">暂无学生数据</td></tr>
+                                ) : students.map(s => (
                                     <tr key={s._id} className="hover:bg-gray-50">
                                         <td className="p-4 font-bold text-gray-700">{s.seatNo ? s.seatNo+'.':''}{s.name}</td>
                                         <td className="p-4">
@@ -324,7 +374,7 @@ export const AchievementTeacher: React.FC<{className?: string}> = ({ className }
                                         </td>
                                         <td className="p-4 text-right">
                                             <div className="flex justify-end gap-2">
-                                                {config?.exchangeRules.map(r => (
+                                                {safeConfig.exchangeRules.length > 0 ? safeConfig.exchangeRules.map(r => (
                                                     <button 
                                                         key={r.id}
                                                         disabled={(s.flowerBalance || 0) < r.cost}
@@ -334,7 +384,7 @@ export const AchievementTeacher: React.FC<{className?: string}> = ({ className }
                                                     >
                                                         兑换 {r.rewardName} (-{r.cost})
                                                     </button>
-                                                ))}
+                                                )) : <span className="text-gray-300 text-xs">无兑换规则</span>}
                                             </div>
                                         </td>
                                     </tr>