✨Feat: Mermaid 图表组件

frontend/src/App.tsx

@@ -1,23 +1,23 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { ProgressBar, Label } from "@heroui/react";
 import Card from "./components/Card";
 import Guodegang from "./components/Guodegang";
+import Mermaid from "./components/Mermaid";
 import Topic from "./components/Topic";
 
 function App() {
   const [topic, setTopic] = useState('');
   const [cardLoaded, setCardLoaded] = useState(false);
   const [guodegangLoaded, setGuodegangLoaded] = useState(false);
-
-  useEffect(() => {
-    setCardLoaded(false);
-    setGuodegangLoaded(false);
-  }, [topic]);
+  const [mermaidLoaded, setMermaidLoaded] = useState(false);
 
   const progress = (() => {
     if (!topic) return 0;
-    if (cardLoaded && guodegangLoaded) return 100;
-    if (cardLoaded || guodegangLoaded) return 50;
+    if (cardLoaded && guodegangLoaded && mermaidLoaded) return 100;
+    if (cardLoaded && guodegangLoaded) return 67;
+    if (cardLoaded && mermaidLoaded) return 67;
+    if (guodegangLoaded && mermaidLoaded) return 67;
+    if (cardLoaded || guodegangLoaded || mermaidLoaded) return 33;
     return 10;
   })();
 
@@ -35,9 +35,10 @@ function App() {
                 </ProgressBar>
             </div>
         )}
-        <div style={{ display: 'flex', gap: '20px' }}>
+        <div style={{ display: 'grid', gap: '10px' }}>
             <Card topic={topic} onLoaded={setCardLoaded} />
             <Guodegang topic={topic} onLoaded={setGuodegangLoaded} />
+            <Mermaid topic={topic} onLoaded={setMermaidLoaded} />
         </div>
     </div>
   );