fix: 新增导出为图片功能，支持svg、png和jpg三种格式

Author: Louaq

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "latex-ocr-electron",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "LaTeX公式识别工具 - Electron版本",
   "author": "SimpleTex OCR",
   "main": "dist/electron/electron/main.js",
@@ -30,6 +30,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
+    "sharp": "^0.34.2",
     "styled-components": "^6.0.0"
   },
   "devDependencies": {
@@ -44,7 +45,6 @@
     "electron": "^27.0.0",
     "electron-builder": "^24.6.0",
     "react-scripts": "^5.0.1",
-    "sharp": "^0.34.2",
     "typescript": "^4.9.5",
     "wait-on": "^7.0.1"
   },

package.json

@@ -8,6 +8,7 @@ import ImageDisplay from './components/ImageDisplay';
 import LatexEditor from './components/LatexEditor';
 import StatusBar from './components/StatusBar';
 import CopyButton from './components/CopyButton';
+import ExportButton from './components/ExportButton';
 import ApiSettingsDialog from './components/ApiSettingsDialog';
 import ShortcutSettingsDialog from './components/ShortcutSettingsDialog';
 import HistoryDialog from './components/HistoryDialog';
@@ -1141,6 +1142,60 @@ function App() {
     }
   };
 
+  // 导出数学公式为图片
+  const handleExportFormula = async (format: 'svg' | 'png' | 'jpg') => {
+    if (!appState.latexCode.trim()) {
+      setAppState(prev => ({ 
+        ...prev, 
+        statusMessage: '❌ 请先识别或输入数学公式'
+      }));
+      return;
+    }
+
+    if (!window.electronAPI) {
+      setAppState(prev => ({ 
+        ...prev, 
+        statusMessage: '❌ 图片导出功能仅在桌面应用中可用'
+      }));
+      return;
+    }
+
+    try {
+      setAppState(prev => ({ 
+        ...prev, 
+        statusMessage: `🔄 正在导出为${format.toUpperCase()}格式...`
+      }));
+
+      const result = await window.electronAPI.exportFormulaImage(appState.latexCode, format);
+      
+      if (result.success) {
+        setAppState(prev => ({ 
+          ...prev, 
+          statusMessage: `✅ ${result.message}`
+        }));
+      } else {
+        setAppState(prev => ({ 
+          ...prev, 
+          statusMessage: `❌ ${result.message}`
+        }));
+      }
+
+      // 3秒后恢复状态
+      setTimeout(() => {
+        setAppState(prev => ({ 
+          ...prev, 
+          statusMessage: '⚡ 准备就绪'
+        }));
+      }, 3000);
+    } catch (error) {
+      console.error(`导出${format.toUpperCase()}失败:`, error);
+      setAppState(prev => ({ 
+        ...prev, 
+        statusMessage: `❌ 导出${format.toUpperCase()}失败`
+      }));
+    }
+  };
+
   if (!settings) {
     return <div>加载中...</div>;
   }
@@ -1180,6 +1235,10 @@ function App() {
               onCopy={handleCopy}
               disabled={!appState.latexCode.trim() || appState.isRecognizing}
             />
+            <ExportButton 
+              onExport={handleExportFormula}
+              disabled={!appState.latexCode.trim() || appState.isRecognizing}
+            />
           </ButtonContainer>
         </BottomSection>
       </MainContent>