Dufs Media：给 dufs 加一个图片和视频浏览界面
内容提要
Dufs Media 是通过 dufs --assets 接入的静态前端，无需修改后端即可将文件列表变为图片视频浏览界面，支持缩略图、详情预览、轮播、循环播放、上传和按日期排序，权限沿用 dufs。缩略图由浏览器加载原图，量大时压力明显；MOV 播放取决于编码，不做静默转码。
延伸解读
接入方式与权限逻辑
Dufs Media 通过 dufs 的 --assets 参数接入，无需修改后端。它直接读取 dufs 注入的目录、文件列表和权限信息，上传按钮和目录下载都沿用后端权限结果，只读用户看不到上传入口。这意味着权限控制完全由 dufs 负责，前端不做额外判断，部署时只需构建静态资源并指定路径即可。
缩略图机制与性能瓶颈
目前缩略图由浏览器加载原图后缩放生成，因为 dufs 没有提供缩略图生成接口。当图片数量多或原文件很大时，网络传输和浏览器渲染压力会明显增加。文章指出，这类场景需要单独的服务端缩略图服务，前端本身无法解决。因此，如果媒体库规模较大，应优先考虑补充服务端缩略图能力。
MOV 播放的兼容性处理
MOV 文件的播放能力容易误判：Safari 通常能直接播放，Chrome 的能力检测可能返回空字符串，但实际装有 H.264 编码的 MOV 又能播放。Dufs Media 没有在加载前拦截 MOV，而是让浏览器实际请求文件，再根据播放器错误显示提示。项目不做静默转码，浏览器不支持容器或编码时会明确报错，跨浏览器稳定播放仍需提前转成 H.264 MP4。
预览体验与 URL 状态
图片和视频共用一套预览界面，顶部显示文件名、序号、下载和关闭按钮，左右按钮切换同目录媒体。图片可自动轮播，视频播完自动播放下一条，画面按可用高度完整显示，竖屏视频无需滚动。详情状态写入 URL 的 preview 参数，刷新后仍停留在当前文件，链接可直接分享，关闭详情时 URL 恢复为目录地址。
Q&A
Dufs Media 是什么？它和 dufs 是什么关系？
Dufs Media 是一个独立的静态前端，通过 dufs 官方的 --assets 参数接入，用于将 dufs 默认的文件列表界面替换为适合浏览图片和视频的界面。它不修改 dufs 后端，直接读取 dufs 注入的目录、文件列表和权限信息。
如何部署 Dufs Media？
构建后，将 dist 目录通过 dufs 的 --assets 参数指定即可。具体步骤：先执行 pnpm install 和 pnpm build，然后运行 dufs /path/to/files --assets /path/to/dufs-media-assets/dist。
Dufs Media 支持哪些主要功能？
支持图片缩略图显示、视频封面（取开头画面）、按名称/日期/大小排序、筛选当前文件夹、图片和视频的详情预览（含轮播、循环播放）、上传（权限允许时）、以及将预览状态写入 URL 的 preview 参数以便刷新或分享。
Dufs Media 的缩略图是如何生成的？有什么性能问题？
缩略图由浏览器加载原图后缩放显示，因为 dufs 没有提供缩略图生成接口。当图片很多或原文件很大时，网络和浏览器压力会明显增加。前端本身无法解决，后续需要单独的缩略图服务。
Dufs Media 如何处理 MOV 视频的播放？
Dufs Media 不会在加载前拦截 MOV，而是让浏览器实际请求文件，根据播放器返回的错误显示提示。这样避免了因能力检测不准确而误挡可播放的视频。项目不做静默转码，浏览器不支持容器或编码时会明确报错。
Dufs Media 的权限控制是如何实现的？
权限完全沿用 dufs 后端。上传按钮和上传日志只在允许上传时显示，只读用户看不到上传入口；目录下载也跟随后端权限，前端没有另做一套判断。
