From 563581ed916b53b9d2b57b37198fdf604e5c0fca Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Wed, 19 Nov 2025 18:33:00 +0800
Subject: [PATCH] optimize RemoveBackground for single-screen layout

---
 .../src/views/tools/RemoveBackground.vue      | 46 +++++++++++++++++--
 1 file changed, 42 insertions(+), 4 deletions(-)

diff --git a/apps/jingrow/frontend/src/views/tools/RemoveBackground.vue b/apps/jingrow/frontend/src/views/tools/RemoveBackground.vue
index 619c140..c6c787e 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: 100%;
+  max-height: calc(100vh - 64px - 40px); /* header 64px + content-wrapper padding 40px */
   display: flex;
   flex-direction: column;
   position: relative;
+  overflow: hidden;
 }
 
 .global-drag-overlay {
@@ -662,6 +664,11 @@ const removeHistoryItem = (index: number) => {
   max-width: 1000px;
   margin: 0 auto;
   padding: 16px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0; /* 关键：允许 flex 子元素缩小 */
 }
 
 .page-header {
@@ -670,6 +677,7 @@ const removeHistoryItem = (index: number) => {
   align-items: center;
   width: 100%;
   padding: 16px 24px;
+  flex-shrink: 0; /* 防止 header 被压缩 */
 }
 
 .page-header h2 {
@@ -762,6 +770,9 @@ h1 {
 .tool-container {
   display: flex;
   flex-direction: column;
+  flex: 1;
+  min-height: 0; /* 关键：允许 flex 子元素缩小 */
+  overflow: hidden;
 }
 
 /* 上传区域 */
@@ -771,6 +782,11 @@ h1 {
   padding: 32px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
   border: 1px solid #e5e7eb;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0; /* 关键：允许 flex 子元素缩小 */
+  overflow: hidden;
 }
 
 /* 当显示图片时，移除 padding 和边框 */
@@ -790,6 +806,11 @@ h1 {
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   background: #fafbfc;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 0;
 
   &:hover {
     border-color: #1fc76f;
@@ -850,9 +871,13 @@ h1 {
 /* 预览区域 */
 .preview-section {
   width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
+  min-height: 0; /* 关键：允许 flex 子元素缩小 */
+  overflow: hidden;
 }
 
 
@@ -886,14 +911,19 @@ h1 {
 /* 对比视图 */
 .comparison-view {
   width: 100%;
+  height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
+  min-height: 0; /* 关键：允许 flex 子元素缩小 */
 }
 
 .comparison-container {
   position: relative;
-  width: min(90vw, 1200px, calc(100vh - 200px));
+  width: 100%;
+  height: 100%;
+  max-width: min(90vw, 1200px);
+  max-height: 100%;
   aspect-ratio: 1;
   overflow: hidden;
   border-radius: 12px;
@@ -980,14 +1010,19 @@ h1 {
 /* 单图视图 */
 .single-image-view {
   width: 100%;
+  height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
+  min-height: 0; /* 关键：允许 flex 子元素缩小 */
 }
 
 .image-wrapper {
   position: relative;
-  width: min(90vw, 1200px, calc(100vh - 200px));
+  width: 100%;
+  height: 100%;
+  max-width: min(90vw, 1200px);
+  max-height: 100%;
   aspect-ratio: 1;
   overflow: hidden;
   border-radius: 12px;
@@ -1002,6 +1037,8 @@ h1 {
   display: flex;
   align-items: center;
   justify-content: center;
+  /* 确保容器能够根据可用空间自适应 */
+  object-fit: contain;
 
   img {
     width: 100%;
@@ -1071,7 +1108,8 @@ h1 {
   padding: 16px 0 0;
   background: transparent;
   border-top: none;
-  margin-top: 24px;
+  margin-top: auto; /* 使用 auto margin 推到底部 */
+  flex-shrink: 0; /* 防止被压缩 */
   display: flex;
   justify-content: center;
 }