From 973ccf940a876d738fc0c6a32b7149315be3151e Mon Sep 17 00:00:00 2001
From: imeepos <imeepos@sker.com>
Date: Wed, 30 Jul 2025 22:38:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=A9=BF=E6=90=AD=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E9=A2=84=E8=A7=88=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修复OutfitImageStatus枚举序列化问题，添加serde rename_all lowercase
- 修改ImagePreviewModal使用Portal渲染到modal-root容器
- 解决图片预览弹框无法显示的问题
- 确保状态正确显示为已完成而不是未知
---
 .../src-tauri/src/data/models/outfit_image.rs        |  1 +
 apps/desktop/src/components/ImagePreviewModal.tsx    | 12 +++++++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

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;