Update components/ai/CommentGeneratorPanel.tsx

components/ai/CommentGeneratorPanel.tsx

@@ -1,7 +1,6 @@
-
 import React, { useState, useEffect, useRef } from 'react';
-import { User, StudentProfile, SavedRecord, Zodiac, ClassRole, Discipline, AcademicQuality, Personality, Hobby, Labor } from '../../types';
-import { FileSpreadsheet, Loader2, Sparkles, Copy, Save, Trash2, Download, RefreshCw, PenTool, CheckCircle, Circle, Edit, Box, Upload } from 'lucide-react';
+import { User, StudentProfile, SavedRecord, Zodiac, Personality, Hobby } from '../../types';
+import { FileSpreadsheet, Loader2, Sparkles, Copy, Save, Trash2, Download, RefreshCw, PenTool, Edit, Box, ChevronLeft, Settings2, Check, X } from 'lucide-react';
 import { Toast, ToastState } from '../Toast';
 import { ConfirmModal } from '../ConfirmModal';
 
@@ -16,6 +15,9 @@ const HOBBIES: Hobby[] = ['体育', '音乐', '舞蹈', '绘画', '书法', '手
 export const CommentGeneratorPanel: React.FC<CommentGeneratorPanelProps> = ({ currentUser }) => {
     // --- State ---
     const [viewMode, setViewMode] = useState<'GENERATOR' | 'MANAGER'>('GENERATOR');
+    // Mobile View State: 'CONFIG' (Left) or 'RESULT' (Right)
+    const [mobileTab, setMobileTab] = useState<'CONFIG' | 'RESULT'>('CONFIG');
+    
     const [importedNames, setImportedNames] = useState<string[]>([]);
     const [savedRecords, setSavedRecords] = useState<SavedRecord[]>([]);
     
@@ -169,6 +171,11 @@ export const CommentGeneratorPanel: React.FC<CommentGeneratorPanelProps> = ({ cu
     const handleGenerate = async () => {
         if (!profile.name) return setToast({ show: true, message: '请输入或选择学生姓名', type: 'error' });
         
+        // Mobile: Switch to result tab automatically when generating
+        if (window.innerWidth < 768) {
+            setMobileTab('RESULT');
+        }
+
         setIsGenerating(true);
         setGeneratedComment('');
         abortControllerRef.current = new AbortController();
@@ -207,7 +214,7 @@ export const CommentGeneratorPanel: React.FC<CommentGeneratorPanelProps> = ({ cu
                 body: JSON.stringify({
                     text: userPrompt,
                     overrideSystemPrompt: systemPrompt,
-                    enableThinking: false, // Turn off thinking for faster generation
+                    enableThinking: false, 
                     disableAudio: true
                 }),
                 signal: abortControllerRef.current.signal
@@ -223,7 +230,7 @@ export const CommentGeneratorPanel: React.FC<CommentGeneratorPanelProps> = ({ cu
                 if (done) break;
                 const chunk = decoder.decode(value, { stream: true });
                 const lines = chunk.split('\n\n');
-                for (const line of lines) {
+                for (const line of parts) {
                     if (line.startsWith('data: ')) {
                         try {
                             const data = JSON.parse(line.replace('data: ', ''));
@@ -257,12 +264,18 @@ export const CommentGeneratorPanel: React.FC<CommentGeneratorPanelProps> = ({ cu
         setSavedRecords([newRecord, ...filtered]);
         setToast({ show: true, message: '已保存到管理箱', type: 'success' });
         
-        // Auto-advance logic: If importing, pick next name?
+        // Auto-advance logic
         if (importedNames.length > 0) {
             const idx = importedNames.indexOf(profile.name);
             if (idx !== -1 && idx < importedNames.length - 1) {
                 setProfile(p => ({ ...p, name: importedNames[idx + 1] }));
                 setGeneratedComment(''); // Clear for next
+                
+                // If mobile, ask if they want to go back to config to generate next
+                if (window.innerWidth < 768) {
+                    // Stay on result for a moment or give a toast hint
+                    setToast({ show: true, message: `已保存。已切换到下一位：${importedNames[idx + 1]}`, type: 'success' });
+                }
             }
         }
     };
@@ -348,34 +361,41 @@ export const CommentGeneratorPanel: React.FC<CommentGeneratorPanelProps> = ({ cu
             <ConfirmModal isOpen={confirmModal.isOpen} title={confirmModal.title} message={confirmModal.message} onClose={()=>setConfirmModal({...confirmModal, isOpen: false})} onConfirm={confirmModal.onConfirm}/>
 
             {/* Top Bar */}
-            <div className="bg-white border-b border-amber-100 px-6 py-3 flex justify-between items-center shrink-0 shadow-sm z-10">
-                <div className="flex items-center gap-2 text-amber-700 font-bold text-lg">
-                    <PenTool className="fill-amber-500 text-amber-600" /> 
-                    暖心评语助手
+            <div className="bg-white border-b border-amber-100 px-4 md:px-6 py-3 flex justify-between items-center shrink-0 shadow-sm z-20">
+                <div className="flex items-center gap-2 text-amber-700 font-bold text-lg truncate">
+                    <PenTool className="fill-amber-500 text-amber-600 shrink-0" /> 
+                    <span className="hidden md:inline">暖心评语助手</span>
+                    <span className="md:hidden">��语助手</span>
                 </div>
                 <div className="flex bg-amber-100/50 p-1 rounded-lg">
-                    <button onClick={()=>setViewMode('GENERATOR')} className={`px-4 py-1.5 text-sm font-bold rounded-md transition-all flex items-center gap-2 ${viewMode==='GENERATOR' ? 'bg-white text-amber-600 shadow-sm' : 'text-amber-800/60'}`}>
-                        <Sparkles size={16}/> 生成器
+                    <button onClick={()=>setViewMode('GENERATOR')} className={`px-3 md:px-4 py-1.5 text-xs md:text-sm font-bold rounded-md transition-all flex items-center gap-1 md:gap-2 ${viewMode==='GENERATOR' ? 'bg-white text-amber-600 shadow-sm' : 'text-amber-800/60'}`}>
+                        <Sparkles size={14}/> 生成器
                     </button>
-                    <button onClick={()=>setViewMode('MANAGER')} className={`px-4 py-1.5 text-sm font-bold rounded-md transition-all flex items-center gap-2 ${viewMode==='MANAGER' ? 'bg-white text-amber-600 shadow-sm' : 'text-amber-800/60'}`}>
-                        <Box size={16}/> 管理箱
-                        {savedRecords.length > 0 && <span className="bg-red-500 text-white text-[10px] px-1.5 rounded-full">{savedRecords.length}</span>}
+                    <button onClick={()=>setViewMode('MANAGER')} className={`px-3 md:px-4 py-1.5 text-xs md:text-sm font-bold rounded-md transition-all flex items-center gap-1 md:gap-2 ${viewMode==='MANAGER' ? 'bg-white text-amber-600 shadow-sm' : 'text-amber-800/60'}`}>
+                        <Box size={14}/> 管理箱
+                        {savedRecords.length > 0 && <span className="bg-red-500 text-white text-[10px] px-1.5 rounded-full ml-1">{savedRecords.length}</span>}
                     </button>
                 </div>
             </div>
 
             {/* GENERATOR MODE */}
             {viewMode === 'GENERATOR' && (
-                <div className="flex-1 overflow-hidden flex flex-col md:flex-row">
-                    {/* Left: Controls */}
-                    <div className="w-full md:w-80 lg:w-96 border-r border-amber-100 bg-white overflow-y-auto p-6 custom-scrollbar flex flex-col gap-6">
-                        {/* 1. Name Input */}
-                        <div className="space-y-3">
-                            <label className="text-xs font-bold text-gray-500 uppercase block">学生姓名</label>
+                <div className="flex-1 overflow-hidden flex relative">
+                    
+                    {/* --- Left Panel: Controls --- */}
+                    {/* Mobile: Shown only when mobileTab is CONFIG */}
+                    {/* Desktop: Always shown, fixed width 450px */}
+                    <div className={`
+                        flex flex-col bg-white border-r border-amber-100 h-full transition-all duration-300 absolute md:relative z-10 w-full md:w-[450px] shrink-0
+                        ${mobileTab === 'CONFIG' ? 'translate-x-0' : '-translate-x-full md:translate-x-0'}
+                    `}>
+                        {/* 1. Header (Name Input) */}
+                        <div className="p-4 border-b border-gray-100 bg-gray-50/50 shrink-0">
+                            <label className="text-xs font-bold text-gray-500 uppercase block mb-2">当前学生</label>
                             {importedNames.length > 0 ? (
                                 <div className="relative">
                                     <select 
-                                        className="w-full border border-amber-200 rounded-lg p-2.5 bg-amber-50/50 text-sm appearance-none focus:ring-2 focus:ring-amber-400 outline-none"
+                                        className="w-full border border-amber-300 rounded-xl p-3 bg-white text-base font-bold text-gray-800 shadow-sm focus:ring-2 focus:ring-amber-400 outline-none appearance-none"
                                         value={profile.name}
                                         onChange={e => setProfile({...profile, name: e.target.value})}
                                     >
@@ -385,38 +405,40 @@ export const CommentGeneratorPanel: React.FC<CommentGeneratorPanelProps> = ({ cu
                                             </option>
                                         ))}
                                     </select>
+                                    <div className="absolute right-3 top-3.5 text-gray-400 pointer-events-none text-xs">▼</div>
                                 </div>
                             ) : (
                                 <div className="flex gap-2">
                                     <input 
-                                        className="flex-1 border border-gray-200 rounded-lg p-2 text-sm focus:ring-2 focus:ring-amber-400 outline-none"
+                                        className="flex-1 border border-gray-300 rounded-xl p-3 text-sm focus:ring-2 focus:ring-amber-400 outline-none shadow-sm"
                                         placeholder="输入姓名..."
                                         value={profile.name}
                                         onChange={e => setProfile({...profile, name: e.target.value})}
                                     />
                                     <button 
                                         onClick={() => fileInputRef.current?.click()} 
-                                        className="px-3 bg-green-50 text-green-600 rounded-lg border border-green-200 hover:bg-green-100 flex items-center"
+                                        className="px-4 bg-green-50 text-green-600 rounded-xl border border-green-200 hover:bg-green-100 flex items-center shadow-sm"
                                         title="Excel 导入"
                                     >
-                                        <FileSpreadsheet size={18}/>
+                                        <FileSpreadsheet size={20}/>
                                     </button>
                                     <input type="file" accept=".xlsx,.xls,.csv" ref={fileInputRef} className="hidden" onChange={handleFileUpload} />
                                 </div>
                             )}
-                            {isImporting && <div className="text-xs text-gray-400 flex items-center gap-1"><Loader2 size={10} className="animate-spin"/> 正在解析名单...</div>}
+                            {isImporting && <div className="text-xs text-gray-400 mt-2 flex items-center gap-1"><Loader2 size={10} className="animate-spin"/> 正在解析名单...</div>}
                         </div>
 
-                        {/* 2. Attributes */}
-                        <div className="space-y-4">
+                        {/* 2. Scrollable Config Body */}
+                        <div className="flex-1 overflow-y-auto p-4 custom-scrollbar space-y-5 pb-24 md:pb-6">
+                            {/* Zodiac */}
                             <div>
-                                <label className="text-xs font-bold text-gray-500 uppercase block mb-1">生肖年份</label>
-                                <div className="flex flex-wrap gap-2">
+                                <label className="text-xs font-bold text-gray-500 uppercase block mb-2">生肖年份 (隐喻主题)</label>
+                                <div className="grid grid-cols-6 gap-2">
                                     {ZODIACS.map(z => (
                                         <button 
                                             key={z} 
                                             onClick={() => setProfile({...profile, zodiacYear: z})}
-                                            className={`text-xs px-2 py-1 rounded border ${profile.zodiacYear === z ? 'bg-red-50 text-red-600 border-red-200 font-bold' : 'bg-gray-50 text-gray-500 border-gray-100 hover:bg-gray-100'}`}
+                                            className={`text-sm py-1.5 rounded-lg border transition-all ${profile.zodiacYear === z ? 'bg-red-50 text-red-600 border-red-300 font-bold shadow-sm' : 'bg-white text-gray-600 border-gray-200 hover:bg-gray-50'}`}
                                         >
                                             {z}
                                         </button>
@@ -427,25 +449,22 @@ export const CommentGeneratorPanel: React.FC<CommentGeneratorPanelProps> = ({ cu
                             <div className="grid grid-cols-2 gap-4">
                                 <div>
                                     <label className="text-xs font-bold text-gray-500 uppercase block mb-1">班干部</label>
-                                    <select className="w-full text-sm border border-gray-200 rounded p-2" value={profile.classRole} onChange={e=>setProfile({...profile, classRole: e.target.value as any})}>
+                                    <select className="w-full text-sm border border-gray-300 rounded-lg p-2.5 bg-white" value={profile.classRole} onChange={e=>setProfile({...profile, classRole: e.target.value as any})}>
                                         <option value="NO">否</option>
                                         <option value="YES">是 (重点表扬)</option>
                                     </select>
                                 </div>
                                 <div>
                                     <label className="text-xs font-bold text-gray-500 uppercase block mb-1">纪律表现</label>
-                                    <select className="w-full text-sm border border-gray-200 rounded p-2" value={profile.discipline} onChange={e=>setProfile({...profile, discipline: e.target.value as any})}>
+                                    <select className="w-full text-sm border border-gray-300 rounded-lg p-2.5 bg-white" value={profile.discipline} onChange={e=>setProfile({...profile, discipline: e.target.value as any})}>
                                         <option value="YES">遵守纪律</option>
                                         <option value="AVERAGE">一般</option>
                                         <option value="NO">较差 (需提醒)</option>
                                     </select>
                                 </div>
-                            </div>
-
-                            <div className="grid grid-cols-2 gap-4">
                                 <div>
                                     <label className="text-xs font-bold text-gray-500 uppercase block mb-1">学业质量</label>
-                                    <select className="w-full text-sm border border-gray-200 rounded p-2" value={profile.academic} onChange={e=>setProfile({...profile, academic: e.target.value as any})}>
+                                    <select className="w-full text-sm border border-gray-300 rounded-lg p-2.5 bg-white" value={profile.academic} onChange={e=>setProfile({...profile, academic: e.target.value as any})}>
                                         <option value="EXCELLENT">优秀</option>
                                         <option value="GOOD">良好</option>
                                         <option value="PASS">合格</option>
@@ -454,7 +473,7 @@ export const CommentGeneratorPanel: React.FC<CommentGeneratorPanelProps> = ({ cu
                                 </div>
                                 <div>
                                     <label className="text-xs font-bold text-gray-500 uppercase block mb-1">劳动表现</label>
-                                    <select className="w-full text-sm border border-gray-200 rounded p-2" value={profile.labor} onChange={e=>setProfile({...profile, labor: e.target.value as any})}>
+                                    <select className="w-full text-sm border border-gray-300 rounded-lg p-2.5 bg-white" value={profile.labor} onChange={e=>setProfile({...profile, labor: e.target.value as any})}>
                                         <option value="热爱">热爱劳动</option>
                                         <option value="一般">一般</option>
                                         <option value="较少参与">较少参与</option>
@@ -462,14 +481,15 @@ export const CommentGeneratorPanel: React.FC<CommentGeneratorPanelProps> = ({ cu
                                 </div>
                             </div>
 
+                            {/* Personality */}
                             <div>
-                                <label className="text-xs font-bold text-gray-500 uppercase block mb-1">性格特点</label>
-                                <div className="flex flex-wrap gap-2">
+                                <label className="text-xs font-bold text-gray-500 uppercase block mb-2">性格特点</label>
+                                <div className="grid grid-cols-3 gap-2">
                                     {PERSONALITIES.map(p => (
                                         <button 
                                             key={p} 
                                             onClick={() => setProfile({...profile, personality: p})}
-                                            className={`text-xs px-2 py-1 rounded border transition-colors ${profile.personality === p ? 'bg-blue-50 text-blue-600 border-blue-200 font-bold' : 'bg-white border-gray-200 text-gray-600 hover:bg-gray-50'}`}
+                                            className={`text-xs py-1.5 rounded border transition-colors ${profile.personality === p ? 'bg-blue-50 text-blue-600 border-blue-300 font-bold' : 'bg-white border-gray-200 text-gray-600 hover:bg-gray-50'}`}
                                         >
                                             {p}
                                         </button>
@@ -477,73 +497,105 @@ export const CommentGeneratorPanel: React.FC<CommentGeneratorPanelProps> = ({ cu
                                 </div>
                             </div>
 
-                            <div>
-                                <label className="text-xs font-bold text-gray-500 uppercase block mb-1">兴趣爱好</label>
-                                <select className="w-full text-sm border border-gray-200 rounded p-2" value={profile.hobby} onChange={e=>setProfile({...profile, hobby: e.target.value as any})}>
-                                    {HOBBIES.map(h => <option key={h} value={h}>{h}</option>)}
-                                </select>
-                            </div>
-
-                            <div>
-                                <label className="text-xs font-bold text-gray-500 uppercase block mb-1">字数控制: {profile.wordCount}</label>
-                                <input type="range" min="50" max="300" step="10" className="w-full accent-amber-500" value={profile.wordCount} onChange={e=>setProfile({...profile, wordCount: Number(e.target.value)})}/>
+                            {/* Hobby & Length */}
+                            <div className="grid grid-cols-2 gap-4">
+                                <div>
+                                    <label className="text-xs font-bold text-gray-500 uppercase block mb-1">兴趣爱好</label>
+                                    <select className="w-full text-sm border border-gray-300 rounded-lg p-2.5 bg-white" value={profile.hobby} onChange={e=>setProfile({...profile, hobby: e.target.value as any})}>
+                                        {HOBBIES.map(h => <option key={h} value={h}>{h}</option>)}
+                                    </select>
+                                </div>
+                                <div>
+                                    <label className="text-xs font-bold text-gray-500 uppercase block mb-1">字数: {profile.wordCount}</label>
+                                    <input type="range" min="50" max="300" step="10" className="w-full accent-amber-500 h-9" value={profile.wordCount} onChange={e=>setProfile({...profile, wordCount: Number(e.target.value)})}/>
+                                </div>
                             </div>
                         </div>
 
-                        <button 
-                            onClick={handleGenerate} 
-                            disabled={isGenerating || !profile.name}
-                            className="w-full py-3 bg-gradient-to-r from-amber-500 to-orange-500 text-white rounded-xl font-bold shadow-md hover:shadow-lg transition-all flex items-center justify-center gap-2 disabled:opacity-50"
-                        >
-                            {isGenerating ? <Loader2 className="animate-spin" size={20}/> : <Sparkles size={20}/>}
-                            {isGenerating ? 'AI 正在撰写...' : '生成评语'}
-                        </button>
+                        {/* 3. Fixed Footer Button (Left Panel) */}
+                        <div className="p-4 border-t border-gray-200 bg-white z-20 shrink-0">
+                            <button 
+                                onClick={handleGenerate} 
+                                disabled={isGenerating || !profile.name}
+                                className="w-full py-3 bg-gradient-to-r from-amber-500 to-orange-500 text-white rounded-xl font-bold shadow-lg hover:shadow-orange-200 transition-all flex items-center justify-center gap-2 disabled:opacity-50 transform active:scale-95"
+                            >
+                                {isGenerating ? <Loader2 className="animate-spin" size={20}/> : <Sparkles size={20}/>}
+                                {isGenerating ? 'AI 正在撰写...' : '立即生成评语'}
+                            </button>
+                        </div>
                     </div>
 
-                    {/* Right: Preview */}
-                    <div className="flex-1 p-6 flex flex-col items-center justify-center bg-amber-50/50 relative">
-                        {generatedComment ? (
-                            <div className="w-full max-w-2xl bg-white rounded-2xl shadow-xl border border-amber-100 p-8 relative animate-in fade-in zoom-in-95">
-                                <div className="absolute -top-4 left-1/2 -translate-x-1/2 bg-amber-100 text-amber-800 px-4 py-1 rounded-full text-xs font-bold shadow-sm border border-amber-200">
-                                    {profile.name} 的评语
+                    {/* --- Right Panel: Result Preview --- */}
+                    {/* Mobile: Shown only when mobileTab is RESULT */}
+                    {/* Desktop: Always shown, takes remaining space */}
+                    <div className={`
+                        flex-1 flex flex-col items-center justify-center bg-amber-50/50 relative overflow-hidden transition-all duration-300 absolute md:relative inset-0 md:inset-auto z-20
+                        ${mobileTab === 'RESULT' ? 'translate-x-0' : 'translate-x-full md:translate-x-0'}
+                        bg-white md:bg-amber-50/50
+                    `}>
+                        {/* Mobile Header for Result */}
+                        <div className="md:hidden w-full p-4 border-b bg-white flex justify-between items-center shrink-0">
+                            <button onClick={() => setMobileTab('CONFIG')} className="flex items-center text-gray-600 font-bold">
+                                <ChevronLeft size={20}/> 返回配置
+                            </button>
+                            <span className="text-sm font-bold text-gray-800">生成结果</span>
+                            <div className="w-6"></div> 
+                        </div>
+
+                        <div className="w-full h-full p-4 md:p-8 overflow-y-auto flex flex-col items-center">
+                            {generatedComment ? (
+                                <div className="w-full max-w-2xl bg-white rounded-2xl shadow-xl border border-amber-100 p-6 md:p-8 relative animate-in fade-in zoom-in-95 flex flex-col h-full md:h-auto">
+                                    <div className="absolute -top-3 left-6 bg-amber-100 text-amber-800 px-4 py-1 rounded-full text-xs font-bold shadow-sm border border-amber-200 hidden md:block">
+                                        {profile.name} 的专属评语
+                                    </div>
+                                    
+                                    <div className="flex justify-between items-center mb-4 md:hidden">
+                                        <span className="font-bold text-lg text-gray-800">{profile.name}</span>
+                                        <span className="text-xs bg-amber-100 text-amber-800 px-2 py-1 rounded">{profile.zodiacYear}年主题</span>
+                                    </div>
+
+                                    <textarea 
+                                        className="w-full flex-1 md:min-h-[250px] text-base md:text-lg leading-loose text-gray-700 outline-none resize-none bg-transparent font-medium border-none p-0"
+                                        value={generatedComment}
+                                        onChange={(e) => setGeneratedComment(e.target.value)}
+                                    />
+                                    
+                                    <div className="flex flex-col md:flex-row justify-end gap-3 mt-6 pt-4 border-t border-gray-100 shrink-0">
+                                        <button onClick={() => { navigator.clipboard.writeText(generatedComment); setToast({show:true, message:'已复制', type:'success'}); }} className="flex items-center justify-center gap-2 text-gray-600 hover:text-blue-600 px-4 py-2 rounded-lg bg-gray-50 hover:bg-blue-50 transition-colors font-bold border border-gray-200">
+                                            <Copy size={18}/> 复制文本
+                                        </button>
+                                        <button onClick={handleSave} className="flex items-center justify-center gap-2 bg-amber-500 text-white px-6 py-3 md:py-2 rounded-lg font-bold hover:bg-amber-600 shadow-md transition-transform active:scale-95">
+                                            <Save size={18}/> 保存到管理箱
+                                        </button>
+                                    </div>
                                 </div>
-                                <textarea 
-                                    className="w-full min-h-[200px] text-lg leading-loose text-gray-700 outline-none resize-none bg-transparent font-medium"
-                                    value={generatedComment}
-                                    onChange={(e) => setGeneratedComment(e.target.value)}
-                                />
-                                <div className="flex justify-end gap-3 mt-6 pt-4 border-t border-gray-100">
-                                    <button onClick={() => { navigator.clipboard.writeText(generatedComment); setToast({show:true, message:'已复制', type:'success'}); }} className="flex items-center gap-1 text-gray-500 hover:text-blue-600 px-3 py-1.5 rounded hover:bg-gray-50 transition-colors">
-                                        <Copy size={16}/> 复制
-                                    </button>
-                                    <button onClick={handleSave} className="flex items-center gap-2 bg-amber-500 text-white px-6 py-2 rounded-lg font-bold hover:bg-amber-600 shadow-md transition-transform active:scale-95">
-                                        <Save size={18}/> 保存到管理箱
+                            ) : (
+                                <div className="text-center text-amber-800/40 flex flex-col items-center justify-center h-full">
+                                    <Settings2 size={64} className="mb-4 opacity-30"/>
+                                    <p className="text-lg font-bold">准备就绪</p>
+                                    <p className="text-sm mt-2 max-w-xs">在{window.innerWidth<768?'配置页':'左侧'}完善学生信息，AI 将为您生成暖心评语</p>
+                                    <button onClick={() => setMobileTab('CONFIG')} className="mt-6 md:hidden px-6 py-2 bg-amber-100 text-amber-700 rounded-full font-bold text-sm">
+                                        去配置
                                     </button>
                                 </div>
-                            </div>
-                        ) : (
-                            <div className="text-center text-amber-800/40">
-                                <Sparkles size={64} className="mx-auto mb-4 opacity-50"/>
-                                <p className="text-lg font-bold">等待生成...</p>
-                                <p className="text-sm mt-2">请在左侧配置学生信息并点击生成</p>
-                            </div>
-                        )}
+                            )}
+                        </div>
                     </div>
                 </div>
             )}
 
             {/* MANAGER MODE */}
             {viewMode === 'MANAGER' && (
-                <div className="flex-1 overflow-hidden flex flex-col p-6">
-                    <div className="flex justify-between items-center mb-6">
-                        <div className="flex gap-2">
-                            <button onClick={handleExportWord} disabled={isExporting} className="bg-blue-600 text-white px-4 py-2 rounded-lg font-bold flex items-center gap-2 hover:bg-blue-700 shadow-sm disabled:opacity-50 transition-colors">
+                <div className="flex-1 overflow-hidden flex flex-col p-4 md:p-6 bg-gray-50">
+                    <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-4 md:mb-6 gap-4">
+                        <div className="flex gap-2 w-full md:w-auto">
+                            <button onClick={handleExportWord} disabled={isExporting} className="flex-1 md:flex-none bg-blue-600 text-white px-4 py-2.5 rounded-xl font-bold flex items-center justify-center gap-2 hover:bg-blue-700 shadow-sm disabled:opacity-50 transition-colors text-sm">
                                 {isExporting ? <Loader2 className="animate-spin" size={18}/> : <Download size={18}/>}
-                                导出 Word 文档
+                                导出 Word
                             </button>
-                            <div className="relative group">
-                                <button className="bg-white text-gray-600 border border-gray-200 px-4 py-2 rounded-lg font-bold flex items-center gap-2 hover:bg-gray-50 shadow-sm">
-                                    <RefreshCw size={16}/> 批量同步年份
+                            <div className="relative group flex-1 md:flex-none">
+                                <button className="w-full bg-white text-gray-600 border border-gray-200 px-4 py-2.5 rounded-xl font-bold flex items-center justify-center gap-2 hover:bg-gray-50 shadow-sm text-sm">
+                                    <RefreshCw size={16}/> 批量改年份
                                 </button>
                                 <div className="absolute top-full left-0 mt-2 w-32 bg-white border border-gray-200 rounded-lg shadow-xl hidden group-hover:block z-20 py-1">
                                     {ZODIACS.map(z => (
@@ -554,36 +606,36 @@ export const CommentGeneratorPanel: React.FC<CommentGeneratorPanelProps> = ({ cu
                                 </div>
                             </div>
                         </div>
-                        <div className="text-sm text-gray-500 font-bold">
-                            已保存 {savedRecords.length} 条记录
+                        <div className="text-xs text-gray-500 font-bold bg-white px-3 py-1 rounded-full border">
+                            已保存 {savedRecords.length} 条
                         </div>
                     </div>
 
-                    <div className="flex-1 overflow-y-auto custom-scrollbar">
+                    <div className="flex-1 overflow-y-auto custom-scrollbar pb-20">
                         {savedRecords.length === 0 ? (
                             <div className="h-full flex flex-col items-center justify-center text-gray-400 border-2 border-dashed border-gray-200 rounded-2xl bg-white/50">
                                 <Box size={48} className="mb-4 opacity-50"/>
                                 <p>管理箱是空的</p>
                             </div>
                         ) : (
-                            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 pb-10">
+                            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
                                 {savedRecords.map(record => (
-                                    <div key={record.id} className="bg-white rounded-xl shadow-sm border border-gray-100 p-5 flex flex-col hover:shadow-md transition-shadow group">
+                                    <div key={record.id} className="bg-white rounded-xl shadow-sm border border-gray-100 p-5 flex flex-col hover:shadow-md transition-shadow group relative">
                                         <div className="flex justify-between items-center mb-3">
                                             <div className="font-bold text-lg text-gray-800 flex items-center gap-2">
                                                 {record.name}
-                                                <span className="text-xs bg-amber-100 text-amber-800 px-2 py-0.5 rounded-full border border-amber-200">{record.zodiac}年</span>
+                                                <span className="text-xs bg-amber-50 text-amber-700 px-2 py-0.5 rounded border border-amber-100">{record.zodiac}年</span>
                                             </div>
-                                            <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                                            <div className="flex gap-1">
                                                 <button 
                                                     onClick={() => { setEditingRecordId(record.id); setEditForm(record); }} 
-                                                    className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded"
+                                                    className="p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded transition-colors"
                                                 >
                                                     <Edit size={16}/>
                                                 </button>
                                                 <button 
                                                     onClick={() => handleDeleteRecord(record.id)} 
-                                                    className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded"
+                                                    className="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors"
                                                 >
                                                     <Trash2 size={16}/>
                                                 </button>
@@ -591,41 +643,41 @@ export const CommentGeneratorPanel: React.FC<CommentGeneratorPanelProps> = ({ cu
                                         </div>
                                         
                                         {editingRecordId === record.id && editForm ? (
-                                            <div className="flex-1 flex flex-col gap-2">
+                                            <div className="flex-1 flex flex-col gap-2 z-10 bg-white absolute inset-2 p-2 shadow-lg border rounded-lg">
+                                                <div className="flex justify-between items-center mb-1">
+                                                    <span className="text-xs font-bold text-gray-500">编辑模式</span>
+                                                    <button onClick={() => setEditingRecordId(null)} className="text-gray-400 hover:text-gray-600"><X size={16}/></button>
+                                                </div>
                                                 <input 
-                                                    className="w-full border rounded p-1 text-sm font-bold" 
+                                                    className="w-full border rounded p-1.5 text-sm font-bold bg-gray-50" 
                                                     value={editForm.name} 
                                                     onChange={e => setEditForm({...editForm, name: e.target.value})}
                                                 />
                                                 <textarea 
-                                                    className="w-full border rounded p-2 text-sm resize-none flex-1 focus:ring-1 focus:ring-blue-500 outline-none" 
-                                                    rows={5}
+                                                    className="w-full border rounded p-2 text-sm resize-none flex-1 focus:ring-2 focus:ring-blue-500 outline-none" 
                                                     value={editForm.comment}
                                                     onChange={e => setEditForm({...editForm, comment: e.target.value})}
                                                 />
-                                                <div className="flex justify-end gap-2 mt-2">
-                                                    <button onClick={() => setEditingRecordId(null)} className="text-xs text-gray-500 px-2 py-1">取消</button>
-                                                    <button 
-                                                        onClick={() => {
-                                                            setSavedRecords(prev => prev.map(r => r.id === record.id ? editForm! : r));
-                                                            setEditingRecordId(null);
-                                                            setToast({ show: true, message: '修改已保存', type: 'success' });
-                                                        }} 
-                                                        className="text-xs bg-blue-600 text-white px-3 py-1 rounded"
-                                                    >
-                                                        保存
-                                                    </button>
-                                                </div>
+                                                <button 
+                                                    onClick={() => {
+                                                        setSavedRecords(prev => prev.map(r => r.id === record.id ? editForm! : r));
+                                                        setEditingRecordId(null);
+                                                        setToast({ show: true, message: '修改已保存', type: 'success' });
+                                                    }} 
+                                                    className="w-full bg-blue-600 text-white px-3 py-2 rounded font-bold text-xs"
+                                                >
+                                                    保存修改
+                                                </button>
                                             </div>
                                         ) : (
-                                            <div className="flex-1 text-sm text-gray-600 leading-relaxed overflow-hidden text-ellipsis line-clamp-6 bg-gray-50 p-3 rounded-lg border border-gray-50">
+                                            <div className="flex-1 text-sm text-gray-600 leading-relaxed overflow-hidden text-ellipsis line-clamp-6 bg-gray-50 p-3 rounded-lg border border-gray-50/50">
                                                 {record.comment}
                                             </div>
                                         )}
                                         
                                         <div className="mt-3 pt-3 border-t border-gray-100 flex justify-between items-center text-xs text-gray-400">
                                             <span>{new Date(record.timestamp).toLocaleDateString()}</span>
-                                            <span className="font-mono">{record.comment.length}字</span>
+                                            <span className="font-mono bg-gray-100 px-1.5 rounded">{record.comment.length}字</span>
                                         </div>
                                     </div>
                                 ))}
@@ -636,4 +688,4 @@ export const CommentGeneratorPanel: React.FC<CommentGeneratorPanelProps> = ({ cu
             )}
         </div>
     );
-};
+};