redesign upload UI with simplified button style

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",

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"
           >
             <div class="upload-content">
-              <div class="upload-icon">
+              <button
-                <i class="fa fa-cloud-upload"></i>
+                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
-                  <input
+                  ref="urlInputRef"
-                    ref="urlInputRef"
+                  v-model="imageUrl"
-                    v-model="imageUrl"
+                  type="text"
-                    type="text"
+                  class="url-input"
-                    class="url-input"
+                  :placeholder="t('Paste image URL here')"
-                    :placeholder="t('Or paste image URL here')"
+                  @keyup.enter="handleUrlSubmit"
-                    @keyup.enter="handleUrlSubmit"
+                  @paste="handleUrlPaste"
-                    @paste="handleUrlPaste"
+                  :disabled="processing"
-                    :disabled="processing"
+                />
-                  />
-                  <button
-                    type="button"
-                    class="url-submit-btn"
-                    @click="handleUrlSubmit"
-                    :disabled="!imageUrl.trim() || processing"
-                  >
-                    <i v-if="processing" class="fa fa-spinner fa-spin"></i>
-                    <i v-else class="fa fa-arrow-right"></i>
-                  </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 +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;
+  gap: 16px;
-}
-
-.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 {
   width: 100%;
   max-width: 500px;
-  margin-top: 20px;
 }
 
-.url-input-container {
+.upload-btn {
-  display: flex;
+  display: inline-flex;
-  gap: 8px;
   align-items: center;
-  background: white;
+  gap: 12px;
-  border: 1px solid #e5e7eb;
+  padding: 20px 40px;
+  background: #e6f8f0;
+  color: #0d684b;
+  border: 1px solid #1fc76f;
   border-radius: 8px;
-  padding: 4px;
+  font-size: 16px;
-  transition: all 0.2s ease;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  white-space: nowrap;
 
-  &:focus-within {
+  i {
-    border-color: #1fc76f;
+    font-size: 16px;
-    box-shadow: 0 0 0 3px rgba(31, 199, 111, 0.1);
   }
-}
 
-.url-input {
+  &:hover:not(:disabled) {
-  flex: 1;
+    background: #dcfce7;
-  border: none;
+    border-color: #1fc76f;
-  outline: none;
+    color: #166534;
-  padding: 8px 12px;
+    transform: translateY(-1px);
-  font-size: 13px;
+    box-shadow: 0 2px 8px rgba(31, 199, 111, 0.15);
-  color: #1f2937;
+  }
-  background: transparent;
 
-  &::placeholder {
+  &:active:not(:disabled) {
-    color: #94a3b8;
+    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 {
+.divider {
-  width: 32px;
-  height: 32px;
-  border: none;
-  border-radius: 6px;
-  background: #1fc76f;
-  color: white;
-  cursor: pointer;
   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 {
+  &::placeholder {
-    font-size: 12px;
+    color: #94a3b8;
   }
 
-  &:hover:not(:disabled) {
+  &:focus {
-    background: #16a085;
+    border-color: #1fc76f;
-    transform: scale(1.05);
+    box-shadow: 0 0 0 3px rgba(31, 199, 111, 0.1);
-  }
-
-  &:active:not(:disabled) {
-    transform: scale(0.95);
   }
 
   &: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 {
+  .upload-content {
-    width: 56px;
+    gap: 14px;
-    height: 56px;
+    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 {
+  .divider {
-    font-size: 16px;
+    max-width: 100%;
-  }
-
-  .upload-area p {
-    font-size: 12px;
   }
 
   .url-input-wrapper {
+    width: 100%;
     max-width: 100%;
-    margin-top: 16px;
   }
 
   .url-input {
@@ -1524,3 +1531,4 @@ const removeHistoryItem = (index: number) => {
   }
 }
 </style>
+