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

redesign upload UI with simplified button style

Browse Source
This commit is contained in:
jingrow 2025-11-22 00:10:43 +08:00
parent b9c64510a7
commit 7b6300db71
2 changed files with 108 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/jingrow/frontend/src/locales/zh-CN.json
View File

@ -1136,7 +1136,10 @@
"Please login first to use this feature": "请先登录以使用此功能",
"Session expired. Please login again.": "会话已过期，请重新登录",
"Session expired. Please login again to use this feature.": "会话已过期，请重新登录以使用此功能",
"or": "或",
"Paste image URL here": "在此处粘贴图片URL",
"Or paste image URL here": "或在此处粘贴图片URL",
"Drag and drop your image anywhere, or paste image directly": "拖拽图片到任意位置，或直接粘贴图片",
"Loading image from URL...": "正在从URL加载图片...",
"Please enter an image URL": "请输入图片URL",
"Please enter a valid image URL": "请输入有效的图片URL",

150
apps/jingrow/frontend/src/views/tools/remove_background/remove_background.vue
View File

@ -47,15 +47,22 @@
v-if="!uploadedImage"
class="upload-area"
:class="{ 'dragging': isDragging }"
@click="triggerFileInput"
>
<div class="upload-content">
<div class="upload-icon">
<i class="fa fa-cloud-upload"></i>
<button
type="button"
class="upload-btn"
@click="triggerFileInput"
:disabled="processing"
>
<i class="fa fa-upload"></i>
<span>{{ t('Upload Image') }}</span>
</button>
<div class="divider">
<span>{{ t('or') }}</span>
</div>
<h3>{{ t('Upload Image') }}</h3>
<p>{{ t('Drag and drop your image here, or click to browse') }}</p>
<p class="upload-hint">{{ t('Supports JPG, PNG, WebP formats') }}</p>
<div class="url-input-wrapper" @click.stop>
<div class="url-input-container">
<input
@ -63,7 +70,7 @@
v-model="imageUrl"
type="text"
class="url-input"
:placeholder="t('Or paste image URL here')"
:placeholder="t('Paste image URL here')"
@keyup.enter="handleUrlSubmit"
@paste="handleUrlPaste"
:disabled="processing"
@ -79,6 +86,9 @@
</button>
</div>
</div>
<p class="upload-hint">{{ t('Drag and drop your image anywhere, or paste image directly') }}</p>
<p class="upload-format-hint">{{ t('Supports JPG, PNG, WebP formats') }}</p>
</div>
<div v-if="processing" class="upload-processing-overlay">
<div class="spinner"></div>
@ -903,9 +913,8 @@ const removeHistoryItem = (index: number) => {
justify-content: center;
border: 2px dashed #cbd5e1;
border-radius: 12px;
padding: 32px;
padding: 48px 32px;
text-align: center;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: #fafbfc;
min-height: 0;
@ -920,7 +929,6 @@ const removeHistoryItem = (index: number) => {
border-color: #1fc76f;
background: #ecfdf5;
border-style: solid;
transform: scale(1.01);
}
}
@ -952,49 +960,97 @@ const removeHistoryItem = (index: number) => {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
gap: 16px;
width: 100%;
max-width: 500px;
}
.upload-icon {
width: 64px;
height: 64px;
border-radius: 16px;
background: linear-gradient(135deg, #1fc76f 0%, #16a085 100%);
display: flex;
.upload-btn {
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
box-shadow: 0 4px 12px rgba(31, 199, 111, 0.25);
gap: 12px;
padding: 20px 40px;
background: #e6f8f0;
color: #0d684b;
border: 1px solid #1fc76f;
border-radius: 8px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
i {
font-size: 32px;
font-size: 16px;
}
&:hover:not(:disabled) {
background: #dcfce7;
border-color: #1fc76f;
color: #166534;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(31, 199, 111, 0.15);
}
&:active:not(:disabled) {
background: #1fc76f;
border-color: #1fc76f;
color: white;
transform: translateY(0);
box-shadow: 0 1px 4px rgba(31, 199, 111, 0.2);
}
&:disabled {
opacity: 0.6;
cursor: not-allowed;
background: #f1f5f9;
border-color: #e2e8f0;
color: #94a3b8;
}
&:disabled:hover {
transform: none;
box-shadow: none;
}
}
.upload-area h3 {
font-size: 18px;
font-weight: 600;
color: #0f172a;
margin: 0;
}
.upload-area p {
.divider {
display: flex;
align-items: center;
color: #94a3b8;
font-size: 13px;
color: #64748b;
margin: 0;
width: 100%;
max-width: 300px;
&::before,
&::after {
content: '';
flex: 1;
height: 1px;
background: #e5e7eb;
}
span {
padding: 0 12px;
}
}
.upload-hint {
font-size: 13px;
color: #64748b;
margin: 0;
line-height: 1.5;
}
.upload-format-hint {
font-size: 12px;
color: #94a3b8;
margin-top: 4px;
margin: 0;
}
.url-input-wrapper {
width: 100%;
max-width: 500px;
margin-top: 20px;
}
.url-input-container {
@ -1457,29 +1513,32 @@ const removeHistoryItem = (index: number) => {
}
.upload-area {
padding: 24px 16px;
padding: 32px 16px;
}
.upload-icon {
width: 56px;
height: 56px;
.upload-content {
gap: 14px;
max-width: 100%;
}
.upload-btn {
width: 100%;
justify-content: center;
padding: 18px 32px;
font-size: 15px;
i {
font-size: 28px;
font-size: 15px;
}
}
.upload-area h3 {
font-size: 16px;
}
.upload-area p {
font-size: 12px;
.divider {
max-width: 100%;
}
.url-input-wrapper {
width: 100%;
max-width: 100%;
margin-top: 16px;
}
.url-input {
@ -1524,3 +1583,4 @@ const removeHistoryItem = (index: number) => {
}
}
</style>