|
|
@@ -1,80 +0,0 @@
|
|
|
-import React from 'react';
|
|
|
-import { useClassroomContext } from './ClassroomProvider.tsx';
|
|
|
-import { ClassStatus } from './useClassroom.ts';
|
|
|
-
|
|
|
-export const TeacherView = () => {
|
|
|
- const {
|
|
|
- startClass,
|
|
|
- endClass,
|
|
|
- muteStudent,
|
|
|
- kickStudent,
|
|
|
- handUpList,
|
|
|
- questions,
|
|
|
- classStatus
|
|
|
- } = useClassroomContext();
|
|
|
-
|
|
|
- return (
|
|
|
- <div className="space-y-4">
|
|
|
-
|
|
|
- <div className="flex space-x-2">
|
|
|
- <button
|
|
|
- onClick={startClass}
|
|
|
- disabled={classStatus === ClassStatus.IN_PROGRESS}
|
|
|
- className="px-4 py-2 bg-blue-500 text-white rounded disabled:bg-gray-400"
|
|
|
- >
|
|
|
- {classStatus === ClassStatus.IN_PROGRESS ? '课堂已开始' : '开始课堂'}
|
|
|
- </button>
|
|
|
- <button
|
|
|
- onClick={endClass}
|
|
|
- disabled={classStatus !== ClassStatus.IN_PROGRESS}
|
|
|
- className="px-4 py-2 bg-red-500 text-white rounded disabled:bg-gray-400"
|
|
|
- >
|
|
|
- 结束课堂
|
|
|
- </button>
|
|
|
- </div>
|
|
|
-
|
|
|
- {handUpList.length > 0 && (
|
|
|
- <div className="bg-yellow-50 p-3 rounded">
|
|
|
- <h3 className="font-bold mb-2">举手列表</h3>
|
|
|
- <ul className="space-y-1">
|
|
|
- {handUpList.map((student, i) => (
|
|
|
- <li key={i} className="flex justify-between items-center">
|
|
|
- <span>{student.studentName || student.studentId}</span>
|
|
|
- <div className="space-x-2">
|
|
|
- <button
|
|
|
- onClick={() => muteStudent(student.studentId)}
|
|
|
- className="text-xs px-2 py-1 bg-gray-200 rounded"
|
|
|
- >
|
|
|
- 静音
|
|
|
- </button>
|
|
|
- <button
|
|
|
- onClick={() => kickStudent(student.studentId)}
|
|
|
- className="text-xs px-2 py-1 bg-red-200 rounded"
|
|
|
- >
|
|
|
- 移出
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- ))}
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- )}
|
|
|
-
|
|
|
- {questions.length > 0 && (
|
|
|
- <div className="bg-blue-50 p-3 rounded">
|
|
|
- <h3 className="font-bold mb-2">学生提问</h3>
|
|
|
- <ul className="space-y-2">
|
|
|
- {questions.map((q, i) => (
|
|
|
- <li key={i} className="border-b pb-2">
|
|
|
- <p className="font-medium">{q.studentName || q.studentId}: {q.question}</p>
|
|
|
- <p className="text-sm text-gray-600">
|
|
|
- {new Date(q.timestamp).toLocaleTimeString()}
|
|
|
- </p>
|
|
|
- </li>
|
|
|
- ))}
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- )}
|
|
|
- </div>
|
|
|
- );
|
|
|
-};
|