✨Feat: 完成前端工程场景

frontend/src/App.tsx

@@ -4,6 +4,7 @@ import Card from "./components/Card";
 import Guodegang from "./components/Guodegang";
 import Quiz from "./components/Quiz";
 import Topic from "./components/Topic";
+import Scenario from "./components/Scenario";
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 function App() {
@@ -17,18 +18,24 @@ function App() {
   const [quizData, setQuizData]: any = useState(null);
   const [quizLoading, setQuizLoading] = useState(false);
   const [quizError, setQuizError] = useState<string | null>(null);
+  const [scenarioData, setScenarioData]: any = useState(null);
+  const [scenarioLoading, setScenarioLoading] = useState(false);
+  const [scenarioError, setScenarioError] = useState<string | null>(null);
 
   const fetchData = async (topicToFetch: string) => {
     setCardLoading(true);
     setGuodegangLoading(true);
     setQuizLoading(true);
+    setScenarioLoading(true);
     setCardError(null);
     setGuodegangError(null);
     setQuizError(null);
+    setScenarioError(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 scenarioUrl = `http://localhost:8080/scenario/${encodeURIComponent(topicToFetch)}`;
 
     const abortController = new AbortController();
     const timeoutId = setTimeout(() => abortController.abort(), 300000);
@@ -75,7 +82,21 @@ function App() {
       }
     };
 
-    Promise.allSettled([fetchCard(), fetchGuodegang(), fetchQuiz()]).finally(() => {
+    const fetchScenario = async () => {
+      try {
+        const response = await fetch(scenarioUrl, { signal: abortController.signal });
+        if (!response.ok) throw new Error(`Scenario API failed: ${response.status}`);
+        const result = await response.json();
+        setScenarioData(result.message);
+      } catch (error) {
+        console.error("Error fetching scenario data:", error);
+        setScenarioError("Failed to load scenario data");
+      } finally {
+        setScenarioLoading(false);
+      }
+    };
+
+    Promise.allSettled([fetchCard(), fetchGuodegang(), fetchQuiz(), fetchScenario()]).finally(() => {
       clearTimeout(timeoutId);
     });
   };
@@ -90,11 +111,12 @@ function App() {
   const cardLoaded = !cardLoading && !!cardData;
   const guodegangLoaded = !guodegangLoading && !!guodegangData;
   const quizLoaded = !quizLoading && !!quizData;
+  const scenarioLoaded = !scenarioLoading && !!scenarioData;
 
   const progress = (() => {
     if (!topic) return 0;
-    const loadedCount = [cardLoaded, guodegangLoaded, quizLoaded].filter(Boolean).length;
-    return Math.round((loadedCount / 3) * 100);
+    const loadedCount = [cardLoaded, guodegangLoaded, quizLoaded, scenarioLoaded].filter(Boolean).length;
+    return Math.round((loadedCount / 4) * 100);
   })();
 
   return (
@@ -130,6 +152,11 @@ function App() {
                             <Tabs.Indicator />
                             📝 测验问答
                         </Tabs.Tab>
+                        <Tabs.Tab id="scenario">
+                            <Tabs.Separator />
+                            <Tabs.Indicator />
+                            💡 工程场景
+                        </Tabs.Tab>
                     </Tabs.List>
                 </Tabs.ListContainer>
                 <Tabs.Panel id="card">
@@ -141,6 +168,9 @@ function App() {
                 <Tabs.Panel id="quiz">
                     <Quiz topic={topic} data={quizData} loading={quizLoading} error={quizError} />
                 </Tabs.Panel>
+                <Tabs.Panel id="scenario">
+                    <Scenario topic={topic} data={scenarioData} loading={scenarioLoading} error={scenarioError} />
+                </Tabs.Panel>
             </Tabs>
         </div>
     </div>