feat: handle image rendor

src/components/ExportSidebar.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { X, Check, Copy, Download, Code2, Image as ImageIcon, FileText, Loader2 } from 'lucide-react';
 import { RecognitionResult } from '../types';
 import { convertMathmlToOmml, wrapOmmlForClipboard } from '../lib/ommlConverter';
+import { generateImageFromElement, copyImageToClipboard, downloadImage } from '../lib/imageGenerator';
 import { API_BASE_URL } from '../config/env';
 import { tokenManager } from '../lib/api';
 
@@ -59,36 +60,21 @@ export default function ExportSidebar({ isOpen, onClose, result }: ExportSidebar
       id: 'rendered_image',
       label: 'Rendered Image',
       category: 'Image',
-      getContent: (r) => r.rendered_image_path,
-      // User requested "Copy button" for Image. 
-      // Special handling might be needed for actual image data copy, 
-      // but standard clipboard writeText is for text.
-      // If we want to copy image data, we need to fetch it. 
-      // For now, I'll stick to the pattern, but if it's a URL, copying the URL is the fallback.
-      // However, usually "Copy Image" implies the binary. 
-      // Let's treat it as a special case in handleAction.
+      getContent: (r) => r.markdown_content,
     },
     // File Category
     {
       id: 'docx',
       label: 'DOCX',
       category: 'File',
-      getContent: (r) => r.markdown_content, // Placeholder content for file conversion
+      getContent: (r) => r.markdown_content,
       isDownload: true,
       extension: 'docx'
-    },
-    {
-      id: 'pdf',
-      label: 'PDF',
-      category: 'File',
-      getContent: (r) => r.markdown_content, // Placeholder
-      isDownload: true,
-      extension: 'pdf'
     }
   ];
 
-  // Handle DOCX/PDF export via API
-  const handleFileExport = async (type: 'docx' | 'pdf') => {
+  // Handle DOCX export via API
+  const handleFileExport = async (type: 'docx') => {
     if (!result?.id) return;
 
     setExportingId(type);
@@ -136,10 +122,49 @@ export default function ExportSidebar({ isOpen, onClose, result }: ExportSidebar
     }
   };
 
+  // Handle image generation from Markdown preview
+  const handleImageGeneration = async (action: 'copy' | 'download') => {
+    // We capture the rendered result directly from the DOM
+    const elementId = 'markdown-preview-content';
+
+    setExportingId('rendered_image');
+
+    try {
+      const dataUrl = await generateImageFromElement(elementId, {
+        format: 'png',
+        scale: 2,
+        padding: 24,
+      }) as string;
+
+      if (action === 'copy') {
+        await copyImageToClipboard(dataUrl);
+      } else {
+        downloadImage(dataUrl, 'rendered_image.png');
+      }
+
+      setCopiedId('rendered_image');
+      setTimeout(() => {
+        setCopiedId(null);
+        onClose();
+      }, 1000);
+    } catch (err) {
+      console.error('Failed to generate image:', err);
+      alert(`生成图片失败: ${err}`);
+    } finally {
+      setExportingId(null);
+    }
+  };
+
   const handleAction = async (option: ExportOption) => {
-    // Handle DOCX/PDF export via API
-    if (option.id === 'docx' || option.id === 'pdf') {
-      await handleFileExport(option.id as 'docx' | 'pdf');
+    // Handle DOCX export via API
+    if (option.id === 'docx') {
+      await handleFileExport('docx');
+      return;
+    }
+
+    // Handle image generation from Markdown
+    if (option.id === 'rendered_image') {
+      await handleImageGeneration('copy');
       return;
     }
 
@@ -159,27 +184,10 @@ export default function ExportSidebar({ isOpen, onClose, result }: ExportSidebar
 
     if (!content) return;
 
+    setExportingId(option.id);
+
     try {
-      if (option.category === 'Image' && !option.isDownload) {
-        // Handle Image Copy
-        if (content.startsWith('http') || content.startsWith('blob:')) {
-          try {
-            const response = await fetch(content);
-            const blob = await response.blob();
-            await navigator.clipboard.write([
-              new ClipboardItem({
-                [blob.type]: blob
-              })
-            ]);
-          } catch (err) {
-            console.error('Failed to copy image:', err);
-            // Fallback to copying URL
-            await navigator.clipboard.writeText(content);
-          }
-        } else {
-          await navigator.clipboard.writeText(content);
-        }
-      } else if (option.isDownload) {
+      if (option.isDownload) {
         // Simulate download (for other file types if any)
         const blob = new Blob([content], { type: 'text/plain' });
         const url = URL.createObjectURL(blob);
@@ -199,10 +207,12 @@ export default function ExportSidebar({ isOpen, onClose, result }: ExportSidebar
       setTimeout(() => {
         setCopiedId(null);
         onClose(); // Auto close after action
-      }, 1000); // Small delay to show "Copied" state before closing
+      }, 1000);
 
     } catch (err) {
       console.error('Action failed:', err);
+    } finally {
+      setExportingId(null);
     }
   };