用户可随时点击"开始答题"按钮

点击后才会触发数据获取

client/mobile/components/Exam/ExamIndex.tsx

@@ -1,58 +1,52 @@
-import React, { useState, useCallback, useEffect } from 'react';
-import { useQuery } from '@tanstack/react-query';
-import { useNavigate, useSearchParams } from "react-router";
+import React, { useState, useCallback } from 'react';
+import { useNavigate } from "react-router";
+import type { ClassroomData } from '../../../share/types_stock.ts';
 import dayjs from 'dayjs';
 import { message } from 'antd';
 import { ClassroomDataAPI } from '../../api/classroom_data.ts';
 import { ClassroomStatus } from '../../../share/types_stock.ts';
 
-// 昵称输入页面
+// 教室号输入页面
 function ExamIndex() {
-  const [nickname, setNickname] = useState('');
+  const [classroom, setClassroom] = useState('');
   const navigate = useNavigate();
-  const [searchParams] = useSearchParams();
-  const classroom = searchParams.get('classroom');
 
-  const { data: classroomData, isLoading } = useQuery({
-    queryKey: ['classroom', classroom],
-    queryFn: async () => {
-      if (!classroom) return null;
-      const response = await ClassroomDataAPI.getClassroomDatas({ classroom_no: classroom });
-      if (!response.data?.length) {
-        message.error('获取教室数据失败');
-        return null;
-      }
-      return response.data[0] || null;
-    },
-    enabled: !!classroom
-  });
-
-  useEffect(() => {
-    if (classroomData && classroomData.status !== ClassroomStatus.OPEN) {
-      message.error('该教室已关闭');
-    }
-  }, [classroomData]);
+  const [classroomData, setClassroomData] = useState<ClassroomData | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
 
-  const handleJoinTraining = useCallback(() => {
-    if (!nickname.trim()) {
-      message.error('请输入昵称');
-      return;
-    }
+  const handleJoinTraining = useCallback(async () => {
     if (!classroom) {
       message.error('教室号不能为空');
       return;
     }
-    if (!classroomData) {
-      message.error('教室不存在');
-      return;
-    }
-    if (classroomData.status !== ClassroomStatus.OPEN) {
-      message.error('该教室已关闭');
-      return;
+
+    try {
+      setIsLoading(true);
+      const response = await ClassroomDataAPI.getClassroomDatas({ classroom_no: classroom });
+      
+      if (!response.data?.length) {
+        message.error('教室不存在');
+        setClassroomData(null);
+        return;
+      }
+
+      const data = response.data[0];
+      setClassroomData(data);
+
+      if (data.status !== ClassroomStatus.OPEN) {
+        message.error('该教室已关闭');
+        return;
+      }
+
+      // 将教室号作为参数传递到答题页
+      navigate(`/mobile/exam/card?classroom=${classroom}`);
+    } catch (error) {
+      message.error('获取教室数据失败');
+      setClassroomData(null);
+    } finally {
+      setIsLoading(false);
     }
-    // 将昵称和教室号作为参数传递到答题页
-    navigate(`/mobile/exam/card?nickname=${encodeURIComponent(nickname)}&classroom=${classroom}`);
-  }, [nickname, navigate, classroom, classroomData]);
+  }, [navigate, classroom]);
 
   if (isLoading) {
     return <div className="flex items-center justify-center min-h-screen">加载中...</div>;
@@ -64,7 +58,7 @@ function ExamIndex() {
         <div className="text-center">
           <h2 className="text-3xl font-bold text-gray-900">股票训练答题卡系统</h2>
           <p className="mt-2 text-gray-600">
-            {classroom ? `教室号: ${classroom}` : '请输入昵称开始答题'}
+            {classroom ? `教室号: ${classroom}` : '请输入教室号开始答题'}
           </p>
           {classroomData && (
             <div className="mt-2 text-sm text-gray-500">
@@ -74,24 +68,19 @@ function ExamIndex() {
           )}
         </div>
         
-        <div className="mt-8">
+        <div className="mt-8 space-y-4">
           <input
             type="text"
-            value={nickname}
-            onChange={(e) => setNickname(e.target.value)}
-            placeholder="请输入昵称"
+            value={classroom}
+            onChange={(e) => setClassroom(e.target.value)}
+            placeholder="请输入教室号"
             className="w-full px-4 py-3 text-lg border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
           />
         </div>
 
         <button
           onClick={handleJoinTraining}
-          disabled={!classroomData || classroomData.status !== ClassroomStatus.OPEN}
-          className={`w-full px-8 py-3 text-lg font-medium text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors ${
-            !classroomData || classroomData.status !== ClassroomStatus.OPEN
-              ? 'bg-gray-400 cursor-not-allowed'
-              : 'bg-blue-500 hover:bg-blue-600 focus:ring-blue-500'
-          }`}
+          className="w-full px-8 py-3 text-lg font-medium text-white bg-blue-500 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
         >
           开始答题
         </button>