dufs-material-assets

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

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

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

已实现/适配的功能

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

文件列表
URL 路径前缀
显示符号链接
打包下载
文件上传
- 支持拖拽
新建文件夹
移动/重命名/删除/编辑文件
搜索
深色模式
响应式设计
文本文件预览✨
- 代码高亮（使用 prism 实现）
- 数学公式渲染（使用 https://i.upmath.me/ 的 API 实现）
- 支持渲染 Markdown 文件（使用 Marked 实现）
README 文件展示✨
- 自动在文件列表下方展示当前目录的 README.md、README.txt 或 README 文件
图片查看器
视频播放器
- 使用 <video> 标签实现，支持的封装和编码可以参见 caniuse
音乐播放器✨
- 使用 <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 一致，但不一定是这个项目的最新版本。

自定义页面标题、主题色、背景图和分页大小

按照以下指引修改 index.html 的 <script> 部分，所有项目都是可选的：


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',
    },
    // 背景图片
    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',
        },
    },
    // 分页大小
    limit: 100,
};

// 由dufs填充的页面内容，不要修改
window.__INITIAL_DATA__ = __INDEX_DATA__;
window.__DUFS_PREFIX__ = "__ASSETS_PREFIX__";

对于开发的补充说明


pnpm run dev
pnpm run dufs-api

为了方便适配各个功能，dufs-api 固定了一些启动 dufs 的参数，与代码中仅在开发模式下会运行的部分对应。

由于 Vite 的 dev server 与 dufs 运行在不同的端口上，dufs 也无法在 HTML 代码的占位符处填充页面内容，开发模式下部分代码的运行效果与实际使用稍微存在一些差异（例如底部的版本号在开发模式下使用 v0.0.0 作为模拟；使用访问控制的情况下，实际使用时浏览器会弹出输入用户名和密码的对话框，而在开发模式中不会弹出，此时会使用项目中对于 HTTP 的 Digest 认证的模拟实现）。