From d8ee975615176ed2df61b66e1b5ac40843c9ba4c Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Sun, 21 Dec 2025 16:20:52 +0800
Subject: [PATCH] fix: align image container sizing and page width consistency

---
 apps/jingrow/frontend/src/views/HomePage.vue | 49 +++++++-------------
 1 file changed, 17 insertions(+), 32 deletions(-)

diff --git a/apps/jingrow/frontend/src/views/HomePage.vue b/apps/jingrow/frontend/src/views/HomePage.vue
index 79304f5..6d68882 100644
--- a/apps/jingrow/frontend/src/views/HomePage.vue
+++ b/apps/jingrow/frontend/src/views/HomePage.vue
@@ -295,37 +295,28 @@ const adjustContainerSize = async () => {
         const maxAvailableWidth = Math.max(0, previewRect.width - padding)
         const maxAvailableHeight = Math.max(0, previewRect.height - padding)
         
-        // 如果高度为0或太小，多次重试
-        if (maxAvailableWidth <= 0 || maxAvailableHeight <= 0 || maxAvailableHeight < 100) {
+        if (maxAvailableWidth > 0 && maxAvailableHeight > 0 && maxAvailableHeight >= 100) {
+          if (img.complete) {
+            const { naturalWidth, naturalHeight } = img
+            if (naturalWidth > 0 && naturalHeight > 0) {
+              const scale = Math.min(
+                maxAvailableWidth / naturalWidth,
+                maxAvailableHeight / naturalHeight,
+                1
+              )
+              singleWrapper.style.width = `${naturalWidth * scale}px`
+              singleWrapper.style.height = `${naturalHeight * scale}px`
+            }
+          } else {
+            img.addEventListener('load', adjustContainerSize, { once: true })
+          }
+        } else {
           setTimeout(adjustContainerSize, 100)
-          return
         }
-        
-        if (!img.complete) {
-          img.addEventListener('load', adjustContainerSize, { once: true })
-          return
-        }
-        
-        const { naturalWidth, naturalHeight } = img
-        if (naturalWidth === 0 || naturalHeight === 0) {
-          setTimeout(adjustContainerSize, 100)
-          return
-        }
-        
-        const scale = Math.min(
-          maxAvailableWidth / naturalWidth,
-          maxAvailableHeight / naturalHeight,
-          1
-        )
-        
-        singleWrapper.style.width = `${naturalWidth * scale}px`
-        singleWrapper.style.height = `${naturalHeight * scale}px`
       } else {
-        // 如果找不到 preview-section，延迟重试
         setTimeout(adjustContainerSize, 100)
       }
     } else {
-      // 如果图片还没有加载，延迟重试
       setTimeout(adjustContainerSize, 100)
     }
   }
@@ -843,8 +834,6 @@ onUnmounted(() => {
 
 .tool-page {
   background: white;
-  border-radius: 12px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -1113,20 +1102,18 @@ onUnmounted(() => {
 .preview-section {
   flex: 1;
   width: 100%;
-  min-height: 600px; /* 设置更大的最小高度 */
-  height: auto; /* 允许自动增长 */
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   overflow: hidden;
+  min-height: 0;
   padding: 12px;
 }
 
 .comparison-view {
   width: 100%;
   height: 100%;
-  min-height: 600px; /* 确保对比视图也有足够高度 */
   display: flex;
   justify-content: center;
   align-items: center;
@@ -1138,7 +1125,6 @@ onUnmounted(() => {
   display: inline-block;
   max-width: 100%;
   max-height: 100%;
-  min-height: 500px; /* 设置最小高度确保容器足够大 */
   overflow: hidden;
   border-radius: 8px;
   border: 1px solid #e5e7eb;
@@ -1236,7 +1222,6 @@ onUnmounted(() => {
   display: inline-block;
   max-width: 100%;
   max-height: 100%;
-  min-height: 500px;
   overflow: hidden;
   border-radius: 8px;
   border: 1px solid #e5e7eb;