sync drag overlay animations with remove_background page

apps/jingrow/frontend/src/views/HomePage.vue

@@ -331,48 +331,43 @@ const singleImageWrapperRef = ref<HTMLElement | null>(null)
 const singleImageRef = ref<HTMLImageElement | null>(null)
 const isDraggingSplitLine = ref(false)
 
-const handleDragEnter = (e: DragEvent) => {
-  e.preventDefault()
-  e.stopPropagation()
-  if (e.dataTransfer?.types.includes('Files')) {
-    dragCounter.value++
-    isDragging.value = true
-  }
+const hasFiles = (event: DragEvent) => {
+  const types = event.dataTransfer?.types
+  if (!types) return false
+  return Array.from(types).includes('Files')
 }
 
-const handleDragOver = (e: DragEvent) => {
-  e.preventDefault()
-  e.stopPropagation()
-  if (e.dataTransfer?.types.includes('Files')) {
-    e.dataTransfer.dropEffect = 'copy'
+const handleDragEnter = (event: DragEvent) => {
+  if (!hasFiles(event)) return
+  dragCounter.value += 1
   isDragging.value = true
-  }
 }
 
-const handleDragLeave = (e: DragEvent) => {
-  e.preventDefault()
-  e.stopPropagation()
-  if (e.dataTransfer?.types.includes('Files')) {
+const handleDragOver = (event: DragEvent) => {
+  if (!hasFiles(event)) return
+  event.dataTransfer!.dropEffect = 'copy'
+  isDragging.value = true
+}
+
+const handleDragLeave = (event: DragEvent) => {
+  if (!hasFiles(event)) return
   dragCounter.value = Math.max(0, dragCounter.value - 1)
   if (dragCounter.value === 0) {
     isDragging.value = false
   }
-  }
 }
 
-const handleDrop = (e: DragEvent) => {
-  e.preventDefault()
-  e.stopPropagation()
+const handleDrop = (event: DragEvent) => {
+  if (!hasFiles(event)) return
+  event.preventDefault()
   dragCounter.value = 0
   isDragging.value = false
-  
-  const file = e.dataTransfer?.files[0]
+  const file = event.dataTransfer?.files[0]
   if (file && file.type.startsWith('image/')) {
     processFile(file)
   } else {
-    message.warning('请上传图片文件')
+    message.warning(t('Please upload an image file'))
   }
-  return false
 }
 
 const triggerFileInput = () => {
@@ -946,7 +941,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="home-page" @dragenter="handleDragEnter" @dragover="handleDragOver" @dragleave="handleDragLeave" @drop="handleDrop">
+  <div class="home-page" @dragenter.prevent="handleDragEnter" @dragover.prevent="handleDragOver" @dragleave="handleDragLeave" @drop.prevent="handleDrop">
     <!-- 未登录状态：显示营销页面布局 -->
     <template v-if="!isLoggedIn">
       <!-- Header -->
@@ -971,7 +966,7 @@ onUnmounted(() => {
       <main class="main-content">
       <div v-if="isDragging" class="global-drag-overlay">
         <div class="overlay-content">
-          <p>拖放图片到任意位置去除背景</p>
+          <p>{{ t('Drop image anywhere to remove background') }}</p>
         </div>
       </div>
       
@@ -1220,7 +1215,7 @@ onUnmounted(() => {
             <div class="content-wrapper">
               <div v-if="isDragging" class="global-drag-overlay">
                 <div class="overlay-content">
-                  <p>拖放图片到任意位置去除背景</p>
+                  <p>{{ t('Drop image anywhere to remove background') }}</p>
                 </div>
               </div>
               
@@ -1734,13 +1729,99 @@ onUnmounted(() => {
   justify-content: center;
   z-index: 1000;
   pointer-events: none;
+  animation: fade-in 0.15s ease;
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: 55vmax;
+    height: 55vmax;
+    border-radius: 35%;
+    border: 1px solid rgba(148, 163, 184, 0.25);
+    animation: rotate 12s linear infinite;
+    pointer-events: none;
+  }
 }
 
 .overlay-content {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
   padding: 18px 30px;
   color: #0f172a;
   font-size: 18px;
   font-weight: 600;
+  text-align: center;
+  letter-spacing: 0.04em;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: -10px;
+    border-radius: 999px;
+    border: 1px solid rgba(79, 70, 229, 0.35);
+    opacity: 0.7;
+    animation: pulse-line 1.8s ease-out infinite;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: -28px 16px;
+    border-radius: 999px;
+    background: linear-gradient(90deg, rgba(59, 130, 246, 0), rgba(59, 130, 246, 0.24), rgba(59, 130, 246, 0));
+    filter: blur(10px);
+    opacity: 0.65;
+    animation: shimmer 2.4s linear infinite;
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes pulse-line {
+  0% {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+
+  50% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+
+  100% {
+    transform: scale(1.05);
+    opacity: 0;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    opacity: 0.2;
+  }
+  50% {
+    opacity: 0.7;
+  }
+  100% {
+    opacity: 0.2;
+  }
 }
 
 .tool-page {