Update pages/TeacherDashboard.tsx

pages/TeacherDashboard.tsx

@@ -1,9 +1,10 @@
 
 import React, { useEffect, useState } from 'react';
 import { api } from '../services/api';
-import { Schedule, Student, Attendance } from '../types';
-import { Calendar, UserX, AlertTriangle, Activity, Coffee, Plus, X, PaintBucket, ToggleLeft } from 'lucide-react';
+import { Schedule, Student, Attendance, PeriodConfig, Subject, User } from '../types';
+import { Calendar, UserX, AlertTriangle, Activity, Plus, X, Trash2, Settings, Save, Clock, ChevronDown, ChevronUp } from 'lucide-react';
 import { TodoList } from '../components/TodoList';
+import { ConfirmModal } from '../components/ConfirmModal';
 
 const COLORS = ['#dbeafe', '#dcfce7', '#fef9c3', '#fee2e2', '#f3e8ff', '#ffedd5', '#e0e7ff', '#ecfccb'];
 const stringToColor = (str: string) => {
@@ -12,18 +13,42 @@ const stringToColor = (str: string) => {
     return COLORS[Math.abs(hash) % COLORS.length];
 };
 
+const DEFAULT_PERIODS: PeriodConfig[] = [
+    { period: 1, name: '第一节' },
+    { period: 2, name: '第二节' },
+    { period: 3, name: '第三节' },
+    { period: 4, name: '第四节' },
+    { period: 5, name: '第五节' },
+    { period: 6, name: '第六节' },
+    { period: 7, name: '第七节' },
+    { period: 8, name: '第八节' },
+];
+
 export const TeacherDashboard: React.FC = () => {
   const [loading, setLoading] = useState(true);
   const [schedules, setSchedules] = useState<Schedule[]>([]);
   const [students, setStudents] = useState<Student[]>([]);
   const [attendance, setAttendance] = useState<Attendance[]>([]);
   
+  // Resources for Select Inputs
+  const [subjects, setSubjects] = useState<Subject[]>([]);
+  const [teachers, setTeachers] = useState<User[]>([]);
+  
   // Schedule State
   const [showSchedule, setShowSchedule] = useState(false);
-  const [weekType, setWeekType] = useState<'ALL' | 'ODD' | 'EVEN'>('ALL'); // Currently displaying
+  const [periodConfig, setPeriodConfig] = useState<PeriodConfig[]>(DEFAULT_PERIODS);
+  const [weekType, setWeekType] = useState<'ALL' | 'ODD' | 'EVEN'>('ALL');
+  
+  // Modals & Editing
   const [editingCell, setEditingCell] = useState<{day: number, period: number} | null>(null);
   const [editForm, setEditForm] = useState({ subject: '', teacherName: '', weekType: 'ALL' });
-  const [periodCount, setPeriodCount] = useState(8); // Default, could be config
+  const [isPeriodSettingsOpen, setIsPeriodSettingsOpen] = useState(false);
+  const [tempPeriodConfig, setTempPeriodConfig] = useState<PeriodConfig[]>([]);
+
+  // Confirm Modal State
+  const [confirmModal, setConfirmModal] = useState<{isOpen: boolean, title: string, message: string, onConfirm: () => void, isDanger?: boolean}>({
+      isOpen: false, title: '', message: '', onConfirm: () => {}
+  });
 
   const currentUser = api.auth.getCurrentUser();
   const homeroomClass = currentUser?.homeroomClass;
@@ -37,26 +62,35 @@ export const TeacherDashboard: React.FC = () => {
     try {
         const todayStr = new Date().toISOString().split('T')[0];
         
-        const [stus, scheds, atts] = await Promise.all([
+        const [stus, scheds, atts, subs, usrs, cfg] = await Promise.all([
             api.students.getAll(),
             homeroomClass ? api.schedules.get({ className: homeroomClass }) : Promise.resolve([]),
-            homeroomClass ? api.attendance.get({ className: homeroomClass, date: todayStr }) : Promise.resolve([])
+            homeroomClass ? api.attendance.get({ className: homeroomClass, date: todayStr }) : Promise.resolve([]),
+            api.subjects.getAll(),
+            api.users.getAll({ role: 'TEACHER' }),
+            api.config.getPublic()
         ]);
 
+        // Load Global Config for Periods
+        if (cfg && cfg.periodConfig && cfg.periodConfig.length > 0) {
+            setPeriodConfig(cfg.periodConfig);
+        }
+
         if (homeroomClass) {
             setStudents(stus.filter((s: Student) => s.className === homeroomClass));
             setSchedules(scheds);
             setAttendance(atts);
-        } else {
-            // Non-homeroom teacher view logic could be added here
         }
+        setSubjects(subs);
+        setTeachers(usrs);
+
     } catch (e) { console.error(e); } 
     finally { setLoading(false); }
   };
 
   const handleSaveSchedule = async () => {
       if (!homeroomClass || !editingCell) return;
-      if (!editForm.subject) return alert('请输入科目');
+      if (!editForm.subject) return alert('请选择科目');
       try {
           await api.schedules.save({
               className: homeroomClass,
@@ -67,17 +101,68 @@ export const TeacherDashboard: React.FC = () => {
               weekType: editForm.weekType as any
           });
           setEditingCell(null);
-          // Refresh
           const updated = await api.schedules.get({ className: homeroomClass });
           setSchedules(updated);
       } catch(e) { alert('保存失败'); }
   };
 
   const handleDeleteSchedule = async (s: Schedule) => {
-      if(!confirm('确定删除此课程？')) return;
-      await api.schedules.delete({ className: s.className, dayOfWeek: s.dayOfWeek, period: s.period });
-      const updated = await api.schedules.get({ className: homeroomClass });
-      setSchedules(updated);
+      setConfirmModal({
+          isOpen: true,
+          title: '删除课程',
+          message: `确定要删除 ${s.subject} 吗？`,
+          isDanger: true,
+          onConfirm: async () => {
+              await api.schedules.delete({ className: s.className, dayOfWeek: s.dayOfWeek, period: s.period });
+              const updated = await api.schedules.get({ className: homeroomClass });
+              setSchedules(updated);
+          }
+      });
+  };
+
+  // --- Period Config Logic ---
+  const openPeriodSettings = () => {
+      setTempPeriodConfig(JSON.parse(JSON.stringify(periodConfig))); // Deep copy
+      setIsPeriodSettingsOpen(true);
+  };
+
+  const savePeriodSettings = async () => {
+      // Validate
+      if (tempPeriodConfig.some(p => !p.name.trim())) return alert('节次名称不能为空');
+      
+      try {
+          // Fetch current config to merge, avoiding overwrite other fields
+          const currentConfig = await api.config.get();
+          await api.config.save({
+              ...currentConfig,
+              periodConfig: tempPeriodConfig
+          });
+          setPeriodConfig(tempPeriodConfig);
+          setIsPeriodSettingsOpen(false);
+          alert('节次设置已保存 (全校生效)');
+      } catch (e) {
+          alert('保存失败');
+      }
+  };
+
+  const updateTempPeriod = (index: number, field: keyof PeriodConfig, value: any) => {
+      const newConfig = [...tempPeriodConfig];
+      newConfig[index] = { ...newConfig[index], [field]: value };
+      setTempPeriodConfig(newConfig);
+  };
+
+  const addPeriod = () => {
+      const nextPeriodNum = tempPeriodConfig.length + 1;
+      setTempPeriodConfig([...tempPeriodConfig, { period: nextPeriodNum, name: `第${nextPeriodNum}节` }]);
+  };
+
+  const removePeriod = (index: number) => {
+      const newConfig = tempPeriodConfig.filter((_, i) => i !== index);
+      // Re-index period numbers strictly? Or keep IDs? 
+      // Usually cleaner to re-index for display consistency, but keeping ID is safer for DB.
+      // Here we re-index purely for the logic of "Period 1, 2, 3..."
+      const reIndexed = newConfig.map((p, i) => ({ ...p, period: i + 1 }));
+      setTempPeriodConfig(reIndexed);
   };
 
   // Stats
@@ -91,6 +176,15 @@ export const TeacherDashboard: React.FC = () => {
 
   return (
     <div className="space-y-6">
+        <ConfirmModal 
+            isOpen={confirmModal.isOpen} 
+            title={confirmModal.title} 
+            message={confirmModal.message} 
+            onClose={()=>setConfirmModal({...confirmModal, isOpen: false})} 
+            onConfirm={confirmModal.onConfirm}
+            isDanger={confirmModal.isDanger}
+        />
+
         <div className="flex flex-col md:flex-row justify-between items-center bg-white p-6 rounded-xl shadow-sm border border-gray-100">
             <div>
                 <h1 className="text-2xl font-bold text-gray-800">你好，{currentUser?.trueName || currentUser?.username} 老师</h1>
@@ -104,9 +198,8 @@ export const TeacherDashboard: React.FC = () => {
         </div>
 
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-            {/* Left Column: Stats & Todo */}
+            {/* Left Column: Stats */}
             <div className="lg:col-span-2 space-y-6">
-                {/* Attendance Stats */}
                 {homeroomClass && (
                     <div className="bg-white p-6 rounded-xl border border-gray-100 shadow-sm">
                         <h3 className="font-bold text-gray-800 mb-4 flex items-center"><Activity className="mr-2 text-blue-500"/> 今日考勤概览</h3>
@@ -131,7 +224,6 @@ export const TeacherDashboard: React.FC = () => {
                     </div>
                 )}
 
-                {/* Warnings */}
                 {homeroomClass && (absentCount > 0 || leaveCount > 0) && (
                     <div className="bg-white p-6 rounded-xl border border-gray-100 shadow-sm">
                         <h3 className="font-bold text-gray-800 mb-4 flex items-center"><AlertTriangle className="mr-2 text-amber-500"/> 缺勤/请假名单</h3>
@@ -167,80 +259,84 @@ export const TeacherDashboard: React.FC = () => {
         {showSchedule && homeroomClass && (
             <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
                 <div className="bg-white rounded-xl w-full max-w-6xl h-[90vh] flex flex-col shadow-2xl animate-in zoom-in-95">
-                    <div className="p-4 border-b flex justify-between items-center">
+                    <div className="p-4 border-b flex justify-between items-center bg-gray-50 rounded-t-xl">
                         <div className="flex items-center gap-4">
-                            <h3 className="text-xl font-bold flex items-center"><Calendar className="mr-2 text-blue-600"/> 智能课表 ({homeroomClass})</h3>
-                            <div className="flex bg-gray-100 p-1 rounded-lg text-xs font-bold">
+                            <h3 className="text-xl font-bold flex items-center text-gray-800"><Calendar className="mr-2 text-blue-600"/> 智能课表 ({homeroomClass})</h3>
+                            <div className="flex bg-white border p-1 rounded-lg text-xs font-bold shadow-sm">
                                 {['ALL','ODD','EVEN'].map(t => (
                                     <button 
                                         key={t}
                                         onClick={() => setWeekType(t as any)} 
-                                        className={`px-3 py-1.5 rounded transition-all ${weekType === t ? 'bg-white shadow text-blue-600' : 'text-gray-500'}`}
+                                        className={`px-3 py-1.5 rounded transition-all ${weekType === t ? 'bg-blue-100 text-blue-700' : 'text-gray-500 hover:bg-gray-50'}`}
                                     >
                                         {t === 'ALL' ? '全周' : t === 'ODD' ? '单周' : '双周'}
                                     </button>
                                 ))}
                             </div>
                         </div>
-                        <button onClick={() => setShowSchedule(false)}><X size={24} className="text-gray-400 hover:text-gray-600"/></button>
+                        <div className="flex gap-2">
+                            <button onClick={openPeriodSettings} className="flex items-center px-3 py-2 bg-white border border-gray-300 rounded-lg text-sm text-gray-700 hover:bg-gray-50 shadow-sm transition-colors">
+                                <Settings size={16} className="mr-1"/> 节次设置
+                            </button>
+                            <button onClick={() => setShowSchedule(false)} className="text-gray-400 hover:text-gray-600 hover:bg-gray-200 p-2 rounded-lg transition-colors"><X size={24}/></button>
+                        </div>
                     </div>
 
                     <div className="flex-1 overflow-auto bg-gray-50 p-4">
-                        <table className="w-full border-collapse bg-white shadow-sm rounded-lg overflow-hidden">
+                        <table className="w-full border-collapse bg-white shadow-sm rounded-lg overflow-hidden ring-1 ring-gray-200">
                             <thead>
-                                <tr className="bg-gray-100 text-gray-500 text-sm">
-                                    <th className="p-3 border w-20">节次</th>
-                                    {['周一','周二','周三','周四','周五'].map(d=><th key={d} className="p-3 border w-[18%]">{d}</th>)}
+                                <tr className="bg-gray-100 text-gray-600 text-sm uppercase tracking-wider">
+                                    <th className="p-3 border-b border-r w-24 bg-gray-50 font-bold">节次</th>
+                                    {['周一','周二','周三','周四','周五'].map(d=><th key={d} className="p-3 border-b border-r w-[18%] font-bold">{d}</th>)}
                                 </tr>
                             </thead>
                             <tbody>
-                                {Array.from({length: periodCount}).map((_, idx) => {
-                                    const period = idx + 1;
-                                    return (
-                                        <tr key={period}>
-                                            <td className="border p-3 text-center text-sm font-bold text-gray-600 bg-gray-50">第{period}节</td>
-                                            {[1,2,3,4,5].map(day => {
-                                                // Filter relevant schedules based on week type
-                                                const slotItems = schedules.filter(s => 
-                                                    s.dayOfWeek === day && 
-                                                    s.period === period && 
-                                                    (s.weekType === 'ALL' || s.weekType === weekType || weekType === 'ALL')
-                                                );
-                                                
-                                                return (
-                                                    <td key={day} className="border p-1 align-top h-24 relative group hover:bg-blue-50 transition-colors" onClick={() => {
-                                                        setEditingCell({day, period});
-                                                        setEditForm({subject:'', teacherName:'', weekType: weekType === 'ALL' ? 'ALL' : weekType});
-                                                    }}>
-                                                        <div className="flex flex-col gap-1 h-full">
-                                                            {slotItems.map(item => (
-                                                                <div 
-                                                                    key={item._id} 
-                                                                    className="p-1 rounded text-xs border relative group/item"
-                                                                    style={{backgroundColor: stringToColor(item.subject), borderColor: 'rgba(0,0,0,0.1)'}}
-                                                                    onClick={(e) => { e.stopPropagation(); }}
-                                                                >
-                                                                    <div className="font-bold text-gray-800">{item.subject}</div>
-                                                                    <div className="flex justify-between items-center text-[10px] text-gray-600 mt-0.5">
-                                                                        <span>{item.teacherName}</span>
-                                                                        {item.weekType !== 'ALL' && <span className="bg-white/50 px-1 rounded">{item.weekType==='ODD'?'单':'双'}</span>}
-                                                                    </div>
-                                                                    <button 
-                                                                        onClick={(e) => { e.stopPropagation(); handleDeleteSchedule(item); }}
-                                                                        className="absolute top-0 right-0 p-0.5 text-red-500 opacity-0 group-hover/item:opacity-100"
-                                                                    >
-                                                                        <X size={12}/>
-                                                                    </button>
+                                {periodConfig.map((pConfig) => (
+                                    <tr key={pConfig.period}>
+                                        <td className="border-b border-r p-3 text-center text-sm font-bold text-gray-700 bg-gray-50/50">
+                                            {pConfig.name}
+                                            <div className="text-[10px] text-gray-400 font-normal mt-1">{pConfig.startTime ? `${pConfig.startTime}-${pConfig.endTime}` : ''}</div>
+                                        </td>
+                                        {[1,2,3,4,5].map(day => {
+                                            const slotItems = schedules.filter(s => 
+                                                s.dayOfWeek === day && 
+                                                s.period === pConfig.period && 
+                                                (s.weekType === 'ALL' || s.weekType === weekType || weekType === 'ALL')
+                                            );
+                                            
+                                            return (
+                                                <td key={day} className="border-b border-r p-1 align-top h-24 relative group hover:bg-blue-50/50 transition-colors cursor-pointer" onClick={() => {
+                                                    setEditingCell({day, period: pConfig.period});
+                                                    setEditForm({subject:'', teacherName:'', weekType: weekType === 'ALL' ? 'ALL' : weekType});
+                                                }}>
+                                                    <div className="flex flex-col gap-1 h-full">
+                                                        {slotItems.map(item => (
+                                                            <div 
+                                                                key={item._id} 
+                                                                className="p-1.5 rounded-md text-xs border shadow-sm relative group/item transition-transform hover:scale-[1.02]"
+                                                                style={{backgroundColor: stringToColor(item.subject), borderColor: 'rgba(0,0,0,0.05)'}}
+                                                                onClick={(e) => { e.stopPropagation(); }}
+                                                            >
+                                                                <div className="font-bold text-gray-800 truncate">{item.subject}</div>
+                                                                <div className="flex justify-between items-center text-[10px] text-gray-600 mt-0.5">
+                                                                    <span className="truncate max-w-[60px]">{item.teacherName}</span>
+                                                                    {item.weekType !== 'ALL' && <span className="bg-white/60 px-1 rounded text-[9px] font-bold border border-black/5">{item.weekType==='ODD'?'单':'双'}</span>}
                                                                 </div>
-                                                            ))}
-                                                            {slotItems.length === 0 && <div className="h-full flex items-center justify-center opacity-0 group-hover:opacity-50"><Plus size={20} className="text-blue-300"/></div>}
-                                                        </div>
-                                                    </td>
-                                                );
-                                            })}
-                                        </tr>
-                                    );
-                                })}
+                                                                <button 
+                                                                    onClick={(e) => { e.stopPropagation(); handleDeleteSchedule(item); }}
+                                                                    className="absolute -top-1 -right-1 bg-red-500 text-white rounded-full p-0.5 opacity-0 group-hover/item:opacity-100 shadow-sm transition-opacity"
+                                                                >
+                                                                    <X size={10}/>
+                                                                </button>
+                                                            </div>
+                                                        ))}
+                                                        {slotItems.length === 0 && <div className="h-full flex items-center justify-center opacity-0 group-hover:opacity-40 text-blue-400"><Plus size={24}/></div>}
+                                                    </div>
+                                                </td>
+                                            );
+                                        })}
+                                    </tr>
+                                ))}
                             </tbody>
                         </table>
                     </div>
@@ -248,36 +344,113 @@ export const TeacherDashboard: React.FC = () => {
             </div>
         )}
 
-        {/* Edit Modal */}
+        {/* Edit Schedule Modal */}
         {editingCell && (
-            <div className="fixed inset-0 bg-black/20 z-[100] flex items-center justify-center p-4 backdrop-blur-sm">
-                <div className="bg-white p-6 rounded-xl shadow-2xl w-80 animate-in zoom-in-95">
-                    <h4 className="font-bold mb-4 text-gray-800">编辑课程</h4>
-                    <div className="space-y-3">
+            <div className="fixed inset-0 bg-black/30 z-[100] flex items-center justify-center p-4 backdrop-blur-sm">
+                <div className="bg-white p-6 rounded-xl shadow-2xl w-full max-w-sm animate-in zoom-in-95">
+                    <h4 className="font-bold mb-4 text-gray-800 text-lg border-b pb-2">编辑课程信息</h4>
+                    <div className="space-y-4">
                         <div>
-                            <label className="text-xs font-bold text-gray-500">科目</label>
-                            <input className="w-full border rounded p-2 text-sm" value={editForm.subject} onChange={e=>setEditForm({...editForm, subject: e.target.value})} autoFocus/>
+                            <label className="text-xs font-bold text-gray-500 uppercase block mb-1">科目</label>
+                            <select 
+                                className="w-full border border-gray-300 rounded-lg p-2.5 text-sm bg-white focus:ring-2 focus:ring-blue-500 outline-none"
+                                value={editForm.subject}
+                                onChange={e=>setEditForm({...editForm, subject: e.target.value})}
+                                autoFocus
+                            >
+                                <option value="">-- 请选择科目 --</option>
+                                {subjects.map(s => <option key={s._id} value={s.name}>{s.name}</option>)}
+                            </select>
                         </div>
                         <div>
-                            <label className="text-xs font-bold text-gray-500">教师 (可选)</label>
-                            <input className="w-full border rounded p-2 text-sm" value={editForm.teacherName} onChange={e=>setEditForm({...editForm, teacherName: e.target.value})}/>
+                            <label className="text-xs font-bold text-gray-500 uppercase block mb-1">任课教师 (可选)</label>
+                            <select 
+                                className="w-full border border-gray-300 rounded-lg p-2.5 text-sm bg-white focus:ring-2 focus:ring-blue-500 outline-none"
+                                value={editForm.teacherName}
+                                onChange={e=>setEditForm({...editForm, teacherName: e.target.value})}
+                            >
+                                <option value="">-- 未指定 --</option>
+                                {teachers.map(t => <option key={t._id} value={t.trueName || t.username}>{t.trueName || t.username} {t.teachingSubject ? `(${t.teachingSubject})` : ''}</option>)}
+                            </select>
                         </div>
                         <div>
-                            <label className="text-xs font-bold text-gray-500">周次类型</label>
-                            <select className="w-full border rounded p-2 text-sm" value={editForm.weekType} onChange={e=>setEditForm({...editForm, weekType: e.target.value})}>
-                                <option value="ALL">每周</option>
-                                <option value="ODD">单周</option>
-                                <option value="EVEN">双周</option>
-                            </select>
+                            <label className="text-xs font-bold text-gray-500 uppercase block mb-1">周次类型</label>
+                            <div className="flex gap-2 bg-gray-100 p-1 rounded-lg">
+                                {[
+                                    {v:'ALL', l:'每周'}, {v:'ODD', l:'单周'}, {v:'EVEN', l:'双周'}
+                                ].map(opt => (
+                                    <button 
+                                        key={opt.v}
+                                        onClick={() => setEditForm({...editForm, weekType: opt.v})}
+                                        className={`flex-1 py-1.5 text-xs rounded font-medium transition-all ${editForm.weekType===opt.v ? 'bg-white shadow text-blue-600' : 'text-gray-500'}`}
+                                    >
+                                        {opt.l}
+                                    </button>
+                                ))}
+                            </div>
                         </div>
-                        <div className="flex gap-2 pt-2">
-                            <button onClick={handleSaveSchedule} className="flex-1 bg-blue-600 text-white py-2 rounded font-bold">保存</button>
-                            <button onClick={()=>setEditingCell(null)} className="flex-1 bg-gray-100 text-gray-700 py-2 rounded">取消</button>
+                        <div className="flex gap-3 pt-4">
+                            <button onClick={()=>setEditingCell(null)} className="flex-1 bg-gray-100 text-gray-700 py-2.5 rounded-lg hover:bg-gray-200 font-medium transition-colors">取消</button>
+                            <button onClick={handleSaveSchedule} className="flex-1 bg-blue-600 text-white py-2.5 rounded-lg hover:bg-blue-700 font-bold shadow-md transition-colors">保存</button>
                         </div>
                     </div>
                 </div>
             </div>
         )}
+
+        {/* Period Settings Modal */}
+        {isPeriodSettingsOpen && (
+            <div className="fixed inset-0 bg-black/30 z-[110] flex items-center justify-center p-4 backdrop-blur-sm">
+                <div className="bg-white rounded-xl w-full max-w-md shadow-2xl animate-in zoom-in-95 flex flex-col max-h-[80vh]">
+                    <div className="p-4 border-b flex justify-between items-center bg-gray-50 rounded-t-xl">
+                        <h3 className="font-bold text-gray-800">节次与作息设置</h3>
+                        <button onClick={()=>setIsPeriodSettingsOpen(false)}><X size={20} className="text-gray-400 hover:text-gray-600"/></button>
+                    </div>
+                    <div className="flex-1 overflow-y-auto p-4 custom-scrollbar">
+                        <div className="space-y-2">
+                            {tempPeriodConfig.map((p, idx) => (
+                                <div key={idx} className="flex items-center gap-2 mb-2 p-2 border border-gray-200 rounded-lg hover:border-blue-300 transition-colors bg-white">
+                                    <div className="w-6 text-center text-xs font-bold text-gray-400">{idx + 1}</div>
+                                    <input 
+                                        className="flex-1 border border-gray-300 rounded px-2 py-1 text-sm focus:border-blue-500 outline-none"
+                                        value={p.name}
+                                        onChange={e => updateTempPeriod(idx, 'name', e.target.value)}
+                                        placeholder="节次名称"
+                                    />
+                                    {/* Optional Time Inputs */}
+                                    <div className="flex items-center gap-1">
+                                        <Clock size={12} className="text-gray-400"/>
+                                        <input 
+                                            type="time" 
+                                            className="w-16 border border-gray-300 rounded px-1 py-0.5 text-xs text-gray-600"
+                                            value={p.startTime || ''}
+                                            onChange={e => updateTempPeriod(idx, 'startTime', e.target.value)}
+                                        />
+                                        <span className="text-gray-300">-</span>
+                                        <input 
+                                            type="time" 
+                                            className="w-16 border border-gray-300 rounded px-1 py-0.5 text-xs text-gray-600"
+                                            value={p.endTime || ''}
+                                            onChange={e => updateTempPeriod(idx, 'endTime', e.target.value)}
+                                        />
+                                    </div>
+                                    <button onClick={() => removePeriod(idx)} className="text-gray-300 hover:text-red-500 p-1"><Trash2 size={16}/></button>
+                                </div>
+                            ))}
+                        </div>
+                        <button onClick={addPeriod} className="w-full mt-4 py-2 border-2 border-dashed border-gray-300 rounded-lg text-gray-500 hover:border-blue-400 hover:text-blue-600 font-medium transition-colors flex items-center justify-center gap-2">
+                            <Plus size={16}/> 添加新节次
+                        </button>
+                    </div>
+                    <div className="p-4 border-t bg-gray-50 rounded-b-xl flex justify-end gap-3">
+                        <button onClick={()=>setIsPeriodSettingsOpen(false)} className="px-4 py-2 text-gray-600 hover:bg-gray-200 rounded-lg text-sm font-medium transition-colors">取消</button>
+                        <button onClick={savePeriodSettings} className="px-6 py-2 bg-blue-600 text-white rounded-lg text-sm font-bold hover:bg-blue-700 shadow-md transition-colors flex items-center">
+                            <Save size={16} className="mr-2"/> 保存设置
+                        </button>
+                    </div>
+                </div>
+            </div>
+        )}
     </div>
   );
 };