improve RemoveBackground tool UI/UX
This commit is contained in:
parent
cac901e235
commit
4bd17dd6e0
@ -36,90 +36,66 @@
|
||||
|
||||
<!-- 图片预览和处理区域 -->
|
||||
<div v-else class="preview-section">
|
||||
<div class="image-preview-container">
|
||||
<div class="preview-header">
|
||||
<h3>{{ t('Image Preview') }}</h3>
|
||||
<div class="header-actions">
|
||||
<n-button
|
||||
v-if="resultImage"
|
||||
size="medium"
|
||||
@click="handleDownload"
|
||||
class="download-btn"
|
||||
>
|
||||
<template #icon>
|
||||
<i class="fa fa-download"></i>
|
||||
</template>
|
||||
{{ t('Download') }}
|
||||
</n-button>
|
||||
<button class="change-image-btn" @click="resetUpload">
|
||||
<i class="fa fa-refresh"></i>
|
||||
{{ t('Change Image') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 单窗口对比视图 -->
|
||||
<div class="comparison-view" v-if="resultImage">
|
||||
<div class="comparison-container" ref="comparisonContainerRef">
|
||||
<!-- 原图（显示左侧部分） -->
|
||||
<div
|
||||
class="comparison-image original-image"
|
||||
:style="{ clipPath: `inset(0 ${100 - splitPosition}% 0 0)` }"
|
||||
>
|
||||
<img :src="uploadedImageUrl" alt="Original" />
|
||||
</div>
|
||||
|
||||
<!-- 去背景后的图片（显示右侧部分） -->
|
||||
<div
|
||||
class="comparison-image result-image"
|
||||
:style="{ clipPath: `inset(0 0 0 ${splitPosition}%)` }"
|
||||
>
|
||||
<img :src="resultImageUrl" alt="Result" />
|
||||
</div>
|
||||
|
||||
<!-- 拖动竖线 -->
|
||||
<div
|
||||
class="split-line"
|
||||
:class="{ 'dragging': isDraggingSplitLine }"
|
||||
:style="{ left: `${splitPosition}%` }"
|
||||
@mousedown.prevent.stop="handleSplitLineMouseDown"
|
||||
>
|
||||
<div class="split-line-handle">
|
||||
<i class="fa fa-arrows-h"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 处理中或未处理状态 -->
|
||||
<div v-else class="single-image-view">
|
||||
<div class="image-wrapper">
|
||||
<!-- 单窗口对比视图 -->
|
||||
<div class="comparison-view" v-if="resultImage">
|
||||
<div class="comparison-container" ref="comparisonContainerRef">
|
||||
<!-- 原图（显示左侧部分） -->
|
||||
<div
|
||||
class="comparison-image original-image"
|
||||
:style="{ clipPath: `inset(0 ${100 - splitPosition}% 0 0)` }"
|
||||
>
|
||||
<img :src="uploadedImageUrl" alt="Original" />
|
||||
<div v-if="processing" class="processing-overlay">
|
||||
<div class="spinner"></div>
|
||||
<p>{{ t('Processing...') }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 去背景后的图片（显示右侧部分） -->
|
||||
<div
|
||||
class="comparison-image result-image"
|
||||
:style="{ clipPath: `inset(0 0 0 ${splitPosition}%)` }"
|
||||
>
|
||||
<img :src="resultImageUrl" alt="Result" />
|
||||
</div>
|
||||
|
||||
<!-- 拖动竖线 -->
|
||||
<div
|
||||
class="split-line"
|
||||
:class="{ 'dragging': isDraggingSplitLine }"
|
||||
:style="{ left: `${splitPosition}%` }"
|
||||
@mousedown.prevent.stop="handleSplitLineMouseDown"
|
||||
>
|
||||
<div class="split-line-handle">
|
||||
<i class="fa fa-arrows-h"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 处理中或未处理状态 -->
|
||||
<div v-else class="single-image-view">
|
||||
<div class="image-wrapper">
|
||||
<img :src="uploadedImageUrl" alt="Original" />
|
||||
<div v-if="processing" class="processing-overlay">
|
||||
<div class="spinner"></div>
|
||||
<p>{{ t('Processing...') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 使用说明 -->
|
||||
<div class="info-section">
|
||||
<div class="info-card">
|
||||
<div class="info-icon">
|
||||
<i class="fa fa-info-circle"></i>
|
||||
</div>
|
||||
<div class="info-content">
|
||||
<h4>{{ t('How it works') }}</h4>
|
||||
<ul>
|
||||
<li>{{ t('Upload an image with a clear subject') }}</li>
|
||||
<li>{{ t('Click \"Remove Background\" to process') }}</li>
|
||||
<li>{{ t('Download the result with transparent background') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 操作按钮 -->
|
||||
<div v-if="uploadedImage" class="action-buttons">
|
||||
<button
|
||||
v-if="resultImage"
|
||||
class="action-btn download-btn"
|
||||
@click="handleDownload"
|
||||
>
|
||||
<i class="fa fa-download"></i>
|
||||
{{ t('Download') }}
|
||||
</button>
|
||||
<button class="action-btn change-image-btn" @click="resetUpload">
|
||||
<i class="fa fa-refresh"></i>
|
||||
{{ t('Change Image') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -128,7 +104,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { NButton, useMessage } from 'naive-ui'
|
||||
import { useMessage } from 'naive-ui'
|
||||
import axios from 'axios'
|
||||
import { t } from '@/shared/i18n'
|
||||
import { get_session_api_headers } from '@/shared/api/auth'
|
||||
@ -155,7 +131,7 @@ const resultImageUrl = computed(() => {
|
||||
// 状态
|
||||
const isDragging = ref(false)
|
||||
const processing = ref(false)
|
||||
const splitPosition = ref(50) // 分割线位置（百分比）
|
||||
const splitPosition = ref(0) // 分割线位置（百分比），0表示最左边，默认只显示结果图
|
||||
const comparisonContainerRef = ref<HTMLElement | null>(null)
|
||||
const isDraggingSplitLine = ref(false)
|
||||
|
||||
@ -210,7 +186,7 @@ const processFile = (file: File) => {
|
||||
|
||||
uploadedImage.value = file
|
||||
resultImage.value = ''
|
||||
splitPosition.value = 50 // 重置分割线位置
|
||||
splitPosition.value = 0 // 重置分割线位置到最左边，默认显示完整结果图
|
||||
|
||||
// 创建预览URL
|
||||
const reader = new FileReader()
|
||||
@ -227,7 +203,7 @@ const resetUpload = () => {
|
||||
uploadedImage.value = null
|
||||
uploadedImageUrl.value = ''
|
||||
resultImage.value = ''
|
||||
splitPosition.value = 50
|
||||
splitPosition.value = 0
|
||||
if (fileInputRef.value) {
|
||||
fileInputRef.value.value = ''
|
||||
}
|
||||
@ -492,6 +468,15 @@ h1 {
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
/* 当显示图片时，移除 padding 和边框 */
|
||||
.upload-section:has(.preview-section) {
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.upload-area {
|
||||
border: 2px dashed #cbd5e1;
|
||||
border-radius: 12px;
|
||||
@ -560,47 +545,11 @@ h1 {
|
||||
/* 预览区域 */
|
||||
.preview-section {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.preview-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24px;
|
||||
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #0f172a;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.change-image-btn {
|
||||
height: 36px;
|
||||
padding: 0 16px;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
background: white;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: #1fc76f;
|
||||
color: #1fc76f;
|
||||
background: #f0fdf4;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-grid {
|
||||
display: grid;
|
||||
@ -632,7 +581,6 @@ h1 {
|
||||
/* 对比视图 */
|
||||
.comparison-view {
|
||||
width: 100%;
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -640,11 +588,11 @@ h1 {
|
||||
|
||||
.comparison-container {
|
||||
position: relative;
|
||||
width: 60%;
|
||||
max-width: 600px;
|
||||
width: min(90vw, 1200px, calc(100vh - 200px));
|
||||
aspect-ratio: 1;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e5e7eb;
|
||||
background:
|
||||
linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
|
||||
linear-gradient(-45deg, #f1f5f9 25%, transparent 25%),
|
||||
@ -727,7 +675,6 @@ h1 {
|
||||
/* 单图视图 */
|
||||
.single-image-view {
|
||||
width: 100%;
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -735,11 +682,11 @@ h1 {
|
||||
|
||||
.image-wrapper {
|
||||
position: relative;
|
||||
width: 60%;
|
||||
max-width: 600px;
|
||||
width: min(90vw, 1200px, calc(100vh - 200px));
|
||||
aspect-ratio: 1;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e5e7eb;
|
||||
background:
|
||||
linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
|
||||
linear-gradient(-45deg, #f1f5f9 25%, transparent 25%),
|
||||
@ -819,104 +766,44 @@ h1 {
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.process-btn,
|
||||
.download-btn {
|
||||
min-width: 180px;
|
||||
height: 48px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(31, 199, 111, 0.2);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(31, 199, 111, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.process-btn {
|
||||
background: linear-gradient(135deg, #1fc76f 0%, #16a085 100%);
|
||||
border: none;
|
||||
color: white;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: linear-gradient(135deg, #1dd87f 0%, #1ab894 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
background: white;
|
||||
border: 2px solid #1fc76f;
|
||||
color: #1fc76f;
|
||||
|
||||
&:hover {
|
||||
background: #f0fdf4;
|
||||
border-color: #1dd87f;
|
||||
color: #1dd87f;
|
||||
}
|
||||
}
|
||||
|
||||
/* 信息卡片 */
|
||||
.info-section {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
width: 40px;
|
||||
.action-btn {
|
||||
min-width: 140px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
background: #ecfdf5;
|
||||
display: flex;
|
||||
padding: 0 20px;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
background: white;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
i {
|
||||
font-size: 20px;
|
||||
color: #1fc76f;
|
||||
}
|
||||
}
|
||||
|
||||
.info-content {
|
||||
flex: 1;
|
||||
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #0f172a;
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 8px;
|
||||
&:hover {
|
||||
border-color: #1fc76f;
|
||||
color: #1fc76f;
|
||||
background: #f0fdf4;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(31, 199, 111, 0.15);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.remove-background-page {
|
||||
@ -947,8 +834,7 @@ h1 {
|
||||
.action-buttons {
|
||||
flex-direction: column;
|
||||
|
||||
.process-btn,
|
||||
.download-btn {
|
||||
.action-btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user