✨Feat: 完成前端测试问答

frontend/src/App.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { ProgressBar, Label, Tabs } from "@heroui/react";
 import Card from "./components/Card";
 import Guodegang from "./components/Guodegang";
+import Quiz from "./components/Quiz";
 import Topic from "./components/Topic";
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -13,15 +14,21 @@ function App() {
   const [guodegangData, setGuodegangData]: any = useState(null);
   const [guodegangLoading, setGuodegangLoading] = useState(false);
   const [guodegangError, setGuodegangError] = useState<string | null>(null);
+  const [quizData, setQuizData]: any = useState(null);
+  const [quizLoading, setQuizLoading] = useState(false);
+  const [quizError, setQuizError] = useState<string | null>(null);
 
   const fetchData = async (topicToFetch: string) => {
     setCardLoading(true);
     setGuodegangLoading(true);
+    setQuizLoading(true);
     setCardError(null);
     setGuodegangError(null);
+    setQuizError(null);
 
     const cardUrl = `http://localhost:8080/card/${encodeURIComponent(topicToFetch)}`;
     const guodegangUrl = `http://localhost:8080/guodegang/${encodeURIComponent(topicToFetch)}`;
+    const quizUrl = `http://localhost:8080/quiz/${encodeURIComponent(topicToFetch)}`;
 
     const abortController = new AbortController();
     const timeoutId = setTimeout(() => abortController.abort(), 300000);
@@ -54,7 +61,21 @@ function App() {
       }
     };
 
-    Promise.allSettled([fetchCard(), fetchGuodegang()]).finally(() => {
+    const fetchQuiz = async () => {
+      try {
+        const response = await fetch(quizUrl, { signal: abortController.signal });
+        if (!response.ok) throw new Error(`Quiz API failed: ${response.status}`);
+        const result = await response.json();
+        setQuizData(result.message);
+      } catch (error) {
+        console.error("Error fetching quiz data:", error);
+        setQuizError("Failed to load quiz data");
+      } finally {
+        setQuizLoading(false);
+      }
+    };
+
+    Promise.allSettled([fetchCard(), fetchGuodegang(), fetchQuiz()]).finally(() => {
       clearTimeout(timeoutId);
     });
   };
@@ -68,12 +89,12 @@ function App() {
 
   const cardLoaded = !cardLoading && !!cardData;
   const guodegangLoaded = !guodegangLoading && !!guodegangData;
+  const quizLoaded = !quizLoading && !!quizData;
 
   const progress = (() => {
     if (!topic) return 0;
-    if (cardLoaded && guodegangLoaded) return 100;
-    if (cardLoaded || guodegangLoaded) return 50;
-    return 10;
+    const loadedCount = [cardLoaded, guodegangLoaded, quizLoaded].filter(Boolean).length;
+    return Math.round((loadedCount / 3) * 100);
   })();
 
   return (
@@ -104,6 +125,11 @@ function App() {
                             <Tabs.Indicator />
                             🎭 德云社讲解
                         </Tabs.Tab>
+                        <Tabs.Tab id="quiz">
+                            <Tabs.Separator />
+                            <Tabs.Indicator />
+                            📝 测验问答
+                        </Tabs.Tab>
                     </Tabs.List>
                 </Tabs.ListContainer>
                 <Tabs.Panel id="card">
@@ -112,6 +138,9 @@ function App() {
                 <Tabs.Panel id="guodegang">
                     <Guodegang topic={topic} data={guodegangData} loading={guodegangLoading} error={guodegangError} />
                 </Tabs.Panel>
+                <Tabs.Panel id="quiz">
+                    <Quiz topic={topic} data={quizData} loading={quizLoading} error={quizError} />
+                </Tabs.Panel>
             </Tabs>
         </div>
     </div>