feat: file viewer

static/app.js

@@ -23,6 +23,12 @@ const batchBtn     = $('batchBtn');
 const batchCount   = $('batchCount');
 const batchDeleteBtn  = $('batchDeleteBtn');
 const batchDeleteCount= $('batchDeleteCount');
+const previewModal   = $('previewModal');
+const previewBackdrop= $('previewBackdrop');
+const previewTitle   = $('previewTitle');
+const previewBody    = $('previewBody');
+const previewClose   = $('previewClose');
+const previewDownload= $('previewDownload');
 
 // pending[i] = { id, file, xhr, status: 'pending'|'uploading'|'done'|'error'|'cancelled', progress, error }
 let pending = [];
@@ -377,12 +383,14 @@ function fileRow(f) {
       </div>
     </div>
     <div class="file-actions">
+      <button class="icon-btn" title="预览" data-preview="${escapeHtml(f.filename)}">▷</button>
       <button class="icon-btn" title="复制链接" data-url="${escapeHtml(f.url)}">⎘</button>
       <a class="icon-btn" title="下载" href="${escapeHtml(f.url)}" download>↓</a>
       <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-preview]').onclick = () => openPreview(f.filename, f.url);
   div.querySelector('[data-url]').onclick = () => copyToClipboard(location.origin + f.url);
   div.querySelector('[data-delete]').onclick = () => deleteFile(f.filename, div);
   return div;
@@ -439,5 +447,58 @@ async function copyToClipboard(text) {
   }
 }
 
+// ---------------------------------------------------------------------------
+// Preview modal (依赖 CDN 加载的 FlyfishFileViewerWebFull 全局对象)
+// ---------------------------------------------------------------------------
+let previewViewer = null;
+
+function openPreview(filename, url) {
+  if (!window.FlyfishFileViewerWebFull) {
+    toast('预览组件尚未加载完成, 请稍后再试', 'error');
+    return;
+  }
+  previewTitle.textContent = filename;
+  previewDownload.href = url;
+  previewDownload.download = filename;
+  previewBody.innerHTML = '<div class="preview-loading">加载中...</div>';
+  previewModal.hidden = false;
+  document.body.style.overflow = 'hidden';
+
+  // 卸载上一个实例, 防内存泄漏
+  if (previewViewer && typeof previewViewer.destroy === 'function') {
+    try { previewViewer.destroy(); } catch {}
+  }
+  previewViewer = null;
+
+  // mountViewer 接收 element 或 selector; 用容器 id 保证重入安全
+  try {
+    previewViewer = window.FlyfishFileViewerWebFull.mountViewer(previewBody, {
+      url,
+      options: {
+        theme: 'dark',
+        toolbar: { position: 'bottom-right' },
+      },
+    });
+  } catch (e) {
+    previewBody.innerHTML = `<div class="preview-loading">预览失败: ${escapeHtml(e && e.message || 'unknown')}</div>`;
+  }
+}
+
+function closePreview() {
+  previewModal.hidden = true;
+  document.body.style.overflow = '';
+  if (previewViewer && typeof previewViewer.destroy === 'function') {
+    try { previewViewer.destroy(); } catch {}
+  }
+  previewViewer = null;
+  previewBody.innerHTML = '';
+}
+
+previewClose.addEventListener('click', closePreview);
+previewBackdrop.addEventListener('click', closePreview);
+document.addEventListener('keydown', e => {
+  if (e.key === 'Escape' && !previewModal.hidden) closePreview();
+});
+
 // formatRemain / isAlmostExpired / iconFor / formatSize / formatTime / escapeHtml
 // 见 helpers.js; 倒计时 setInterval 也在 helpers.js 中启动