polish remove background history UX and drag overlay

apps/jingrow/frontend/src/views/tools/RemoveBackground.vue

@@ -133,9 +133,13 @@
             >
               <div class="history-thumbnail">
                 <img :src="getHistoryThumbnailUrl(item)" alt="History" />
-                <div v-if="currentHistoryIndex === index" class="active-indicator">
+                <button
-                  <i class="fa fa-arrow-up"></i>
+                  type="button"
-                </div>
+                  class="history-delete-btn"
+                  @click.stop="removeHistoryItem(index)"
+                  :title="t('Delete')"
+                  :aria-label="t('Delete')"
+                ></button>
               </div>
             </div>
 
@@ -146,9 +150,6 @@
             >
               <div class="history-thumbnail">
                 <img :src="resultImageUrl" alt="Current" />
-                <div class="active-indicator">
-                  <i class="fa fa-arrow-up"></i>
-                </div>
               </div>
             </div>
           </div>
@@ -520,6 +521,25 @@ const handleDownload = () => {
     message.error(t('Failed to download image'))
   }
 }
+
+const removeHistoryItem = (index: number) => {
+  if (index < 0 || index >= historyList.value.length) return
+
+  const removingCurrent = currentHistoryIndex.value === index
+  historyList.value.splice(index, 1)
+
+  if (historyList.value.length === 0) {
+    currentHistoryIndex.value = -1
+    return
+  }
+
+  if (removingCurrent) {
+    const nextIndex = Math.min(index, historyList.value.length - 1)
+    selectHistoryItem(nextIndex)
+  } else if (currentHistoryIndex.value > index) {
+    currentHistoryIndex.value -= 1
+  }
+}
 </script>
 
 <style scoped lang="scss">
@@ -1130,7 +1150,7 @@ h1 {
   &.active {
     .history-thumbnail {
       border-color: #1fc76f;
-      border-width: 3px;
+      box-shadow: 0 0 10px rgba(31, 199, 111, 0.35);
     }
   }
 }
@@ -1160,30 +1180,58 @@ h1 {
 
   &:hover {
     border-color: #1fc76f;
-    transform: scale(1.05);
   }
-}
 
-.active-indicator {
+.history-delete-btn {
-  position: absolute;
+    position: absolute;
-  top: -6px;
+    top: 4px;
-  right: -6px;
+    right: 4px;
-  width: 20px;
+    width: 18px;
-  height: 20px;
+    height: 18px;
-  background: #1fc76f;
+    border-radius: 999px;
-  border-radius: 50%;
+    border: none;
-  display: flex;
+    background: rgba(15, 23, 42, 0.6);
+    color: white;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    opacity: 0;
-  border: 2px solid white;
+    transform: scale(0.9);
+    transition: all 0.2s ease;
+    cursor: pointer;
+  font-size: 0;
+  line-height: 1;
 
-  i {
+  &::before,
-    font-size: 10px;
+  &::after {
-    color: white;
+    content: '';
+    position: absolute;
+    width: 10px;
+    height: 2px;
+    background: white;
+    border-radius: 999px;
+  }
+
+  &::before {
+    transform: rotate(45deg);
+  }
+
+  &::after {
+    transform: rotate(-45deg);
+  }
+
+    &:hover {
+      background: rgba(239, 68, 68, 0.85);
+    }
+  }
+
+  &:hover .history-delete-btn {
+    opacity: 1;
+    transform: scale(1);
   }
 }
 
+
 /* 响应式设计 */
 @media (max-width: 768px) {
   .remove-background-page {