feat: add Download Logs tab in admin panel

frontend/src/views/Admin.vue

@@ -1,52 +1,98 @@
 <template>
   <div class="admin">
-    <div class="header">
-      <h2>Video Library</h2>
-      <div v-if="stats" class="stats">
-        📊 {{ stats.total_videos }} videos · {{ stats.total_size_human }}
+    <!-- Tab switcher -->
+    <div class="tabs">
+      <button :class="{ active: tab === 'videos' }" @click="tab = 'videos'">📹 Video Library</button>
+      <button :class="{ active: tab === 'logs' }" @click="tab = 'logs'; fetchLogs()">📋 Download Logs</button>
+      <div class="stats" v-if="stats">📊 {{ stats.total_videos }} videos · {{ stats.total_size_human }}</div>
+    </div>
+
+    <!-- ── Video Library ── -->
+    <template v-if="tab === 'videos'">
+      <div class="search-bar">
+        <input v-model="search" placeholder="Search videos..." @input="debouncedFetch" />
+        <select v-model="filterStatus" @change="fetchVideos">
+          <option value="">All Status</option>
+          <option value="done">Done</option>
+          <option value="downloading">Downloading</option>
+          <option value="error">Error</option>
+          <option value="pending">Pending</option>
+        </select>
       </div>
-    </div>
 
-    <div class="search-bar">
-      <input v-model="search" placeholder="Search videos..." @input="debouncedFetch" />
-      <select v-model="filterStatus" @change="fetchVideos">
-        <option value="">All Status</option>
-        <option value="done">Done</option>
-        <option value="downloading">Downloading</option>
-        <option value="error">Error</option>
-        <option value="pending">Pending</option>
-      </select>
-    </div>
-
-    <div class="video-list">
-      <div v-for="v in videos" :key="v.id" class="video-card">
-        <div class="video-main">
-          <img v-if="v.thumbnail" :src="v.thumbnail" class="thumb" />
-          <div class="info">
-            <h4>{{ v.title || 'Untitled' }}</h4>
-            <div class="meta">
-              <span :class="'status-' + v.status">{{ v.status }}</span>
-              <span>{{ v.quality }}</span>
-              <span>{{ humanSize(v.file_size) }}</span>
-              <span>{{ new Date(v.created_at).toLocaleString() }}</span>
+      <div class="video-list">
+        <div v-for="v in videos" :key="v.id" class="video-card">
+          <div class="video-main">
+            <img v-if="v.thumbnail" :src="v.thumbnail" class="thumb" />
+            <div class="info">
+              <h4>{{ v.title || 'Untitled' }}</h4>
+              <div class="meta">
+                <span :class="'status-' + v.status">{{ v.status }}</span>
+                <span>{{ v.platform }}</span>
+                <span>{{ v.quality }}</span>
+                <span>{{ humanSize(v.file_size) }}</span>
+                <span>{{ fmtTime(v.created_at) }}</span>
+              </div>
             </div>
           </div>
+          <div class="actions">
+            <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>
+          </div>
         </div>
-        <div class="actions">
-          <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>
-        </div>
+        <div v-if="!videos.length" class="empty">No videos found</div>
       </div>
-      <div v-if="!videos.length" class="empty">No videos found</div>
-    </div>
 
-    <div v-if="totalPages > 1" class="pagination">
-      <button :disabled="page <= 1" @click="page--; fetchVideos()">Prev</button>
-      <span>{{ page }} / {{ totalPages }}</span>
-      <button :disabled="page >= totalPages" @click="page++; fetchVideos()">Next</button>
-    </div>
+      <div v-if="totalPages > 1" class="pagination">
+        <button :disabled="page <= 1" @click="page--; fetchVideos()">Prev</button>
+        <span>{{ page }} / {{ totalPages }}</span>
+        <button :disabled="page >= totalPages" @click="page++; fetchVideos()">Next</button>
+      </div>
+    </template>
+
+    <!-- ── Download Logs ── -->
+    <template v-if="tab === 'logs'">
+      <div class="log-filter">
+        <input v-model="logSearch" placeholder="Filter by IP or video title..." @input="debouncedLogs" />
+        <button v-if="logVideoFilter" @click="clearLogFilter" class="clear-btn">✕ {{ logVideoTitle }}</button>
+      </div>
+
+      <div class="log-table-wrap">
+        <table class="log-table">
+          <thead>
+            <tr>
+              <th>Time</th>
+              <th>IP</th>
+              <th>Browser</th>
+              <th>Device</th>
+              <th>Video</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="l in filteredLogs" :key="l.id">
+              <td class="td-time">{{ fmtTime(l.downloaded_at) }}</td>
+              <td class="td-ip">{{ l.ip }}</td>
+              <td class="td-browser">{{ browserIcon(l.browser) }} {{ l.browser }}</td>
+              <td class="td-device">{{ deviceIcon(l.device) }} {{ l.device }}</td>
+              <td class="td-video">
+                <span class="platform-badge" :class="'plat-' + l.video_platform">{{ l.video_platform }}</span>
+                {{ l.video_title || `#${l.video_id}` }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <div v-if="!filteredLogs.length" class="empty">No logs found</div>
+      </div>
+
+      <div v-if="logTotalPages > 1" class="pagination">
+        <button :disabled="logPage <= 1" @click="logPage--; fetchLogs()">Prev</button>
+        <span>{{ logPage }} / {{ logTotalPages }}</span>
+        <button :disabled="logPage >= logTotalPages" @click="logPage++; fetchLogs()">Next</button>
+      </div>
+    </template>
 
     <!-- Video Player Modal -->
     <div v-if="playing" class="modal" @click.self="playing = null">
@@ -64,6 +110,9 @@ import axios from 'axios'
 import { useAuthStore } from '../stores/auth.js'
 
 const auth = useAuthStore()
+const tab = ref('videos')
+
+// ── Videos ──
 const videos = ref([])
 const stats = ref(null)
 const search = ref('')
@@ -73,9 +122,28 @@ const total = ref(0)
 const pageSize = 20
 const playing = ref(null)
 const playUrl = ref('')
-
 const totalPages = computed(() => Math.ceil(total.value / pageSize) || 1)
 
+// ── Logs ──
+const logs = ref([])
+const logSearch = ref('')
+const logPage = ref(1)
+const logTotal = ref(0)
+const logPageSize = 50
+const logVideoFilter = ref(null)
+const logVideoTitle = ref('')
+const logTotalPages = computed(() => Math.ceil(logTotal.value / logPageSize) || 1)
+
+const filteredLogs = computed(() => {
+  if (!logSearch.value) return logs.value
+  const q = logSearch.value.toLowerCase()
+  return logs.value.filter(l =>
+    l.ip.includes(q) || l.video_title.toLowerCase().includes(q) ||
+    l.browser.toLowerCase().includes(q) || l.device.toLowerCase().includes(q)
+  )
+})
+
+// ── Helpers ──
 function humanSize(bytes) {
   if (!bytes) return '0 B'
   for (const u of ['B', 'KB', 'MB', 'GB']) {
@@ -85,6 +153,20 @@ function humanSize(bytes) {
   return `${bytes.toFixed(1)} TB`
 }
 
+function fmtTime(ts) {
+  if (!ts) return ''
+  return new Date(ts).toLocaleString('zh-CN', { hour12: false })
+}
+
+function browserIcon(b) {
+  return { Chrome: '🌐', Firefox: '🦊', Safari: '🧭', Edge: '🔷', Opera: '🔴', Samsung: '📱' }[b] || '🌐'
+}
+
+function deviceIcon(d) {
+  return { mobile: '📱', tablet: '📟', desktop: '💻', bot: '🤖' }[d] || '💻'
+}
+
+// ── Video methods ──
 let debounceTimer
 function debouncedFetch() {
   clearTimeout(debounceTimer)
@@ -128,8 +210,40 @@ async function deleteVideo(v) {
   try {
     await axios.delete(`/api/admin/videos/${v.id}`, { headers: auth.getHeaders() })
     fetchVideos(); fetchStats()
+  } catch { alert('Delete failed') }
+}
+
+function showLogs(v) {
+  logVideoFilter.value = v.id
+  logVideoTitle.value = v.title || `#${v.id}`
+  logPage.value = 1
+  tab.value = 'logs'
+  fetchLogs()
+}
+
+function clearLogFilter() {
+  logVideoFilter.value = null
+  logVideoTitle.value = ''
+  logPage.value = 1
+  fetchLogs()
+}
+
+// ── Log methods ──
+let logDebounce
+function debouncedLogs() {
+  clearTimeout(logDebounce)
+  logDebounce = setTimeout(() => { logPage.value = 1; fetchLogs() }, 300)
+}
+
+async function fetchLogs() {
+  try {
+    const params = { page: logPage.value, page_size: logPageSize }
+    if (logVideoFilter.value) params.video_id = logVideoFilter.value
+    const res = await axios.get('/api/admin/download-logs', { params, headers: auth.getHeaders() })
+    logs.value = res.data.logs
+    logTotal.value = res.data.total
   } catch (e) {
-    alert('Delete failed')
+    if (e.response?.status === 401) { auth.logout(); location.href = '/login' }
   }
 }
 
@@ -137,15 +251,22 @@ onMounted(() => { fetchVideos(); fetchStats() })
 </script>
 
 <style scoped>
-.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
-.stats { color: #888; }
+.tabs { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid #333; padding-bottom: 0.8rem; }
+.tabs button {
+  padding: 0.5rem 1.2rem; border: 1px solid #444; border-radius: 8px;
+  background: transparent; color: #aaa; cursor: pointer; font-size: 0.95rem; transition: all 0.2s;
+}
+.tabs button.active { background: #1da1f2; border-color: #1da1f2; color: #fff; }
+.tabs button:hover:not(.active) { border-color: #888; color: #fff; }
+.stats { margin-left: auto; color: #888; font-size: 0.9rem; }
+
+/* Video library */
 .search-bar { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
 .search-bar input { flex: 1; padding: 0.6rem 1rem; border: 1px solid #444; border-radius: 8px; background: #1a1a2e; color: #fff; }
 .search-bar select { padding: 0.6rem; border: 1px solid #444; border-radius: 8px; background: #1a1a2e; color: #fff; }
 .video-card {
   display: flex; justify-content: space-between; align-items: center;
-  background: #1a1a2e; border-radius: 10px; padding: 1rem; margin-bottom: 0.8rem;
-  gap: 1rem;
+  background: #1a1a2e; border-radius: 10px; padding: 1rem; margin-bottom: 0.8rem; gap: 1rem;
 }
 .video-main { display: flex; gap: 1rem; flex: 1; min-width: 0; }
 .thumb { width: 80px; height: 45px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
@@ -163,6 +284,27 @@ onMounted(() => { fetchVideos(); fetchStats() })
 }
 .actions button:hover, .actions a:hover { border-color: #1da1f2; }
 .btn-del:hover { border-color: #e74c3c !important; }
+
+/* Logs */
+.log-filter { display: flex; gap: 0.5rem; margin-bottom: 1rem; align-items: center; }
+.log-filter input { flex: 1; padding: 0.6rem 1rem; border: 1px solid #444; border-radius: 8px; background: #1a1a2e; color: #fff; }
+.clear-btn { padding: 0.5rem 0.9rem; border: 1px solid #f39c12; border-radius: 8px; background: transparent; color: #f39c12; cursor: pointer; white-space: nowrap; font-size: 0.85rem; }
+.log-table-wrap { overflow-x: auto; }
+.log-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
+.log-table th { text-align: left; padding: 0.6rem 1rem; background: #1a1a2e; color: #888; border-bottom: 1px solid #333; white-space: nowrap; }
+.log-table td { padding: 0.6rem 1rem; border-bottom: 1px solid #222; vertical-align: middle; }
+.log-table tr:hover td { background: rgba(255,255,255,0.03); }
+.td-time { color: #888; white-space: nowrap; font-size: 0.82rem; }
+.td-ip { font-family: monospace; color: #7fdbff; }
+.td-browser, .td-device { color: #ddd; }
+.td-video { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.platform-badge {
+  display: inline-block; font-size: 0.7rem; padding: 0.1rem 0.4rem;
+  border-radius: 4px; margin-right: 0.4rem; vertical-align: middle; font-weight: 600;
+}
+.plat-youtube { background: #c00; color: #fff; }
+.plat-twitter { background: #1da1f2; color: #fff; }
+
 .empty { text-align: center; color: #666; padding: 3rem; }
 .pagination { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1.5rem; }
 .pagination button { padding: 0.5rem 1rem; border: 1px solid #444; border-radius: 6px; background: transparent; color: #fff; cursor: pointer; }