first commit

2026-03-20 19:40:17 +08:00
commit 8dcebff7a6
41 changed files with 9322 additions and 0 deletions
--- a/frontend/.eslintrc.json
+++ b/frontend/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals"]
+}
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1,3 @@
+.next
+node_modules
+dist
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -0,0 +1,30 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html {
+  height: 100%;
+}
+
+body {
+  min-height: 100%;
+  margin: 0;
+  color: #111827;
+  background:
+    radial-gradient(circle at top left, rgba(37, 99, 235, 0.12), transparent 30%),
+    radial-gradient(circle at top right, rgba(15, 118, 110, 0.12), transparent 24%),
+    linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.react-flow__attribution {
+  display: none;
+}
+
+.react-flow__node:focus,
+.react-flow__node:focus-visible {
+  outline: none;
+}
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -0,0 +1,19 @@
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "交互式思维导图",
+  description: "基于 Next.js、FastAPI 和 SQLite 的思维导图 MVP",
+};
+
+type RootLayoutProps = {
+  children: React.ReactNode;
+};
+
+export default function RootLayout({ children }: RootLayoutProps) {
+  return (
+    <html lang="zh-CN">
+      <body>{children}</body>
+    </html>
+  );
+}
--- a/frontend/app/mindmap/[id]/page.tsx
+++ b/frontend/app/mindmap/[id]/page.tsx
@@ -0,0 +1,220 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type MouseEvent as ReactMouseEvent,
+} from "react";
+import MindmapCanvas from "@/components/MindmapCanvas";
+import ChatPanel from "@/components/ChatPanel";
+import { getMindmap } from "@/lib/api";
+import type { Mindmap } from "@/types/mindmap";
+
+type TriggerRequest = {
+  id: number;
+  content: string;
+};
+
+const MIN_CHAT_PANEL_WIDTH = 320;
+const DEFAULT_CHAT_PANEL_WIDTH = 420;
+const MAX_CHAT_PANEL_WIDTH_RATIO = 0.55;
+
+export default function MindmapDetailPage() {
+  const params = useParams<{ id: string }>();
+  const uniqueId = params?.id ?? "";
+  const containerRef = useRef<HTMLElement | null>(null);
+  const [mindmap, setMindmap] = useState<Mindmap | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+  const [showChat, setShowChat] = useState(false);
+  const [isResizingChatPanel, setIsResizingChatPanel] = useState(false);
+  const [chatPanelWidth, setChatPanelWidth] = useState(DEFAULT_CHAT_PANEL_WIDTH);
+  const [triggerRequest, setTriggerRequest] = useState<TriggerRequest | undefined>();
+
+  const clampChatPanelWidth = useCallback((nextWidth: number) => {
+    const containerWidth =
+      containerRef.current?.clientWidth ??
+      (typeof window === "undefined" ? DEFAULT_CHAT_PANEL_WIDTH : window.innerWidth);
+    const maxWidth = Math.max(
+      MIN_CHAT_PANEL_WIDTH,
+      Math.floor(containerWidth * MAX_CHAT_PANEL_WIDTH_RATIO),
+    );
+
+    return Math.min(Math.max(nextWidth, MIN_CHAT_PANEL_WIDTH), maxWidth);
+  }, []);
+
+  useEffect(() => {
+    async function loadPageData() {
+      if (!uniqueId) {
+        setLoading(false);
+        setError("缺少脑图 ID");
+        return;
+      }
+
+      try {
+        setLoading(true);
+        setError("");
+        const mindmapData = await getMindmap(uniqueId);
+        setMindmap(mindmapData);
+      } catch (pageError) {
+        const message =
+          pageError instanceof Error ? pageError.message : "加载脑图失败";
+        setError(message);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    void loadPageData();
+  }, [uniqueId]);
+
+  const handleNodeChat = useCallback(
+    (nodeLabel: string) => {
+      setShowChat(true);
+      setChatPanelWidth((currentWidth) => clampChatPanelWidth(currentWidth));
+      setTriggerRequest({
+        id: Date.now() + Math.floor(Math.random() * 1000),
+        content: `帮我解释一下 ${nodeLabel}`,
+      });
+    },
+    [clampChatPanelWidth],
+  );
+
+  const handleCloseChat = useCallback(() => {
+    setIsResizingChatPanel(false);
+    setShowChat(false);
+    setTriggerRequest(undefined);
+  }, []);
+
+  const handleResizeStart = useCallback(
+    (event: ReactMouseEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      setChatPanelWidth((currentWidth) => clampChatPanelWidth(currentWidth));
+      setIsResizingChatPanel(true);
+    },
+    [clampChatPanelWidth],
+  );
+
+  useEffect(() => {
+    if (!showChat) {
+      setIsResizingChatPanel(false);
+      return;
+    }
+
+    const handleWindowResize = () => {
+      setChatPanelWidth((currentWidth) => clampChatPanelWidth(currentWidth));
+    };
+
+    handleWindowResize();
+    window.addEventListener("resize", handleWindowResize);
+    return () => window.removeEventListener("resize", handleWindowResize);
+  }, [clampChatPanelWidth, showChat]);
+
+  useEffect(() => {
+    if (!showChat || !isResizingChatPanel) {
+      return;
+    }
+
+    const handleMouseMove = (event: MouseEvent) => {
+      if (!containerRef.current) {
+        return;
+      }
+
+      const bounds = containerRef.current.getBoundingClientRect();
+      const nextWidth = bounds.right - event.clientX;
+      setChatPanelWidth(clampChatPanelWidth(nextWidth));
+    };
+
+    const stopResizing = () => {
+      setIsResizingChatPanel(false);
+    };
+
+    const { style } = document.body;
+    const previousCursor = style.cursor;
+    const previousUserSelect = style.userSelect;
+
+    style.cursor = "col-resize";
+    style.userSelect = "none";
+
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", stopResizing);
+    window.addEventListener("blur", stopResizing);
+
+    return () => {
+      style.cursor = previousCursor;
+      style.userSelect = previousUserSelect;
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", stopResizing);
+      window.removeEventListener("blur", stopResizing);
+    };
+  }, [clampChatPanelWidth, isResizingChatPanel, showChat]);
+
+  if (loading) {
+    return (
+      <main className="flex h-screen w-screen items-center justify-center bg-white">
+        <div className="rounded-3xl bg-white px-8 py-6 shadow-panel">
+          正在加载思维导图...
+        </div>
+      </main>
+    );
+  }
+
+  if (error || !mindmap) {
+    return (
+      <main className="flex h-screen w-screen flex-col items-center justify-center bg-white px-6 text-center">
+        <div className="rounded-3xl bg-white px-8 py-8 shadow-panel">
+          <p className="text-lg font-semibold text-rose-600">
+            {error || "未找到对应脑图"}
+          </p>
+        </div>
+      </main>
+    );
+  }
+
+  return (
+    <main ref={containerRef} className="flex h-screen w-screen overflow-hidden bg-white">
+      <section className="min-w-0 flex-1">
+        <MindmapCanvas tree={mindmap.tree} onNodeChat={handleNodeChat} />
+      </section>
+      {showChat && (
+        <>
+          <div
+            role="separator"
+            aria-label="调整聊天区域宽度"
+            aria-orientation="vertical"
+            onMouseDown={handleResizeStart}
+            className="group relative w-3 shrink-0 cursor-col-resize bg-transparent"
+          >
+            <div
+              className={`absolute inset-y-0 left-1/2 w-px -translate-x-1/2 transition-colors ${
+                isResizingChatPanel
+                  ? "bg-blue-500"
+                  : "bg-slate-200 group-hover:bg-blue-300"
+              }`}
+            />
+            <div
+              className={`absolute left-1/2 top-1/2 h-16 w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full transition-colors ${
+                isResizingChatPanel
+                  ? "bg-blue-500"
+                  : "bg-slate-300 group-hover:bg-blue-400"
+              }`}
+            />
+          </div>
+          <aside
+            style={{ width: `${chatPanelWidth}px` }}
+            className="min-w-0 shrink-0 overflow-hidden bg-slate-50 shadow-[-18px_0_36px_rgba(15,23,42,0.06)]"
+          >
+            <ChatPanel
+              sessionId={mindmap.session_id}
+              triggerRequest={triggerRequest}
+              onClose={handleCloseChat}
+            />
+          </aside>
+        </>
+      )}
+    </main>
+  );
+}
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -0,0 +1,20 @@
+export default function HomePage() {
+  return (
+    <main className="mx-auto flex min-h-screen max-w-6xl flex-col justify-center px-6 py-16">
+      <div className="text-center">
+        <p className="text-sm font-semibold uppercase tracking-[0.28em] text-blue-700">
+          Interactive Mindmap
+        </p>
+        <h1 className="mt-4 text-4xl font-extrabold leading-tight text-slate-950 md:text-6xl">
+          思维导图可视化工具
+        </h1>
+        <p className="mt-6 mx-auto max-w-2xl text-lg leading-8 text-slate-600">
+          通过腾讯云智能体平台生成思维导图，点击节点可与 AI 进行深入对话。
+        </p>
+        <p className="mt-4 text-sm text-slate-500">
+          请通过腾讯云智能体平台获取思维导图链接
+        </p>
+      </div>
+    </main>
+  );
+}
--- a/frontend/components/ChatPanel.tsx
+++ b/frontend/components/ChatPanel.tsx
@@ -0,0 +1,406 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import MarkdownMessage from "@/components/MarkdownMessage";
+import { sendChatMessage } from "@/lib/api";
+import {
+  parseJsonSafely,
+  splitSseEvents,
+  type TencentErrorEvent,
+  type TencentReplyEvent,
+} from "@/lib/tencentSse";
+import type { ChatMessage } from "@/types/mindmap";
+
+type TriggerRequest = {
+  id: number;
+  content: string;
+};
+
+type ChatPanelProps = {
+  sessionId: string;
+  triggerRequest?: TriggerRequest;
+  onClose?: () => void;
+};
+
+const TYPING_INTERVAL_MS = 24;
+
+export default function ChatPanel({
+  sessionId,
+  triggerRequest,
+  onClose,
+}: ChatPanelProps) {
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [input, setInput] = useState("");
+  const [loading, setLoading] = useState(false);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const typingTimerRef = useRef<number | null>(null);
+  const pendingCleanupTimerRef = useRef<number | null>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const assistantTargetRef = useRef("");
+  const assistantDisplayedRef = useRef("");
+  const streamCompleteRef = useRef(false);
+  const handledTriggerIdRef = useRef<number | null>(null);
+
+  const scrollToBottom = useCallback(() => {
+    messagesEndRef.current?.scrollIntoView({
+      behavior: loading ? "auto" : "smooth",
+      block: "end",
+    });
+  }, [loading]);
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages, scrollToBottom]);
+
+  const cancelPendingCleanup = useCallback(() => {
+    if (pendingCleanupTimerRef.current !== null) {
+      window.clearTimeout(pendingCleanupTimerRef.current);
+      pendingCleanupTimerRef.current = null;
+    }
+  }, []);
+
+  const abortInFlightRequest = useCallback(() => {
+    abortControllerRef.current?.abort();
+    abortControllerRef.current = null;
+  }, []);
+
+  const updateAssistantMessage = useCallback((content: string) => {
+    setMessages((prev) => {
+      const next = [...prev];
+      const lastMessage = next[next.length - 1];
+
+      if (!lastMessage || lastMessage.role !== "assistant") {
+        next.push({ role: "assistant", content });
+        return next;
+      }
+
+      next[next.length - 1] = {
+        ...lastMessage,
+        content,
+      };
+      return next;
+    });
+  }, []);
+
+  const stopTypingAnimation = useCallback(() => {
+    if (typingTimerRef.current !== null) {
+      window.clearInterval(typingTimerRef.current);
+      typingTimerRef.current = null;
+    }
+  }, []);
+
+  const getTypingStep = useCallback((remaining: number) => {
+    if (remaining > 160) return 10;
+    if (remaining > 80) return 7;
+    if (remaining > 36) return 4;
+    if (remaining > 12) return 2;
+    return 1;
+  }, []);
+
+  const ensureTypingAnimation = useCallback(() => {
+    if (typingTimerRef.current !== null) {
+      return;
+    }
+
+    typingTimerRef.current = window.setInterval(() => {
+      const current = assistantDisplayedRef.current;
+      const target = assistantTargetRef.current;
+
+      if (current === target) {
+        if (streamCompleteRef.current) {
+          stopTypingAnimation();
+        }
+        return;
+      }
+
+      const remaining = target.length - current.length;
+      const nextLength = current.length + getTypingStep(remaining);
+      const nextContent = target.slice(0, nextLength);
+      assistantDisplayedRef.current = nextContent;
+      updateAssistantMessage(nextContent);
+
+      if (nextContent === target && streamCompleteRef.current) {
+        stopTypingAnimation();
+      }
+    }, TYPING_INTERVAL_MS);
+  }, [getTypingStep, stopTypingAnimation, updateAssistantMessage]);
+
+  useEffect(() => {
+    cancelPendingCleanup();
+
+    return () => {
+      pendingCleanupTimerRef.current = window.setTimeout(() => {
+        abortInFlightRequest();
+        stopTypingAnimation();
+        pendingCleanupTimerRef.current = null;
+      }, 0);
+    };
+  }, [abortInFlightRequest, cancelPendingCleanup, stopTypingAnimation]);
+
+  const resetStreamingState = useCallback(() => {
+    cancelPendingCleanup();
+    abortInFlightRequest();
+    stopTypingAnimation();
+    assistantTargetRef.current = "";
+    assistantDisplayedRef.current = "";
+    streamCompleteRef.current = false;
+  }, [abortInFlightRequest, cancelPendingCleanup, stopTypingAnimation]);
+
+  const mergeIncomingContent = useCallback((currentTarget: string, incomingContent: string) => {
+    if (!currentTarget) {
+      return incomingContent;
+    }
+
+    if (!incomingContent) {
+      return currentTarget;
+    }
+
+    if (incomingContent.startsWith(currentTarget)) {
+      return incomingContent;
+    }
+
+    if (currentTarget.startsWith(incomingContent)) {
+      return currentTarget;
+    }
+
+    const maxOverlap = Math.min(currentTarget.length, incomingContent.length);
+    for (let overlap = maxOverlap; overlap > 0; overlap -= 1) {
+      if (currentTarget.slice(-overlap) === incomingContent.slice(0, overlap)) {
+        return `${currentTarget}${incomingContent.slice(overlap)}`;
+      }
+    }
+
+    return incomingContent.length > currentTarget.length ? incomingContent : currentTarget;
+  }, []);
+
+  const setAssistantTarget = useCallback(
+    (incomingContent: string) => {
+      assistantTargetRef.current = mergeIncomingContent(
+        assistantTargetRef.current,
+        incomingContent,
+      );
+      ensureTypingAnimation();
+    },
+    [ensureTypingAnimation, mergeIncomingContent],
+  );
+
+  const processStreamResponse = useCallback(
+    async (response: Response) => {
+      const reader = response.body?.getReader();
+      if (!reader) {
+        throw new Error("No response body");
+      }
+
+      const decoder = new TextDecoder("utf-8");
+      let buffer = "";
+
+      const handleReplyEvent = (event: TencentReplyEvent | null) => {
+        const payload = event?.payload;
+        if (!payload || payload.is_from_self || typeof payload.content !== "string") {
+          return;
+        }
+
+        setAssistantTarget(payload.content);
+
+        if (payload.is_final) {
+          streamCompleteRef.current = true;
+          ensureTypingAnimation();
+        }
+      };
+
+      const handleErrorEvent = (event: TencentErrorEvent | null) => {
+        const errorMessage =
+          event?.error?.message ?? event?.message ?? "Unknown streaming error";
+        assistantTargetRef.current = `错误: ${errorMessage}`;
+        assistantDisplayedRef.current = assistantTargetRef.current;
+        streamCompleteRef.current = true;
+        updateAssistantMessage(assistantTargetRef.current);
+        stopTypingAnimation();
+      };
+
+      const handleSseEvent = (eventName: string, data: string) => {
+        const normalizedEventName =
+          parseJsonSafely<{ type?: string }>(data)?.type ?? eventName;
+
+        if (normalizedEventName === "reply") {
+          handleReplyEvent(parseJsonSafely<TencentReplyEvent>(data));
+          return;
+        }
+
+        if (normalizedEventName === "error") {
+          handleErrorEvent(parseJsonSafely<TencentErrorEvent>(data));
+        }
+      };
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) {
+          buffer += decoder.decode();
+        } else {
+          buffer += decoder.decode(value, { stream: true });
+        }
+
+        const { events, rest } = splitSseEvents(buffer);
+        buffer = rest;
+
+        for (const event of events) {
+          handleSseEvent(event.event, event.data);
+        }
+
+        if (done) {
+          if (buffer.trim()) {
+            const { events: tailEvents } = splitSseEvents(`${buffer}\n\n`);
+            for (const event of tailEvents) {
+              handleSseEvent(event.event, event.data);
+            }
+          }
+          streamCompleteRef.current = true;
+          ensureTypingAnimation();
+          break;
+        }
+      }
+    },
+    [ensureTypingAnimation, setAssistantTarget, stopTypingAnimation, updateAssistantMessage],
+  );
+
+  const sendMessage = useCallback(
+    async (content: string) => {
+      if (!content.trim() || loading) return;
+
+      resetStreamingState();
+      const abortController = new AbortController();
+      abortControllerRef.current = abortController;
+      const userMessage: ChatMessage = { role: "user", content };
+      const assistantMessage: ChatMessage = { role: "assistant", content: "" };
+      setMessages((prev) => [...prev, userMessage, assistantMessage]);
+      setInput("");
+      setLoading(true);
+
+      try {
+        const response = await sendChatMessage(
+          sessionId,
+          content,
+          "default_visitor",
+          abortController.signal,
+        );
+        await processStreamResponse(response);
+      } catch (err) {
+        if (err instanceof DOMException && err.name === "AbortError") {
+          return;
+        }
+
+        const errorMessage = err instanceof Error ? err.message : "请求失败";
+        assistantTargetRef.current = `错误: ${errorMessage}`;
+        assistantDisplayedRef.current = assistantTargetRef.current;
+        streamCompleteRef.current = true;
+        updateAssistantMessage(assistantTargetRef.current);
+        stopTypingAnimation();
+      } finally {
+        if (abortControllerRef.current === abortController) {
+          abortControllerRef.current = null;
+        }
+        setLoading(false);
+      }
+    },
+    [loading, processStreamResponse, resetStreamingState, sessionId, stopTypingAnimation, updateAssistantMessage],
+  );
+
+  useEffect(() => {
+    if (!triggerRequest) {
+      return;
+    }
+
+    if (handledTriggerIdRef.current === triggerRequest.id) {
+      return;
+    }
+
+    handledTriggerIdRef.current = triggerRequest.id;
+    void sendMessage(triggerRequest.content);
+  }, [triggerRequest, sendMessage]);
+
+  const handleSend = useCallback(async () => {
+    await sendMessage(input);
+  }, [input, sendMessage]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        void handleSend();
+      }
+    },
+    [handleSend],
+  );
+
+  return (
+    <div className="flex h-full min-h-0 w-full flex-col bg-slate-50">
+      <div className="flex items-center justify-between border-b border-slate-200 px-4 py-3">
+        <h2 className="text-sm font-semibold text-slate-700">AI 对话</h2>
+        {onClose ? (
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-sm font-medium text-slate-600 transition-colors hover:border-slate-300 hover:text-slate-900"
+          >
+            关闭
+          </button>
+        ) : null}
+      </div>
+
+      <div className="flex-1 min-h-0 space-y-3 overflow-y-auto px-4 py-4">
+        {messages.length === 0 && (
+          <div className="flex h-full items-center justify-center">
+            <p className="text-sm text-slate-400">双击思维导图节点开始对话</p>
+          </div>
+        )}
+
+        {messages.map((msg, idx) => (
+          <div
+            key={idx}
+            className={`flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}
+          >
+            <div
+              className={`max-w-[85%] rounded-2xl px-4 py-2.5 text-sm leading-relaxed ${
+                msg.role === "user"
+                  ? "bg-blue-600 text-white"
+                  : "border border-slate-100 bg-white text-slate-700 shadow-sm"
+              }`}
+            >
+              {msg.role === "assistant" ? (
+                msg.content || (loading && idx === messages.length - 1 ? "思考中..." : "") ? (
+                  <MarkdownMessage
+                    content={msg.content || (loading && idx === messages.length - 1 ? "思考中..." : "")}
+                  />
+                ) : null
+              ) : (
+                <div className="whitespace-pre-wrap break-words">{msg.content}</div>
+              )}
+            </div>
+          </div>
+        ))}
+
+        <div ref={messagesEndRef} />
+      </div>
+
+      <div className="border-t border-slate-200 px-4 py-3">
+        <div className="flex items-end gap-2">
+          <textarea
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="输入消息..."
+            rows={1}
+            className="flex-1 resize-none rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-700 placeholder-slate-400 outline-none focus:border-blue-400 focus:ring-1 focus:ring-blue-400"
+          />
+          <button
+            onClick={() => void handleSend()}
+            disabled={loading || !input.trim()}
+            className="rounded-xl bg-blue-600 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            发送
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/frontend/components/MarkdownMessage.tsx
+++ b/frontend/components/MarkdownMessage.tsx
@@ -0,0 +1,278 @@
+import React from "react";
+
+type MarkdownMessageProps = {
+  content: string;
+};
+
+type MarkdownBlock =
+  | { type: "paragraph"; content: string }
+  | { type: "heading"; level: number; content: string }
+  | { type: "unordered-list"; items: string[] }
+  | { type: "ordered-list"; items: string[] }
+  | { type: "blockquote"; content: string }
+  | { type: "code"; language: string; content: string };
+
+export default function MarkdownMessage({ content }: MarkdownMessageProps) {
+  const blocks = parseMarkdown(content);
+
+  return (
+    <div className="space-y-3">
+      {blocks.map((block, index) => renderBlock(block, index))}
+    </div>
+  );
+}
+
+function parseMarkdown(source: string): MarkdownBlock[] {
+  const normalized = source.replace(/\r\n/g, "\n");
+  const lines = normalized.split("\n");
+  const blocks: MarkdownBlock[] = [];
+  let paragraphLines: string[] = [];
+
+  const flushParagraph = () => {
+    if (!paragraphLines.length) return;
+    blocks.push({
+      type: "paragraph",
+      content: paragraphLines.join("\n").trim(),
+    });
+    paragraphLines = [];
+  };
+
+  for (let index = 0; index < lines.length; index += 1) {
+    const line = lines[index];
+    const trimmed = line.trim();
+
+    if (!trimmed) {
+      flushParagraph();
+      continue;
+    }
+
+    const codeFenceMatch = trimmed.match(/^```([^`]*)$/);
+    if (codeFenceMatch) {
+      flushParagraph();
+      const codeLines: string[] = [];
+      let cursor = index + 1;
+      while (cursor < lines.length && !lines[cursor].trim().startsWith("```")) {
+        codeLines.push(lines[cursor]);
+        cursor += 1;
+      }
+      blocks.push({
+        type: "code",
+        language: codeFenceMatch[1].trim(),
+        content: codeLines.join("\n"),
+      });
+      index = cursor;
+      continue;
+    }
+
+    const headingMatch = line.match(/^(#{1,6})\s+(.+)$/);
+    if (headingMatch) {
+      flushParagraph();
+      blocks.push({
+        type: "heading",
+        level: headingMatch[1].length,
+        content: headingMatch[2].trim(),
+      });
+      continue;
+    }
+
+    const blockquoteMatch = line.match(/^>\s?(.*)$/);
+    if (blockquoteMatch) {
+      flushParagraph();
+      const quoteLines = [blockquoteMatch[1]];
+      let cursor = index + 1;
+      while (cursor < lines.length) {
+        const nextMatch = lines[cursor].match(/^>\s?(.*)$/);
+        if (!nextMatch) break;
+        quoteLines.push(nextMatch[1]);
+        cursor += 1;
+      }
+      blocks.push({
+        type: "blockquote",
+        content: quoteLines.join("\n").trim(),
+      });
+      index = cursor - 1;
+      continue;
+    }
+
+    const unorderedMatch = line.match(/^[-*+]\s+(.+)$/);
+    if (unorderedMatch) {
+      flushParagraph();
+      const items = [unorderedMatch[1].trim()];
+      let cursor = index + 1;
+      while (cursor < lines.length) {
+        const nextMatch = lines[cursor].match(/^[-*+]\s+(.+)$/);
+        if (!nextMatch) break;
+        items.push(nextMatch[1].trim());
+        cursor += 1;
+      }
+      blocks.push({ type: "unordered-list", items });
+      index = cursor - 1;
+      continue;
+    }
+
+    const orderedMatch = line.match(/^\d+\.\s+(.+)$/);
+    if (orderedMatch) {
+      flushParagraph();
+      const items = [orderedMatch[1].trim()];
+      let cursor = index + 1;
+      while (cursor < lines.length) {
+        const nextMatch = lines[cursor].match(/^\d+\.\s+(.+)$/);
+        if (!nextMatch) break;
+        items.push(nextMatch[1].trim());
+        cursor += 1;
+      }
+      blocks.push({ type: "ordered-list", items });
+      index = cursor - 1;
+      continue;
+    }
+
+    paragraphLines.push(line);
+  }
+
+  flushParagraph();
+  return blocks;
+}
+
+function renderBlock(block: MarkdownBlock, index: number) {
+  if (block.type === "paragraph") {
+    return (
+      <p key={index} className="whitespace-pre-wrap leading-7 text-inherit">
+        {renderInline(block.content, `p-${index}`)}
+      </p>
+    );
+  }
+
+  if (block.type === "heading") {
+    const sizeClass =
+      block.level === 1
+        ? "text-xl font-bold"
+        : block.level === 2
+          ? "text-lg font-bold"
+          : "text-base font-semibold";
+    return (
+      <div key={index} className={`${sizeClass} leading-7 text-slate-900`}>
+        {renderInline(block.content, `h-${index}`)}
+      </div>
+    );
+  }
+
+  if (block.type === "unordered-list") {
+    return (
+      <ul key={index} className="list-disc space-y-1 pl-5 leading-7 text-inherit">
+        {block.items.map((item, itemIndex) => (
+          <li key={`${index}-${itemIndex}`}>{renderInline(item, `ul-${index}-${itemIndex}`)}</li>
+        ))}
+      </ul>
+    );
+  }
+
+  if (block.type === "ordered-list") {
+    return (
+      <ol key={index} className="list-decimal space-y-1 pl-5 leading-7 text-inherit">
+        {block.items.map((item, itemIndex) => (
+          <li key={`${index}-${itemIndex}`}>{renderInline(item, `ol-${index}-${itemIndex}`)}</li>
+        ))}
+      </ol>
+    );
+  }
+
+  if (block.type === "blockquote") {
+    return (
+      <blockquote
+        key={index}
+        className="border-l-4 border-slate-300 bg-slate-50/80 px-4 py-2 text-slate-600"
+      >
+        <div className="whitespace-pre-wrap leading-7">
+          {renderInline(block.content, `q-${index}`)}
+        </div>
+      </blockquote>
+    );
+  }
+
+  return (
+    <div key={index} className="overflow-hidden rounded-xl border border-slate-200 bg-slate-950">
+      {block.language && (
+        <div className="border-b border-slate-800 px-3 py-2 text-xs uppercase tracking-[0.18em] text-slate-400">
+          {block.language}
+        </div>
+      )}
+      <pre className="overflow-x-auto px-4 py-3 text-sm leading-6 text-slate-100">
+        <code>{block.content}</code>
+      </pre>
+    </div>
+  );
+}
+
+function renderInline(text: string, keyPrefix: string): React.ReactNode[] {
+  const pattern = /(\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)|`([^`]+)`|\*\*([^*]+)\*\*|__([^_]+)__|\*([^*]+)\*|_([^_]+)_)/g;
+  const nodes: React.ReactNode[] = [];
+  let lastIndex = 0;
+  let matchIndex = 0;
+  let match: RegExpExecArray | null;
+
+  while ((match = pattern.exec(text)) !== null) {
+    const plainText = text.slice(lastIndex, match.index);
+    if (plainText) {
+      nodes.push(...renderPlainText(plainText, `${keyPrefix}-plain-${matchIndex}`));
+    }
+
+    if (match[2] && match[3]) {
+      nodes.push(
+        <a
+          key={`${keyPrefix}-link-${matchIndex}`}
+          href={match[3]}
+          target="_blank"
+          rel="noreferrer"
+          className="font-medium text-blue-600 underline decoration-blue-300 underline-offset-2"
+        >
+          {match[2]}
+        </a>,
+      );
+    } else if (match[4]) {
+      nodes.push(
+        <code
+          key={`${keyPrefix}-code-${matchIndex}`}
+          className="rounded bg-slate-900/90 px-1.5 py-0.5 font-mono text-[0.92em] text-amber-200"
+        >
+          {match[4]}
+        </code>,
+      );
+    } else if (match[5] || match[6]) {
+      nodes.push(
+        <strong key={`${keyPrefix}-strong-${matchIndex}`} className="font-semibold text-slate-900">
+          {match[5] ?? match[6]}
+        </strong>,
+      );
+    } else if (match[7] || match[8]) {
+      nodes.push(
+        <em key={`${keyPrefix}-em-${matchIndex}`} className="italic">
+          {match[7] ?? match[8]}
+        </em>,
+      );
+    }
+
+    lastIndex = match.index + match[0].length;
+    matchIndex += 1;
+  }
+
+  const trailingText = text.slice(lastIndex);
+  if (trailingText) {
+    nodes.push(...renderPlainText(trailingText, `${keyPrefix}-tail`));
+  }
+
+  return nodes;
+}
+
+function renderPlainText(text: string, keyPrefix: string): React.ReactNode[] {
+  return text.split("\n").flatMap((segment, index, array) => {
+    const nodes: React.ReactNode[] = [
+      <React.Fragment key={`${keyPrefix}-${index}`}>{segment}</React.Fragment>,
+    ];
+
+    if (index < array.length - 1) {
+      nodes.push(<br key={`${keyPrefix}-br-${index}`} />);
+    }
+
+    return nodes;
+  });
+}
--- a/frontend/components/MindmapCanvas.tsx
+++ b/frontend/components/MindmapCanvas.tsx
@@ -0,0 +1,155 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import ReactFlow, { Background, Controls, MiniMap, type ReactFlowInstance } from "reactflow";
+import "reactflow/dist/style.css";
+import MindmapNodeCard from "@/components/MindmapNodeCard";
+import { treeToGraph } from "@/lib/treeToGraph";
+import type { MindmapNode } from "@/types/mindmap";
+
+type MindmapCanvasProps = {
+  tree: MindmapNode;
+  className?: string;
+  onNodeChat?: (nodeLabel: string) => void;
+};
+
+const NODE_WIDTH = 220;
+const NODE_HEIGHT = 84;
+const nodeTypes = {
+  mindmapNode: MindmapNodeCard,
+};
+
+function createInitialExpandedSet(tree: MindmapNode): Set<string> {
+  return new Set([tree.id]);
+}
+
+export default function MindmapCanvas({ tree, className, onNodeChat }: MindmapCanvasProps) {
+  const [expandedNodeIds, setExpandedNodeIds] = useState<Set<string>>(() =>
+    createInitialExpandedSet(tree),
+  );
+  const [reactFlowInstance, setReactFlowInstance] =
+    useState<ReactFlowInstance | null>(null);
+  const hasFittedInitiallyRef = useRef(false);
+
+  useEffect(() => {
+    setExpandedNodeIds(createInitialExpandedSet(tree));
+    hasFittedInitiallyRef.current = false;
+  }, [tree]);
+
+  const panToNode = useCallback(
+    (nodeId: string, nextExpandedNodeIds: Set<string>) => {
+      if (!reactFlowInstance) {
+        return;
+      }
+
+      const nextGraph = treeToGraph(tree, {
+        expandedNodeIds: nextExpandedNodeIds,
+      });
+      const focusNode = nextGraph.nodes.find((node) => node.id === nodeId);
+
+      if (!focusNode) {
+        return;
+      }
+
+      const viewport = reactFlowInstance.getViewport();
+      const revealOffset = nextExpandedNodeIds.has(nodeId)
+        ? NODE_WIDTH * 0.9
+        : NODE_WIDTH * 0.45;
+
+      window.requestAnimationFrame(() => {
+        reactFlowInstance.setCenter(
+          focusNode.position.x + revealOffset,
+          focusNode.position.y + NODE_HEIGHT / 2,
+          {
+            zoom: viewport.zoom,
+            duration: 320,
+          },
+        );
+      });
+    },
+    [reactFlowInstance, tree],
+  );
+
+  const handleToggle = useCallback(
+    (nodeId: string) => {
+      setExpandedNodeIds((currentExpandedNodeIds) => {
+        const nextExpandedNodeIds = new Set(currentExpandedNodeIds);
+
+        if (nextExpandedNodeIds.has(nodeId)) {
+          nextExpandedNodeIds.delete(nodeId);
+        } else {
+          nextExpandedNodeIds.add(nodeId);
+        }
+
+        panToNode(nodeId, nextExpandedNodeIds);
+        return nextExpandedNodeIds;
+      });
+    },
+    [panToNode],
+  );
+
+  const graph = useMemo(
+    () =>
+      treeToGraph(tree, {
+        expandedNodeIds,
+        onToggleNode: handleToggle,
+        onOpenNodeChat: onNodeChat,
+      }),
+    [expandedNodeIds, handleToggle, onNodeChat, tree],
+  );
+
+  const keepNodeInteractive = useCallback(() => {
+    // React Flow only enables pointer events for nodes when at least one node handler exists.
+  }, []);
+
+  useEffect(() => {
+    if (!reactFlowInstance || hasFittedInitiallyRef.current || graph.nodes.length === 0) {
+      return;
+    }
+
+    const frame = window.requestAnimationFrame(() => {
+      reactFlowInstance.fitView({
+        padding: 0.16,
+        duration: 420,
+        maxZoom: 1,
+      });
+      hasFittedInitiallyRef.current = true;
+    });
+
+    return () => window.cancelAnimationFrame(frame);
+  }, [graph.nodes, reactFlowInstance]);
+
+  return (
+    <div className={`h-full w-full overflow-hidden bg-white ${className ?? ""}`}>
+      <ReactFlow
+        nodes={graph.nodes}
+        edges={graph.edges}
+        nodeTypes={nodeTypes}
+        onInit={setReactFlowInstance}
+        onNodeClick={keepNodeInteractive}
+        panOnDrag
+        zoomOnScroll
+        zoomOnPinch
+        zoomOnDoubleClick={false}
+        nodesDraggable={false}
+        nodesConnectable={false}
+        elementsSelectable={false}
+        nodesFocusable={false}
+        edgesFocusable={false}
+        selectNodesOnDrag={false}
+        minZoom={0.2}
+        maxZoom={2}
+        proOptions={{ hideAttribution: true }}
+      >
+        <MiniMap
+          pannable
+          zoomable
+          nodeBorderRadius={12}
+          maskColor="rgba(148, 163, 184, 0.12)"
+        />
+        <Controls showInteractive={false} />
+        <Background gap={20} color="#dbeafe" />
+      </ReactFlow>
+    </div>
+  );
+}
--- a/frontend/components/MindmapNodeCard.tsx
+++ b/frontend/components/MindmapNodeCard.tsx
@@ -0,0 +1,90 @@
+"use client";
+
+import { memo, useCallback, type MouseEvent } from "react";
+import { Handle, Position, type NodeProps } from "reactflow";
+import type { GraphNodeData } from "@/types/mindmap";
+
+function MindmapNodeCard({ data }: NodeProps<GraphNodeData>) {
+  const isRoot = data.level === 0;
+  const canOpenChat = typeof data.onOpenChat === "function";
+
+  const handleToggleClick = useCallback(
+    (event: MouseEvent<HTMLButtonElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+      data.onToggle?.();
+    },
+    [data],
+  );
+
+  const handleContentDoubleClick = useCallback(
+    (event: MouseEvent<HTMLButtonElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+      data.onOpenChat?.();
+    },
+    [data],
+  );
+
+  return (
+    <div
+      className={`relative flex h-[84px] w-[220px] items-center justify-center rounded-[18px] border px-5 py-4 ${
+        isRoot
+          ? "border-blue-500 bg-blue-600 text-white shadow-[0_18px_40px_rgba(37,99,235,0.24)]"
+          : "border-slate-200 bg-white text-slate-900 shadow-[0_12px_28px_rgba(15,23,42,0.08)]"
+      } cursor-default`}
+    >
+      <Handle
+        type="target"
+        position={Position.Left}
+        className={`!pointer-events-none !left-[-7px] !h-3 !w-3 !border ${
+          isRoot ? "!border-blue-200 !bg-blue-100" : "!border-slate-300 !bg-white"
+        }`}
+      />
+
+      <button
+        type="button"
+        onDoubleClick={handleContentDoubleClick}
+        disabled={!canOpenChat}
+        title={canOpenChat ? "双击发起聊天" : undefined}
+        className={`nodrag nopan max-w-[156px] select-none rounded-xl px-2 py-1 text-center text-sm font-semibold leading-6 transition-colors ${
+          canOpenChat
+            ? isRoot
+              ? "cursor-pointer hover:bg-white/10"
+              : "cursor-pointer hover:bg-slate-50"
+            : "cursor-default"
+        } disabled:pointer-events-none disabled:opacity-100`}
+      >
+        {data.label}
+      </button>
+
+      {data.hasChildren ? (
+        <>
+          <Handle
+            type="source"
+            position={Position.Right}
+            className={`!pointer-events-none !right-[-7px] !h-3 !w-3 !border ${
+              isRoot ? "!border-blue-200 !bg-blue-100" : "!border-blue-300 !bg-white"
+            }`}
+          />
+          <button
+            type="button"
+            aria-label={data.isExpanded ? "收起子节点" : "展开子节点"}
+            onClick={handleToggleClick}
+            className="nodrag nopan absolute right-0 top-1/2 z-20 flex h-9 w-9 translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border border-blue-200 bg-white text-lg font-semibold text-blue-700 shadow-[0_8px_18px_rgba(37,99,235,0.14)] transition-all hover:border-blue-300 hover:bg-blue-50 active:scale-95"
+          >
+            {data.isExpanded ? "-" : "+"}
+          </button>
+        </>
+      ) : (
+        <span
+          className={`pointer-events-none absolute -right-[7px] top-1/2 h-3 w-3 -translate-y-1/2 rounded-full border ${
+            isRoot ? "border-blue-200 bg-blue-100" : "border-slate-300 bg-white"
+          }`}
+        />
+      )}
+    </div>
+  );
+}
+
+export default memo(MindmapNodeCard);
--- a/frontend/next-env.d.ts
+++ b/frontend/next-env.d.ts
@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
--- a/frontend/next.config.mjs
+++ b/frontend/next.config.mjs
@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+};
+
+export default nextConfig;
--- a/frontend/next.config.ts.disabled
+++ b/frontend/next.config.ts.disabled
@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  reactStrictMode: true,
+};
+
+export default nextConfig;
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "interactive-mindmap-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "14.2.26",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "reactflow": "11.11.4"
+  },
+  "devDependencies": {
+    "@types/node": "22.10.1",
+    "@types/react": "18.3.18",
+    "@types/react-dom": "18.3.5",
+    "autoprefixer": "10.4.20",
+    "eslint": "8.57.1",
+    "eslint-config-next": "14.2.26",
+    "postcss": "8.4.49",
+    "tailwindcss": "3.4.16",
+    "typescript": "5.7.2"
+  }
+}
--- a/frontend/pages/_app.tsx
+++ b/frontend/pages/_app.tsx
@@ -0,0 +1,5 @@
+import type { AppProps } from "next/app";
+
+export default function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />;
+}
--- a/frontend/pages/_document.tsx
+++ b/frontend/pages/_document.tsx
@@ -0,0 +1,13 @@
+import { Head, Html, Main, NextScript } from "next/document";
+
+export default function Document() {
+  return (
+    <Html lang="zh-CN">
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -0,0 +1,28 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: [
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./lib/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        ink: "#111827",
+        mist: "#eff6ff",
+        brand: "#2563eb",
+        accent: "#0f766e",
+      },
+      boxShadow: {
+        panel: "0 20px 45px rgba(15, 23, 42, 0.08)",
+      },
+      fontFamily: {
+        sans: ["Manrope", "Segoe UI", "sans-serif"],
+      },
+    },
+  },
+  plugins: [],
+};
+
+export default config;
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
--- a/frontend/tsconfig.tsbuildinfo
+++ b/frontend/tsconfig.tsbuildinfo
--- a/frontend/types/mindmap.ts
+++ b/frontend/types/mindmap.ts
@@ -0,0 +1,47 @@
+import type { Edge, Node } from "reactflow";
+
+export interface MindmapNode {
+  id: string;
+  label: string;
+  parent_id: string | null;
+  level: number;
+  is_leaf: boolean;
+  children: MindmapNode[];
+}
+
+export interface Mindmap {
+  id: number;
+  unique_id: string;
+  session_id: string;
+  title: string;
+  raw_json: string;
+  tree: MindmapNode;
+  url: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface CreateMindmapPayload {
+  session_id: string;
+  mindmap_json: Record<string, unknown>;
+}
+
+export interface GraphNodeData {
+  label: string;
+  level: number;
+  isLeaf: boolean;
+  hasChildren: boolean;
+  isExpanded: boolean;
+  onToggle?: () => void;
+  onOpenChat?: () => void;
+}
+
+export interface GraphData {
+  nodes: Node<GraphNodeData>[];
+  edges: Edge[];
+}
+
+export interface ChatMessage {
+  role: "user" | "assistant";
+  content: string;
+}