|
|
@@ -602,6 +602,79 @@ export const ClassroomPage = () => {
|
|
|
发送
|
|
|
</button>
|
|
|
</div>
|
|
|
+
|
|
|
+ {role === 'student' && isJoinedClass && (
|
|
|
+ <div className="mt-4 p-4 bg-white rounded-md shadow">
|
|
|
+ <h4 className="text-lg font-medium mb-2">互动功能</h4>
|
|
|
+ <div className="space-y-3">
|
|
|
+ <button
|
|
|
+ type="button"
|
|
|
+ className="w-full px-3 py-2 bg-green-600 text-white rounded-md"
|
|
|
+ onClick={() => handUp()}
|
|
|
+ >
|
|
|
+ 举手
|
|
|
+ </button>
|
|
|
+ <div className="flex space-x-2">
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ placeholder="输入问题..."
|
|
|
+ className="flex-1 px-3 py-2 border border-gray-300 rounded-md"
|
|
|
+ id="questionInput"
|
|
|
+ />
|
|
|
+ <button
|
|
|
+ type="button"
|
|
|
+ className="px-3 py-2 bg-blue-600 text-white rounded-md"
|
|
|
+ onClick={() => {
|
|
|
+ const input = document.getElementById('questionInput') as HTMLInputElement;
|
|
|
+ if (input.value) {
|
|
|
+ sendQuestion(input.value);
|
|
|
+ input.value = '';
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 提问
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+
|
|
|
+ {role === 'teacher' && handUpList.length > 0 && (
|
|
|
+ <div className="mt-4 p-4 bg-white rounded-md shadow">
|
|
|
+ <h4 className="text-lg font-medium mb-2">举手列表 ({handUpList.length})</h4>
|
|
|
+ <div className="space-y-2">
|
|
|
+ {handUpList.map((req, i) => (
|
|
|
+ <div key={i} className="flex items-center justify-between p-2 border-b">
|
|
|
+ <div>
|
|
|
+ <div className="font-medium">{req.studentName || req.studentId}</div>
|
|
|
+ {req.question && <div className="text-sm text-gray-500">{req.question}</div>}
|
|
|
+ </div>
|
|
|
+ <button
|
|
|
+ type="button"
|
|
|
+ className="px-2 py-1 bg-blue-600 text-white rounded text-sm"
|
|
|
+ onClick={() => answerHandUp(req.studentId)}
|
|
|
+ >
|
|
|
+ 应答
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+
|
|
|
+ {questions.length > 0 && (
|
|
|
+ <div className="mt-4 p-4 bg-white rounded-md shadow">
|
|
|
+ <h4 className="text-lg font-medium mb-2">问题列表 ({questions.length})</h4>
|
|
|
+ <div className="space-y-2">
|
|
|
+ {questions.map((q, i) => (
|
|
|
+ <div key={i} className="p-2 border-b">
|
|
|
+ <div className="font-medium">问题 {i + 1}</div>
|
|
|
+ <div className="text-gray-700">{q}</div>
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
</div>
|
|
|
|
|
|
<div className="md:col-span-1">
|