feat: real-time download progress, cancel support, admin auto-poll

frontend/src/views/Admin.vue

@@ -44,6 +44,13 @@
                 <span v-if="v.file_size">{{ humanSize(v.file_size) }}</span>
                 <span>{{ fmtTime(v.created_at) }}</span>
               </div>
+              <!-- Progress bar for downloading -->
+              <div v-if="v.status === 'downloading'" class="progress-wrap">
+                <div class="progress-bar">
+                  <div class="progress-fill" :style="{ width: v.progress + '%' }"></div>
+                </div>
+                <span class="progress-pct">{{ v.progress }}%</span>
+              </div>
               <!-- Error message -->
               <div v-if="v.status === 'error' && v.error_message" class="error-msg" :title="v.error_message">
                 ⚠️ {{ v.error_message }}
@@ -53,11 +60,12 @@
             </div>
           </div>
           <div class="actions">
+            <button v-if="v.status === 'downloading'" @click="cancelDownload(v)" class="btn-cancel" title="Cancel download">✕ Cancel</button>
             <button v-if="v.status === 'done'" @click="showLogs(v)" class="btn-log" title="Download logs">📋</button>
             <button v-if="v.status === 'done'" @click="playVideo(v)" class="btn-play">▶ Play</button>
             <a v-if="v.status === 'done'" :href="'/api/file/' + v.id" class="btn-dl"
                :download="v.filename" @click.prevent="downloadAuth(v)">💾</a>
-            <button @click="deleteVideo(v)" class="btn-del">🗑</button>
+            <button v-if="v.status !== 'downloading'" @click="deleteVideo(v)" class="btn-del">🗑</button>
           </div>
         </div>
         <div v-if="!videos.length" class="empty">No videos found</div>
@@ -222,6 +230,7 @@ const pageSize = 20
 const playing = ref(null)
 const playUrl = ref('')
 const totalPages = computed(() => Math.ceil(total.value / pageSize) || 1)
+let pollTimer = null
 
 // ── Settings / Cleanup ──
 const cleanupStatus = ref(null)
@@ -372,11 +381,29 @@ async function fetchVideos() {
     })
     videos.value = res.data.videos
     total.value = res.data.total
+    // Auto-poll while any video is downloading
+    const hasDownloading = res.data.videos.some(v => v.status === 'downloading')
+    if (hasDownloading && tab.value === 'videos') {
+      if (!pollTimer) pollTimer = setInterval(fetchVideos, 2000)
+    } else {
+      if (pollTimer) { clearInterval(pollTimer); pollTimer = null }
+    }
   } catch (e) {
     if (e.response?.status === 401) { auth.logout(); location.href = '/login' }
   }
 }
 
+async function cancelDownload(v) {
+  try {
+    await axios.post(`/api/download/${v.task_id}/cancel`, {}, { headers: auth.getHeaders() })
+    v.status = 'error'
+    v.error_message = '下载已取消，请重试'
+    await fetchVideos()
+  } catch (e) {
+    alert('Cancel failed: ' + (e.response?.data?.detail || e.message))
+  }
+}
+
 async function fetchStats() {
   try {
     const res = await axios.get('/api/admin/stats', { headers: auth.getHeaders() })
@@ -439,6 +466,14 @@ async function fetchLogs() {
 }
 
 onMounted(() => { fetchVideos(); fetchStats() })
+
+// Clean up poll timer when leaving videos tab
+import { watch, onUnmounted } from 'vue'
+watch(tab, (val) => {
+  if (val !== 'videos' && pollTimer) { clearInterval(pollTimer); pollTimer = null }
+  if (val === 'videos') fetchVideos()
+})
+onUnmounted(() => { if (pollTimer) clearInterval(pollTimer) })
 </script>
 
 <style scoped>
@@ -484,6 +519,12 @@ onMounted(() => { fetchVideos(); fetchStats() })
 .status-pending { color: #888; }
 .status-deleted { color: #555; }
 .platform-tag { color: #1da1f2; font-size: 0.82rem; text-transform: capitalize; }
+.progress-wrap { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }
+.progress-bar { flex: 1; max-width: 240px; height: 6px; background: #333; border-radius: 3px; overflow: hidden; }
+.progress-fill { height: 100%; background: #1da1f2; border-radius: 3px; transition: width 0.4s; }
+.progress-pct { font-size: 0.8rem; color: #1da1f2; min-width: 32px; }
+.btn-cancel { padding: 0.4rem 0.8rem; border: 1px solid #e74c3c; border-radius: 6px; background: transparent; color: #e74c3c; cursor: pointer; font-size: 0.85rem; }
+.btn-cancel:hover { background: rgba(231,76,60,0.15); }
 .error-msg {
   color: #e74c3c; font-size: 0.8rem; margin-top: 0.3rem;
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 500px;

frontend/src/views/Home.vue

@@ -30,6 +30,7 @@
       <button class="download-btn" @click="startDownload" :disabled="downloading || downloadReady">
         {{ downloading ? '⏳ Downloading...' : downloadReady ? '✅ Downloaded' : '📥 Download' }}
       </button>
+      <button v-if="downloading && taskId" class="cancel-btn" @click="cancelDownload">✕ Cancel</button>
     </div>
 
     <div v-if="taskId" class="task-status">
@@ -123,7 +124,9 @@ async function pollStatus() {
       downloadReady.value = true
       downloadUrl.value = `/api/file/task/${taskId.value}`
     } else if (d.status === 'error') {
-      statusText.value = `❌ Error: ${d.error_message}`
+      const msg = d.error_message || '下载出错，请重试'
+      statusText.value = `❌ ${msg}`
+      error.value = msg
       downloading.value = false
     } else {
       statusText.value = `⏳ ${d.status}... ${d.progress}%`
@@ -133,6 +136,19 @@ async function pollStatus() {
     setTimeout(pollStatus, 3000)
   }
 }
+
+async function cancelDownload() {
+  if (!taskId.value) return
+  try {
+    await axios.post(`/api/download/${taskId.value}/cancel`)
+    downloading.value = false
+    error.value = '下载已取消，请重试'
+    statusText.value = ''
+    progress.value = 0
+  } catch {
+    error.value = '取消失败，请稍后重试'
+  }
+}
 </script>
 
 <style scoped>
@@ -169,6 +185,12 @@ h1 { font-size: 2rem; margin-bottom: 0.5rem; }
 .ext { color: #888; }
 .size { color: #888; margin-left: auto; }
 .download-btn { width: 100%; margin-top: 1rem; padding: 1rem; font-size: 1.1rem; }
+.cancel-btn {
+  width: 100%; margin-top: 0.5rem; padding: 0.7rem; font-size: 0.95rem;
+  border: 1px solid #e74c3c; border-radius: 8px; background: transparent;
+  color: #e74c3c; cursor: pointer;
+}
+.cancel-btn:hover { background: rgba(231,76,60,0.1); }
 .task-status { margin-top: 1.5rem; }
 .progress-bar { height: 8px; background: #333; border-radius: 4px; overflow: hidden; margin-bottom: 0.5rem; }
 .progress-fill { height: 100%; background: #1da1f2; transition: width 0.3s; }