transparentlc/dufs-material-assets

dufs 的 Material Design 风格自定义前端界面，添加了一些额外的功能。(Alternative frontend assets for dufs in material design with additional features.)

dufs-material-assets

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

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

已实现/适配的功能

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

• 文件列表
• URL 路径前缀
• 显示符号链接
• 打包下载
• 文件上传
  • 支持拖拽
• 新建文件夹
• 移动/重命名/删除/编辑文件
• 搜索
• 深色模式
• 响应式设计
• 文本文件预览✨
  • 代码高亮（使用 prism 实现）
  • 数学公式渲染（使用 https://i.upmath.me/ 的 API 实现）
  • 支持渲染 Markdown 文件（使用 Marked 实现）
• README 文件展示✨
  • 自动在文件列表下方展示当前目录的 README.md、README.txt 或 README 文件
• 图片查看器✨
• 视频播放器✨
  • 使用 <video> 标签实现，支持的封装和编码可以参见 caniuse
• 音乐播放器✨
  • 使用 <audio> 标签实现，支持的封装和编码可以参见 caniuse
  • 同一目录下音频文件顺序/随机/循环播放
  • 解析并展示标题、艺术家、专辑名称、封面图等元数据（使用 jsmediatags 实现）
• 自定义页面标题和主题色✨

使用方法

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

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

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

自定义页面标题和主题色

按照以下指引修改 index.html 的 <script> 部分：

// 自定义标题
window.__CUSTOM_TITLE__ = 'Custom title';

// 自定义浅色和深色主题
window.__CUSTOM_THEME__ = {
    light: {
        primary: '#0288d1',
        secondary: '#00b0ff',
    },
    dark: {
        primary: '#026da7',
        secondary: '#008dcc',
    },
};

// 由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 认证的模拟实现）。

截图

搜索/响应式设计

文本文件预览

图片查看器

视频播放器

音乐播放器

dufs-material-assets's Issues

没有登录按钮，有时登陆后，没法切换用户

serve-path: '.'
bind: 0.0.0.0
port: 5000
# path-prefix: /dufs
hidden:
  - tmp
  - '*.log'
  - '*.lock'
  - 'dufs.exe'
  - 'config.yml'
  - 'dufs-material-assets/'
auth:
  - admin:admin@/:rw
  - user:pass@/src:rw,/share
  - '@/'  # According to the YAML spec, quoting is required.
allow-all: false
allow-upload: true
allow-delete: true
allow-search: true
allow-symlink: true
allow-archive: true
enable-cors: true
render-index: true
render-try-index: true
render-spa: true
assets: ./dufs-material-assets/
log-format: '$remote_addr "$request" $status $http_user_agent'
log-file: ./dufs.log
compress: low
# tls-cert: tests/data/cert.pem
# tls-key: tests/data/key_pkcs1.pem

视频播放器电脑端没出现

版本信息:

1. dufs docker:
   sigoden/dufs latest d27156d6cd10 2 weeks ago 3.16MB

2. dufs-material-assets https://github.com/TransparentLC/dufs-material-assets/actions/runs/5329104873

尝试了最新的windows下的firefox(Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/114.0)和edge(Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 Edg/114.0.1823.51)

显示分别如下

主要表现为视频播放器缺失， 浏览器会直接打开。。手机上safari浏览器倒是一切正常

另外中间的框宽度貌似不会随着浏览器的缩放自动改变，长文件名的话要横向滚动

多谢作者辛苦开发！

change of dufs 0.35.0

sigoden/dufs#252

报错了/支持文本文件在线编辑

dufs G:/Temp -p 80 -a admin:123@/:rw -A --assets D:\dufs\dufs-material-assets

Uncaught TypeError: Cannot read properties of undefined (reading 'dir_exists')
at index.js:48:53
(anonymous) @ index.js:48

这一句const dirEmptyNote = PARAMS.q ? 'No results' : DATA.dir_exists ? 'Empty folder' : 'Folder will be created when a file is uploaded';

Files are always uploaded to the top level directory

Seems something wrong here, files are always uploaded to the top level directory, no matter where the current directory is

dufs-material-assets/src/components/filelist.vue

Lines 856 to 862 in d66fc57

	const uploadFiles = async files => {
	await Promise.all(files.map(e => dufsfetch(
	pathPrefix + e.name,
	{
	method: 'PUT',
	body: e,
	},