feat: update compontens

Author: wkylin

.stylelintrc.json

@@ -15,6 +15,12 @@
       {
         "ignorePseudoClasses": ["global"]
       }
+    ],
+    "at-rule-no-unknown": [
+      true,
+      {
+        "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen", "layer", "theme", "utility"]
+      }
     ]
   }
 }

.vscode/settings.json

@@ -29,6 +29,7 @@
     "tryer",
     "urlparams"
   ],
+  "css.lint.unknownAtRules": "ignore",
   "files.autoSave": "off",
   "npm-scripts.showStartNotification": false,
   "editor.suggest.snippetsPreventQuickSuggestions": false,

README.md

@@ -12,7 +12,7 @@
   <a href="https://deepwiki.com/wkylin/pro-react-admin"><img src="https://deepwiki.com/badge.svg" alt="Ask DeepWiki" /></a>
 </div>
 
-# 🚀 Pro React Admin
+## 🚀 Pro React Admin
 
 **Pro React Admin** 是一款基于 **React v19** 的高性能、企业级中后台前端解决方案。深度整合 **RBAC 动态权限**、**KeepAlive 缓存**、**多标签页**与 **AI 智能助手**。提供开箱即用的国际化、暗黑模式、Mock 数据与 E2E 测试体系，助力开发者快速构建稳健、安全的 SaaS 平台与数据可视化系统。
 

package-lock.json

@@ -326,7 +326,7 @@
     "markmap-common": "^0.18.9",
     "markmap-lib": "^0.18.12",
     "markmap-view": "^0.18.12",
-    "mermaid": "^11.12.1",
+    "mermaid": "^11.12.2",
     "motion": "^12.23.24",
     "nanoid": "^5.1.6",
     "number-flow": "^0.5.8",

package.json

@@ -5,6 +5,15 @@ export { default as KeepAlive } from './KeepAlive'
 export { default as ResponsiveTable } from './ResponsiveTable'
 export { default as GlobalSearch } from './GlobalSearch'
 
+// Auth 组件
+export * from './auth'
+
+// Stateful 组件
+export { default as CheckableTags } from './stateful/CheckableTags'
+export { default as MarkmapHooks } from './stateful/markmap'
+export { default as MermaidHooks } from './stateful/mermaidHooks'
+export { default as TreeList } from './stateful/TreeList'
+
 // Stateless 组件
 export { default as AdvancedCodeBlock } from './stateless/AdvancedCodeBlock'
 export { default as AlignCenter } from './stateless/AlignCenter'
@@ -26,7 +35,7 @@ export { default as AvatarCard } from './stateless/AvatarCard'
 export { default as BackgroundBeams } from './stateless/BackgroundBeams'
 export { default as BackgroundBoxes } from './stateless/BackgroundBoxes'
 export { default as BlurFade } from './stateless/BlurFade'
-// export { default as BlurText } from './stateless/BlurText';
+export { default as BlurText } from './stateless/BlurText'
 export { default as BorderBeam } from './stateless/BorderBeam'
 export { default as BreatheText } from './stateless/BreatheText'
 export { default as ClockFace } from './stateless/ClockFace'
@@ -35,6 +44,7 @@ export { default as ColorfulText } from './stateless/ColorfulText'
 export { default as CompareAll } from './stateless/CompareAll'
 export { default as ContentPlaceholder } from './stateless/ContentPlaceholder'
 export { default as CopyToClipboard } from './stateless/CopyToClipboard'
+export { default as CubeSpinner } from './stateless/CubeSpinner'
 export { default as CustomSwitch } from './stateless/CustomSwitch'
 export { default as DescBox } from './stateless/DescBox'
 export { default as DonutCharts } from './stateless/DonutCharts'
@@ -54,6 +64,7 @@ export { default as FloatAny } from './stateless/FloatAny'
 export { default as FloatingIcon } from './stateless/FloatingIcon'
 export { default as Footer } from './stateless/Footer'
 export { default as GradientAnimation } from './stateless/GradientAnimation'
+export { default as GradientStats } from './stateless/GradientStats'
 export { default as GradientTracking } from './stateless/GradientTracking'
 export { default as GradualSpacing } from './stateless/GradualSpacing'
 export { default as HorizontalScroll } from './stateless/HorizontalScroll'
@@ -69,6 +80,7 @@ export { default as LineBordered } from './stateless/LineBordered'
 export { default as Loading } from './stateless/Loading'
 export { default as LogoSlider } from './stateless/LogoSlider'
 export { default as MagicTrail } from './stateless/MagicTrail'
+export { default as MarketingHero } from './stateless/MarketingHero'
 export { default as MemoizedStars } from './stateless/MemoizedStars'
 export { default as MeshGradientBackground } from './stateless/MeshGradientBackground'
 export { default as Meteors } from './stateless/Meteors'
@@ -98,7 +110,7 @@ export { default as ScriptView } from './stateless/ScriptView'
 export { default as ScrollAnimation } from './stateless/ScrollAnimation'
 export { default as ScrollToTop } from './stateless/ScrollToTop'
 export { default as ScrollVelocity } from './stateless/ScrollVelocity'
-// export { default as SearchForm } from './stateless/SearchForm';
+export { default as SearchForm } from './stateless/SearchForm'
 export { default as SettingDrawer } from './stateless/SettingDrawer'
 export { default as ShiCode } from './stateless/ShiCode'
 export { default as ShiftingCard } from './stateless/ShiftingCard'
@@ -123,6 +135,7 @@ export { default as TagCard } from './stateless/TagCard'
 export { default as TagCloud } from './stateless/TagCloud'
 export { default as TestimonialCarousel } from './stateless/TestimonialCarousel'
 export { default as TextClip } from './stateless/TextClip'
+export { default as TextComponent } from './stateless/TextComponent'
 export { default as TextLoader } from './stateless/TextLoader'
 export { default as TextReveal } from './stateless/TextReveal'
 export { default as ThreeDCard } from './stateless/ThreeDCard'
@@ -133,8 +146,5 @@ export { default as TypeWriter } from './stateless/TypeWriter'
 export { default as UserIP } from './stateless/UserIP'
 export { default as Video } from './stateless/Video'
 export { default as Watermark } from './stateless/Watermark'
+export { default as WaveBackground } from './stateless/WaveBackground'
 export { default as WordRotate } from './stateless/WordRotate'
-
-// Stateful 组件
-export { default as CheckableTags } from './stateful/CheckableTags'
-export { default as TreeList } from './stateful/TreeList'

src/components/index.ts

@@ -1,34 +1,111 @@
 import React, { useRef, useEffect } from 'react'
-import { Transformer } from 'markmap-lib'
-import { Markmap } from 'markmap-view'
 
-const transformer = new Transformer()
+/*
+  Optimized Markmap React wrapper:
+  - dynamic imports for `markmap-lib` and `markmap-view` to avoid SSR/bundle issues
+  - reuse transformer instance per component via ref
+  - debounce heavy operations with requestAnimationFrame
+  - robust error handling and cleanup
+*/
 
-const MarkmapHooks = ({ markmap }) => {
-  const refSvg = useRef()
-  const refMm = useRef()
+const MarkmapHooks = ({ markmap, debounceDelay = 200 }) => {
+  const refSvg = useRef(null)
+  const mmRef = useRef(null)
+  const transformerRef = useRef(null)
+  const rafRef = useRef(null)
+  const debounceRef = useRef(null)
+  const [isReady, setIsReady] = React.useState(false)
 
+  // Initialize markmap and transformer on client only
   useEffect(() => {
-    const mm = Markmap.create(refSvg.current)
-    refMm.current = mm
+    let cancelled = false
+
+    const init = async () => {
+      try {
+        const [{ Transformer }, { Markmap }] = await Promise.all([import('markmap-lib'), import('markmap-view')])
+
+        if (cancelled) return
+
+        // create transformer once per component
+        transformerRef.current = transformerRef.current || new Transformer()
+
+        // create markmap instance if svg exists
+        if (refSvg.current && !mmRef.current) {
+          try {
+            mmRef.current = Markmap.create(refSvg.current)
+            setIsReady(true) // Trigger re-run of the effect below
+          } catch (err) {
+            console.error('Markmap.create error:', err)
+          }
+        }
+      } catch (err) {
+        console.error('Failed to load markmap libraries:', err)
+      }
+    }
+
+    init()
+
     return () => {
-      mm.destroy()
+      cancelled = true
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current)
+        rafRef.current = null
+      }
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current)
+        debounceRef.current = null
+      }
+      if (mmRef.current) {
+        try {
+          mmRef.current.destroy()
+        } catch (err) {
+          console.warn('Error destroying markmap instance:', err)
+        }
+        mmRef.current = null
+      }
     }
   }, [])
 
+  // Update markmap when `markmap` prop changes or when libraries are ready.
   useEffect(() => {
-    const mm = refMm.current
-    if (!mm) return
-    const { root } = transformer.transform(markmap)
-    mm.setData(root)
-    mm.fit()
-  }, [markmap])
-
-  return (
-    <>
-      <svg style={{ width: '100%', height: '400px' }} ref={refSvg} />
-    </>
-  )
+    if (!isReady || !transformerRef.current || !mmRef.current) return
+
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current)
+    }
+
+    debounceRef.current = setTimeout(() => {
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current)
+      }
+
+      rafRef.current = requestAnimationFrame(() => {
+        try {
+          const { root } = transformerRef.current.transform(markmap || '')
+          mmRef.current.setData(root)
+          // fit may cause layout thrashing; keep it but guard with try/catch
+          try {
+            mmRef.current.fit()
+          } catch (err) {
+            console.warn('markmap fit failed:', err)
+          }
+        } catch (err) {
+          console.error('Markmap render error:', err)
+        }
+      })
+    }, debounceDelay)
+
+    return () => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current)
+      }
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current)
+      }
+    }
+  }, [markmap, debounceDelay, isReady])
+
+  return <svg aria-hidden="true" style={{ width: '100%', height: 400 }} ref={refSvg} />
 }
 
 export default MarkmapHooks

src/components/stateful/markmap/index.jsx

@@ -1,20 +1,77 @@
-import React, { useEffect } from 'react'
-import mermaid from 'mermaid'
+import React, { useEffect, useState, useRef, useId } from 'react'
 
-mermaid.initialize({
-  startOnLoad: true,
-  theme: 'dark',
-  securityLevel: 'loose',
-  fontFamily: 'monospace',
-})
+const MermaidHooks = ({ chart, config }) => {
+  const [svg, setSvg] = useState('')
+  const [error, setError] = useState(null)
+  const [loading, setLoading] = useState(true)
+  // Generate a unique ID for mermaid to use for rendering
+  // useId returns string with colons which might be problematic for selectors, strip them
+  const id = useId().replace(/:/g, '')
+  const mermaidId = `mermaid-${id}`
 
-const MermaidHooks = ({ chart }) => {
   useEffect(() => {
-    mermaid.contentLoaded()
-  }, [])
+    let isMounted = true
+
+    const renderChart = async () => {
+      if (!chart) return
+
+      setLoading(true)
+      setError(null)
+
+      try {
+        // Dynamic import for performance
+        const mermaid = (await import('mermaid')).default
+
+        // Initialize with default config or props
+        // Note: initialize is global, but safe to call repeatedly with same config
+        mermaid.initialize({
+          startOnLoad: false,
+          theme: 'default',
+          securityLevel: 'loose',
+          fontFamily: 'monospace',
+          ...config,
+        })
+
+        // Attempt to render
+        // mermaid.render returns an object { svg } in newer versions
+        const { svg: renderedSvg } = await mermaid.render(mermaidId, chart)
+
+        if (isMounted) {
+          setSvg(renderedSvg)
+          setLoading(false)
+        }
+      } catch (err) {
+        console.error('Mermaid render error:', err)
+        if (isMounted) {
+          setError(err.message || 'Failed to render chart')
+          setLoading(false)
+        }
+      }
+    }
+
+    // Debounce rendering slightly to avoid thrashing on rapid input
+    const timeoutId = setTimeout(renderChart, 200)
+
+    return () => {
+      isMounted = false
+      clearTimeout(timeoutId)
+    }
+  }, [chart, config, mermaidId])
+
   return (
-    <div className="mermaid" style={{ minHeight: 0, background: '#fff' }}>
-      {chart}
+    <div className="mermaid-wrapper" style={{ minHeight: 100, position: 'relative' }}>
+      {loading && !svg && (
+        <div className="absolute inset-0 flex items-center justify-center text-gray-400">Loading...</div>
+      )}
+
+      {error ? (
+        <div className="rounded border border-red-200 bg-red-50 p-4 text-red-500">
+          <p className="font-bold">Syntax Error:</p>
+          <pre className="mt-2 overflow-auto text-xs">{error}</pre>
+        </div>
+      ) : (
+        <div className="mermaid-output" dangerouslySetInnerHTML={{ __html: svg }} />
+      )}
     </div>
   )
 }