jlocal/jingrow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

optimize RemoveBackground for single-screen layout

Browse Source
This commit is contained in:
jingrow 2025-11-19 18:33:00 +08:00
parent 96436357eb
commit 563581ed91
1 changed files with 42 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
apps/jingrow/frontend/src/views/tools/RemoveBackground.vue
View File

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