Upload 37 files

pages/AchievementStudent.tsx

@@ -0,0 +1,183 @@
+
+import React, { useState, useEffect } from 'react';
+import { api } from '../services/api';
+import { AchievementConfig, AchievementItem, Student, StudentAchievement, SystemConfig } from '../types';
+import { Award, ShoppingBag, Loader2, Calendar, Lock } from 'lucide-react';
+
+export const AchievementStudent: React.FC = () => {
+    const [loading, setLoading] = useState(true);
+    const [student, setStudent] = useState<Student | null>(null);
+    const [config, setConfig] = useState<AchievementConfig | null>(null);
+    const [myAchievements, setMyAchievements] = useState<StudentAchievement[]>([]);
+    
+    // UI State
+    const [activeTab, setActiveTab] = useState<'wall' | 'shop'>('wall');
+    const [semesters, setSemesters] = useState<string[]>([]);
+    const [selectedSemester, setSelectedSemester] = useState('');
+
+    const currentUser = api.auth.getCurrentUser();
+
+    useEffect(() => {
+        loadData();
+    }, [selectedSemester]);
+
+    const loadData = async () => {
+        setLoading(true);
+        try {
+            const [stus, sysCfg] = await Promise.all([
+                api.students.getAll(),
+                api.config.getPublic() as Promise<SystemConfig>
+            ]);
+            
+            const me = stus.find((s: Student) => s.name === (currentUser?.trueName || currentUser?.username));
+            if (me) {
+                setStudent(me);
+                const cfg = await api.achievements.getConfig(me.className);
+                setConfig(cfg);
+                
+                // Semesters Logic
+                const sems = sysCfg.semesters || ['当前学期'];
+                setSemesters(sems);
+                if (!selectedSemester && sysCfg.semester) {
+                    setSelectedSemester(sysCfg.semester);
+                    return; // Will re-trigger useEffect
+                }
+
+                // Fetch Records
+                const records = await api.achievements.getStudentAchievements(me._id || String(me.id), selectedSemester);
+                setMyAchievements(records);
+            }
+        } catch (e) { console.error(e); } 
+        finally { setLoading(false); }
+    };
+
+    const handleExchange = async (ruleId: string) => {
+        if (!student) return;
+        if (!confirm('确认消耗小红花进行兑换吗？')) return;
+        try {
+            await api.achievements.exchange({ studentId: student._id || String(student.id), ruleId });
+            alert('兑换成功！请到“奖励管理”查看。');
+            loadData(); // Refresh balance
+        } catch (e: any) { alert(e.message || '兑换失败'); }
+    };
+
+    // Calculate Counts for Wall
+    const getAchievementCount = (achId: string) => {
+        return myAchievements.filter(a => a.achievementId === achId).length;
+    };
+
+    if (loading && !student) return <div className="flex justify-center p-10"><Loader2 className="animate-spin text-blue-600"/></div>;
+    if (!student || !config) return <div className="text-center p-10 text-gray-400">暂无数据，请联系班主任开启成就系统。</div>;
+
+    return (
+        <div className="h-full flex flex-col bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
+            {/* Header / Info */}
+            <div className="p-6 bg-gradient-to-r from-amber-50 to-orange-50 border-b border-orange-100 flex flex-col md:flex-row justify-between items-center gap-4">
+                <div className="flex items-center gap-4">
+                    <div className="bg-amber-100 p-3 rounded-full border border-amber-200">
+                        <Award size={32} className="text-amber-600"/>
+                    </div>
+                    <div>
+                        <h2 className="text-xl font-bold text-gray-800">我的成就中心</h2>
+                        <p className="text-sm text-gray-500">努力学习，收获荣誉与奖励！</p>
+                    </div>
+                </div>
+                <div className="flex items-center gap-4 bg-white p-3 rounded-xl shadow-sm border border-orange-100">
+                    <div className="text-right">
+                        <div className="text-xs text-gray-500 font-bold uppercase">当前小红花</div>
+                        <div className="text-2xl font-black text-amber-600">{student.flowerBalance || 0} 🌺</div>
+                    </div>
+                </div>
+            </div>
+
+            {/* Tabs */}
+            <div className="flex border-b border-gray-100 px-6">
+                <button onClick={() => setActiveTab('wall')} className={`px-4 py-3 text-sm font-bold border-b-2 transition-colors ${activeTab === 'wall' ? 'border-amber-500 text-amber-600' : 'border-transparent text-gray-500 hover:text-gray-700'}`}>
+                    🏆 荣誉成就墙
+                </button>
+                <button onClick={() => setActiveTab('shop')} className={`px-4 py-3 text-sm font-bold border-b-2 transition-colors ${activeTab === 'shop' ? 'border-amber-500 text-amber-600' : 'border-transparent text-gray-500 hover:text-gray-700'}`}>
+                    🛍️ 积分兑换
+                </button>
+            </div>
+
+            <div className="flex-1 overflow-y-auto p-6 bg-gray-50/30">
+                {/* 1. Wall */}
+                {activeTab === 'wall' && (
+                    <div className="space-y-6">
+                        <div className="flex justify-end">
+                            <div className="flex items-center bg-white border rounded-lg px-2 py-1 shadow-sm">
+                                <Calendar size={14} className="text-gray-400 mr-2"/>
+                                <select className="text-sm bg-transparent outline-none text-gray-600" value={selectedSemester} onChange={e => setSelectedSemester(e.target.value)}>
+                                    <option value="">-- 全部时间 --</option>
+                                    {semesters.map(s => <option key={s} value={s}>{s}</option>)}
+                                </select>
+                            </div>
+                        </div>
+
+                        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+                            {config.achievements.map(ach => {
+                                const count = getAchievementCount(ach.id);
+                                const isUnlocked = count > 0;
+                                
+                                return (
+                                    <div key={ach.id} className={`relative aspect-square rounded-xl border flex flex-col items-center justify-center p-4 transition-all ${isUnlocked ? 'bg-white border-amber-200 shadow-sm' : 'bg-gray-50 border-gray-200 grayscale opacity-70'}`}>
+                                        <div className={`text-5xl mb-3 transition-transform ${isUnlocked ? 'scale-110 drop-shadow-md' : 'scale-90 opacity-50'}`}>
+                                            {ach.icon}
+                                        </div>
+                                        <div className={`font-bold text-center ${isUnlocked ? 'text-gray-800' : 'text-gray-400'}`}>
+                                            {ach.name}
+                                        </div>
+                                        {isUnlocked ? (
+                                            <div className="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-1.5 rounded-full border border-white shadow-sm">
+                                                x{count}
+                                            </div>
+                                        ) : (
+                                            <div className="absolute top-2 right-2 text-gray-300">
+                                                <Lock size={16}/>
+                                            </div>
+                                        )}
+                                        <div className="mt-1 text-xs text-amber-600 font-medium bg-amber-50 px-2 rounded">
+                                            {ach.points} 🌺
+                                        </div>
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    </div>
+                )}
+
+                {/* 2. Shop */}
+                {activeTab === 'shop' && (
+                    <div className="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                        {config.exchangeRules.map(rule => {
+                            const canAfford = (student.flowerBalance || 0) >= rule.cost;
+                            return (
+                                <div key={rule.id} className="bg-white rounded-xl border border-gray-200 shadow-sm p-5 flex flex-col items-center text-center hover:shadow-md transition-shadow relative overflow-hidden">
+                                    <div className="w-16 h-16 bg-gradient-to-br from-green-100 to-emerald-100 rounded-full flex items-center justify-center mb-3 text-3xl shadow-inner">
+                                        {rule.rewardType === 'DRAW_COUNT' ? '🎲' : '🎁'}
+                                    </div>
+                                    <h3 className="font-bold text-gray-800 text-lg mb-1">{rule.rewardName}</h3>
+                                    <p className="text-sm text-gray-500 mb-4">包含数量: x{rule.rewardValue}</p>
+                                    
+                                    <button 
+                                        onClick={() => handleExchange(rule.id)}
+                                        disabled={!canAfford}
+                                        className={`mt-auto w-full py-2.5 rounded-lg font-bold flex items-center justify-center gap-2 transition-all ${canAfford ? 'bg-amber-500 text-white hover:bg-amber-600 shadow-md hover:shadow-lg active:scale-95' : 'bg-gray-100 text-gray-400 cursor-not-allowed'}`}
+                                    >
+                                        <ShoppingBag size={16}/>
+                                        {rule.cost} 🌺 兑换
+                                    </button>
+                                </div>
+                            );
+                        })}
+                        {config.exchangeRules.length === 0 && (
+                            <div className="col-span-full text-center py-20 text-gray-400">
+                                老师暂时没有设置兑换商品哦~
+                            </div>
+                        )}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};

pages/AchievementTeacher.tsx

@@ -0,0 +1,338 @@
+
+import React, { useState, useEffect } from 'react';
+import { api } from '../services/api';
+import { AchievementConfig, AchievementItem, ExchangeRule, Student, SystemConfig } from '../types';
+import { Plus, Trash2, Edit, Save, Gift, Award, Coins, Users, Search, Loader2, CheckCircle } from 'lucide-react';
+
+const PRESET_ICONS = [
+    { icon: '🏆', label: '冠军杯' }, { icon: '🥇', label: '金牌' }, { icon: '🥈', label: '银牌' }, { icon: '🥉', label: '铜牌' },
+    { icon: '⭐', label: '星星' }, { icon: '🌟', label: '闪亮' }, { icon: '🔥', label: '热血' }, { icon: '💡', label: '智慧' },
+    { icon: '📚', label: '博学' }, { icon: '✏️', label: '勤奋' }, { icon: '🎨', label: '艺术' }, { icon: '🎵', label: '音乐' },
+    { icon: '⚽', label: '运动' }, { icon: '🏃', label: '进步' }, { icon: '🤝', label: '助人' }, { icon: '🧹', label: '劳动' },
+    { icon: '⏰', label: '守时' }, { icon: '📝', label: '写作' }, { icon: '🧮', label: '计算' }, { icon: '🔬', label: '科学' }
+];
+
+export const AchievementTeacher: React.FC = () => {
+    const [loading, setLoading] = useState(true);
+    const [config, setConfig] = useState<AchievementConfig | null>(null);
+    const [students, setStudents] = useState<Student[]>([]);
+    const [semester, setSemester] = useState('');
+    
+    // Tab State
+    const [activeTab, setActiveTab] = useState<'manage' | 'grant' | 'exchange' | 'balance'>('manage');
+
+    // Forms
+    const [newAchieve, setNewAchieve] = useState<AchievementItem>({ id: '', name: '', icon: '🏆', points: 1 });
+    const [newRule, setNewRule] = useState<ExchangeRule>({ id: '', cost: 10, rewardType: 'DRAW_COUNT', rewardName: '抽奖券x1', rewardValue: 1 });
+    
+    // Grant State
+    const [selectedStudents, setSelectedStudents] = useState<Set<string>>(new Set());
+    const [selectedAchieveId, setSelectedAchieveId] = useState('');
+
+    const currentUser = api.auth.getCurrentUser();
+    const homeroomClass = currentUser?.homeroomClass;
+
+    useEffect(() => {
+        loadData();
+    }, []);
+
+    const loadData = async () => {
+        if (!homeroomClass) return;
+        setLoading(true);
+        try {
+            const [cfg, stus, sysCfg] = await Promise.all([
+                api.achievements.getConfig(homeroomClass),
+                api.students.getAll(),
+                api.config.getPublic() as Promise<SystemConfig>
+            ]);
+            
+            // Filter students for homeroom
+            setStudents(stus.filter((s: Student) => s.className === homeroomClass));
+            
+            setConfig(cfg || { 
+                schoolId: currentUser?.schoolId || '', 
+                className: homeroomClass, 
+                achievements: [], 
+                exchangeRules: [] 
+            });
+            
+            setSemester(sysCfg.semester || '当前学期');
+
+        } catch (e) { console.error(e); } 
+        finally { setLoading(false); }
+    };
+
+    const handleSaveConfig = async (newConfig: AchievementConfig) => {
+        try {
+            await api.achievements.saveConfig(newConfig);
+            setConfig(newConfig);
+        } catch (e) { alert('保存失败'); }
+    };
+
+    // --- Tab 1: Manage Achievements ---
+    const addAchievement = () => {
+        if (!config || !newAchieve.name) return;
+        const newItem = { ...newAchieve, id: Date.now().toString() };
+        const updated = { ...config, achievements: [...config.achievements, newItem] };
+        handleSaveConfig(updated);
+        setNewAchieve({ id: '', name: '', icon: '🏆', points: 1 });
+    };
+
+    const deleteAchievement = (id: string) => {
+        if (!config || !confirm('确认删除？')) return;
+        const updated = { ...config, achievements: config.achievements.filter(a => a.id !== id) };
+        handleSaveConfig(updated);
+    };
+
+    // --- Tab 2: Grant ---
+    const handleGrant = async () => {
+        if (selectedStudents.size === 0 || !selectedAchieveId) return alert('请选择学生和奖状');
+        try {
+            const promises = Array.from(selectedStudents).map(sid => 
+                api.achievements.grant({ studentId: sid, achievementId: selectedAchieveId, semester })
+            );
+            await Promise.all(promises);
+            alert(`成功发放给 ${selectedStudents.size} 位学生`);
+            setSelectedStudents(new Set());
+            loadData(); // Refresh flower balances
+        } catch (e) { alert('部分发放失败'); }
+    };
+
+    // --- Tab 3: Exchange Rules ---
+    const addRule = () => {
+        if (!config || !newRule.rewardName) return;
+        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 });
+    };
+    
+    const deleteRule = (id: string) => {
+        if (!config || !confirm('确认删除？')) return;
+        const updated = { ...config, exchangeRules: config.exchangeRules.filter(r => r.id !== id) };
+        handleSaveConfig(updated);
+    };
+    
+    // Proxy Exchange (Teacher helps student exchange)
+    const handleProxyExchange = async (studentId: string, ruleId: string) => {
+        if (!confirm('确认代学生兑换？将扣除对应小红花并记录。')) return;
+        try {
+            await api.achievements.exchange({ studentId, ruleId });
+            alert('兑换成功');
+            loadData(); // Refresh balance
+        } catch (e: any) { alert(e.message || '兑换失败，余额不足？'); }
+    };
+
+    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>;
+
+    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'}`}>
+                    <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'}`}>
+                    <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'}`}>
+                    <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'}`}>
+                    <Users size={18}/> 学生积分
+                </button>
+            </div>
+
+            <div className="flex-1 overflow-y-auto p-6">
+                {/* 1. Manage Achievements */}
+                {activeTab === 'manage' && (
+                    <div className="space-y-6 max-w-4xl mx-auto">
+                        <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})} />
+                            </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)})} />
+                            </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})}>
+                                    {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>
+                        </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">{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} 🌺
+                                    </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>
+                )}
+
+                {/* 2. Grant Achievements */}
+                {activeTab === 'grant' && (
+                    <div className="flex flex-col md:flex-row gap-6 h-full">
+                        {/* Student Selector */}
+                        <div className="w-full md:w-1/3 border-r border-gray-100 pr-4 flex flex-col min-h-[400px]">
+                            <h3 className="font-bold text-gray-700 mb-2">1. 选择学生 ({selectedStudents.size})</h3>
+                            <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.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">{ach.icon}</div>
+                                        <div className="font-bold text-sm text-gray-800">{ach.name}</div>
+                                        <div className="text-xs text-gray-500">+{ach.points} 🌺</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">
+                                    <span className="text-sm text-gray-600">当前学期: <b>{semester}</b></span>
+                                    <span className="text-sm text-gray-600">已选: <b>{selectedStudents.size}</b> 人</span>
+                                </div>
+                                <button onClick={handleGrant} disabled={!selectedAchieveId || selectedStudents.size===0} className="w-full bg-blue-600 text-white py-3 rounded-lg font-bold hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed shadow-md">
+                                    确认发放
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                )}
+
+                {/* 3. Exchange Rules */}
+                {activeTab === 'exchange' && (
+                    <div className="space-y-6 max-w-4xl mx-auto">
+                        <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)})}/>
+                            </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})}>
+                                    <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})}/>
+                            </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)})}/>
+                            </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>
+                        </div>
+
+                        <div className="space-y-3">
+                            {config?.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">
+                                            {rule.cost} 🌺
+                                        </div>
+                                        <div className="text-gray-400">➡️</div>
+                                        <div className="flex items-center gap-2">
+                                            <span className="text-2xl">{rule.rewardType === 'DRAW_COUNT' ? '🎲' : '🎁'}</span>
+                                            <div>
+                                                <div className="font-bold text-gray-800">{rule.rewardName}</div>
+                                                <div className="text-xs text-gray-500">x{rule.rewardValue}</div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <button onClick={() => deleteRule(rule.id)} className="text-gray-300 hover:text-red-500 p-2"><Trash2 size={18}/></button>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                )}
+
+                {/* 4. Balance List (with Proxy Exchange) */}
+                {activeTab === 'balance' && (
+                    <div className="overflow-x-auto">
+                        <table className="w-full text-left border-collapse">
+                            <thead className="bg-gray-50 text-gray-500 text-xs uppercase">
+                                <tr>
+                                    <th className="p-4">学生姓名</th>
+                                    <th className="p-4">小红花余额</th>
+                                    <th className="p-4 text-right">操作 (代兑换)</th>
+                                </tr>
+                            </thead>
+                            <tbody className="divide-y divide-gray-100">
+                                {students.map(s => (
+                                    <tr key={s._id} className="hover:bg-gray-50">
+                                        <td className="p-4 font-bold text-gray-700">{s.name}</td>
+                                        <td className="p-4">
+                                            <span className="text-amber-600 font-bold bg-amber-50 px-2 py-1 rounded border border-amber-100">
+                                                {s.flowerBalance || 0} 🌺
+                                            </span>
+                                        </td>
+                                        <td className="p-4 text-right">
+                                            <div className="flex justify-end gap-2">
+                                                {config?.exchangeRules.map(r => (
+                                                    <button 
+                                                        key={r.id}
+                                                        disabled={(s.flowerBalance || 0) < r.cost}
+                                                        onClick={() => handleProxyExchange(s._id || String(s.id), r.id)}
+                                                        className="text-xs border border-gray-200 px-2 py-1 rounded hover:bg-blue-50 hover:text-blue-600 hover:border-blue-200 disabled:opacity-30 disabled:cursor-not-allowed"
+                                                        title={`消耗 ${r.cost} 花兑换 ${r.rewardName}`}
+                                                    >
+                                                        兑换 {r.rewardName} (-{r.cost})
+                                                    </button>
+                                                ))}
+                                            </div>
+                                        </td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};

pages/Games.tsx

@@ -1,22 +1,31 @@
 
 import React, { useState } from 'react';
-import { Trophy, Star } from 'lucide-react';
+import { Trophy, Star, Award } from 'lucide-react';
 import { GameMountain } from './GameMountain';
 import { GameLucky } from './GameLucky';
 import { GameRewards } from './GameRewards';
+import { AchievementTeacher } from './AchievementTeacher';
+import { AchievementStudent } from './AchievementStudent';
+import { api } from '../services/api';
 
 export const Games: React.FC = () => {
-  const [activeTab, setActiveTab] = useState<'games' | 'rewards'>('games');
+  const [activeTab, setActiveTab] = useState<'games' | 'achievements' | 'rewards'>('games');
   const [activeGame, setActiveGame] = useState<'mountain' | 'lucky'>('mountain');
 
+  const currentUser = api.auth.getCurrentUser();
+  const isStudent = currentUser?.role === 'STUDENT';
+
   return (
     <div className="flex flex-col h-[calc(100vh-120px)] w-full max-w-full overflow-hidden">
       {/* Top Tabs Switcher */}
-      <div className="flex justify-center space-x-4 mb-4 shrink-0">
-         <button onClick={() => setActiveTab('games')} className={`px-6 py-2.5 rounded-full font-bold flex items-center transition-all ${activeTab === 'games' ? 'bg-blue-600 text-white shadow-lg shadow-blue-200 scale-105' : 'bg-white text-gray-500 hover:bg-gray-50 border border-transparent'}`}>
+      <div className="flex justify-center space-x-4 mb-4 shrink-0 overflow-x-auto px-4 py-1">
+         <button onClick={() => setActiveTab('games')} className={`px-6 py-2.5 rounded-full font-bold flex items-center transition-all whitespace-nowrap ${activeTab === 'games' ? 'bg-blue-600 text-white shadow-lg shadow-blue-200 scale-105' : 'bg-white text-gray-500 hover:bg-gray-50 border border-transparent'}`}>
             <Trophy className="mr-2" size={18}/> 互动游戏
          </button>
-         <button onClick={() => setActiveTab('rewards')} className={`px-6 py-2.5 rounded-full font-bold flex items-center transition-all ${activeTab === 'rewards' ? 'bg-amber-500 text-white shadow-lg shadow-amber-200 scale-105' : 'bg-white text-gray-500 hover:bg-gray-50 border border-transparent'}`}>
+         <button onClick={() => setActiveTab('achievements')} className={`px-6 py-2.5 rounded-full font-bold flex items-center transition-all whitespace-nowrap ${activeTab === 'achievements' ? 'bg-amber-500 text-white shadow-lg shadow-amber-200 scale-105' : 'bg-white text-gray-500 hover:bg-gray-50 border border-transparent'}`}>
+            <Award className="mr-2" size={18}/> 成就系统
+         </button>
+         <button onClick={() => setActiveTab('rewards')} className={`px-6 py-2.5 rounded-full font-bold flex items-center transition-all whitespace-nowrap ${activeTab === 'rewards' ? 'bg-emerald-500 text-white shadow-lg shadow-emerald-200 scale-105' : 'bg-white text-gray-500 hover:bg-gray-50 border border-transparent'}`}>
             <Star className="mr-2" size={18}/> 奖励管理
          </button>
       </div>
@@ -41,9 +50,14 @@ export const Games: React.FC = () => {
             </div>
          )}
 
+         {/* ACHIEVEMENTS VIEW */}
+         {activeTab === 'achievements' && (
+            isStudent ? <AchievementStudent /> : <AchievementTeacher />
+         )}
+
          {/* REWARD VIEW */}
          {activeTab === 'rewards' && <GameRewards />}
       </div>
     </div>
   );
-};
+};

server.js

@@ -33,6 +33,8 @@ const InMemoryDB = {
   luckyConfig: {},
   config: {},
   attendance: [],
+  achievementsConfig: [], // NEW
+  studentAchievements: [], // NEW
   isFallback: false
 };
 
@@ -59,8 +61,8 @@ const SchoolSchema = new mongoose.Schema({ name: String, code: String });
 const School = mongoose.model('School', SchoolSchema);
 const UserSchema = new mongoose.Schema({ username: String, password: String, trueName: String, phone: String, email: String, schoolId: String, role: String, status: String, avatar: String, createTime: Date, teachingSubject: String, homeroomClass: String, studentNo: String, parentName: String, parentPhone: String, address: String, gender: String });
 const User = mongoose.model('User', UserSchema);
-// Updated Student Schema with dailyDrawLog
-const StudentSchema = new mongoose.Schema({ schoolId: String, studentNo: String, name: String, gender: String, birthday: String, idCard: String, phone: String, className: String, status: String, parentName: String, parentPhone: String, address: String, teamId: String, drawAttempts: { type: Number, default: 0 }, dailyDrawLog: { date: String, count: { type: Number, default: 0 } } });
+// Updated Student Schema with dailyDrawLog AND flowerBalance
+const StudentSchema = new mongoose.Schema({ schoolId: String, studentNo: String, name: String, gender: String, birthday: String, idCard: String, phone: String, className: String, status: String, parentName: String, parentPhone: String, address: String, teamId: String, drawAttempts: { type: Number, default: 0 }, dailyDrawLog: { date: String, count: { type: Number, default: 0 } }, flowerBalance: { type: Number, default: 0 } });
 const Student = mongoose.model('Student', StudentSchema);
 const CourseSchema = new mongoose.Schema({ schoolId: String, courseCode: String, courseName: String, teacherName: String, credits: Number, capacity: Number, enrolled: Number });
 const Course = mongoose.model('Course', CourseSchema);
@@ -87,6 +89,13 @@ const StudentRewardModel = mongoose.model('StudentReward', StudentRewardSchema);
 const LuckyDrawConfigSchema = new mongoose.Schema({ schoolId: String, prizes: [{ id: String, name: String, probability: Number, count: Number, icon: String }], dailyLimit: Number, cardCount: Number, defaultPrize: String });
 const LuckyDrawConfigModel = mongoose.model('LuckyDrawConfig', LuckyDrawConfigSchema);
 
+// NEW: Achievement Schemas
+const AchievementConfigSchema = new mongoose.Schema({ schoolId: String, className: String, achievements: [{ id: String, name: String, icon: String, points: Number, description: String }], exchangeRules: [{ id: String, cost: Number, rewardType: String, rewardName: String, rewardValue: Number }] });
+const AchievementConfigModel = mongoose.model('AchievementConfig', AchievementConfigSchema);
+const StudentAchievementSchema = new mongoose.Schema({ schoolId: String, studentId: String, studentName: String, achievementId: String, achievementName: String, achievementIcon: String, semester: String, createTime: { type: Date, default: Date.now } });
+const StudentAchievementModel = mongoose.model('StudentAchievement', StudentAchievementSchema);
+
+
 // Attendance Schemas
 const AttendanceSchema = new mongoose.Schema({ schoolId: String, studentId: String, studentName: String, className: String, date: String, status: String, checkInTime: Date });
 const AttendanceModel = mongoose.model('Attendance', AttendanceSchema);
@@ -111,6 +120,114 @@ const injectSchoolId = (req, b) => ({ ...b, schoolId: req.headers['x-school-id']
 
 // ... Routes ...
 
+// --- ACHIEVEMENT ROUTES ---
+
+// Get Achievement Config for a class
+app.get('/api/achievements/config', async (req, res) => {
+    const { className } = req.query;
+    if (!className) return res.status(400).json({ error: 'Class name required' });
+    const config = await AchievementConfigModel.findOne({ ...getQueryFilter(req), className });
+    res.json(config || { className, achievements: [], exchangeRules: [] });
+});
+
+// Save Achievement Config
+app.post('/api/achievements/config', async (req, res) => {
+    const { className } = req.body;
+    if (!className) return res.status(400).json({ error: 'Class name required' });
+    const sId = req.headers['x-school-id'];
+    const filter = { className };
+    if (sId) filter.schoolId = sId;
+    
+    await AchievementConfigModel.findOneAndUpdate(filter, injectSchoolId(req, req.body), { upsert: true });
+    res.json({ success: true });
+});
+
+// Get My/Student Achievements (with Semester Filter)
+app.get('/api/achievements/student', async (req, res) => {
+    const { studentId, semester } = req.query;
+    const filter = getQueryFilter(req);
+    if (studentId) filter.studentId = studentId;
+    if (semester) filter.semester = semester;
+    const list = await StudentAchievementModel.find(filter).sort({ createTime: -1 });
+    res.json(list);
+});
+
+// Grant Achievement (Adds Record + Adds Flowers)
+app.post('/api/achievements/grant', async (req, res) => {
+    const { studentId, achievementId, semester } = req.body;
+    const sId = req.headers['x-school-id'];
+    
+    const student = await Student.findById(studentId);
+    if (!student) return res.status(404).json({ error: 'Student not found' });
+    
+    // Find config to get details
+    const config = await AchievementConfigModel.findOne({ className: student.className, ...getQueryFilter(req) });
+    const ach = config?.achievements.find(a => a.id === achievementId);
+    
+    if (!ach) return res.status(404).json({ error: 'Achievement definition not found' });
+    
+    // 1. Create Record
+    await StudentAchievementModel.create({
+        schoolId: sId,
+        studentId,
+        studentName: student.name,
+        achievementId: ach.id,
+        achievementName: ach.name,
+        achievementIcon: ach.icon,
+        semester: semester || '当前学期',
+    });
+    
+    // 2. Add Flowers to Student Balance
+    await Student.findByIdAndUpdate(studentId, { $inc: { flowerBalance: ach.points } });
+    
+    res.json({ success: true });
+});
+
+// Exchange Flowers (Deduct Flowers + Add Reward Record)
+app.post('/api/achievements/exchange', async (req, res) => {
+    const { studentId, ruleId } = req.body;
+    const sId = req.headers['x-school-id'];
+    
+    const student = await Student.findById(studentId);
+    if (!student) return res.status(404).json({ error: 'Student not found' });
+    
+    const config = await AchievementConfigModel.findOne({ className: student.className, ...getQueryFilter(req) });
+    const rule = config?.exchangeRules.find(r => r.id === ruleId);
+    
+    if (!rule) return res.status(404).json({ error: 'Exchange rule not found' });
+    
+    if ((student.flowerBalance || 0) < rule.cost) {
+        return res.status(400).json({ error: 'INSUFFICIENT_FLOWERS', message: '小红花余额不足' });
+    }
+    
+    // 1. Deduct Flowers
+    await Student.findByIdAndUpdate(studentId, { $inc: { flowerBalance: -rule.cost } });
+    
+    // 2. Grant Reward logic (similar to grant-reward endpoint)
+    // If it's DRAW_COUNT, we immediately credit attempts. If ITEM, it's pending.
+    let status = 'PENDING';
+    if (rule.rewardType === 'DRAW_COUNT') {
+        status = 'REDEEMED';
+        await Student.findByIdAndUpdate(studentId, { $inc: { drawAttempts: rule.rewardValue } });
+    }
+    
+    await StudentRewardModel.create({ 
+        schoolId: sId, 
+        studentId, 
+        studentName: student.name, 
+        rewardType: rule.rewardType, 
+        name: rule.rewardName,
+        count: rule.rewardValue,
+        status: status, 
+        source: `积分兑换` 
+    });
+    
+    res.json({ success: true });
+});
+
+
+// ... Previous Routes ...
+
 app.get('/api/games/lucky-config', async (req, res) => {
    const filter = getQueryFilter(req);
    if (InMemoryDB.isFallback) return res.json(InMemoryDB.luckyConfig);
@@ -557,4 +674,4 @@ app.get('*', (req, res) => {
   res.sendFile(path.join(__dirname, 'dist', 'index.html'));
 });
 
-app.listen(PORT, () => console.log(`🚀 Server running on port ${PORT}`));
+app.listen(PORT, () => console.log(`🚀 Server running on port ${PORT}`));

services/api.ts

@@ -1,5 +1,5 @@
 
-import { User, ClassInfo, SystemConfig, Subject, School, Schedule, GameSession, StudentReward, LuckyDrawConfig, Attendance, LeaveRequest } from '../types';
+import { User, ClassInfo, SystemConfig, Subject, School, Schedule, GameSession, StudentReward, LuckyDrawConfig, Attendance, LeaveRequest, AchievementConfig } from '../types';
 
 const getBaseUrl = () => {
   let isProd = false;
@@ -188,6 +188,15 @@ export const api = {
     drawLucky: (studentId: string) => request('/games/lucky-draw', { method: 'POST', body: JSON.stringify({ studentId }) }),
     grantReward: (data: { studentId: string, count: number, rewardType: string, name?: string }) => request('/games/grant-reward', { method: 'POST', body: JSON.stringify(data) }),
   },
+  
+  achievements: {
+      getConfig: (className: string) => request(`/achievements/config?className=${className}`),
+      saveConfig: (data: AchievementConfig) => request('/achievements/config', { method: 'POST', body: JSON.stringify(data) }),
+      getStudentAchievements: (studentId: string, semester?: string) => request(`/achievements/student?studentId=${studentId}${semester ? `&semester=${semester}` : ''}`),
+      grant: (data: { studentId: string, achievementId: string, semester: string }) => request('/achievements/grant', { method: 'POST', body: JSON.stringify(data) }),
+      exchange: (data: { studentId: string, ruleId: string }) => request('/achievements/exchange', { method: 'POST', body: JSON.stringify(data) }),
+  },
+
   rewards: {
     // Pagination support
     getMyRewards: (studentId: string, page = 1, limit = 20) => request(`/rewards?studentId=${studentId}&page=${page}&limit=${limit}`),
@@ -201,4 +210,4 @@ export const api = {
   batchDelete: (type: 'student' | 'score' | 'user', ids: string[]) => {
     return request('/batch-delete', { method: 'POST', body: JSON.stringify({ type, ids }) });
   }
-};
+};

types.ts

@@ -91,6 +91,8 @@ export interface Student {
   teamId?: string; 
   drawAttempts?: number; 
   dailyDrawLog?: { date: string; count: number }; // Track daily usage
+  // Achievement related
+  flowerBalance?: number; // 小红花余额
 }
 
 export interface Course {
@@ -226,6 +228,44 @@ export interface LuckyDrawConfig {
   defaultPrize: string; // "再接再厉"
 }
 
+// --- Achievement System Types ---
+
+export interface AchievementItem {
+  id: string;
+  name: string;
+  icon: string; // Emoji or URL
+  points: number; // Worth how many flowers
+  description?: string;
+}
+
+export interface ExchangeRule {
+  id: string;
+  cost: number; // Cost in flowers
+  rewardType: 'ITEM' | 'DRAW_COUNT';
+  rewardName: string;
+  rewardValue: number; // Quantity (e.g. 1 draw count)
+}
+
+export interface AchievementConfig {
+  _id?: string;
+  schoolId: string;
+  className: string;
+  achievements: AchievementItem[];
+  exchangeRules: ExchangeRule[];
+}
+
+export interface StudentAchievement {
+  _id?: string;
+  schoolId: string;
+  studentId: string;
+  studentName: string;
+  achievementId: string; // Refers to AchievementItem.id
+  achievementName: string; // Denormalized for display
+  achievementIcon: string;
+  semester: string;
+  createTime: string;
+}
+
 // --- Attendance Types ---
 export type AttendanceStatus = 'Present' | 'Absent' | 'Leave';
 
@@ -251,4 +291,4 @@ export interface LeaveRequest {
   endDate: string;
   status: 'Pending' | 'Approved' | 'Rejected';
   createTime: string;
-}
+}