add svg render & Image preview optimization (#8387)

Co-authored-by: crazywoola <427733928@qq.com>

web/app/components/base/svg-gallery/index.tsx

@@ -0,0 +1,79 @@
+import { useEffect, useRef, useState } from 'react'
+import { SVG } from '@svgdotjs/svg.js'
+import ImagePreview from '@/app/components/base/image-uploader/image-preview'
+
+export const SVGRenderer = ({ content }: { content: string }) => {
+  const svgRef = useRef<HTMLDivElement>(null)
+  const [imagePreview, setImagePreview] = useState('')
+  const [windowSize, setWindowSize] = useState({
+    width: typeof window !== 'undefined' ? window.innerWidth : 0,
+    height: typeof window !== 'undefined' ? window.innerHeight : 0,
+  })
+
+  const svgToDataURL = (svgElement: Element): string => {
+    const svgString = new XMLSerializer().serializeToString(svgElement)
+    const base64String = Buffer.from(svgString).toString('base64')
+    return `data:image/svg+xml;base64,${base64String}`
+  }
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowSize({ width: window.innerWidth, height: window.innerHeight })
+    }
+
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
+
+  useEffect(() => {
+    if (svgRef.current) {
+      try {
+        svgRef.current.innerHTML = ''
+        const draw = SVG().addTo(svgRef.current).size('100%', '100%')
+
+        const parser = new DOMParser()
+        const svgDoc = parser.parseFromString(content, 'image/svg+xml')
+        const svgElement = svgDoc.documentElement
+
+        if (!(svgElement instanceof SVGElement))
+          throw new Error('Invalid SVG content')
+
+        const originalWidth = parseInt(svgElement.getAttribute('width') || '400', 10)
+        const originalHeight = parseInt(svgElement.getAttribute('height') || '600', 10)
+        const scale = Math.min(windowSize.width / originalWidth, windowSize.height / originalHeight, 1)
+        const scaledWidth = originalWidth * scale
+        const scaledHeight = originalHeight * scale
+        draw.size(scaledWidth, scaledHeight)
+
+        const rootElement = draw.svg(content)
+        rootElement.scale(scale)
+
+        rootElement.click(() => {
+          setImagePreview(svgToDataURL(svgElement as Element))
+        })
+      }
+      catch (error) {
+        if (svgRef.current)
+          svgRef.current.innerHTML = 'Error rendering SVG. Wait for the image content to complete.'
+      }
+    }
+  }, [content, windowSize])
+
+  return (
+    <>
+      <div ref={svgRef} style={{
+        width: '100%',
+        height: '100%',
+        minHeight: '300px',
+        maxHeight: '80vh',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        cursor: 'pointer',
+      }} />
+      {imagePreview && (<ImagePreview url={imagePreview} title='Preview' onCancel={() => setImagePreview('')} />)}
+    </>
+  )
+}
+
+export default SVGRenderer