From 8ddc3ea6900a470bce60a56d549f618433b5ba02 Mon Sep 17 00:00:00 2001
From: wangziqi <wangziqi@gongxue100.com>
Date: Sat, 8 Aug 2026 17:27:14 +0800
Subject: [PATCH] =?UTF-8?q?refactor(admin):=20LiteMermaid=20=E7=94=A8=20us?=
 =?UTF-8?q?ehooks-ts=20useIsMounted=20=E6=9B=BF=E4=BB=A3=E6=89=8B=E5=86=99?=
 =?UTF-8?q?=20cancelled=20=E6=A0=87=E5=BF=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/admin/src/components/AiChat/LiteMermaid.tsx | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/apps/admin/src/components/AiChat/LiteMermaid.tsx b/apps/admin/src/components/AiChat/LiteMermaid.tsx
index be2e32c..6bea6d6 100644
--- a/apps/admin/src/components/AiChat/LiteMermaid.tsx
+++ b/apps/admin/src/components/AiChat/LiteMermaid.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+import { useIsMounted } from 'usehooks-ts';
 
 interface LiteMermaidProps {
   children: string;
@@ -11,9 +12,9 @@ interface LiteMermaidProps {
 export function LiteMermaid({ children }: LiteMermaidProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const [error, setError] = useState<string | null>(null);
+  const isMounted = useIsMounted();
 
   useEffect(() => {
-    let cancelled = false;
     const container = containerRef.current;
     if (!container) return;
 
@@ -22,21 +23,17 @@ export function LiteMermaid({ children }: LiteMermaidProps) {
         const mermaid = (await import('mermaid')).default;
         mermaid.initialize({ startOnLoad: false, theme: 'neutral', securityLevel: 'strict' });
         const { svg } = await mermaid.render(`mermaid-${crypto.randomUUID()}`, children);
-        if (!cancelled) {
+        if (isMounted()) {
           const doc = new DOMParser().parseFromString(svg, 'image/svg+xml');
           container.replaceChildren(doc.documentElement);
           setError(null);
         }
       } catch (e) {
-        if (!cancelled) {
+        if (isMounted()) {
           setError(e instanceof Error ? e.message : '图表渲染失败');
         }
       }
     })();
-
-    return () => {
-      cancelled = true;
-    };
   }, [children]);
 
   if (error) {