dufs-material-assets

dufs 的 Material Design 风格自定义前端界面。

使用 Vue 3 + Vuetify 构建，部分设计参考 Cloudreve，添加了一些额外的功能。

如果你是为了部署本地文件共享或 WebDAV 服务（不包括挂载网盘），因为最近的“AList 被商业收购/投毒事件”而选择 dufs 作为替代品，那么你大概也会对这个项目感兴趣～

• 按照“自定义界面”的介绍进行配置即可实现图 2 的效果
  • 背景图片来自 Pixabay #1 #2
• 实现图 3 的效果除了按照“自定义界面”进行配置，还需要编辑这个项目的 HTML 文件，并引入额外编写的 JS 和 CSS 等资源
  • 图中的主题设计取自“maimai でらっくす Splash”的官方网站
  • 进行这种程度的修改需要基本的前端开发知识

已实现/适配的功能

标有✨的是原版前端界面未支持，在本项目中额外添加的功能。

• 文件列表
• URL 路径前缀
• 显示符号链接
• 打包下载
• 登录后复制带有 Token 的下载链接✨
  • dufs v0.44.0 添加的功能
  • 此类链接可用于浏览器以外的下载器，无需在下载器中配置登录
• 文件上传
  • 支持拖拽
• 新建文件夹
• 移动/重命名/删除/编辑文件
• 搜索
• 深色模式
• 响应式设计
• README 文件展示✨
  • 自动在文件列表下方展示当前目录的 README.md、README.txt 或 README 文件
• 文本文件预览✨
  • 代码高亮（使用 prism 实现）
  • 数学公式渲染（使用 https://i.upmath.me/ 的 API 实现）
  • 支持渲染 Markdown 文件（使用 Marked 实现）
• 文档预览✨
  • 支持在线查看 PDF 文件，docx、xlsx、pptx 等 Office 文档和 draw.io、VSDX 等图表
  • Office 文档查看使用 https://view.officeapps.live.com/op/view.aspx 实现，可以在线查看 10 MB 以内的文件
  • draw.io 图表查看使用 draw.io 的网页版实现
  • 部署的 dufs 实例需要可以在公网访问才能预览 Office 文档和 draw.io 图表，预览时文件会被服务提供者获取并缓存
  • 默认不启用，有需要的话请在正确配置 dufs 后通过“自定义界面”启用
• 图片查看器✨
  • 支持一键打开 Photopea 编辑图片
  • 也可以使用 Photopea 查看浏览器不支持的 PSD、AI、JPEG XL 等格式的图片（JPEG XL 被浏览器支持后将改为直接使用浏览器查看）
  • 需要配置好 CORS（启动 dufs 时设置 --enable-cors 或通过 nginx 等反向代理时添加 Access-Control-Allow-Origin: https://www.photopea.com），因为是本地获取文件后使用 Photopea 打开所以无需公网访问
  • 默认不启用，有需要的话请在正确配置 dufs 后通过“自定义界面”启用
• 视频播放器
  • 使用 <video> 标签实现，支持的封装和编码可以参见 caniuse
  • 支持显示同目录下同名的 WebVTT、SRT、ASS 字幕（使用 subsrt 转换为 WebVTT 后使用 <track> 标签显示，因此无法支持样式）
  • 例如对于视频文件 example.mp4，会自动加载 example.{vtt,srt,ass} 和 example.*.{vtt,srt,ass}。
• 音乐播放器✨
  • 使用 <audio> 标签实现，支持的封装和编码可以参见 caniuse
  • 同一目录下音频文件顺序/随机/循环播放
  • 解析并展示标题、艺术家、专辑名称、封面图等元数据（使用 jsmediatags 实现）
• 字体查看器✨
• 自定义页面标题和主题色✨
• 自定义页脚✨
• 分页展示文件✨
  • 适用于目录内有上千个文件的情况
  • 默认不启用，可以通过“自定义界面”启用
• 多语言支持✨
  • 已支持的语言或添加翻译请参见 src/i18n.js

使用方法

从 GitHub Actions 或 nightly.link 下载前端资源后，假定保存在 dufs-material-assets 目录，在启动 dufs 时添加参数 --assets dufs-material-assets。

也可以自己构建前端资源。

如果不想单独保存这个项目的前端资源和在每次启动 dufs 时设定 --assets 参数，在 Actions 里面也有编译好的、嵌入了这个项目的前端资源（替换了原版的前端资源）的 dufs 二进制文件，不过以这种方式使用将无法自定义界面。

Releases 会在 dufs 发布新版本时更新，版本号和 dufs 一致，但不一定是这个项目的最新版本。

如果你使用过 dufs 原版的前端资源，然后切换到这个项目的前端资源重新运行，打开网页时可能会出现“No data”的提示，这是因为你的浏览器仍然在使用缓存的原版前端资源的 index.js，清除缓存后刷新即可（例如使用 Ctrl+F5）。

pnpm run dev
pnpm run dufs-api

截图

自定义界面

按照以下指引在 index.html 的 <script> 部分添加 window.__DUFS_MATERIAL_CONFIG__：

window.__DUFS_MATERIAL_CONFIG__ = {
    // 网页标题
    document: 'Index of ${path} - Custom title',
    // 左上角显示的标题和 LOGO
    page: {
        title: 'Custom title',
        logo: {
            light: 'https://example.com/logo-light.png',
            dark: 'https://example.com/logo-dark.png',
        },
        // 也可以在浅色和深色主题下使用同一个 LOGO
        // logo: 'https://example.com/logo.png',
    },
    // 自定义页脚
    // 可以使用 Markdown 格式
    footer: 'Copyright © 2025 **John Doe** ![](https://img.shields.io/badge/any_text-you_like-blue)\\n\\n[京ICP备XXXXXXXX号-X](https://beian.miit.gov.cn/)',
    // 背景图片
    background: {
        light: 'https://example.com/background-light.webp',
        dark: 'https://example.com/background-dark.webp',
    },
    // 也可以在浅色和深色主题下使用同一张背景图片
    // background: 'https://example.com/background.webp',
    // 浅色和深色主题
    // 参见 https://vuetifyjs.com/zh-Hans/features/theme/ 的 colors 部分
    theme: {
        light: {
            primary: '#0288d1',
            secondary: '#00b0ff',
        },
        dark: {
            primary: '#026da7',
            secondary: '#008dcc',
        },
    },
    // 为卡片添加毛玻璃效果
    // 可以设置模糊半径（单位 px）和不透明度（范围 0-1）
    // 建议和背景图片配合使用
    glassmorphism: {
        // 顶部应用栏
        appbar: { blur: 5, alpha: .6 },
        // 文件列表
        filelist: { blur: 5, alpha: .8 },
        // README
        readme: { blur: 5, alpha: .8 },
        // 预览窗口
        preview: { blur: 5, alpha: .8 },
    },
    // 分页大小
    limit: 100,
    // 是否允许使用第三方服务查看文件（Microsoft Office Online、draw.io、Photopea）
    // 部署时需要满足对应条件，否则即使启用了也无法查看
    externalViewer: false,
};

// 由 dufs 填充的页面内容，不要修改
window.__DUFS_PREFIX__ = "__ASSETS_PREFIX__";
window.__INITIAL_DATA__ = JSON.parse(decodeURIComponent(escape(atob("__INDEX_DATA__"))));

如果 LOGO 和背景图片需要从本地加载，假设前端资源的目录结构如下：

dufs-material-assets
│  index.html
│  vite.svg
│
└─assets
        index-xxxxxxxx.js
        index-xxxxxxxx.css

你可以将图片（假定为 image.webp）放在 assets 目录下，然后地址填写为 __ASSETS_PREFIX__assets/image.webp 即可。dufs 会把 index.html 的 __ASSETS_PREFIX__ 替换成 /prefix/__dufs_v0.0.0__/ 这样的带有 --path-prefix 设定的前缀（如果有的话）和 dufs 版本号的路径，最后会指向 --assets 指定的目录里面的内容。

window.__DUFS_MATERIAL_CONFIG__ 的所有项目都是可选的，例如只想自定义 LOGO 的话，只写这一部分就可以了：

window.__DUFS_MATERIAL_CONFIG__ = {
    page: {
        logo: '__ASSETS_PREFIX__assets/logo.svg',
    },
};