Git Product home page Git Product logo

frontend's Introduction

中文版本



Cloudreve

Self-hosted file management system with muilt-cloud support.

GitHub Test Workflow

HomepageDemoDiscussionDocumentsDownloadTelegram GroupLicense

Screenshot

✨ Features

  • ☁️ Support storing files into Local storage, Remote storage, Qiniu, Aliyun OSS, Tencent COS, Upyun, OneDrive, S3 compatible API.
  • 📤 Upload/Download in directly transmission with speed limiting support.
  • 💾 Integrate with Aria2 to download files offline, use multiple download nodes to share the load.
  • 📚 Compress/Extract files, download files in batch.
  • 💻 WebDAV support covering all storage providers.
  • ⚡Drag&Drop to upload files or folders, with streaming upload processing.
  • 🗃️ Drag & Drop to manage your files.
  • 👩‍👧‍👦 Multi-users with multi-groups.
  • 🔗 Create share links for files and folders with expiration date.
  • 👁️‍🗨️ Preview videos, images, audios, ePub files online; edit texts, Office documents online.
  • 🎨 Customize theme colors, dark mode, PWA application, SPA, i18n.
  • 🚀 All-In-One packing, with all features out-of-the-box.
  • 🌈 ... ...

🛠️ Deploy

Download the main binary for your target machine OS, CPU architecture and run it directly.

# Extract Cloudreve binary
tar -zxvf cloudreve_VERSION_OS_ARCH.tar.gz

# Grant execute permission
chmod +x ./cloudreve

# Start Cloudreve
./cloudreve

The above is a minimum deploy example, you can refer to Getting started for a completed deployment.

⚙️ Build

You need to have Go >= 1.18, node.js, yarn, zip, goreleaser and other necessary dependencies before you can build it yourself.

Install goreleaser

go install github.com/goreleaser/goreleaser@latest

Clone the code

git clone --recurse-submodules https://github.com/cloudreve/Cloudreve.git

Compile

goreleaser build --clean --single-target --snapshot

⚗️ Stacks

📜 License

GPL V3

frontend's People

Contributors

ah-dark avatar anzhiyu-c avatar aruelius avatar bgluminous avatar byxiaozhi avatar caulic avatar cha0scat avatar david082321 avatar dependabot[bot] avatar golangaccount avatar hfo4 avatar hicasper avatar kawaiizapic avatar kikoqiu avatar liruqi avatar liunianjiang avatar mekumiao avatar myuanz avatar rwv avatar shyim avatar skyaerope avatar topjohncian avatar weidideng avatar xb2016 avatar xyenon avatar ysh83737 avatar zjsth92 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

frontend's Issues

关于二级目录的问题

我曾经在主仓库说明过这个问题,但是开发者回应称在GO语言中不好实现,但是经过我的测试,其实二级目录使用出现问题绝大部分的原因是在前端这里,后端应该是没问题的。
我使用的是Apache,在例如a.com/aaa这个目录下反代Cloudreve,但是网页发起所有请求全部指向了a.com(指向a.com/aaa才可以正常使用),在package.json中添加”homepage“: "/aaa"确实可以使得静态文件正常加载,但是静态文件内部发出的请求还是全部指向了a.com。所以,是否可以为二级目录下的使用提供兼容呢?
其实只需要为js设置一个二级目录的全局参数,在编译的时候将这个参数加入到路径前就可以(就如同package.json),或许还需要其它调整,不过还是希望能够兼容一下。

视频控件超过600px的时候会被遮挡

一个是根据视频比例不同,遮挡的范围不同,4:3的视频几乎全部字幕都被遮挡,还有一个就是网页全屏的时候同样限制整个视频控件在600px的高度
删掉maxHeight : 600似乎就好了,不知道设置这个600px是基于什么原因?

后期前端的一些想法

  1. 是否考虑使用蚂蚁的ant design 取代现有的Material?

    • 第一 Material 设计有点老了 ;) 主要现在不是很流行使用阴影。而阴影重叠感是material的一大特色
    • Material 的设计组件之间的pending太大,空间利用率比较低
    • AntD 很多组件设计的很好,比如上传文件的Upload。可以减少一些维护和开发的成本
  2. 使用 prettier 等自动清理 Eslint warning

  3. 使用TypeScript

后两点主要考虑多人协作开发

无法编译

master 下运行 npm install 后 npm start 报错

Failed to compile.

./node_modules/react-dplayer/lib/DPlayer.js
Module not found: Can't resolve 'dplayer/dist/DPlayer.min.css'

境内使用Cloudflare CDN加载pdf.worker.js速度很慢

使用Cloudflare CDN加载pdf.worker.js速度很慢,导致加载pdf很慢,建议更换其他在国内外加载速度都很快的CDN或者文件本地化

pdfjs.GlobalWorkerOptions.workerSrc = //cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js;

针对该前端仓库v2版本的讨论

首先,我不是本项目的开发人员,只是分享一些我的研究心得,以便于大家进行代码阅读和贡献

本前端仓库其实是从php项目Cloudreve分离出来的,但估计由于时间不足或其他问题,此前端还保留了php的一些东西

public/index.html 里的 {$变量名} 其实是 php 的一个库 (thinkphp模板引擎) 的东西,将其静态化(即变成纯HTML+JS+CSS)后,等价于 public/index_dev.html
image

也就是说 public/index.html 其实是一个用来生成纯静态文件的模板
ThinkPHP模板变量与常用标签

  • 与此相关的 ISSUE

Failed to compile.

Failed to compile.

./src/component/FileManager/Navigator/Navigator.js
Attempted import error: 'fixUrlHash' is not exported from '../../../utils/index'.

看作者有个修改fixUrlHash的commit,是没删除干净吗?

重构reducer后产生的几个小问题

  1. 对于没有安装Redux Dev Tool 扩展的浏览器, window.__REDUX_DEVTOOLS_EXTENSION__ 未定义,会抛出异常导致页面空白。

    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

    这个之前是没问题的,不知为何现在就出问题了。

  2. 我尝试删去上一条的Devtool中间件后, reducer 分发时,似乎没考虑@@redux/INIT的特殊 action,导致这里抛出异常。

    invariant(!!reducer, `reducer ${namespace} doesn't exist`)

    目测是因为之前 Redux Dev Toool 拦截处理了这个action,所以之前没出问题

{siteScript} misplaced

While installing JS Snippet for Cloudflare Web Analytics, it seems that in index.html {siteScript} is placed outside HTML <body>, which causes {siteScript} containing only <script> not rendered by Edge. Is this behavior intended?

功能增加: 分页加载文件列表

我这边有个文件夹里有几千个子文件夹,现在默认是全部渲染,对设备负载比较大。

如果是几千张照片外加预览负载会更大。

所以建议增加分页加载功能。

重构: 拆分Redux store

现在的Redux都是集中在

const cloudreveApp = (state = [], action) => {

建议可以做几个重构

  1. 拆分Reducer
  2. Action type 添加 Namespace

拆分Reducer

reducers/
- index.js
- siteConfig.js
- navigator.js
- viewUpdate.js
- explorer.js

Action type 添加 Namespace

同时由于Action会越来越多,对单一RedUC而对应的Action加Namespace进行隔离, 比如

export const drawerToggleAction = open => {
return {
type: "DRAWER_TOGGLE",
open: open
};
};

变成

export const drawerToggleAction = open => {
    return {
        type: "viewUpdate/DRAWER_TOGGLE",
        open: open
    };
}

需要多个Reducer同时做出反应的全局Action,保持命名不变。比如

export const searchMyFile = keywords => {
return {
type: "SEARCH_MY_FILE",
keywords: keywords
};
};

需要多个reducer更改State
case 'SEARCH_MY_FILE':
return Object.assign({}, state, {
navigator: Object.assign({}, state.navigator, {
path: "/搜索结果",
refresh:state.explorer.keywords === null? state.navigator.refresh:!state.navigator.refresh,
}),
viewUpdate:Object.assign({}, state.viewUpdate, {
contextOpen:false,
navigatorError:false,
navigatorLoading:true,
}),
explorer:Object.assign({}, state.explorer, {
selected:[],
selectProps: {
isMultiple:false,
withFolder:false,
withFile:false,
},
keywords:action.keywords,
}),
});

我们需要一个Higher Order Reducer, 读取namespace 将Action分配给对应的Reducer。同时Reducer可以写为 [Action Type]: (state, action) => state 的形式,比如

const viewUpdate = {
    DRAWER_TOGGLE: (state, action) => {
    // 处理DRAWER_TOGGLE
    },
    ...
}

这样的好处

  1. 业务逻辑更清晰
  2. 通过函数的scope 解决变量重复命名问题,现在的switch模式变量不能重复命名,只能用原始的var定义

重构方案

  1. 对现有的reducers/index.js 添加单元测试
  2. 拆分Reducer
  3. Higher Order Reducer , 重构Reducer, 重构Action生成函数
    • 这个Higher Order Reducer 可以自己写也可以找第三方。但是我个人更倾向自己写,因为逻辑并不复杂。自己写代码更清楚,他人提交PR时更容易看懂。降低学习曲线。

好处

可以更轻松支持分页这种更复杂的UI逻辑 #12

Firefox 环境下上传对话框尺寸不匹配

见截图,对话框内容比窗口本身稍微大了一截,导致多出了横向拖动条。
这当然是无关痛痒的小问题....但是属实有点难受
另外,Firefox 下上传中的条目和完成上传的条目高度有一点微妙的差别,
导致上传时窗口内的条目会发生轻微的偏移。

捕获

可否使用相对路径

我在我的服务器上部署时遇到了如下问题:
目的:在访问aa.com/cloud时转发到aa.com:5212的cloureve
遇到的问题:可以访问cloudreve,但是无法加载其他文件如css、js
检查后发现代码中使用了绝对路径,例如href="/manifest.json",我在试着修改为href="./manifest.json"后恢复正常。
请问是否可以改用相对路径。

在目录中右键点击 "创建离线任务" 默认未显示当前目录

问题描述:
在目录中右键点击 "创建离线任务", 弹出的 "选择存储位置" 对话框只显示了下级目录以及 "返回上一层" 按钮. 而没有显示当前目录. 想选择当前目录必须先点击 "返回上一层" 然后再选中相应目录.

期望效果:
在目录中右键点击 "创建离线任务", 弹出的 "选择存储位置" 对话框中可以选择当前目录.

版本:
Cloudreve 3.2.1

服务器环境:
Ubuntu 20.04 aarch64, 由 Apache 2.4 反向代理

客户端环境:
Microsoft Edge 89.0.774.50

截图:
image

升级react-pdf

#27 (comment)
这个warning在新的react-pdf@^5.0.0-beta.3 中依然存在,目测是要等 pdf.js 正式发布v2.4.456 然后react-pdf再更新一个beta才能解决。开这个issue持续关注吧,应该快了

当在界面中选中一个目录的情况下, 右键点击 "创建离线下载任务" 无法选中此目录

描述:

  1. 在当前一个目录中, 任意选中一个子目录;
  2. 在当前目录视图空白处右键弹出菜单, 点击 "离线下载";
  3. 输入 FTP/HTTP/磁力链 等有效下载链接, 并点击 "下一步";
  4. 在弹出的 "选择存储位置" 对话框中看不到在第 ① 步中选中的子目录.

期望:
"选择存储位置" 对话框中当前目录下所有正常的文件夹均可作为离线下载的可选的目录.

版本:
Cloudreve 3.2.0

服务器环境:
Ubuntu 20.04 aarch64. 由 Apache 2.4 反向代理

客户端环境:
Microsoft Edge 89.0.774.50

截图:

  1. 在当前目录中任意选中一个子目录
    image

  2. 在当前目录视图空白处右键弹出菜单, 点击 "离线下载";
    image

  3. 输入 FTP/HTTP/磁力链 等有效下载链接, 并点击 "下一步";
    image

  4. 在弹出的 "选择存储位置" 对话框中看不到在第 ① 步中选中的子目录.
    image

无法运行开发服务器

yarn run start在构建完成后一旦访问就会崩溃, 已在:5212上运行Cloudreve实例.

node:events:368
      throw er; // Unhandled 'error' event

Error [ERR_STREAM_WRITE_AFTER_END]: write after end
    at new NodeError (node:internal/errors:371:5)
    at _write (node:internal/streams/writable:319:11)
    at Socket.Writable.end (node:internal/streams/writable:609:17)
    at Socket.end (node:net:594:31)
    at App.welcome_screen (/home/zapic/Cloudreve/assets/node_modules/sockjs/lib/sockjs.js:54:11)
    at execute_request (/home/zapic/Cloudreve/assets/node_modules/sockjs/lib/webjs.js:22:37)
    at IncomingMessage.req.next_filter (/home/zapic/Cloudreve/assets/node_modules/sockjs/lib/webjs.js:105:18)
    at Listener.webjs_handler (/home/zapic/Cloudreve/assets/node_modules/sockjs/lib/webjs.js:107:13)
    at Listener.handler (/home/zapic/Cloudreve/assets/node_modules/sockjs/lib/sockjs.js:150:12)
    at Listener.handler (/home/zapic/Cloudreve/assets/node_modules/sockjs/lib/sockjs.js:6:59)
    at Server.<anonymous> (/home/zapic/Cloudreve/assets/node_modules/sockjs/lib/sockjs.js:157:24)
    at Server.new_handler (/home/zapic/Cloudreve/assets/node_modules/sockjs/lib/utils.js:86:19)
    at Server.emit (node:events:390:28)
    at onParserExecuteCommon (node:_http_server:727:14)
    at onParserExecute (node:_http_server:640:3)
Emitted 'error' event on Socket instance at:
    at emitErrorNT (node:internal/streams/destroy:157:8)
    at emitErrorCloseNT (node:internal/streams/destroy:122:3)
    at processTicksAndRejections (node:internal/process/task_queues:83:21) {
  code: 'ERR_STREAM_WRITE_AFTER_END'
}
$ node -v
v16.11.1
$ yarn -v
1.22.15

前端Redux部分重构

我在做前端Shift多选时发现一些问题,可以讨论一下。看能不能根据我的方案进行redux的改造。

  1. [紧急] 引入Redux thunk, 可以做更复杂高级的Action Creator。第一可以更方便的加入复杂的UI逻辑比如shift多选,第二方便后期做到Component和Reducer的分离
    • Redux Saga 也不错,但是和现有代码兼容性比较差
  2. [一般] 移除每个Page下面的Redux Store。多个Redux Store并不是作为隔离的最好办法,这样只会增加内存开销。可以通过Namespace的方式隔离每个Page
  3. [长期] 尽量分离Component和Reducers。Reducer 包含各种业务逻辑判断,Component只根据State进行渲染。分离后UI更容易改造和更新,只需要替换Component而不用改变Reducer。同时reducer中的业务逻辑可以增加单元测试保证在升级中的业务逻辑一致

引入Redux Thunk的好处我们可以以Shift连续多选作为例子:
用户动作流程:

1. 按住Shift按钮
2. 点击起始文件
3. 保持Shift按钮,同时点击结束文件
4. App显示选中从起始文件到结束文件中间的所有文件

App状态变化

1. 按下Shift键,进入shift多选模式(shiftMode=true)
    * 用户松开Shift键,取消shift多选模式(shiftMode=false)
2. 点击起始文件,记录起始文件位置 (startFile = selectedFile)
    * 如果用户同时按住Control键不能进入Control模式
3. 点击下一个文件,记录结束文件位置  (endFile = selectedFile)。同时从AllFiles中取出从startFile 到endFile 中的所有文件加入到selectedFiles 中

2这个点Shift模式和普通点击模式很像,但是又有不同。
现有的选择文件逻辑,这里
引入Redux thunk后, 将Select File 变成一个Action Creator

function selectFile(file) {
  return (dispatch, getState) => {
    const { shiftMode } = getState();
    if (shiftMode) {
        dispatch(shiftSelectFile(file))
    } else {
       dispatch(selectSingleFile(file))
    }
  }
}

function selectSingleFile(file) {
// 现有选择逻辑保持一致
}

function shiftSelectFile(file) {
  return (dispatch, getState) => {
    const { startFile } = getState();
    if (!startFile) {
        dispatch(setStartFile(file))
    } else {
      // 选中从StartFile 到 file之间的所有文件
       dispatch(selectFilesFrom(startFile, file))
    }
  }
}

【建议】添加循环播放按钮

最近升级到了最新版,发现播放器已经换成了artplayer,这个播放器似乎默认没有在前端展现循环播放按钮,但是看到有一个loop属性可以控制循环播放,希望能够把循环播放做成一个按钮显示在前端(比如像以前那样在设置播放器的按钮加一个“洗脑循环”)

[Warning] State 里存放Anchor EL 影响性能

有几个Set Anchor的Action比如userPopoverAnchorEl 会导致Redux性能变差
有warning提示

VM1056:1 Application state or actions payloads are too large making Redux DevTools serialization slow and consuming a lot of memory. See https://git.io/fpcP5 on how to configure it.

BUG: 路径中带有#时无法进入

当文件夹带有#的时候, 前端并未正常做出urlencode, 导致在进入带有#的路径时, 路径被截断

例如路径为 /testfolder/RJ[#####]
在访问时, 向后端提交的请求变成了
/api/v3/directory/testfolder/[RJ

相同的问题并没有在$符号中出现, 想来是因为#符号对于react有特殊意义

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.