2
0
Просмотр исходного кода

✨ feat(classroom): 优化课堂交互体验和UI组件

- 移除所有alert弹窗,提升用户体验
- 重构按钮样式,统一使用variant属性控制状态
- 优化举手提问和发送问题按钮的视觉效果
- 移除教师端课堂邀请链接功能
- 改进学生静音、取消静音和移出按钮的样式
- 优化应答举手按钮的视觉表现

💄 style(buttons): 统一按钮样式和交互效果

- 为所有按钮添加明确的variant属性
- 优化按钮颜色方案,增强视觉层次感
- 统一按钮尺寸和间距,提升UI一致性
- 使用语义化颜色类,提高代码可维护性
yourname 6 месяцев назад
Родитель
Сommit
364c0a80a4

+ 4 - 12
src/client/mobile/components/Classroom/StudentView.tsx

@@ -24,13 +24,11 @@ export const StudentView: React.FC = () => {
 
   const handleSendQuestion = async () => {
     if (!questionText.trim()) {
-      alert('请输入问题内容');
       return;
     }
     
     await sendQuestion(questionText);
     setQuestionText('');
-    alert('问题已发送');
   };
 
   return (
@@ -47,11 +45,8 @@ export const StudentView: React.FC = () => {
           <Button
             onClick={handleHandUp}
             disabled={classStatus === 'ended'}
-            className={`w-full ${
-              classStatus === 'ended'
-                ? 'bg-gray-400 cursor-not-allowed'
-                : 'bg-orange-500 hover:bg-orange-600'
-            }`}
+            variant={classStatus === 'ended' ? "secondary" : "default"}
+            className="w-full bg-orange-500 text-white hover:bg-orange-600"
           >
             举手提问
           </Button>
@@ -82,11 +77,8 @@ export const StudentView: React.FC = () => {
           <Button
             onClick={handleSendQuestion}
             disabled={classStatus === 'ended' || !questionText.trim()}
-            className={`w-full ${
-              classStatus === 'ended' || !questionText.trim()
-                ? 'bg-gray-400 cursor-not-allowed'
-                : 'bg-purple-500 hover:bg-purple-600'
-            }`}
+            variant={classStatus === 'ended' || !questionText.trim() ? "secondary" : "default"}
+            className="w-full bg-purple-500 text-white hover:bg-purple-600"
           >
             发送问题
           </Button>

+ 10 - 32
src/client/mobile/components/Classroom/TeacherView.tsx

@@ -8,7 +8,6 @@ import {
   QuestionMarkCircleIcon
 } from '@heroicons/react/24/outline';
 import { Button } from '@/client/components/ui/button';
-import { Input } from '@/client/components/ui/input';
 import { Card, CardContent, CardHeader, CardTitle } from '@/client/components/ui/card';
 
 export const TeacherView: React.FC = () => {
@@ -18,7 +17,6 @@ export const TeacherView: React.FC = () => {
     handUpList,
     questions,
     students,
-    shareLink,
     toggleMuteMember,
     answerHandUp,
     kickStudent
@@ -44,7 +42,6 @@ export const TeacherView: React.FC = () => {
 
   const handleAnswerHandUp = (studentId: string, studentName: string) => {
     answerHandUp(studentId);
-    alert(`已应答 ${studentName} 的举手`);
   };
 
   const handleKickStudent = (studentId: string, studentName: string) => {
@@ -67,35 +64,12 @@ export const TeacherView: React.FC = () => {
           <Button
             onClick={handleEndClass}
             disabled={classStatus === ClassStatus.ENDED}
-            className={`w-full ${
-              classStatus === ClassStatus.ENDED
-                ? 'bg-gray-400 cursor-not-allowed'
-                : 'bg-red-500 hover:bg-red-600'
-            }`}
+            variant={classStatus === ClassStatus.ENDED ? "secondary" : "destructive"}
+            className="w-full"
           >
             {classStatus === ClassStatus.ENDED ? '课堂已结束' : '结束课堂'}
           </Button>
           
-          {shareLink && (
-            <div className="p-3 bg-blue-50 rounded-lg">
-              <p className="text-sm text-blue-800 mb-2">课堂邀请链接:</p>
-              <div className="flex items-center gap-2">
-                <Input
-                  type="text"
-                  value={shareLink}
-                  readOnly
-                  className="flex-1 text-sm"
-                />
-                <Button
-                  onClick={() => navigator.clipboard.writeText(shareLink)}
-                  className="px-3 py-2 bg-blue-500 text-white rounded text-sm hover:bg-blue-600"
-                  size="sm"
-                >
-                  复制
-                </Button>
-              </div>
-            </div>
-          )}
         </CardContent>
       </Card>
 
@@ -118,22 +92,25 @@ export const TeacherView: React.FC = () => {
                   <div className="flex gap-1">
                     <Button
                       onClick={() => handleMuteStudent(student.id, student.name)}
-                      className="px-2 py-1 bg-yellow-500 text-white text-xs rounded hover:bg-yellow-600"
+                      variant="outline"
                       size="sm"
+                      className="text-xs bg-yellow-100 text-yellow-700 hover:bg-yellow-200 border-yellow-300"
                     >
                       静音
                     </Button>
                     <Button
                       onClick={() => handleUnmuteStudent(student.id, student.name)}
-                      className="px-2 py-1 bg-green-500 text-white text-xs rounded hover:bg-green-600"
+                      variant="outline"
                       size="sm"
+                      className="text-xs bg-green-100 text-green-700 hover:bg-green-200 border-green-300"
                     >
                       取消静音
                     </Button>
                     <Button
                       onClick={() => handleKickStudent(student.id, student.name)}
-                      className="px-2 py-1 bg-red-500 text-white text-xs rounded hover:bg-red-600"
+                      variant="outline"
                       size="sm"
+                      className="text-xs bg-red-100 text-red-700 hover:bg-red-200 border-red-300"
                     >
                       移出
                     </Button>
@@ -169,8 +146,9 @@ export const TeacherView: React.FC = () => {
                   )}
                   <Button
                     onClick={() => handleAnswerHandUp(request.studentId, request.studentName || request.studentId)}
-                    className="px-3 py-1 bg-green-500 text-white text-sm rounded hover:bg-green-600"
+                    variant="default"
                     size="sm"
+                    className="text-sm bg-green-500 text-white hover:bg-green-600"
                   >
                     应答
                   </Button>