{"id":49679090,"url":"https://github.com/transparentlc/dufs-material-assets","last_synced_at":"2026-05-07T05:02:32.382Z","repository":{"id":178949971,"uuid":"655757796","full_name":"TransparentLC/dufs-material-assets","owner":"TransparentLC","description":"dufs 的 Material Design 风格自定义前端界面，添加了一些额外的功能。(Alternative frontend assets for dufs in material design with additional features.) ↓链接是演示站↓","archived":false,"fork":false,"pushed_at":"2026-04-09T17:23:26.000Z","size":233,"stargazers_count":134,"open_issues_count":0,"forks_count":18,"subscribers_count":2,"default_branch":"master","last_synced_at":"2026-04-09T19:28:39.721Z","etag":null,"topics":["file-sharing","static-files","static-server"],"latest_commit_sha":null,"homepage":"https://fuwafuwa.akarin.dev/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TransparentLC.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-06-19T14:34:19.000Z","updated_at":"2026-04-09T17:23:41.000Z","dependencies_parsed_at":"2023-12-31T03:41:11.958Z","dependency_job_id":"a1d1a243-a541-4a81-8d43-4663d6024dce","html_url":"https://github.com/TransparentLC/dufs-material-assets","commit_stats":null,"previous_names":["transparentlc/dufs-material-assets"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/TransparentLC/dufs-material-assets","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TransparentLC%2Fdufs-material-assets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TransparentLC%2Fdufs-material-assets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TransparentLC%2Fdufs-material-assets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TransparentLC%2Fdufs-material-assets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TransparentLC","download_url":"https://codeload.github.com/TransparentLC/dufs-material-assets/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TransparentLC%2Fdufs-material-assets/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32723649,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-07T02:14:30.463Z","status":"ssl_error","status_checked_at":"2026-05-07T02:14:29.405Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["file-sharing","static-files","static-server"],"created_at":"2026-05-07T05:02:31.359Z","updated_at":"2026-05-07T05:02:32.374Z","avatar_url":"https://github.com/TransparentLC.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# dufs-material-assets\n\n[![CI](https://github.com/TransparentLC/dufs-material-assets/actions/workflows/ci.yml/badge.svg)](https://github.com/TransparentLC/dufs-material-assets/actions/workflows/ci.yml)\n\n[dufs](https://github.com/sigoden/dufs) 的 Material Design 风格自定义前端界面。\n\n使用 Vue 3 + Vuetify 构建，部分设计参考 [Cloudreve](https://github.com/cloudreve/Cloudreve)，添加了一些额外的功能。\n\n如果你是为了部署本地文件共享或 WebDAV 服务（不包括挂载网盘），因为最近的“AList 被商业收购/投毒事件”而选择 dufs 作为替代品，那么你大概也会对这个项目感兴趣～\n\n|  |  |  |\n| - | - | - |\n| \u003cpicture\u003e\u003csource media=\"(prefers-color-scheme:dark)\" srcset=\"https://github.com/TransparentLC/dufs-material-assets/assets/47057319/f8488128-ad2b-4f3d-950e-10c2a11ac390\"\u003e\u003cimg src=\"https://github.com/TransparentLC/dufs-material-assets/assets/47057319/094fa2be-afeb-4010-9bec-d014b888b97b\"\u003e\u003c/picture\u003e | \u003cpicture\u003e\u003csource media=\"(prefers-color-scheme:dark)\" srcset=\"https://p.sda1.dev/29/85cb90f522dbb8b4eabec7f3f74ec7dd/J8uL.avif\"\u003e\u003cimg src=\"https://p.sda1.dev/29/8be21ca522b4e72a413803470ccafb11/h5K6.avif\"\u003e\u003c/picture\u003e | \u003cpicture\u003e\u003csource media=\"(prefers-color-scheme:dark)\" srcset=\"https://p.sda1.dev/29/2c54e52cef25e1267f3359451499fd8b/hRnv.avif\"\u003e\u003cimg src=\"https://p.sda1.dev/29/a20f9d52828b74db2ac7baada95276ea/nJFN.avif\"\u003e\u003c/picture\u003e |\n\n* 按照[“自定义界面”](#自定义界面)的介绍进行配置即可实现图 2 的效果\n    * 背景图片来自 Pixabay [#1](https://pixabay.com/photos/mountains-lake-canada-banff-nature-9606525/) [#2](https://pixabay.com/photos/architecture-building-business-city-1868667/)\n* 实现图 3 的效果除了按照[“自定义界面”](#自定义界面)进行配置，还需要编辑这个项目的 HTML 文件，并引入额外编写的 JS 和 CSS 等资源\n    * 图中的主题设计取自“maimai でらっくす Splash”的[官方网站](https://web.archive.org/web/20201231182646/https://maimai.sega.jp/)\n    * 进行这种程度的修改需要基本的前端开发知识\n\n## 已实现/适配的功能\n\n标有✨的是原版前端界面未支持，在本项目中额外添加的功能。\n\n* 文件列表\n* URL 路径前缀\n* 显示符号链接\n* 打包下载\n* 登录后复制带有 Token 的下载链接✨\n    * dufs [v0.44.0](https://github.com/sigoden/dufs/pull/603) 添加的功能\n    * 此类链接可用于浏览器以外的下载器，无需在下载器中配置登录\n* 文件上传\n    * 支持拖拽\n* 新建文件夹\n* 移动/重命名/删除/编辑文件\n* 搜索\n* 深色模式\n* 响应式设计\n* README 文件展示✨\n    * 自动在文件列表下方展示当前目录的 `README.md`、`README.txt` 或 `README` 文件\n* 文本文件预览✨\n    * 代码高亮（使用 [prism](https://prismjs.com) 实现）\n    * 数学公式渲染（使用 https://i.upmath.me/ 的 API 实现）\n    * 支持渲染 Markdown 文件（使用 [Marked](https://marked.js.org/) 实现）\n* 文档预览✨\n    * 支持在线查看 PDF 文件，docx、xlsx、pptx 等 Office 文档和 draw\u0026period;io、VSDX 等图表\n    * Office 文档查看使用 https://view.officeapps.live.com/op/view.aspx 实现，可以在线查看 10 MB 以内的文件\n    * draw\u0026period;io 图表查看使用 [draw.io 的网页版](https://www.drawio.com/blog/online-diagram-viewer)实现\n    * 部署的 dufs 实例需要可以在公网访问才能预览 Office 文档和 draw\u0026period;io 图表，预览时文件会被服务提供者获取并缓存\n    * 默认不启用，有需要的话请在正确配置 dufs 后通过[“自定义界面”](#自定义界面)启用\n* 图片查看器✨\n    * 支持[一键打开 Photopea](https://github.com/photopea/photopea/issues/966) 编辑图片\n    * 也可以使用 Photopea 查看浏览器不支持的 PSD、AI、JPEG XL 等格式的图片（JPEG XL 被浏览器支持后将改为直接使用浏览器查看）\n    * 需要配置好 CORS（启动 dufs 时设置 `--enable-cors` 或通过 nginx 等反向代理时添加 `Access-Control-Allow-Origin: https://www.photopea.com`），因为是本地获取文件后使用 Photopea 打开所以无需公网访问\n    * 默认不启用，有需要的话请在正确配置 dufs 后通过[“自定义界面”](#自定义界面)启用\n* 视频播放器\n    * 使用 `\u003cvideo\u003e` 标签实现，支持的封装和编码可以参见 [caniuse](https://caniuse.com/?search=video%20format)\n* 音乐播放器✨\n    * 使用 `\u003caudio\u003e` 标签实现，支持的封装和编码可以参见 [caniuse](https://caniuse.com/?search=audio%20format)\n    * 同一目录下音频文件顺序/随机/循环播放\n    * 解析并展示标题、艺术家、专辑名称、封面图等元数据（使用 [jsmediatags](https://www.npmjs.com/package/jsmediatags) 实现）\n* 字体查看器✨\n* 自定义页面标题和主题色✨\n* 自定义页脚✨\n* 分页展示文件✨\n    * 适用于目录内有上千个文件的情况\n    * 默认不启用，可以通过[“自定义界面”](#自定义界面)启用\n* 多语言支持✨\n    * 已支持的语言或添加翻译请参见 [`src/i18n.js`](https://github.com/TransparentLC/dufs-material-assets/blob/master/src/i18n.js)\n\n## 使用方法\n\n从 [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`。\n\n也可以自己构建前端资源。\n\n如果不想单独保存这个项目的前端资源和在每次启动 dufs 时设定 `--assets` 参数，在 Actions 里面也有编译好的、嵌入了这个项目的前端资源（替换了原版的前端资源）的 dufs [二进制文件](https://github.com/TransparentLC/dufs-material-assets/actions/workflows/build-embed.yml)，不过以这种方式使用将无法自定义界面。\n\n[Releases](https://github.com/TransparentLC/dufs-material-assets/releases) 会在 dufs 发布新版本时更新，版本号和 dufs 一致，但不一定是这个项目的最新版本。\n\n如果你使用过 dufs 原版的前端资源，然后切换到这个项目的前端资源重新运行，打开网页时可能会出现“No data”的提示，这是因为你的浏览器仍然在使用缓存的原版前端资源的 `index.js`，清除缓存后刷新即可（例如使用 \u003ckbd\u003eCtrl+F5\u003c/kbd\u003e）。\n\n\u003cdetails\u003e\n\n\u003csummary\u003e对于开发的补充说明\u003c/summary\u003e\n\n```shell\npnpm run dev\npnpm run dufs-api\n```\n\n为了方便适配各个功能，`dufs-api` 固定了一些启动 dufs 的参数，与代码中仅在开发模式下会运行的部分对应。\n\n\u003c/details\u003e\n\n## 截图\n\n\u003cdetails\u003e\n\n\u003csummary\u003e搜索/响应式设计\u003c/summary\u003e\n\n![](https://github.com/TransparentLC/dufs-material-assets/assets/47057319/bbf048b9-5be6-49fe-a9b1-22467575f5be)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003e文本文件预览\u003c/summary\u003e\n\n![](https://github.com/TransparentLC/dufs-material-assets/assets/47057319/5f094480-1e53-4d80-8a5a-56b2db95be23)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003e图片查看器\u003c/summary\u003e\n\n![](https://github.com/TransparentLC/dufs-material-assets/assets/47057319/17119400-d218-4a6d-85dd-3b9fa9e436e1)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003e视频播放器\u003c/summary\u003e\n\n![](https://github.com/TransparentLC/dufs-material-assets/assets/47057319/253dd093-de65-4ffc-8461-6139b23b47a7)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003e音乐播放器\u003c/summary\u003e\n\n![](https://github.com/TransparentLC/dufs-material-assets/assets/47057319/c7852e66-495c-4ec0-86e6-db8a6c316f20)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003e字体查看器\u003c/summary\u003e\n\n![](https://github.com/user-attachments/assets/cb1905f3-bb6d-40cd-ac27-7acbcfeffae9)\n\n\u003c/details\u003e\n\n## 自定义界面\n\n按照以下指引在 `index.html` 的 `\u003cscript\u003e` 部分添加 `window.__DUFS_MATERIAL_CONFIG__`：\n\n```js\nwindow.__DUFS_MATERIAL_CONFIG__ = {\n    // 网页标题\n    document: 'Index of ${path} - Custom title',\n    // 左上角显示的标题和 LOGO\n    page: {\n        title: 'Custom title',\n        logo: {\n            light: 'https://example.com/logo-light.png',\n            dark: 'https://example.com/logo-dark.png',\n        },\n        // 也可以在浅色和深色主题下使用同一个 LOGO\n        // logo: 'https://example.com/logo.png',\n    },\n    // 自定义页脚\n    // 可以使用 Markdown 格式\n    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/)',\n    // 背景图片\n    background: {\n        light: 'https://example.com/background-light.webp',\n        dark: 'https://example.com/background-dark.webp',\n    },\n    // 也可以在浅色和深色主题下使用同一张背景图片\n    // background: 'https://example.com/background.webp',\n    // 浅色和深色主题\n    // 参见 https://vuetifyjs.com/zh-Hans/features/theme/ 的 colors 部分\n    theme: {\n        light: {\n            primary: '#0288d1',\n            secondary: '#00b0ff',\n        },\n        dark: {\n            primary: '#026da7',\n            secondary: '#008dcc',\n        },\n    },\n    // 为卡片添加毛玻璃效果\n    // 可以设置模糊半径（单位 px）和不透明度（范围 0-1）\n    // 建议和背景图片配合使用\n    glassmorphism: {\n        // 顶部应用栏\n        appbar: { blur: 5, alpha: .6 },\n        // 文件列表\n        filelist: { blur: 5, alpha: .8 },\n        // README\n        readme: { blur: 5, alpha: .8 },\n        // 预览窗口\n        preview: { blur: 5, alpha: .8 },\n    },\n    // 分页大小\n    limit: 100,\n    // 是否允许使用第三方服务查看文件（Microsoft Office Online、draw.io、Photopea）\n    // 部署时需要满足对应条件，否则即使启用了也无法查看\n    externalViewer: false,\n};\n\n// 由 dufs 填充的页面内容，不要修改\nwindow.__DUFS_PREFIX__ = \"__ASSETS_PREFIX__\";\nwindow.__INITIAL_DATA__ = JSON.parse(decodeURIComponent(escape(atob(\"__INDEX_DATA__\"))));\n```\n\n如果 LOGO 和背景图片需要从本地加载，假设前端资源的目录结构如下：\n\n```plain\ndufs-material-assets\n│  index.html\n│  vite.svg\n│\n└─assets\n        index-xxxxxxxx.js\n        index-xxxxxxxx.css\n```\n\n你可以将图片（假定为 `image.webp`）放在 `assets` 目录下，然后地址填写为 `__ASSETS_PREFIX__assets/image.webp` 即可。dufs 会把 `index.html` 的 `__ASSETS_PREFIX__` 替换成 `/prefix/__dufs_v0.0.0__/` 这样的带有 `--path-prefix` 设定的前缀（如果有的话）和 dufs 版本号的路径，最后会指向 `--assets` 指定的目录里面的内容。\n\n`window.__DUFS_MATERIAL_CONFIG__` 的所有项目都是可选的，例如只想自定义 LOGO 的话，只写这一部分就可以了：\n\n```js\nwindow.__DUFS_MATERIAL_CONFIG__ = {\n    page: {\n        logo: '__ASSETS_PREFIX__assets/logo.svg',\n    },\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftransparentlc%2Fdufs-material-assets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftransparentlc%2Fdufs-material-assets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftransparentlc%2Fdufs-material-assets/lists"}