✨Feat: Mermaid 图表组件

frontend/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@heroui/react": "^3.0.1",
     "@heroui/styles": "^3.0.1",
+    "mermaid": "^11.13.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },

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);
-
+  const [mermaidLoaded, setMermaidLoaded] = useState(false);
-  useEffect(() => {
-    setCardLoaded(false);
-    setGuodegangLoaded(false);
-  }, [topic]);
 
   const progress = (() => {
     if (!topic) return 0;
-    if (cardLoaded && guodegangLoaded) return 100;
+    if (cardLoaded && guodegangLoaded && mermaidLoaded) return 100;
-    if (cardLoaded || guodegangLoaded) return 50;
+    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>
   );

frontend/src/components/Mermaid.tsx

@@ -0,0 +1,123 @@
+import { Surface } from "@heroui/react";
+import { useEffect, useState, useRef } from "react";
+import mermaid from "mermaid";
+
+interface MermaidData {
+  type: string;
+  content: string;
+}
+
+interface Props {
+  topic: string;
+  onLoaded?: (loaded: boolean) => void;
+}
+
+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);
+  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) => {
+        if (mermaidRef.current) {
+          mermaidRef.current.innerHTML = result.svg;
+        }
+      });
+    }
+  }, [data]);
+
+  if (loading) {
+    return (
+      <div className="w-full p-4 sm:p-6 md:max-w-2xl lg:max-w-4xl mx-auto">
+        <Surface variant="secondary" className="relative w-full max-w-2xl mx-auto bg-white shadow-xl rounded-2xl overflow-hidden border border-gray-100 p-8">
+          <div className="text-center text-gray-600">Loading...</div>
+        </Surface>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="w-full p-4 sm:p-6 md:max-w-2xl lg:max-w-4xl mx-auto">
+        <Surface variant="secondary" className="relative w-full max-w-2xl mx-auto bg-white shadow-xl rounded-2xl overflow-hidden border border-gray-100 p-8">
+          <div className="text-center text-red-600">{error}</div>
+        </Surface>
+      </div>
+    );
+  }
+
+  if (!topic || !data) {
+    return (
+      <div className="w-full p-4 sm:p-6 md:max-w-2xl lg:max-w-4xl mx-auto">
+        <Surface variant="secondary" className="relative w-full max-w-2xl mx-auto bg-white shadow-xl rounded-2xl overflow-hidden border border-gray-100 p-8">
+          <div className="absolute upper-0 right-0 -mr-2 -mb-2 pointer-events-none select-none">
+            <span className="text-[10rem] opacity-80 blur-none">📊</span>
+          </div>
+          <div className="text-center text-gray-600">
+            <div className="text-3xl mb-4">🔷</div>
+            <div className="text-lg font-medium mb-2">Mermaid 图表组件</div>
+            <div className="text-sm text-gray-500">输入主题后，这里将展示相关的 Mermaid 流程图、时序图等可视化内容</div>
+          </div>
+        </Surface>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full p-4 sm:p-6 md:max-w-2xl lg:max-w-4xl mx-auto">
+      <Surface variant="secondary" className="relative w-full max-w-2xl mx-auto bg-white shadow-xl rounded-2xl overflow-hidden border border-gray-100 p-6">
+        <div className="absolute upper-0 right-0 -mr-2 -mb-2 pointer-events-none select-none">
+          <span className="text-[10rem] opacity-80 blur-none">📊</span>
+        </div>
+
+        <div className="relative z-5">
+          <div className="px-4 pt-4 pb-4">
+            <h2 className="text-2xl font-bold text-gray-800 mb-2">
+              {data!.type.charAt(0).toUpperCase() + data!.type.slice(1)} Diagram
+            </h2>
+            <div className="h-1 w-20 bg-gradient-to-r from-blue-500 to-purple-500 rounded"></div>
+          </div>
+
+          <div className="px-4 pb-4 flex justify-center items-center overflow-x-auto">
+            <div ref={mermaidRef} className="mermaid-container"></div>
+          </div>
+        </div>
+      </Surface>
+    </div>
+  );
+}