✨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>
   );

frontend/src/components/Card.tsx

@@ -1,5 +1,4 @@
 import { Card } from "@heroui/react";
-import { useEffect, useState } from "react";
 
 interface KeyPointItem {
   point: string;
@@ -51,43 +50,12 @@ interface CardData {
 
 interface Props {
   topic: string;
-  onLoaded?: (loaded: boolean) => void;
+  data: CardData | null;
+  loading: boolean;
+  error: string | null;
 }
 
-export default function Default({ topic, onLoaded }: Props) {
-  const [data, setData] = useState<CardData | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (!topic) {
-      onLoaded?.(false);
-      setLoading(false);
-      return;
-    }
-    const fetchData = async () => {
-      try {
-        const response = await fetch(
-          `http://localhost:8080/card/${encodeURIComponent(topic)}`,
-        );
-        if (!response.ok) {
-          throw new Error("API Error");
-        }
-        const result = await response.json();
-        setData(result.message);
-        setError(null);
-      } catch (error) {
-        console.error("Failed to fetch data: ", error);
-        setError("Failed to load data. Please try again.");
-      } finally {
-        setLoading(false);
-        onLoaded?.(true);
-      }
-    };
-    setLoading(true);
-    fetchData();
-  }, [topic, onLoaded]);
-
+export default function Default({ topic, data, loading, error }: Props) {
   if (loading) {
     return (
       <div className="w-full p-4 sm:p-6 md:max-w-2xl lg:max-w-4xl mx-auto">
@@ -143,7 +111,7 @@ export default function Default({ topic, onLoaded }: Props) {
             )}
           </div>
 
-          <Card.Description className="px-6 pb-6 space-y-6">
+          <div className="px-6 pb-6 space-y-6">
             <div>
               <h3 className="flex items-center text-lg font-semibold text-gray-700 mb-3">
                 <span className="mr-2"></span>
@@ -257,7 +225,7 @@ export default function Default({ topic, onLoaded }: Props) {
                 {data!.mnemonic.content}
               </p>
             </div>
-          </Card.Description>
+          </div>
         </div>
       </Card>
     </div>

frontend/src/components/Guodegang.tsx

@@ -1,5 +1,4 @@
 import { Card } from "@heroui/react";
-import { useEffect, useState } from "react";
 
 interface GuodegangData {
   name: string;
@@ -8,43 +7,12 @@ interface GuodegangData {
 
 interface Props {
   topic: string;
-  onLoaded?: (loaded: boolean) => void;
+  data: GuodegangData | null;
+  loading: boolean;
+  error: string | null;
 }
 
-export default function Guodegang({ topic, onLoaded }: Props) {
-  const [data, setData] = useState<GuodegangData | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (!topic) {
-      onLoaded?.(false);
-      setLoading(false);
-      return;
-    }
-    const fetchData = async () => {
-      try {
-        const response = await fetch(
-          `http://localhost:8080/guodegang/${encodeURIComponent(topic)}`,
-        );
-        if (!response.ok) {
-          throw new Error("API Error");
-        }
-        const result = await response.json();
-        setData(result.message);
-        setError(null);
-      } catch (error) {
-        console.error("Failed to fetch data: ", error);
-        setError("Failed to load data. Please try again.");
-      } finally {
-        setLoading(false);
-        onLoaded?.(true);
-      }
-    };
-    setLoading(true);
-    fetchData();
-  }, [topic, onLoaded]);
-
+export default function Guodegang({ topic, data, loading, error }: Props) {
   if (loading) {
     return (
       <div className="w-full p-4 sm:p-6 md:max-w-2xl lg:max-w-4xl mx-auto">

frontend/src/components/Mermaid.tsx

@@ -1,5 +1,5 @@
 import { Surface } from "@heroui/react";
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useRef } from "react";
 import mermaid from "mermaid";
 
 interface MermaidData {
@@ -9,51 +9,22 @@ interface MermaidData {
 
 interface Props {
   topic: string;
-  onLoaded?: (loaded: boolean) => void;
+  data: MermaidData | null;
+  loading: boolean;
+  error: string | null;
 }
 
-export default function Default({ topic, onLoaded }: Props) {
-  const [data, setData] = useState<MermaidData | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
+export default function Default({ topic, data, loading, error }: Props) {
   const mermaidRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     mermaid.initialize({ startOnLoad: true });
   }, []);
 
-  useEffect(() => {
-    if (!topic) {
-      onLoaded?.(false);
-      setLoading(false);
-      return;
-    }
-    const fetchData = async () => {
-      try {
-        const response = await fetch(
-          `http://localhost:8080/mermaid/${encodeURIComponent(topic)}`,
-        );
-        if (!response.ok) {
-          throw new Error("API Error");
-        }
-        const result = await response.json();
-        setData(result.message);
-        setError(null);
-      } catch (error) {
-        console.error("Failed to fetch data: ", error);
-        setError("Failed to load data. Please try again.");
-      } finally {
-        setLoading(false);
-        onLoaded?.(true);
-      }
-    };
-    setLoading(true);
-    fetchData();
-  }, [topic, onLoaded]);
-
   useEffect(() => {
     if (data && mermaidRef.current) {
-      mermaid.render("mermaid-diagram", data.content).then((result) => {
+      const id = `mermaid-diagram-${Date.now()}`;
+      mermaid.render(id, data.content).then((result) => {
         if (mermaidRef.current) {
           mermaidRef.current.innerHTML = result.svg;
         }