diff --git a/apps/desktop/src-tauri/src/data/models/outfit_image.rs b/apps/desktop/src-tauri/src/data/models/outfit_image.rs
index 53fbf89..10c2ae7 100644
--- a/apps/desktop/src-tauri/src/data/models/outfit_image.rs
+++ b/apps/desktop/src-tauri/src/data/models/outfit_image.rs
@@ -4,6 +4,7 @@ use uuid::Uuid;
 
 /// 穿搭图片生成状态
 #[derive(Debug, Clone, Serialize, Deserialize, PartialEq)]
+#[serde(rename_all = "lowercase")]
 pub enum OutfitImageStatus {
     Pending,
     Processing,
diff --git a/apps/desktop/src/components/ImagePreviewModal.tsx b/apps/desktop/src/components/ImagePreviewModal.tsx
index 6345276..f19d373 100644
--- a/apps/desktop/src/components/ImagePreviewModal.tsx
+++ b/apps/desktop/src/components/ImagePreviewModal.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import {
   X,
   Download,
@@ -130,7 +131,14 @@ export const ImagePreviewModal: React.FC<ImagePreviewModalProps> = ({
   const categories = imageData?.categories || [];
   const releaseDate = imageData?.releaseDate;
 
-  return (
+  // 获取modal-root容器
+  const modalRoot = document.getElementById('modal-root');
+  if (!modalRoot) {
+    console.error('Modal root element not found');
+    return null;
+  }
+
+  const modalContent = (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75">
       {/* 模态框背景 */}
       <div 
@@ -336,6 +344,8 @@ export const ImagePreviewModal: React.FC<ImagePreviewModalProps> = ({
       </div>
     </div>
   );
+
+  return createPortal(modalContent, modalRoot);
 };
 
 export default ImagePreviewModal;