From 2a47e6a7057bf9989329860e208a41feb85aa8e0 Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Wed, 19 Nov 2025 21:52:34 +0800
Subject: [PATCH] optimize comparison container sizing logic and reduce CSS
 duplication

---
 .../src/views/tools/RemoveBackground.vue      | 111 ++++++------------
 1 file changed, 33 insertions(+), 78 deletions(-)

diff --git a/apps/jingrow/frontend/src/views/tools/RemoveBackground.vue b/apps/jingrow/frontend/src/views/tools/RemoveBackground.vue
index f37a072..f99f98a 100644
--- a/apps/jingrow/frontend/src/views/tools/RemoveBackground.vue
+++ b/apps/jingrow/frontend/src/views/tools/RemoveBackground.vue
@@ -170,7 +170,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, nextTick, watch, onMounted, onUnmounted } from 'vue'
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
 import { useMessage } from 'naive-ui'
 import axios from 'axios'
 import { t } from '@/shared/i18n'
@@ -220,55 +220,43 @@ const isDraggingSplitLine = ref(false)
 
 // 调整容器大小以匹配图片实际显示尺寸
 const adjustContainerSize = () => {
-  nextTick(() => {
-    if (!comparisonContainerRef.value) return
+  const container = comparisonContainerRef.value
+  if (!container) return
     
-    // 使用原图或结果图的尺寸（它们应该相同）
-    const img = originalImageRef.value || resultImageRef.value
-    if (!img) return
+  const img = originalImageRef.value || resultImageRef.value
+  if (!img) return
     
-    // 获取父元素 preview-section 的实际可用尺寸
-    const container = comparisonContainerRef.value
-    const previewSection = container.closest('.preview-section') as HTMLElement
-    if (!previewSection) return
+  // 获取父元素 preview-section 的实际可用尺寸
+  const previewSection = container.closest('.preview-section') as HTMLElement
+  if (!previewSection) return
     
-    const previewRect = previewSection.getBoundingClientRect()
-    // 考虑 padding (12px * 2 = 24px)
-    const maxAvailableWidth = Math.max(0, previewRect.width - 24)
-    const maxAvailableHeight = Math.max(0, previewRect.height - 24)
+  const previewRect = previewSection.getBoundingClientRect()
+  // 考虑 padding (12px * 2 = 24px)
+  const padding = 24
+  const maxAvailableWidth = Math.max(0, previewRect.width - padding)
+  const maxAvailableHeight = Math.max(0, previewRect.height - padding)
+  
+  if (maxAvailableWidth <= 0 || maxAvailableHeight <= 0) return
     
-    if (maxAvailableWidth <= 0 || maxAvailableHeight <= 0) return
+  // 等待图片加载完成
+  if (!img.complete) {
+    img.addEventListener('load', adjustContainerSize, { once: true })
+    return
+  }
     
-    // 等待图片加载完成
-    if (!img.complete) {
-      // 如果图片还没加载完成，等待加载完成后再计算
-      // 使用 once: true 确保只触发一次
-      img.addEventListener('load', adjustContainerSize, { once: true })
-      return
-    }
+  const { naturalWidth, naturalHeight } = img
+  if (naturalWidth === 0 || naturalHeight === 0) return
     
-    const naturalWidth = img.naturalWidth
-    const naturalHeight = img.naturalHeight
+  // 计算缩放比例，保持宽高比且不超过父元素可用空间
+  const scale = Math.min(
+    maxAvailableWidth / naturalWidth,
+    maxAvailableHeight / naturalHeight,
+    1 // 不放大
+  )
     
-    if (naturalWidth === 0 || naturalHeight === 0) return
-    
-    // 根据图片的自然尺寸和父元素的可用空间，计算合适的显示尺寸
-    // 保持图片宽高比，同时确保不超过父元素的可用空间
-    const scaleX = maxAvailableWidth / naturalWidth
-    const scaleY = maxAvailableHeight / naturalHeight
-    const scale = Math.min(scaleX, scaleY, 1) // 取较小的缩放比例，且不放大（不超过1）
-    
-    const displayWidth = naturalWidth * scale
-    const displayHeight = naturalHeight * scale
-    
-    // 确保最终尺寸不超过父元素的可用空间（双重保险）
-    const finalWidth = Math.min(displayWidth, maxAvailableWidth)
-    const finalHeight = Math.min(displayHeight, maxAvailableHeight)
-    
-    // 设置容器大小为计算出的尺寸
-    comparisonContainerRef.value.style.width = `${finalWidth}px`
-    comparisonContainerRef.value.style.height = `${finalHeight}px`
-  })
+  // 设置容器大小为计算出的尺寸
+  container.style.width = `${naturalWidth * scale}px`
+  container.style.height = `${naturalHeight * scale}px`
 }
 
 // 监听图片加载完成
@@ -973,7 +961,7 @@ h1 {
   justify-content: center;
   overflow: hidden;
   min-height: 0;
-  padding: 12px;
+  padding: 12px; /* 用于计算可用空间 */
 }
 
 
@@ -1008,8 +996,6 @@ h1 {
 .comparison-view {
   width: 100%;
   height: 100%;
-  max-width: 100%;
-  max-height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -1035,6 +1021,7 @@ h1 {
   background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
 }
 
+/* 所有对比图片容器的公共样式 */
 .comparison-image {
   position: absolute;
   top: 0;
@@ -1047,7 +1034,6 @@ h1 {
   
   img {
     display: block;
-    /* 图片限制在容器内，不超过父元素 */
     max-width: 100%;
     max-height: 100%;
     width: auto;
@@ -1057,44 +1043,13 @@ h1 {
 }
 
 .original-image {
-  /* 和 result-image 一样使用 absolute，确保填充 comparison-container */
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
   z-index: 1;
   /* clip-path 通过内联样式动态设置，用于裁剪显示区域 */
-  
-  img {
-    display: block;
-    /* 图片限制在容器内，不超过父元素 */
-    max-width: 100%;
-    max-height: 100%;
-    width: auto;
-    height: auto;
-    object-fit: contain;
-  }
 }
 
 .result-image {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
   z-index: 2;
   /* clip-path 通过内联样式动态设置，用于裁剪显示区域 */
-  
-  img {
-    display: block;
-    /* 图片限制在容器内，不超过父元素 */
-    max-width: 100%;
-    max-height: 100%;
-    width: auto;
-    height: auto;
-    object-fit: contain;
-  }
 }
 
 /* 拖动竖线 */