利用 Cloudflare R2 + Workers 搭建在线网盘 （增强版本）

基于 Cloudflare R2 + Workers 构建的增强版在线网盘系统，在原项目基础上进行了大量改进和功能增强。

📌 基于项目: Cloudflare-R2-oss | FlareDrive-R2

🚀 增强版本: 完全重构的用户认证系统、权限管理、多选操作、媒体预览、移动端优化等 增强版链接

增强版部份界面功能展示：※※

多选操作

图片预览:

重构的登录与认证系统：

✨ 核心亮点※

• 🔐 企业级安全 - 登录限制、权限分级、安全认证
• 📱 移动端优化 - 专门的移动端界面和交互优化
• 🎬 媒体预览 - 图片/视频预览、缩放旋转、智能分享
• 📁 批量操作 - 多选文件、批量管理、快捷键支持
• 🔍 全局搜索 - 递归搜索、实时结果、智能跳转
• 🎨 现代界面 - 自定义对话框、响应式设计、毛玻璃效果

🆕 主要改进和新增功能※

🔐 全新的用户认证系统※

• ✅ 自定义登录界面 - 替代原有的浏览器Basic Auth，提供美观的模态框登录
• ✅ 登录状态持久化 - 页面刷新后保持登录状态，无需重复登录
• ✅ 用户信息显示 - 显示当前登录用户名和权限状态
• ✅ 手动登录/退出 - 支持切换用户，避免浏览器密码缓存问题
• ✅ 登录次数限制 - 防暴力破解，支持自动封禁和解封功能

🔒 增强的权限管理系统※

• ✅ 只读用户支持 - 新增只读权限，格式：username:password:r=dir1/,dir2/
• ✅ 游客目录优化 - 游客目录对所有用户可见（公共目录概念）
• ✅ 权限继承逻辑 - 所有用户都可访问游客目录
• ✅ 细粒度控制 - 支持多层级权限：管理员、普通用户、只读用户、游客

🎨 全面重构的用户界面※

• ✅ 响应式布局优化 - 登录按钮和菜单靠右显示，搜索框宽度自适应
• ✅ 权限感知UI - 根据用户权限动态显示/隐藏功能
• ✅ 用户状态指示 - 清晰显示用户类型（管理员/普通/只读）
• ✅ 只读用户提示 - 只读用户界面显示权限限制提示
• ✅ 自定义对话框 - 替换原生弹框，提供美观的确认对话框和提示
• ✅ 多选文件管理 - 支持批量选择、复制、移动、删除文件

🔍 全新的全局搜索功能※

• ✅ 真正的全局搜索 - 递归搜索所有有权限的目录（原版只能搜索当前目录）
• ✅ 实时搜索 - 输入即搜，500ms防抖优化
• ✅ 智能跳转 - 点击搜索结果直接跳转到文件所在目录
• ✅ 权限感知搜索 - 只搜索用户可访问的内容
• ✅ 搜索结果优化 - 显示文件完整路径，便于定位

🎬 媒体预览和分享功能※

• ✅ 媒体预览 - 支持图片和视频的在线预览，支持缩放、旋转、拖拽
• ✅ 键盘快捷键 - ESC关闭、←/→切换、+/-缩放、R旋转、0重置
• ✅ 触摸支持 - 移动端双指缩放和单指拖拽
• ✅ 智能分享 - 桌面端二维码分享，移动端原生分享
• ✅ 视频自动播放 - 视频预览时自动播放

📱 移动端优化※

• ✅ 长按多选 - 长按文件进入多选模式，短按切换选择状态
• ✅ 底部粘贴工具栏 - 移动端专用的粘贴操作界面
• ✅ 浮动粘贴按钮 - 桌面端智能定位的拖拽式粘贴按钮
• ✅ 触摸手势 - 支持各种触摸操作和手势控制

⚡️ 技术改进※

• ✅ API端点重构 - 新增 /api/auth/login 专用登录验证端点
• ✅ 认证机制优化 - localStorage持久化存储，自动注入认证头
• ✅ 错误处理改进 - 友好的错误提示，区分网络错误和权限错误
• ✅ 代码结构优化 - 组件化设计，响应式数据绑定
• ✅ 键盘快捷键 - Ctrl+A多选、Ctrl+V粘贴、ESC退出、Delete删除
• ✅ 权限安全增强 - 完整的前后端权限验证，防止越权操作

📊 功能对比※

🎯 权限系统详解※

权限类型※

🚀 快速部署※

前置要求※

• Cloudflare 账号
• 已开通 R2 服务

部署步骤※

1. 准备存储桶※

前往 Cloudflare R2 控制台：

1. 新建存储桶（建议名称全小写）

   

2. 创建完成后，点开设置页面，在存储桶设置中启用「公开访问」

   

3. 复制“公共存储桶 URL”，格式如下：

https://pub-kdsjfhlasnwiuweia4387rfho85tnof4.r2.dev

2. 部署 Pages 服务※

1. Fork 本项目仓库到你的 GitHub
2. 打开 Cloudflare Pages，新建一个站点
3. 点击「连接到 Git」并选择你的仓库
4. 保持默认的构建设置即可，第一次构建不会显示内容，为正常现象

3. 配置环境变量※

在 Cloudflare Pages 项目中，进入 Settings → Environment Variables 添加以下变量：

🔑 权限类型说明※

⚠️ 请勿开启 R2 存储桶的公开读写权限！否则你的存储资源可能会被恶意刷爆。

4. 绑定 R2 存储桶※

部署完成后：

1. 进入 Cloudflare Pages 项目设置
2. 点击「R2 存储桶」
3. 添加一个绑定，变量名填写为：

BUCKET

并选择你的 R2 存储桶。

5. 配置登录限制功能（可选）※

为了增强安全性，可以启用登录次数限制功能：

1. 创建KV命名空间：
   • 进入 Cloudflare 控制台 → Workers & Pages → KV
   • 点击 Create a namespace，命名为 LOGIN_ATTEMPTS
2. 绑定KV到项目：
   • 在 Pages 项目设置中，进入 Settings → Functions
   • 在 KV namespace bindings 部分点击 Add binding
   • Variable name: LOGIN_ATTEMPTS
   • KV namespace: 选择刚创建的命名空间
3. 功能特性：
   • 🔒 最大5次登录尝试
   • ⏰ 失败后自动锁定30分钟
   • 🔄 1小时后自动重置计数
   • 👨‍💼 管理员可手动解封

📝 详细配置说明请参考 docs/ 登录限制功能配置说明.md 文件

6. 重新部署项目※

完成所有设置后，回到 Pages 控制台，点击「Deployments」页面右上角的「Trigger Redeploy」以重新部署服务。

⚙️ 自定义配置※

前端样式修改※

由于 Wrangler 部署无法使用传统环境变量注入，我偷懒了，不想写环境变量，但是仍然可以简单的进行修改，请直接修改以下文件：

1. 背景图片
   修改文件：assets/App.vue

   
   export default {
     data: () => ({
       ...
       backgroundImageUrl: "/assets/bg-light.webp"
     }),
   }

    

2. 页脚链接
   修改文件：assets/Footer.vue

   <script>
   export default {
     name: "Footer",
     data() {
       return {
         homeUrl: "https://www.liushen.fun/",
         blogUrl: "https://blog.liushen.fun/",
         githubUrl: "https://github.com/willow-god",
         emailUrl: "mailto:01@liushen.fun"
       };
     }
   };
   </script>

    

权限配置技巧※

基本规则：

• 使用 * 作为值表示拥有所有目录权限
• 目录名必须以 / 结尾
• 避免在值的前后添加多余逗号（如 ,dir1/, 会错误授予全部权限）
• 只读用户在用户名密码后添加 :r 标识

配置示例：

# 管理员 - 可访问所有目录
admin:your_strong_password=*

# 普通用户 - 可读写指定目录
alice:alice123=personal/,work/
bob:bob456=projects/,shared/

# 只读用户 - 只能查看指定目录
viewer:viewer789:r=public/,documents/
guest_user:guest123:r=public/

# 游客目录 - 未登录用户可访问
guest=public/
# 或者使用大写
GUEST=public/

# 二维码API 可选，自定义
QRCODE_API=https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=

权限继承：

• 所有用户都可以访问游客目录（如 public/）
• 只读用户可以查看指定目录和游客目录，但不能修改
• 普通用户可以读写指定目录和游客目录
• 管理员可以访问所有目录

� 使用指南※

🔑 登录系统※

1. 访问网站：未登录时显示游客可访问的内容
2. 点击登录：点击右上角登录按钮
3. 输入凭据：输入用户名和密码
4. 自动跳转：登录成功后显示用户有权限的目录

👥 用户权限说明※

游客用户：

• 📖 只能查看游客目录（如 public/）
• 🚫 无法上传或修改文件
• 🔍 可以搜索游客目录内容

只读用户：

• 📖 可以查看指定目录和游客目录
• 📥 可以下载文件
• 🔍 可以搜索有权限的目录
• 🚫 无法上传、删除或修改文件
• 💡 界面显示"(只读)"标识

普通用户：

• 📖 可以查看指定目录和游客目录
• 📤 可以上传文件到有权限的目录
• 🗑️ 可以删除和修改有权限目录的文件
• 📁 可以创建文件夹
• 🔍 可以搜索有权限的目录

管理员用户：

• 🔓 可以访问所有目录
• 💪 拥有完整的文件管理权限
• 👑 系统最高权限

📁 文件操作※

上传文件：

• 拖拽上传：直接拖拽文件到页面
• 点击上传：点击上传按钮选择文件
• 批量上传：支持同时上传多个文件

单文件操作：

• 预览文件：点击文件名在线预览
• 下载文件：右键菜单选择下载
• 重命名：右键菜单选择重命名
• 删除文件：右键菜单选择删除
• 移动文件：右键菜单选择移动
• 复制文件：右键菜单选择复制

多选批量操作：

• 进入多选模式：点击工具栏多选按钮或按 Ctrl+A
• 选择文件：点击文件左侧复选框或直接点击文件
• 全选/取消全选：工具栏全选按钮
• 批量下载：选中文件后点击下载按钮
• 批量复制：选中文件后点击复制按钮
• 批量移动：选中文件后点击移动按钮
• 批量删除：选中文件后点击删除按钮或按 Delete 键
• 退出多选：按 ESC 键或点击退出按钮

文件夹操作：

• 创建文件夹：点击上传按钮选择创建文件夹
• 进入文件夹：点击文件夹名称
• 返回上级：点击面包屑导航

粘贴操作：

• 桌面端：复制文件后使用浮动粘贴按钮或按 Ctrl+V
• 移动端：复制文件后使用底部粘贴工具栏

🔍 搜索功能※

1. 输入搜索词：在顶部搜索框输入关键词（至少2个字符）
2. 实时搜索：系统自动搜索所有有权限的目录
3. 查看结果：搜索结果显示文件名和完整路径
4. 快速跳转：点击搜索结果跳转到文件所在目录

🎬 媒体预览和分享※

媒体预览：

• 图片预览：支持缩放（+/-键或鼠标滚轮）、旋转（R键）、拖拽移动
• 视频预览：自动播放，支持播放控制
• 导航切换：使用←/→键或点击按钮切换上一个/下一个媒体
• 重置视图：按0键重置图片到初始状态
• 关闭预览：按ESC键或点击关闭按钮

分享功能：

• 桌面端分享：生成二维码，方便手机扫码访问
• 移动端分享：使用系统原生分享功能
• 复制链接：一键复制文件直接访问链接

⌨️ 键盘快捷键※

• Ctrl+A：切换多选模式
• Ctrl+V：粘贴文件（需要先复制文件）
• ESC：退出多选模式或关闭预览
• Delete：删除选中的文件
• ←/→：媒体预览时切换上一个/下一个
• +/-：媒体预览时放大/缩小
• R：媒体预览时旋转图片
• 0：媒体预览时重置图片状态

�🔧 故障排查※

1. 登录问题：
   • 确认用户名密码正确
   • 检查环境变量格式是否正确
   • 只读用户确保添加了 :r 后缀
2. 权限问题：
   • 确认用户有目标目录的访问权限
   • 检查目录名是否以 / 结尾
   • 只读用户无法进行写操作
3. 文件上传失败：
   • 检查 R2 存储桶是否已绑定
   • 确认用户有目标目录的写入权限
   • 只读用户和游客无法上传文件
4. 搜索无结果：
   • 确认搜索词至少2个字符
   • 检查用户是否有相关目录的访问权限
   • 搜索只在用户有权限的目录中进行
5. 样式未更新：
   • 清除浏览器缓存
   • 确认修改已提交并重新部署
6. 多选功能问题：
   • 移动端：尝试长按文件500ms进入多选模式
   • 桌面端：使用Ctrl+A快捷键或点击工具栏按钮
   • 确认文件选择状态是否正确显示
7. 媒体预览问题：
   • 检查文件格式是否支持（图片：jpg/png/gif/webp，视频：mp4/webm等）
   • 确认文件URL可以正常访问
   • 检查浏览器是否支持相关媒体格式
8. 分享功能问题：
   • 桌面端二维码不显示：检查QRCODE_API环境变量配置
   • 移动端分享不可用：确认浏览器支持Web Share API
   • 复制链接失败：检查浏览器剪贴板权限
9. 快捷键不响应：
   • 确认焦点不在输入框中
   • 检查浏览器是否拦截了快捷键
   • 尝试刷新页面重新加载
10. 粘贴功能问题：
    • 确认已先复制文件到剪贴板
    • 检查用户权限是否允许写操作
    • 移动端查看底部是否显示粘贴工具栏