diff --git a/apps/jingrow/frontend/src/locales/zh-CN.json b/apps/jingrow/frontend/src/locales/zh-CN.json index f36ee17..313b065 100644 --- a/apps/jingrow/frontend/src/locales/zh-CN.json +++ b/apps/jingrow/frontend/src/locales/zh-CN.json @@ -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", diff --git a/apps/jingrow/frontend/src/views/tools/remove_background/remove_background.vue b/apps/jingrow/frontend/src/views/tools/remove_background/remove_background.vue index 2f41d9e..27c5a50 100644 --- a/apps/jingrow/frontend/src/views/tools/remove_background/remove_background.vue +++ b/apps/jingrow/frontend/src/views/tools/remove_background/remove_background.vue @@ -47,38 +47,37 @@ v-if="!uploadedImage" class="upload-area" :class="{ 'dragging': isDragging }" - @click="triggerFileInput" >
-
- + + +
+ {{ t('or') }}
-

{{ t('Upload Image') }}

-

{{ t('Drag and drop your image here, or click to browse') }}

-

{{ t('Supports JPG, PNG, WebP formats') }}

+
-
- - -
+
+ +

{{ t('Drag and drop your image anywhere, or paste image directly') }}

+

{{ t('Supports JPG, PNG, WebP formats') }}

@@ -903,9 +902,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 +918,6 @@ const removeHistoryItem = (index: number) => { border-color: #1fc76f; background: #ecfdf5; border-style: solid; - transform: scale(1.01); } } @@ -952,116 +949,123 @@ const removeHistoryItem = (index: number) => { display: flex; flex-direction: column; align-items: center; - gap: 12px; -} - -.upload-icon { - width: 64px; - height: 64px; - border-radius: 16px; - background: linear-gradient(135deg, #1fc76f 0%, #16a085 100%); - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 8px; - box-shadow: 0 4px 12px rgba(31, 199, 111, 0.25); - - i { - font-size: 32px; - color: white; - } -} - -.upload-area h3 { - font-size: 18px; - font-weight: 600; - color: #0f172a; - margin: 0; -} - -.upload-area p { - font-size: 13px; - color: #64748b; - margin: 0; -} - -.upload-hint { - font-size: 12px; - color: #94a3b8; - margin-top: 4px; -} - -.url-input-wrapper { + gap: 16px; width: 100%; max-width: 500px; - margin-top: 20px; } -.url-input-container { - display: flex; - gap: 8px; +.upload-btn { + display: inline-flex; align-items: center; - background: white; - border: 1px solid #e5e7eb; + gap: 12px; + padding: 20px 40px; + background: #e6f8f0; + color: #0d684b; + border: 1px solid #1fc76f; border-radius: 8px; - padding: 4px; - transition: all 0.2s ease; + font-size: 16px; + font-weight: 500; + cursor: pointer; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + white-space: nowrap; - &:focus-within { - border-color: #1fc76f; - box-shadow: 0 0 0 3px rgba(31, 199, 111, 0.1); + i { + font-size: 16px; } -} -.url-input { - flex: 1; - border: none; - outline: none; - padding: 8px 12px; - font-size: 13px; - color: #1f2937; - background: transparent; + &:hover:not(:disabled) { + background: #dcfce7; + border-color: #1fc76f; + color: #166534; + transform: translateY(-1px); + box-shadow: 0 2px 8px rgba(31, 199, 111, 0.15); + } - &::placeholder { - color: #94a3b8; + &: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; } } -.url-submit-btn { - width: 32px; - height: 32px; - border: none; - border-radius: 6px; - background: #1fc76f; - color: white; - cursor: pointer; +.divider { display: flex; align-items: center; - justify-content: center; + color: #94a3b8; + font-size: 13px; + 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: 0; +} + +.url-input-wrapper { + width: 100%; + max-width: 500px; +} + +.url-input { + width: 100%; + border: 1px solid #e5e7eb; + border-radius: 8px; + padding: 12px 16px; + font-size: 14px; + color: #1f2937; + background: white; + outline: none; transition: all 0.2s ease; - flex-shrink: 0; - i { - font-size: 12px; + &::placeholder { + color: #94a3b8; } - &:hover:not(:disabled) { - background: #16a085; - transform: scale(1.05); - } - - &:active:not(:disabled) { - transform: scale(0.95); + &:focus { + border-color: #1fc76f; + box-shadow: 0 0 0 3px rgba(31, 199, 111, 0.1); } &:disabled { - opacity: 0.5; + opacity: 0.6; cursor: not-allowed; + background: #f8fafc; } } @@ -1457,29 +1461,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 +1531,4 @@ const removeHistoryItem = (index: number) => { } } +