feat: batch download

static/app.js

@@ -17,12 +17,18 @@ const quotaBar     = $('quotaBar');
 const toastEl      = $('toast');
 const totalProgress= $('totalProgress');
 const totalLabel   = $('totalLabel');
+const checkAll     = $('checkAll');
+const checkAllWrap = $('checkAllWrap');
+const batchBtn     = $('batchBtn');
+const batchCount   = $('batchCount');
 
 // pending[i] = { id, file, xhr, status: 'pending'|'uploading'|'done'|'error'|'cancelled', progress, error }
 let pending = [];
 let nextId = 1;
 let isUploading = false;
 
+// selectedFiles 在 batch.js 顶层 var 声明, 同 <script> 内共享.
+
 // ---------------------------------------------------------------------------
 // Toast
 // ---------------------------------------------------------------------------
@@ -316,11 +322,19 @@ async function loadFiles() {
     quotaState = data.quota;
     if (!data.files || data.files.length === 0) {
       filesList.innerHTML = '<div class="empty">暂无文件</div>';
+      selectedFiles.clear();
+      updateBatchUI();
       return;
     }
     filesList.innerHTML = '';
     data.files.sort((a, b) => new Date(b.mod_time) - new Date(a.mod_time));
+    // 清理已不存在文件的勾选 (跨刷新保留)
+    const currentNames = new Set(data.files.map(f => f.filename));
+    for (const n of [...selectedFiles]) {
+      if (!currentNames.has(n)) selectedFiles.delete(n);
+    }
     data.files.forEach(f => filesList.appendChild(fileRow(f)));
+    updateBatchUI();
   } catch (e) {
     filesMeta.textContent = '加载失败';
   }
@@ -348,7 +362,9 @@ function fileRow(f) {
   div.className = 'file-item';
   const ext = (f.filename.split('.').pop() || '').toLowerCase();
   const ttlHtml = `<span class="ttl" data-expires="${f.expires_at}">${formatRemain(f.expires_at)}</span>`;
+  const checked = selectedFiles.has(f.filename) ? 'checked' : '';
   div.innerHTML = `
+    <input type="checkbox" class="file-check" data-name="${escapeHtml(f.filename)}" ${checked} aria-label="选择 ${escapeHtml(f.filename)}" />
     <div class="file-icon">${iconFor(ext)}</div>
     <div class="file-info">
       <div class="file-name" title="${escapeHtml(f.filename)}">${escapeHtml(f.filename)}</div>
@@ -364,6 +380,7 @@ function fileRow(f) {
       <button class="icon-btn danger" title="删除" data-delete="${escapeHtml(f.filename)}">✕</button>
     </div>
   `;
+  div.querySelector('.file-check').addEventListener('change', e => onCheckChange(f.filename, e.target.checked));
   div.querySelector('[data-url]').onclick = () => copyToClipboard(location.origin + f.url);
   div.querySelector('[data-delete]').onclick = () => deleteFile(f.filename, div);
   return div;
@@ -420,67 +437,5 @@ async function copyToClipboard(text) {
   }
 }
 
-// ---------------------------------------------------------------------------
-// 倒计时: 每秒刷新一次剩余时间
-// ---------------------------------------------------------------------------
-setInterval(() => {
-  document.querySelectorAll('[data-expires]').forEach(el => {
-    el.textContent = formatRemain(el.dataset.expires);
-    el.classList.toggle('danger', isAlmostExpired(el.dataset.expires));
-  });
-}, 1000);
-
-function isAlmostExpired(iso) {
-  const ms = new Date(iso).getTime() - Date.now();
-  return ms > 0 && ms < 60 * 60 * 1000; // < 1h
-}
-
-function formatRemain(iso) {
-  const ms = new Date(iso).getTime() - Date.now();
-  if (ms <= 0) return '已过期';
-  const s = Math.floor(ms / 1000);
-  if (s < 60) return `剩 ${s} 秒`;
-  const m = Math.floor(s / 60);
-  if (m < 60) return `剩 ${m} 分钟`;
-  const h = Math.floor(m / 60);
-  if (h < 24) return `剩 ${h} 小时${m % 60 ? ' ' + (m % 60) + ' 分' : ''}`;
-  const d = Math.floor(h / 24);
-  return `剩 ${d} 天${h % 24 ? ' ' + (h % 24) + ' 小时' : ''}`;
-}
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-function iconFor(ext) {
-  const map = { pdf:'📄', zip:'📦', rar:'📦', '7z':'📦', txt:'📄', md:'📄',
-    png:'🖼', jpg:'🖼', jpeg:'🖼', gif:'🖼', webp:'🖼', svg:'🖼',
-    mp4:'🎬', mov:'🎬', avi:'🎬', mkv:'🎬',
-    mp3:'🎵', wav:'🎵', flac:'🎵',
-    xls:'📊', xlsx:'📊', csv:'📊',
-    doc:'📃', docx:'📃', ppt:'📽', pptx:'📽' };
-  return map[ext] || '📁';
-}
-
-function formatSize(b) {
-  if (b == null || isNaN(b)) return '-';
-  if (b < 1024) return b + ' B';
-  if (b < 1024 * 1024) return (b / 1024).toFixed(1) + ' KB';
-  if (b < 1024 * 1024 * 1024) return (b / 1024 / 1024).toFixed(2) + ' MB';
-  return (b / 1024 / 1024 / 1024).toFixed(2) + ' GB';
-}
-
-function formatTime(iso) {
-  const d = new Date(iso);
-  const pad = n => String(n).padStart(2, '0');
-  return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
-}
-
-function escapeHtml(s) {
-  return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
-}
-
-// ---------------------------------------------------------------------------
-// Boot
-// ---------------------------------------------------------------------------
-loadFiles();
-setInterval(loadFiles, 30000);
+// formatRemain / isAlmostExpired / iconFor / formatSize / formatTime / escapeHtml
+// 见 helpers.js; 倒计时 setInterval 也在 helpers.js 中启动