From d38fac4451e1493579de578a1be5c3fb389eacb4 Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Wed, 19 Nov 2025 19:15:46 +0800
Subject: [PATCH] convert RemoveBackground to single-screen layout without
 scrollbars

---
 .../src/views/tools/RemoveBackground.vue      | 160 +++++++++++++-----
 1 file changed, 116 insertions(+), 44 deletions(-)

diff --git a/apps/jingrow/frontend/src/views/tools/RemoveBackground.vue b/apps/jingrow/frontend/src/views/tools/RemoveBackground.vue
index 619c140..b761e8b 100644
--- a/apps/jingrow/frontend/src/views/tools/RemoveBackground.vue
+++ b/apps/jingrow/frontend/src/views/tools/RemoveBackground.vue
@@ -546,10 +546,12 @@ const removeHistoryItem = (index: number) => {
 <style scoped lang="scss">
 .remove-background-page {
   width: 100%;
-  min-height: 100vh;
+  height: 100vh;
   display: flex;
   flex-direction: column;
   position: relative;
+  overflow: hidden;
+  background: #f8fafc;
 }
 
 .global-drag-overlay {
@@ -657,24 +659,32 @@ const removeHistoryItem = (index: number) => {
   }
 }
 
-.remove-background-page > .page-content {
-  width: 100%;
-  max-width: 1000px;
-  margin: 0 auto;
-  padding: 16px;
-}
-
 .page-header {
+  flex-shrink: 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  padding: 16px 24px;
+  padding: 12px 16px;
+  border-bottom: 1px solid #e5e7eb;
+  background: white;
+}
+
+.page-content {
+  flex: 1;
+  width: 100%;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 12px 16px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
 }
 
 .page-header h2 {
-  font-size: 24px;
-  font-weight: 700;
+  font-size: 20px;
+  font-weight: 600;
   color: #1f2937;
   margin: 0;
 }
@@ -756,19 +766,31 @@ h1 {
 }
 
 .page-content {
-  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
 }
 
 .tool-container {
+  flex: 1;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
 }
 
 /* 上传区域 */
 .upload-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
   background: white;
-  border-radius: 16px;
-  padding: 32px;
+  border-radius: 12px;
+  padding: 24px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
   border: 1px solid #e5e7eb;
 }
@@ -783,13 +805,18 @@ h1 {
 }
 
 .upload-area {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   border: 2px dashed #cbd5e1;
   border-radius: 12px;
-  padding: 64px 32px;
+  padding: 32px;
   text-align: center;
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   background: #fafbfc;
+  min-height: 0;
 
   &:hover {
     border-color: #1fc76f;
@@ -812,9 +839,9 @@ h1 {
 }
 
 .upload-icon {
-  width: 80px;
-  height: 80px;
-  border-radius: 20px;
+  width: 64px;
+  height: 64px;
+  border-radius: 16px;
   background: linear-gradient(135deg, #1fc76f 0%, #16a085 100%);
   display: flex;
   align-items: center;
@@ -823,20 +850,20 @@ h1 {
   box-shadow: 0 4px 12px rgba(31, 199, 111, 0.25);
 
   i {
-    font-size: 40px;
+    font-size: 32px;
     color: white;
   }
 }
 
 .upload-area h3 {
-  font-size: 20px;
+  font-size: 18px;
   font-weight: 600;
   color: #0f172a;
   margin: 0;
 }
 
 .upload-area p {
-  font-size: 14px;
+  font-size: 13px;
   color: #64748b;
   margin: 0;
 }
@@ -849,10 +876,15 @@ h1 {
 
 /* 预览区域 */
 .preview-section {
+  flex: 1;
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  min-height: 0;
+  padding: 12px;
 }
 
 
@@ -886,6 +918,7 @@ h1 {
 /* 对比视图 */
 .comparison-view {
   width: 100%;
+  height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -893,10 +926,12 @@ h1 {
 
 .comparison-container {
   position: relative;
-  width: min(90vw, 1200px, calc(100vh - 200px));
-  aspect-ratio: 1;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
   overflow: hidden;
-  border-radius: 12px;
+  border-radius: 8px;
   border: 1px solid #e5e7eb;
   background: 
     linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
@@ -980,6 +1015,7 @@ h1 {
 /* 单图视图 */
 .single-image-view {
   width: 100%;
+  height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -987,10 +1023,12 @@ h1 {
 
 .image-wrapper {
   position: relative;
-  width: min(90vw, 1200px, calc(100vh - 200px));
-  aspect-ratio: 1;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
   overflow: hidden;
-  border-radius: 12px;
+  border-radius: 8px;
   border: 1px solid #e5e7eb;
   background: 
     linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
@@ -1067,11 +1105,11 @@ h1 {
 
 /* 底部历史记录栏 */
 .history-bar {
+  flex-shrink: 0;
   width: 100%;
-  padding: 16px 0 0;
+  padding: 12px 0;
   background: transparent;
-  border-top: none;
-  margin-top: 24px;
+  border-top: 1px solid #e5e7eb;
   display: flex;
   justify-content: center;
 }
@@ -1105,8 +1143,8 @@ h1 {
 
 .history-item {
   flex-shrink: 0;
-  width: 64px;
-  height: 64px;
+  width: 56px;
+  height: 56px;
   border-radius: 8px;
   cursor: pointer;
   transition: all 0.2s ease;
@@ -1235,34 +1273,68 @@ h1 {
 
 /* 响应式设计 */
 @media (max-width: 768px) {
-  .remove-background-page {
-    padding: 12px;
+  .page-header {
+    padding: 10px 12px;
+  }
+
+  .page-header h2 {
+    font-size: 18px;
+  }
+
+  .page-content {
+    padding: 8px 12px;
   }
 
   .upload-section {
-    padding: 20px;
+    padding: 16px;
   }
 
   .upload-area {
-    padding: 40px 20px;
+    padding: 24px 16px;
   }
 
-  h1 {
-    font-size: 24px;
-  }
-
-  .page-icon {
-    width: 48px;
-    height: 48px;
+  .upload-icon {
+    width: 56px;
+    height: 56px;
 
     i {
-      font-size: 24px;
+      font-size: 28px;
     }
   }
 
+  .upload-area h3 {
+    font-size: 16px;
+  }
+
+  .upload-area p {
+    font-size: 12px;
+  }
+
+  .preview-section {
+    padding: 8px;
+  }
+
+  .history-bar {
+    padding: 10px 0;
+  }
+
+  .history-item {
+    width: 48px;
+    height: 48px;
+  }
+
   .history-scroll-container {
     gap: 8px;
     padding: 0 8px;
   }
+
+  .toolbar-btn {
+    width: 32px;
+    height: 32px;
+
+    i {
+      font-size: 12px;
+    }
+  }
 }
 </style>