Update pages/MyClass.tsx

pages/MyClass.tsx

@@ -1,15 +1,13 @@
 
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect } from 'react';
 import { api } from '../services/api';
 import { Student, ClassInfo } from '../types';
 import { 
     Users, Grid, ArrowLeftRight, Save, Wand2, Eye, EyeOff, Smile, Frown, Meh, 
-    Ruler, Search, Info, Edit, Upload, FileSpreadsheet, Loader2, AlertTriangle,
-    Settings, CheckSquare, Square, Group, User, UserPlus
+    Ruler, Search, Edit, FileSpreadsheet, Loader2, AlertTriangle,
+    Settings, CheckSquare, Square, UserPlus, Zap
 } from 'lucide-react';
 import { Toast, ToastState } from '../components/Toast';
-import { ConfirmModal } from '../components/ConfirmModal';
-import { Emoji } from '../components/Emoji';
 
 // Algorithm Rule Types
 type SeatingRule = 'VISION' | 'HEIGHT' | 'GENDER_MIX' | 'CHAR_COMP' | 'CHAR_SEP' | 'SCORE_HELP';
@@ -23,8 +21,8 @@ export const MyClass: React.FC = () => {
     // Seating Configuration
     const [rows, setRows] = useState(6);
     const [cols, setCols] = useState(8);
-    const [groupSize, setGroupSize] = useState<number>(2); // 1, 2, 3, 4
-    const [activeRules, setActiveRules] = useState<Set<SeatingRule>>(new Set(['VISION', 'HEIGHT', 'GENDER_MIX']));
+    const [groupSize, setGroupSize] = useState<number>(1); // Default 1
+    const [activeRules, setActiveRules] = useState<Set<SeatingRule>>(new Set(['VISION', 'HEIGHT']));
     
     const [draggedStudentId, setDraggedStudentId] = useState<string | null>(null);
     
@@ -68,8 +66,8 @@ export const MyClass: React.FC = () => {
             if (cls) {
                 setMyClassInfo(cls);
                 if (cls.seatingConfig) {
-                    setRows(cls.seatingConfig.rows);
-                    setCols(cls.seatingConfig.cols);
+                    setRows(cls.seatingConfig.rows || 6);
+                    setCols(cls.seatingConfig.cols || 8);
                 }
             }
         } catch (e) { console.error(e); } 
@@ -204,143 +202,149 @@ export const MyClass: React.FC = () => {
     };
 
     /**
-     * CORE ALGORITHM: Smart Seating
+     * 🧠 CORE ALGORITHM: Smart Weighted Seating 🧠
+     * 1. Calculates a "Priority Score" for front-row necessity (Vision, Height).
+     * 2. Uses a "Greedy Lookahead" strategy to find best pairings based on constraints (Gender, Character).
      */
     const autoArrange = () => {
         if (!confirm('确定要自动重新排座吗？当前所有座位将被重置。')) return;
 
         let pool = [...students];
         
-        // 1. Calculate Base Priority Score (Who sits in front?)
-        // Lower score = Better Seat (Front)
-        const getBaseScore = (s: Student) => {
+        // 1. Calculate Priority Score (Higher = Needs to be closer to front)
+        const getPriorityScore = (s: Student) => {
             let score = 0;
-            // Vision: Severe(-1000), Mild(-500) -> Ensures they are picked first
+            // Vision: Severe(+200), Mild(+100)
             if (activeRules.has('VISION')) {
-                if (s.vision === 'Near-Severe') score -= 1000;
-                if (s.vision === 'Near-Mild') score -= 500;
+                if (s.vision === 'Near-Severe') score += 200;
+                if (s.vision === 'Near-Mild') score += 100;
             }
-            // Height: Short(-200 ~ -100)
+            // Height: Shorter (+Score)
+            // Assumed range 100-200. Shorter people need front.
+            // 120cm -> +80 pts. 180cm -> +20 pts.
             if (activeRules.has('HEIGHT') && s.height) {
-                // Assuming height 100-200. We want shorter people first.
-                // Height 120 -> Score +120. Height 180 -> Score +180. 
-                // So lower height = lower score = earlier pick.
-                score += s.height; 
+                score += (200 - s.height); 
             }
             return score;
         };
 
-        // Sort pool by Base Priority (Ascending: Lowest score first)
-        pool.sort((a, b) => getBaseScore(a) - getBaseScore(b));
+        // Sort pool by Priority Descending (Highest priority first)
+        pool.sort((a, b) => getPriorityScore(b) - getPriorityScore(a));
 
         const arranged: Student[] = [];
         const totalSeats = rows * cols;
-        const grid: (Student | null)[] = new Array(totalSeats).fill(null);
+        const gridMap: Record<string, Student> = {}; // key: "r-c"
 
-        // 2. Fill Grid Group by Group
         let currentIdx = 0;
         
         while (currentIdx < totalSeats && pool.length > 0) {
-            // How many seats in this group? (Handle edge case of end of row)
-            const currentRow = Math.floor(currentIdx / cols);
-            const colInRow = currentIdx % cols;
-            const remainingInRow = cols - colInRow;
-            const currentGroupSize = Math.min(groupSize, remainingInRow, pool.length);
-
-            // If it's a single seat group or only 1 student left, just pick the top priority
-            if (currentGroupSize === 1) {
+            // Determine grid position
+            const r = Math.floor(currentIdx / cols) + 1;
+            const c = (currentIdx % cols) + 1;
+            const key = `${r}-${c}`;
+
+            // Check if we are at the start of a group
+            // Columns are 1-based. (c-1) % groupSize === 0 means start of a group slot.
+            const isGroupStart = (c - 1) % groupSize === 0;
+            const slotsInGroup = Math.min(groupSize, cols - (c - 1)); // Handle end of row
+
+            // If groupSize is 1, just pick top priority
+            if (groupSize === 1) {
                 const s = pool.shift()!;
-                grid[currentIdx] = s;
+                gridMap[key] = s;
                 currentIdx++;
                 continue;
             }
 
-            // --- Pairing Logic for Groups (Size > 1) ---
-            // Take the "Anchor" (highest priority student)
-            const anchor = pool.shift()!;
-            const groupMembers = [anchor];
+            // --- Multi-Student Pairing Logic ---
+            if (isGroupStart) {
+                // 1. Pick Anchor (Highest Priority Student)
+                const anchor = pool.shift()!;
+                const groupMembers = [anchor];
 
-            // Find best matches for the Anchor from the next few candidates
-            // We look ahead a bit (e.g., next 12 students) to find a good match without ruining the height/vision order too much.
-            const lookAhead = 12;
-            
-            for (let i = 0; i < currentGroupSize - 1; i++) {
-                if (pool.length === 0) break;
+                // 2. Find partners
+                // Search next 12 students to find best match without breaking priority too much
+                const searchLimit = Math.min(pool.length, 12);
+                
+                for (let k = 0; k < slotsInGroup - 1; k++) {
+                    if (pool.length === 0) break;
 
-                let bestMatchIdx = -1;
-                let bestMatchScore = -Infinity;
+                    let bestMatchIdx = -1;
+                    let bestMatchScore = -Infinity;
 
-                // Search window
-                const searchLimit = Math.min(pool.length, lookAhead);
-                
-                for (let j = 0; j < searchLimit; j++) {
-                    const candidate = pool[j];
-                    let matchScore = 0;
-
-                    // Evaluate compatibility with ALL current group members
-                    for (const member of groupMembers) {
-                        // Gender Mix: Different gender = Good
-                        if (activeRules.has('GENDER_MIX') && member.gender !== candidate.gender) {
-                            matchScore += 50;
-                        }
-                        // Char Complementary: Active + Quiet = Good
-                        if (activeRules.has('CHAR_COMP')) {
-                            if ((member.character === 'Active' && candidate.character === 'Quiet') ||
-                                (member.character === 'Quiet' && candidate.character === 'Active')) {
-                                matchScore += 40;
+                    for (let j = 0; j < searchLimit; j++) {
+                        const candidate = pool[j];
+                        let matchScore = 0;
+
+                        // Evaluate compatibility with ALL current group members
+                        for (const member of groupMembers) {
+                            // Rule: Gender Mix (+20)
+                            if (activeRules.has('GENDER_MIX') && member.gender !== candidate.gender) {
+                                matchScore += 20;
+                            }
+                            // Rule: Character Complementary (+15)
+                            if (activeRules.has('CHAR_COMP')) {
+                                if ((member.character === 'Active' && candidate.character === 'Quiet') ||
+                                    (member.character === 'Quiet' && candidate.character === 'Active')) {
+                                    matchScore += 15;
+                                }
+                            }
+                            // Rule: Character Separation (-30)
+                            if (activeRules.has('CHAR_SEP')) {
+                                if (member.character === 'Active' && candidate.character === 'Active') matchScore -= 30;
+                                if (member.character === 'Naughty' && candidate.character === 'Naughty') matchScore -= 50;
+                                if ((member.character === 'Naughty' && candidate.character === 'Active') ||
+                                    (member.character === 'Active' && candidate.character === 'Naughty')) matchScore -= 30;
+                            }
+                            // Rule: Score Help (+10) (Mock logic using flowerBalance as proxy for "Score")
+                            if (activeRules.has('SCORE_HELP')) {
+                                const diff = Math.abs((member.flowerBalance || 0) - (candidate.flowerBalance || 0));
+                                if (diff > 50) matchScore += 10; 
                             }
                         }
-                        // Char Separation: Active + Active = Bad, Naughty + Naughty = Bad
-                        if (activeRules.has('CHAR_SEP')) {
-                            if (member.character === 'Active' && candidate.character === 'Active') matchScore -= 50;
-                            if (member.character === 'Naughty' && candidate.character === 'Naughty') matchScore -= 100;
-                            if ((member.character === 'Naughty' && candidate.character === 'Active') ||
-                                (member.character === 'Active' && candidate.character === 'Naughty')) matchScore -= 60;
-                        }
-                        // Score Help: High + Low = Good (Use flowerBalance)
-                        if (activeRules.has('SCORE_HELP')) {
-                            const diff = Math.abs((member.flowerBalance || 0) - (candidate.flowerBalance || 0));
-                            if (diff > 50) matchScore += 30; // Significant difference implies potential help
+
+                        // Penalty for skipping ahead (to maintain height/vision order)
+                        matchScore -= (j * 2); 
+
+                        if (matchScore > bestMatchScore) {
+                            bestMatchScore = matchScore;
+                            bestMatchIdx = j;
                         }
                     }
 
-                    // Penalize skipping ahead (keep height order roughly)
-                    matchScore -= (j * 5); 
-
-                    if (matchScore > bestMatchScore) {
-                        bestMatchScore = matchScore;
-                        bestMatchIdx = j;
+                    // Pick match
+                    if (bestMatchIdx !== -1) {
+                        groupMembers.push(pool.splice(bestMatchIdx, 1)[0]);
+                    } else {
+                        // Fallback
+                        groupMembers.push(pool.shift()!);
                     }
                 }
 
-                // Pick the best match
-                if (bestMatchIdx !== -1) {
-                    const partner = pool.splice(bestMatchIdx, 1)[0];
-                    groupMembers.push(partner);
-                } else {
-                    // Fallback: just take next one
-                    groupMembers.push(pool.shift()!);
-                }
+                // Assign positions
+                groupMembers.forEach((m, idx) => {
+                    gridMap[`${r}-${c + idx}`] = m;
+                });
+                
+                // Skip indices for the filled group
+                currentIdx += groupMembers.length;
+            } else {
+                // Should not happen if loop logic is correct, but safe fallback
+                currentIdx++;
             }
-
-            // Assign to Grid
-            groupMembers.forEach((m, i) => {
-                grid[currentIdx + i] = m;
-            });
-            currentIdx += groupMembers.length;
         }
 
-        // 3. Convert Grid Index to Row/Col
+        // Apply to state
         const finalArrangement = students.map(s => {
-            const idx = grid.findIndex(g => g?._id === s._id);
-            if (idx === -1) return { ...s, seatRow: undefined, seatCol: undefined }; // Should not happen for pool members
-            const r = Math.floor(idx / cols) + 1;
-            const c = (idx % cols) + 1;
+            const entry = Object.entries(gridMap).find(([_, stu]) => stu._id === s._id);
+            if (!entry) return { ...s, seatRow: undefined, seatCol: undefined };
+            const [pos] = entry;
+            const [r, c] = pos.split('-').map(Number);
             return { ...s, seatRow: r, seatCol: c };
         });
 
         setStudents(finalArrangement);
-        setToast({ show: true, message: '智能分组排座完成', type: 'success' });
+        setToast({ show: true, message: `智能排座完成！应用规则: ${Array.from(activeRules).length}项`, type: 'success' });
     };
 
     const saveSeating = async () => {
@@ -504,19 +508,19 @@ export const MyClass: React.FC = () => {
                     <div className="h-full flex flex-col md:flex-row bg-gray-100">
                         {/* Left: Tools & Rules */}
                         <div className="w-full md:w-80 bg-white border-r border-gray-200 flex flex-col shadow-sm z-20">
-                            <div className="p-4 border-b border-gray-100 flex-1 overflow-y-auto">
+                            <div className="p-4 border-b border-gray-100 flex-1 overflow-y-auto custom-scrollbar">
                                 <h3 className="font-bold text-gray-800 mb-3 flex items-center"><Settings size={18} className="mr-2 text-blue-600"/> 布局与规则</h3>
                                 
                                 {/* Layout Config */}
-                                <div className="mb-4 bg-gray-50 p-3 rounded-lg">
-                                    <div className="flex gap-2 mb-2">
+                                <div className="mb-4 bg-gray-50 p-3 rounded-lg border border-gray-200">
+                                    <div className="flex gap-2 mb-3">
                                         <div className="flex-1">
                                             <label className="text-xs text-gray-500 mb-1 block">行数</label>
-                                            <input className="w-full border rounded px-2 py-1 text-center font-bold text-sm" type="number" min={1} value={rows} onChange={e=>setRows(Number(e.target.value))}/>
+                                            <input className="w-full border rounded px-2 py-1.5 text-center font-bold text-sm bg-white" type="number" min={1} value={rows} onChange={e=>setRows(Number(e.target.value))}/>
                                         </div>
                                         <div className="flex-1">
                                             <label className="text-xs text-gray-500 mb-1 block">列数</label>
-                                            <input className="w-full border rounded px-2 py-1 text-center font-bold text-sm" type="number" min={1} value={cols} onChange={e=>setCols(Number(e.target.value))}/>
+                                            <input className="w-full border rounded px-2 py-1.5 text-center font-bold text-sm bg-white" type="number" min={1} value={cols} onChange={e=>setCols(Number(e.target.value))}/>
                                         </div>
                                     </div>
                                     <div className="flex items-center justify-between">
@@ -549,19 +553,19 @@ export const MyClass: React.FC = () => {
                                         <div 
                                             key={rule.key} 
                                             onClick={() => toggleRule(rule.key as SeatingRule)}
-                                            className={`flex items-center p-2 rounded cursor-pointer border transition-all ${activeRules.has(rule.key as SeatingRule) ? 'bg-blue-50 border-blue-300' : 'bg-white border-gray-200 hover:border-gray-300'}`}
+                                            className={`flex items-center p-2.5 rounded cursor-pointer border transition-all ${activeRules.has(rule.key as SeatingRule) ? 'bg-blue-50 border-blue-300' : 'bg-white border-gray-200 hover:border-gray-300'}`}
                                         >
-                                            <div className={`w-4 h-4 rounded border flex items-center justify-center mr-2 ${activeRules.has(rule.key as SeatingRule) ? 'bg-blue-500 border-blue-500 text-white' : 'bg-white border-gray-300'}`}>
+                                            <div className={`w-4 h-4 rounded border flex items-center justify-center mr-3 transition-colors ${activeRules.has(rule.key as SeatingRule) ? 'bg-blue-500 border-blue-500 text-white' : 'bg-white border-gray-300'}`}>
                                                 {activeRules.has(rule.key as SeatingRule) && <CheckSquare size={10}/>}
                                             </div>
-                                            <rule.icon size={14} className={`mr-2 ${activeRules.has(rule.key as SeatingRule) ? 'text-blue-600' : 'text-gray-400'}`}/>
-                                            <span className={`text-xs font-medium ${activeRules.has(rule.key as SeatingRule) ? 'text-blue-700' : 'text-gray-600'}`}>{rule.label}</span>
+                                            <rule.icon size={16} className={`mr-2 ${activeRules.has(rule.key as SeatingRule) ? 'text-blue-600' : 'text-gray-400'}`}/>
+                                            <span className={`text-xs font-medium ${activeRules.has(rule.key as SeatingRule) ? 'text-blue-800' : 'text-gray-600'}`}>{rule.label}</span>
                                         </div>
                                     ))}
                                 </div>
 
-                                <button onClick={autoArrange} className="w-full mt-4 bg-gradient-to-r from-purple-600 to-indigo-600 text-white py-2.5 rounded-lg font-bold text-sm shadow-md hover:shadow-lg transition-all flex items-center justify-center gap-2">
-                                    <Wand2 size={16}/> 智能生成座位表
+                                <button onClick={autoArrange} className="w-full mt-6 bg-gradient-to-r from-purple-600 to-indigo-600 text-white py-3 rounded-lg font-bold text-sm shadow-md hover:shadow-lg transition-all flex items-center justify-center gap-2 transform active:scale-95">
+                                    <Wand2 size={18}/> 智能生成座位表
                                 </button>
                             </div>
                             
@@ -569,7 +573,7 @@ export const MyClass: React.FC = () => {
                                 <h4 className="text-xs font-bold text-gray-500 uppercase mb-2 flex justify-between">
                                     未排座 ({unseatedStudents.length})
                                 </h4>
-                                <div className="flex flex-wrap gap-2 max-h-32 overflow-y-auto custom-scrollbar">
+                                <div className="flex flex-wrap gap-2 max-h-32 overflow-y-auto custom-scrollbar content-start">
                                     {unseatedStudents.map(s => (
                                         <div 
                                             key={s._id}
@@ -587,8 +591,8 @@ export const MyClass: React.FC = () => {
                         {/* Center: Grid */}
                         <div className="flex-1 p-8 overflow-auto flex flex-col items-center bg-gray-100/50">
                             {/* Blackboard */}
-                            <div className="w-[60%] h-16 bg-gray-700 rounded-b-xl mb-12 flex items-center justify-center shadow-lg text-gray-300 font-bold tracking-[1em] text-lg border-b-4 border-gray-600 shrink-0">
-                                讲台 (TEACHER)
+                            <div className="w-[60%] h-16 bg-gray-700 rounded-b-xl mb-12 flex items-center justify-center shadow-lg text-gray-300 font-bold tracking-[1em] text-lg border-b-4 border-gray-600 shrink-0 select-none">
+                                讲台 ( T E A C H E R )
                             </div>
 
                             <div 
@@ -600,9 +604,10 @@ export const MyClass: React.FC = () => {
                                     const c = (idx % cols) + 1;
                                     const student = getStudentAt(r, c);
                                     
-                                    // Grouping Logic for Visuals
+                                    // Visual Grouping Logic
+                                    // Add significant margin to the right of the group
                                     const isEndOfGroup = c % groupSize === 0 && c !== cols;
-                                    const marginRight = isEndOfGroup ? '24px' : '0px';
+                                    const marginRight = isEndOfGroup ? '32px' : '0px';
 
                                     return (
                                         <div 
@@ -635,7 +640,7 @@ export const MyClass: React.FC = () => {
                                                     </div>
                                                 </div>
                                             ) : (
-                                                <span className="text-xs text-gray-300 font-bold">空</span>
+                                                <span className="text-xs text-gray-300 font-bold select-none">空</span>
                                             )}
                                         </div>
                                     );