← 返回到所有服务
GitHub 仓库信息
获取时间 · 2026年6月5日 ★ 145 最新版本: v0.46.0 最后更新: 2026年6月5日
README
# dufs-material-assets
[](https://github.com/TransparentLC/dufs-material-assets/actions/workflows/ci.yml)
[dufs](https://github.com/sigoden/dufs) 的 Material Design 风格自定义前端界面。
使用 Vue 3 + Vuetify 构建，部分设计参考 [Cloudreve](https://github.com/cloudreve/Cloudreve)，添加了一些额外的功能。
如果你是为了部署本地文件共享或 WebDAV 服务（不包括挂载网盘），因为最近的“AList 被商业收购/投毒事件”而选择 dufs 作为替代品，那么你大概也会对这个项目感兴趣～
| | | |
| - | - | - |
| <picture><source media="(prefers-color-scheme:dark)" srcset="https://github.com/TransparentLC/dufs-material-assets/assets/47057319/f8488128-ad2b-4f3d-950e-10c2a11ac390"><img src="https://github.com/TransparentLC/dufs-material-assets/assets/47057319/094fa2be-afeb-4010-9bec-d014b888b97b"></picture> | <picture><source media="(prefers-color-scheme:dark)" srcset="https://p.sda1.dev/29/85cb90f522dbb8b4eabec7f3f74ec7dd/J8uL.avif"><img src="https://p.sda1.dev/29/8be21ca522b4e72a413803470ccafb11/h5K6.avif"></picture> | <picture><source media="(prefers-color-scheme:dark)" srcset="https://p.sda1.dev/29/2c54e52cef25e1267f3359451499fd8b/hRnv.avif"><img src="https://p.sda1.dev/29/a20f9d52828b74db2ac7baada95276ea/nJFN.avif"></picture> |
* 按照[“自定义界面”](#自定义界面)的介绍进行配置即可实现图 2 的效果
* 背景图片来自 Pixabay [#1](https://pixabay.com/photos/mountains-lake-canada-banff-nature-9606525/) [#2](https://pixabay.com/photos/architecture-building-business-city-1868667/)
* 实现图 3 的效果除了按照[“自定义界面”](#自定义界面)进行配置，还需要编辑这个项目的 HTML 文件，并引入额外编写的 JS 和 CSS 等资源
* 图中的主题设计取自“maimai でらっくす Splash”的[官方网站](https://web.archive.org/web/20201231182646/https://maimai.sega.jp/)
* 进行这种程度的修改需要基本的前端开发知识
## 已实现/适配的功能
标有✨的是原版前端界面未支持，在本项目中额外添加的功能。
* 文件列表
* URL 路径前缀
* 显示符号链接
* 打包下载
* 登录后复制带有 Token 的下载链接✨
* dufs [v0.44.0](https://github.com/sigoden/dufs/pull/603) 添加的功能
* 此类链接可用于浏览器以外的下载器，无需在下载器中配置登录
* 文件上传
* 支持拖拽
* 新建文件夹
* 移动/重命名/删除/编辑文件
* 搜索
* 深色模式
* 响应式设计
* README 文件展示✨
* 自动在文件列表下方展示当前目录的 `README.md`、`README.txt` 或 `README` 文件
* 文本文件预览✨
* 代码高亮（使用 [prism](https://prismjs.com) 实现）
* 数学公式渲染（使用 https://i.upmath.me/ 的 API 实现）
* 支持渲染 Markdown 文件（使用 [Marked](https://marked.js.org/) 实现）
* 文档预览✨
* 支持在线查看 PDF 文件，docx、xlsx、pptx 等 Office 文档和 draw.io、VSDX 等图表
* Office 文档查看使用 https://view.officeapps.live.com/op/view.aspx 实现，可以在线查看 10 MB 以内的文件
* draw.io 图表查看使用 [draw.io 的网页版](https://www.drawio.com/blog/online-diagram-viewer)实现
* 部署的 dufs 实例需要可以在公网访问才能预览 Office 文档和 draw.io 图表，预览时文件会被服务提供者获取并缓存
* 默认不启用，有需要的话请在正确配置 dufs 后通过[“自定义界面”](#自定义界面)启用
* 图片查看器✨
* 支持[一键打开 Photopea](https://github.com/photopea/photopea/issues/966) 编辑图片
* 也可以使用 Photopea 查看浏览器不支持的 PSD、AI、JPEG XL 等格式的图片（JPEG XL 被浏览器支持后将改为直接使用浏览器查看）
* 需要配置好 CORS（启动 dufs 时设置 `--enable-cors` 或通过 nginx 等反向代理时添加 `Access-Control-Allow-Origin: https://www.photopea.com`），因为是本地获取文件后使用 Photopea 打开所以无需公网访问
* 默认不启用，有需要的话请在正确配置 dufs 后通过[“自定义界面”](#自定义界面)启用
* 视频播放器
* 使用 `<video>` 标签实现，支持的封装和编码可以参见 [caniuse](https://caniuse.com/?search=video%20format)
* 支持显示同目录下同名的 WebVTT、SRT、ASS 字幕（使用 [subsrt](https://www.npmjs.com/package/subsrt) 转换为 WebVTT 后使用 `<track>` 标签显示，因此无法支持样式）
* 例如对于视频文件 `example.mp4`，会自动加载 `example.{vtt,srt,ass}` 和 `example.*.{vtt,srt,ass}`。
* 音乐播放器✨
* 使用 `<audio>` 标签实现，支持的封装和编码可以参见 [caniuse](https://caniuse.com/?search=audio%20format)
* 同一目录下音频文件顺序/随机/循环播放
* 解析并展示标题、艺术家、专辑名称、封面图等元数据（使用 [jsmediatags](https://www.npmjs.com/package/jsmediatags) 实现）
* 字体查看器✨
* 自定义页面标题和主题色✨
* 自定义页脚✨
* 分页展示文件✨
* 适用于目录内有上千个文件的情况
* 默认不启用，可以通过[“自定义界面”](#自定义界面)启用
* 多语言支持✨
* 已支持的语言或添加翻译请参见 [`src/i18n.js`](https://github.com/TransparentLC/dufs-material-assets/blob/master/src/i18n.js)
## 使用方法
从 [GitHub Actions](https://github.com/TransparentLC/dufs-material-assets/actions) 或 [nightly.link](https://nightly.link/TransparentLC/dufs-material-assets/workflows/ci/master) 下载前端资源后，假定保存在 `dufs-material-assets` 目录，在启动 dufs 时添加参数 `--assets dufs-material-assets`。
也可以自己构建前端资源。
如果不想单独保存这个项目的前端资源和在每次启动 dufs 时设定 `--assets` 参数，在 Actions 里面也有编译好的、嵌入了这个项目的前端资源（替换了原版的前端资源）的 dufs [二进制文件](https://github.com/TransparentLC/dufs-material-assets/actions/workflows/build-embed.yml)，不过以这种方式使用将无法自定义界面。
[Releases](https://github.com/TransparentLC/dufs-material-assets/releases) 会在 dufs 发布新版本时更新，版本号和 dufs 一致，但不一定是这个项目的最新版本。
如果你使用过 dufs 原版的前端资源，然后切换到这个项目的前端资源重新运行，打开网页时可能会出现“No data”的提示，这是因为你的浏览器仍然在使用缓存的原版前端资源的 `index.js`，清除缓存后刷新即可（例如使用 <kbd>Ctrl+F5</kbd>）。
<details>
<summary>对于开发的补充说明</summary>
```shell
pnpm run dev
pnpm run dufs-api
```
为了方便适配各个功能，`dufs-api` 固定了一些启动 dufs 的参数，与代码中仅在开发模式下会运行的部分对应。
</details>
## 截图
<details>
<summary>搜索/响应式设计</summary>
</details>
<details>
<summary>文本文件预览</summary>
</details>
<details>
<summary>图片查看器</summary>
</details>
<details>
<summary>视频播放器</summary>
</details>
<details>
<summary>音乐播放器</summary>
</details>
<details>
<summary>字体查看器</summary>
</details>
## 自定义界面
按照以下指引在 `index.html` 的 `<script>` 部分添加 `window.__DUFS_MATERIAL_CONFIG__`：
```js
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** \\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 和背景图片需要从本地加载，假设前端资源的目录结构如下：
```plain
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 的话，只写这一部分就可以了：
```js
window.__DUFS_MATERIAL_CONFIG__ = {
page: {
logo: '__ASSETS_PREFIX__assets/logo.svg',
},
};
```
Dufs Material Assets 是面向 Dufs 文件服务器的 Material Design 静态资源包，提供替换版的 HTML、CSS 和图标，让自托管文件站点拥有更现代的界面。
主要功能
- 一键美化：将 Dufs 默认前端替换为 Material 风格的布局、颜色与字体
- 高分辨率图标：提供针对不同文件类型的 SVG/PNG 图标，界面更清晰
- 独立资源包：仅包含静态文件，可在升级 Dufs 时独立维护
- 配置灵活：支持通过
--assets参数或挂载目录将自定义前端注入容器 - 可二次定制：在原有主题基础上调整颜色、字体或 LOGO 以匹配品牌
使用提示
- 下载项目生成的前端资源包，并放置在服务器可访问的目录下。
- 启动 Dufs 时通过
--assets指向该目录，或在 Docker Compose 中挂载到容器内。 - 清理浏览器缓存后访问，确认新主题已生效；如需回滚，移除该目录即可。