update: single write cache

README.md

@@ -28,12 +28,15 @@ curl -F "file=@report.pdf" http://localhost:8080/upload
 ## 配置(命令行 flag)
 
 ```text
--dir        ./data/uploads   上传文件保存目录
+-dir                       ./data/uploads                              上传文件保存目录
--listen     :8080            HTTP 监听地址
+-listen                    :8080                                       HTTP 监听地址
--ttl        24h              文件过期 TTL
+-ttl                       24h                                         文件过期 TTL
--scan       1h               清理扫描间隔
+-scan                      1h                                          清理扫描间隔
--quota      10737418240      总目录配额(字节,默认 10 GB;0 = 不限)
+-quota                     10737418240                                 总目录配额(字节,默认 10 GB;0 = 不限)
--audit-dir  ./data/audit     审计日志目录(每天一个 YYYY-MM-DD.log 文件;空字符串禁用)
+-audit-dir                 ./data/audit                                审计日志目录(每天一个 YYYY-MM-DD.log 文件;空字符串禁用)
+-file-viewer-cdn           https://unpkg.com/@file-viewer/web-full@3.0.0  文件预览库 CDN 地址
+-file-viewer-cache         ./data/file-viewer                          文件预览库资源缓存目录(空字符串 = 禁用,全部 CDN 透传)
+-file-viewer-ttl           0                                           缓存文件有效期(0 = 永久)
 ```
 
 示例:把 TTL 改成 1 小时、配额 1 GB:
@@ -55,6 +58,7 @@ curl -F "file=@report.pdf" http://localhost:8080/upload
 | POST   | `/download-zip`            | 批量下载 (body: `{"files":[...]}`, 最多 100 项) |
 | POST   | `/files-delete`            | 批量删除 (body: `{"files":[...]}`, 最多 100 项) |
 | DELETE | `/files/:filename`         | 删除文件                                   |
+| GET    | `/file-viewer/*filepath`   | 文件预览库资源(CDN 缓存代理)             |
 
 ---
 

fileviewer.go

@@ -0,0 +1,210 @@
+package main
+
+import (
+	"flag"
+	"fmt"
+	"io"
+	"log"
+	"net/http"
+	"os"
+	"path"
+	"path/filepath"
+	"strings"
+	"time"
+
+	"github.com/gin-gonic/gin"
+	"golang.org/x/sync/singleflight"
+)
+
+// -----------------------------------------------------------------------------
+// file-viewer CDN 资源本地缓存代理
+//
+// 前端 HTML 引用 /file-viewer/dist/flyfish-file-viewer-web-full.iife.js, 后端
+// 先读本地缓存, 命中直接返回; 未命中从 unpkg 拉, 边写盘边流回客户端, 后续请求
+// 全部走磁盘. vendor/ 资源同理按需拉取.
+//
+// 设计取舍:
+//   - 缓存键 = URL 相对路径 (如 dist/foo.js / vendor/libarchive/worker-bundle.js).
+//     升级 library 版本需手动 -rm 缓存目录, 避免旧版资源污染.
+//   - 缓存目录不可写时降级为纯 CDN 透传, 不阻断预览功能.
+//   - 缓存关闭 (-file-viewer-cache="") 时完全走 CDN, 行为与改造前一致.
+// -----------------------------------------------------------------------------
+
+var (
+	fileViewerCDN      = flag.String("file-viewer-cdn", "https://unpkg.com/@file-viewer/web-full@3.0.0", "file-viewer CDN base URL")
+	fileViewerCacheDir  = flag.String("file-viewer-cache", "./data/file-viewer", "file-viewer 资源缓存目录 (空字符串 = 禁用缓存, 全部 CDN 透传)")
+	fileViewerCacheTTL = flag.Duration("file-viewer-ttl", 0, "缓存文件最大有效期 (0 = 永久, 仅在文件已存在时刷新 Content-Type)")
+)
+
+// 30 min 足够 330 KB 的 iife 与 vendor/ 下最大的 docx/pptx wasm (~50 MB) 在慢网下完成
+var fileViewerHTTPClient = &http.Client{Timeout: 30 * time.Minute}
+
+// fileViewerFetchGroup 按 cachePath 去重并发 fetch:
+// 同 key 同一时刻只有一个 goroutine 真正去 CDN 拉, 其他并发请求阻塞等待,
+// fetch 完成后从磁盘读 (文件已经落盘). 避免多个请求对同一文件重复上游拉取 + 写盘竞态.
+var fileViewerFetchGroup singleflight.Group
+
+// fileViewerProxy 处理 GET /file-viewer/*filepath.
+//   1. 校验路径防 ../ 越界
+//   2. 缓存命中 -> 直接读盘
+//   3. 缓存未命中 -> 拉上游, 边写盘边流回
+//   4. 缓存关闭 -> 直接透传到 CDN
+func fileViewerProxy(c *gin.Context) {
+	raw := c.Param("filepath")
+	name, ok := validateFileViewerPath(raw)
+	if !ok {
+		c.JSON(http.StatusBadRequest, gin.H{"error": "invalid path"})
+		return
+	}
+
+	if *fileViewerCacheDir == "" {
+		proxyFileViewer(c, name)
+		return
+	}
+
+	cachePath := filepath.Join(*fileViewerCacheDir, filepath.FromSlash(name))
+
+	// 命中: 直接读盘 (TTL > 0 且文件超过有效期则强制回源)
+	if info, err := os.Stat(cachePath); err == nil && !info.IsDir() {
+		if *fileViewerCacheTTL <= 0 || time.Since(info.ModTime()) < *fileViewerCacheTTL {
+			c.Header("Cache-Control", "public, max-age=31536000, immutable")
+			c.File(cachePath)
+			return
+		}
+		log.Printf("[file-viewer] cache expired, refetching %s", name)
+	}
+
+	// 未命中: 拉上游 + 边写盘边流回
+	fetchAndCache(c, cachePath, name)
+}
+
+// validateFileViewerPath 校验并清理 fileviewer 子路径, 防 ../ 越界.
+// gin 的 *filepath wildcard 包含前导 '/', 先 strip 再清理.
+// 先按 '/' 切分检查 `..` 分量 (path.Clean 会折叠中间 .., 仅靠它不够),
+// 再 path.Clean 兜底处理 // / ./ 等冗余.
+func validateFileViewerPath(raw string) (string, bool) {
+	raw = strings.TrimPrefix(raw, "/")
+	if raw == "" || strings.ContainsRune(raw, 0) {
+		return "", false
+	}
+	for part := range strings.SplitSeq(raw, "/") {
+		if part == ".." {
+			return "", false
+		}
+	}
+	clean := path.Clean(raw)
+	if clean == "." || clean == "" || strings.HasPrefix(clean, "..") || strings.HasPrefix(clean, "/") {
+		return "", false
+	}
+	return clean, true
+}
+
+// proxyFileViewer: 缓存关闭时直接透传到 CDN.
+func proxyFileViewer(c *gin.Context, name string) {
+	upstream := upstreamURL(name)
+	resp, err := fileViewerHTTPClient.Get(upstream)
+	if err != nil {
+		log.Printf("[file-viewer] upstream fetch %s: %v", name, err)
+		c.JSON(http.StatusBadGateway, gin.H{"error": "upstream fetch failed"})
+		return
+	}
+	defer resp.Body.Close()
+
+	if ct := resp.Header.Get("Content-Type"); ct != "" {
+		c.Header("Content-Type", ct)
+	}
+	c.Status(resp.StatusCode)
+	if _, err := io.Copy(c.Writer, resp.Body); err != nil {
+		log.Printf("[file-viewer] stream %s: %v", name, err)
+	}
+}
+
+// fetchAndCache: 通过 singleflight 按 cachePath 去重并发. 同一个 key 只有第一个
+// 请求调 doFetchAndCache (拉 CDN + 边写盘边流回 writer 的 c.Writer); 其他并发
+// 请求阻塞等待, 拿到结果后从磁盘读 (c.File).
+//
+// 注意: singleflight 的 shared=true 表示"结果被分享给多个 caller", 并不区分
+// 首 caller 还是后续 caller. 这里用 closure 变量 isWriter 精确标识谁是写者:
+//  - closure 被执行 = 写者 (响应已流回本 c.Writer, 直接返回)
+//  - closure 未执行 = 等待者 (自己组装响应: 错误 -> 502, 成功 -> c.File)
+func fetchAndCache(c *gin.Context, cachePath, name string) {
+	isWriter := false
+	_, err, _ := fileViewerFetchGroup.Do(cachePath, func() (interface{}, error) {
+		isWriter = true
+		return nil, doFetchAndCache(c, cachePath, name)
+	})
+
+	if isWriter {
+		return
+	}
+
+	if err != nil {
+		c.JSON(http.StatusBadGateway, gin.H{"error": err.Error()})
+		return
+	}
+	c.Header("Cache-Control", "public, max-age=31536000, immutable")
+	c.File(cachePath)
+}
+
+// doFetchAndCache: writer 路径专属 — 拉上游, 边写盘边流回传入的 c.Writer.
+// 任何错误都会写入 c.Writer (502), 并返回 error 让 singleflight 把结果传给 waiter.
+func doFetchAndCache(c *gin.Context, cachePath, name string) error {
+	upstream := upstreamURL(name)
+	resp, err := fileViewerHTTPClient.Get(upstream)
+	if err != nil {
+		log.Printf("[file-viewer] upstream fetch %s: %v", name, err)
+		c.JSON(http.StatusBadGateway, gin.H{"error": "upstream fetch failed"})
+		return err
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != http.StatusOK {
+		log.Printf("[file-viewer] upstream %s returned %d", name, resp.StatusCode)
+		c.JSON(http.StatusBadGateway, gin.H{"error": "upstream returned " + resp.Status})
+		return fmt.Errorf("upstream returned %s", resp.Status)
+	}
+
+	if ct := resp.Header.Get("Content-Type"); ct != "" {
+		c.Header("Content-Type", ct)
+	}
+	c.Header("Cache-Control", "public, max-age=31536000, immutable")
+	c.Status(http.StatusOK)
+
+	// 目录/文件创建失败 -> 降级透传, 不缓存
+	if err := os.MkdirAll(filepath.Dir(cachePath), 0o755); err != nil {
+		log.Printf("[file-viewer] mkdir cache dir: %v", err)
+		_, _ = io.Copy(c.Writer, resp.Body)
+		return err
+	}
+	f, err := os.Create(cachePath)
+	if err != nil {
+		log.Printf("[file-viewer] create cache file: %v", err)
+		_, _ = io.Copy(c.Writer, resp.Body)
+		return err
+	}
+
+	// 关键: MultiWriter 让客户端拿到的同时落盘, 用户感知零等待
+	mw := io.MultiWriter(c.Writer, f)
+	written, copyErr := io.Copy(mw, resp.Body)
+	cErr := f.Close()
+
+	if copyErr != nil || cErr != nil {
+		_ = os.Remove(cachePath) // 写一半的文件清理掉, 下次重新拉
+		if copyErr != nil {
+			log.Printf("[file-viewer] copy %s: %v", name, copyErr)
+		}
+		if cErr != nil {
+			log.Printf("[file-viewer] close %s: %v", name, cErr)
+		}
+		if copyErr != nil {
+			return copyErr
+		}
+		return cErr
+	}
+	log.Printf("[file-viewer] cached %s (%d bytes)", name, written)
+	return nil
+}
+
+func upstreamURL(name string) string {
+	return strings.TrimRight(*fileViewerCDN, "/") + "/" + name
+}

go.mod

@@ -1,10 +1,11 @@
 module tmp-upload
 
-go 1.24
+go 1.25.0
 
 require (
 	github.com/gin-gonic/gin v1.10.0
 	github.com/robfig/cron/v3 v3.0.1
+	golang.org/x/sync v0.22.0
 )
 
 require (

go.sum

@@ -72,6 +72,8 @@ golang.org/x/crypto v0.23.0 h1:dIJU/v2J8Mdglj/8rJ6UUOM3Zc9zLZxVZwwxMooUSAI=
 golang.org/x/crypto v0.23.0/go.mod h1:CKFgDieR+mRhux2Lsu27y0fO304Db0wZe70UKqHu0v8=
 golang.org/x/net v0.25.0 h1:d/OCCoBEUq33pjydKrGQhw7IlUPI2Oylr+8qLx49kac=
 golang.org/x/net v0.25.0/go.mod h1:JkAGAh7GEvH74S6FOH42FLoXpXbE/aqXSrIQjXgsiwM=
+golang.org/x/sync v0.22.0 h1:SZjpbeLmrCk4xhRSZFNZW5gFUeCeFgjekvI/+gfScek=
+golang.org/x/sync v0.22.0/go.mod h1:9xrNwdLfx4jkKbNva9FpL6vEN7evnE43NNNJQ2LF3+0=
 golang.org/x/sys v0.5.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.20.0 h1:Od9JTbYCk261bKm4M/mw7AklTlFYIa0bIp9BgSm1S8Y=

main.go

@@ -64,6 +64,9 @@ func main() {
 	r.DELETE("/files/:filename", deleteHandler)
 	r.GET("/files", listHandler)
 
+	// file-viewer CDN 资源本地缓存代理 (前端文件预览依赖)
+	r.GET("/file-viewer/*filepath", fileViewerProxy)
+
 	log.Printf("server listening on %s, uploads -> %s, ttl=%s", *listen, *uploadDir, *fileTTL)
 	if err := r.Run(*listen); err != nil {
 		log.Fatal(err)

static/app.css

@@ -357,3 +357,65 @@
     transition: width 0.2s;
   }
   .total-label { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
+
+  /* Preview modal */
+  .preview-modal {
+    position: fixed;
+    inset: 0;
+    z-index: 10000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .preview-modal[hidden] { display: none; }
+  .preview-backdrop {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(2px);
+  }
+  .preview-panel {
+    position: relative;
+    width: min(1100px, 92vw);
+    height: min(820px, 88vh);
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+  .preview-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--border);
+    background: var(--panel-2);
+  }
+  .preview-title {
+    flex: 1;
+    min-width: 0;
+    color: var(--text);
+    font-size: 14px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .preview-actions { display: flex; gap: 6px; flex-shrink: 0; }
+  .preview-body {
+    flex: 1;
+    min-height: 0;
+    background: var(--bg);
+    overflow: auto;
+  }
+  .preview-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: var(--text-dim);
+    font-size: 14px;
+  }

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 中启动

static/index.html.tpl

@@ -62,6 +62,22 @@
 
 <div class="toast" id="toast"></div>
 
+<!-- 文件预览弹窗 (CDN 资源经后端 /file-viewer/*filepath 缓存代理, 避免运行时 unpkg 依赖) -->
+<div class="preview-modal" id="previewModal" hidden>
+  <div class="preview-backdrop" id="previewBackdrop"></div>
+  <div class="preview-panel">
+    <div class="preview-header">
+      <span class="preview-title" id="previewTitle"></span>
+      <div class="preview-actions">
+        <a class="icon-btn" id="previewDownload" title="下载" download>↓</a>
+        <button class="icon-btn" id="previewClose" title="关闭" aria-label="关闭预览">✕</button>
+      </div>
+    </div>
+    <div class="preview-body" id="previewBody"></div>
+  </div>
+</div>
+
+<script src="/file-viewer/dist/flyfish-file-viewer-web-full.iife.js"></script>
 <script src="/static/app.js"></script>
 <script src="/static/helpers.js"></script>
 <script src="/static/batch.js"></script>