From c489d4194183f75fa05310951557ace8d8d4540b Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Sun, 4 Jan 2026 22:41:47 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=89=8B=E6=9C=BA?=
 =?UTF-8?q?=E7=AB=AF=E5=9B=BE=E7=89=87=E7=AD=89=E6=AF=94=E4=BE=8B=E7=BC=A9?=
 =?UTF-8?q?=E5=B0=8F=E5=92=8C=E6=8B=96=E6=8B=BD=E6=8C=89=E9=92=AE=E8=A7=A6?=
 =?UTF-8?q?=E6=91=B8=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除 .comparison-image img 的 min-width 和 min-height，修复手机端图片无法等比例缩小的问题
- 为拖拽分割线添加触摸事件支持（touchstart/touchmove/touchend），使手机端可以正常拖拽对比视图
---
 src/views/HomePage.vue                        | 33 ++++++++++++-------
 .../remove_background/remove_background.vue   | 28 +++++++++++-----
 2 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index 8d735c7..fbd2b10 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -780,27 +780,38 @@ const adjustContainerSize = async () => {
 
 watch([uploadedImageUrl, resultImageUrl], adjustContainerSize, { immediate: true })
 
-const handleSplitLineMouseDown = (e: MouseEvent) => {
+const handleSplitLineMouseDown = (e: MouseEvent | TouchEvent) => {
   e.preventDefault()
   isDraggingSplitLine.value = true
   
-  const handleMouseMove = (moveEvent: MouseEvent) => {
+  const getClientX = (event: MouseEvent | TouchEvent): number => {
+    if ('touches' in event && event.touches.length > 0) {
+      return event.touches[0].clientX
+    }
+    return (event as MouseEvent).clientX
+  }
+  
+  const handleMove = (moveEvent: MouseEvent | TouchEvent) => {
     if (!comparisonContainerRef.value || !isDraggingSplitLine.value) return
     
     const rect = comparisonContainerRef.value.getBoundingClientRect()
-    const x = moveEvent.clientX - rect.left
+    const x = getClientX(moveEvent) - rect.left
     const percentage = Math.max(0, Math.min(100, (x / rect.width) * 100))
     splitPosition.value = percentage
   }
   
-  const handleMouseUp = () => {
+  const handleEnd = () => {
     isDraggingSplitLine.value = false
-    document.removeEventListener('mousemove', handleMouseMove)
-    document.removeEventListener('mouseup', handleMouseUp)
+    document.removeEventListener('mousemove', handleMove as EventListener)
+    document.removeEventListener('mouseup', handleEnd)
+    document.removeEventListener('touchmove', handleMove as EventListener)
+    document.removeEventListener('touchend', handleEnd)
   }
   
-  document.addEventListener('mousemove', handleMouseMove)
-  document.addEventListener('mouseup', handleMouseUp)
+  document.addEventListener('mousemove', handleMove as EventListener)
+  document.addEventListener('mouseup', handleEnd)
+  document.addEventListener('touchmove', handleMove as EventListener, { passive: false })
+  document.addEventListener('touchend', handleEnd)
 }
 
 const handlePaste = async (event: ClipboardEvent) => {
@@ -1088,7 +1099,7 @@ onUnmounted(() => {
                     <div class="comparison-image result-image" :style="{ clipPath: `inset(0 0 0 ${splitPosition}%)` }">
                       <img ref="resultImageRef" :src="resultImageUrl" :alt="t('Background Removed')" @load="adjustContainerSize" />
                     </div>
-                    <div class="split-line" :class="{ dragging: isDraggingSplitLine }" :style="{ left: `${splitPosition}%` }" @mousedown.prevent.stop="handleSplitLineMouseDown">
+                    <div class="split-line" :class="{ dragging: isDraggingSplitLine }" :style="{ left: `${splitPosition}%` }" @mousedown.prevent.stop="handleSplitLineMouseDown" @touchstart.prevent.stop="handleSplitLineMouseDown">
                       <div class="split-line-handle">
                         <i class="fa fa-arrows-h"></i>
                       </div>
@@ -1355,7 +1366,7 @@ onUnmounted(() => {
                               <div class="comparison-image result-image" :style="{ clipPath: `inset(0 0 0 ${splitPosition}%)` }">
                                 <img ref="resultImageRef" :src="resultImageUrl" :alt="t('Background Removed')" @load="adjustContainerSize" />
                               </div>
-                              <div class="split-line" :class="{ dragging: isDraggingSplitLine }" :style="{ left: `${splitPosition}%` }" @mousedown.prevent.stop="handleSplitLineMouseDown">
+                              <div class="split-line" :class="{ dragging: isDraggingSplitLine }" :style="{ left: `${splitPosition}%` }" @mousedown.prevent.stop="handleSplitLineMouseDown" @touchstart.prevent.stop="handleSplitLineMouseDown">
                                 <div class="split-line-handle">
                                   <i class="fa fa-arrows-h"></i>
                                 </div>
@@ -2331,8 +2342,6 @@ onUnmounted(() => {
   
   img {
     display: block;
-    min-width: 620px;
-    min-height: 620px;
     max-width: 100%;
     max-height: 100%;
     width: auto;
diff --git a/src/views/tools/remove_background/remove_background.vue b/src/views/tools/remove_background/remove_background.vue
index 3a694d8..90649fa 100644
--- a/src/views/tools/remove_background/remove_background.vue
+++ b/src/views/tools/remove_background/remove_background.vue
@@ -117,6 +117,7 @@
                   :class="{ 'dragging': isDraggingSplitLine }"
                   :style="{ left: `${splitPosition}%` }"
                   @mousedown.prevent.stop="handleSplitLineMouseDown"
+                  @touchstart.prevent.stop="handleSplitLineMouseDown"
                 >
                   <div class="split-line-handle">
                     <i class="fa fa-arrows-h"></i>
@@ -568,27 +569,38 @@ const getHistoryThumbnailUrl = (item: HistoryItem): string => {
   return item.originalImageUrl
 }
 
-const handleSplitLineMouseDown = (e: MouseEvent) => {
+const handleSplitLineMouseDown = (e: MouseEvent | TouchEvent) => {
   e.preventDefault()
   isDraggingSplitLine.value = true
   
-  const handleMouseMove = (moveEvent: MouseEvent) => {
+  const getClientX = (event: MouseEvent | TouchEvent): number => {
+    if ('touches' in event && event.touches.length > 0) {
+      return event.touches[0].clientX
+    }
+    return (event as MouseEvent).clientX
+  }
+  
+  const handleMove = (moveEvent: MouseEvent | TouchEvent) => {
     if (!comparisonContainerRef.value || !isDraggingSplitLine.value) return
     
     const rect = comparisonContainerRef.value.getBoundingClientRect()
-    const x = moveEvent.clientX - rect.left
+    const x = getClientX(moveEvent) - rect.left
     const percentage = Math.max(0, Math.min(100, (x / rect.width) * 100))
     splitPosition.value = percentage
   }
   
-  const handleMouseUp = () => {
+  const handleEnd = () => {
     isDraggingSplitLine.value = false
-    document.removeEventListener('mousemove', handleMouseMove)
-    document.removeEventListener('mouseup', handleMouseUp)
+    document.removeEventListener('mousemove', handleMove as EventListener)
+    document.removeEventListener('mouseup', handleEnd)
+    document.removeEventListener('touchmove', handleMove as EventListener)
+    document.removeEventListener('touchend', handleEnd)
   }
   
-  document.addEventListener('mousemove', handleMouseMove)
-  document.addEventListener('mouseup', handleMouseUp)
+  document.addEventListener('mousemove', handleMove as EventListener)
+  document.addEventListener('mouseup', handleEnd)
+  document.addEventListener('touchmove', handleMove as EventListener, { passive: false })
+  document.addEventListener('touchend', handleEnd)
 }
 
 const handleRemoveBackground = async () => {