✨Feat: 分 Tab 加载展示

frontend/src/App.tsx

@@ -1,15 +1,95 @@
 import { useState } from "react";
-import { ProgressBar, Label } from "@heroui/react";
+import { ProgressBar, Label, Tabs } from "@heroui/react";
 import Card from "./components/Card";
 import Guodegang from "./components/Guodegang";
 import Mermaid from "./components/Mermaid";
 import Topic from "./components/Topic";
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 function App() {
   const [topic, setTopic] = useState('');
-  const [cardLoaded, setCardLoaded] = useState(false);
-  const [guodegangLoaded, setGuodegangLoaded] = useState(false);
-  const [mermaidLoaded, setMermaidLoaded] = useState(false);
+  const [cardData, setCardData]: any = useState(null);
+  const [cardLoading, setCardLoading] = useState(false);
+  const [cardError, setCardError] = useState<string | null>(null);
+  const [guodegangData, setGuodegangData]: any = useState(null);
+  const [guodegangLoading, setGuodegangLoading] = useState(false);
+  const [guodegangError, setGuodegangError] = useState<string | null>(null);
+  const [mermaidData, setMermaidData]: any = useState(null);
+  const [mermaidLoading, setMermaidLoading] = useState(false);
+  const [mermaidError, setMermaidError] = useState<string | null>(null);
+
+  const fetchData = async (topicToFetch: string) => {
+    setCardLoading(true);
+    setGuodegangLoading(true);
+    setMermaidLoading(true);
+    setCardError(null);
+    setGuodegangError(null);
+    setMermaidError(null);
+
+    const cardUrl = `http://localhost:8080/card/${encodeURIComponent(topicToFetch)}`;
+    const guodegangUrl = `http://localhost:8080/guodegang/${encodeURIComponent(topicToFetch)}`;
+    const mermaidUrl = `http://localhost:8080/mermaid/${encodeURIComponent(topicToFetch)}`;
+
+    const abortController = new AbortController();
+    const timeoutId = setTimeout(() => abortController.abort(), 300000);
+
+    const fetchCard = async () => {
+      try {
+        const response = await fetch(cardUrl, { signal: abortController.signal });
+        if (!response.ok) throw new Error(`Card API failed: ${response.status}`);
+        const result = await response.json();
+        setCardData(result.message);
+      } catch (error) {
+        console.error("Error fetching card data:", error);
+        setCardError("Failed to load card data");
+      } finally {
+        setCardLoading(false);
+      }
+    };
+
+    const fetchGuodegang = async () => {
+      try {
+        const response = await fetch(guodegangUrl, { signal: abortController.signal });
+        if (!response.ok) throw new Error(`Guodegang API failed: ${response.status}`);
+        const result = await response.json();
+        setGuodegangData(result.message);
+      } catch (error) {
+        console.error("Error fetching guodegang data:", error);
+        setGuodegangError("Failed to load guodegang data");
+      } finally {
+        setGuodegangLoading(false);
+      }
+    };
+
+    const fetchMermaid = async () => {
+      try {
+        const response = await fetch(mermaidUrl, { signal: abortController.signal });
+        if (!response.ok) throw new Error(`Mermaid API failed: ${response.status}`);
+        const result = await response.json();
+        setMermaidData(result.message);
+      } catch (error) {
+        console.error("Error fetching mermaid data:", error);
+        setMermaidError("Failed to load mermaid data");
+      } finally {
+        setMermaidLoading(false);
+      }
+    };
+
+    Promise.allSettled([fetchCard(), fetchGuodegang(), fetchMermaid()]).finally(() => {
+      clearTimeout(timeoutId);
+    });
+  };
+
+  const handleTopicSubmit = (newTopic: string) => {
+    setTopic(newTopic);
+    if (newTopic) {
+      fetchData(newTopic);
+    }
+  };
+
+  const cardLoaded = !cardLoading && !!cardData;
+  const guodegangLoaded = !guodegangLoading && !!guodegangData;
+  const mermaidLoaded = !mermaidLoading && !!mermaidData;
 
   const progress = (() => {
     if (!topic) return 0;
@@ -23,7 +103,7 @@ function App() {
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '20px' }}>
-        <Topic onTopicSubmit={setTopic}/>
+        <Topic onTopicSubmit={handleTopicSubmit}/>
         {topic && (
             <div className="w-64">
                 <ProgressBar value={progress} color="accent">
@@ -35,10 +115,37 @@ function App() {
                 </ProgressBar>
             </div>
         )}
-        <div style={{ display: 'grid', gap: '10px' }}>
-            <Card topic={topic} onLoaded={setCardLoaded} />
-            <Guodegang topic={topic} onLoaded={setGuodegangLoaded} />
-            <Mermaid topic={topic} onLoaded={setMermaidLoaded} />
+        <div className="w-full max-w-6xl">
+            <Tabs className="w-full">
+                <Tabs.ListContainer>
+                    <Tabs.List aria-label="View options">
+                        <Tabs.Tab id="card">
+                            <Tabs.Separator />
+                            <Tabs.Indicator />
+                            📚 学习卡片
+                        </Tabs.Tab>
+                        <Tabs.Tab id="guodegang">
+                            <Tabs.Separator />
+                            <Tabs.Indicator />
+                            🎭 德云社讲解
+                        </Tabs.Tab>
+                        <Tabs.Tab id="mermaid">
+                            <Tabs.Separator />
+                            <Tabs.Indicator />
+                            📊 Mermaid 图表
+                        </Tabs.Tab>
+                    </Tabs.List>
+                </Tabs.ListContainer>
+                <Tabs.Panel id="card">
+                    <Card topic={topic} data={cardData} loading={cardLoading} error={cardError} />
+                </Tabs.Panel>
+                <Tabs.Panel id="guodegang">
+                    <Guodegang topic={topic} data={guodegangData} loading={guodegangLoading} error={guodegangError} />
+                </Tabs.Panel>
+                <Tabs.Panel id="mermaid">
+                    <Mermaid topic={topic} data={mermaidData} loading={mermaidLoading} error={mermaidError} />
+                </Tabs.Panel>
+            </Tabs>
         </div>
     </div>
   );