**中文 | [English](./readme-en.md)**
# R2 Web
📁 轻盈优雅的 Web 原生 Cloudflare R2 文件管理器，一切皆在浏览器中完成。
> 本项目有幸被 [《科技爱好者周刊（第 387 期）》][ruanyifeng-weekly] 和 [《HelloGitHub（第 123 期）》][hellogithub-123] 推荐，在此表示感谢！同时也欢迎大家试用并提出宝贵意见，一起把这个工具做得更好用、更顺手！
## 在线使用
跟随 [下方指引](#1-配置-r2-桶-cors) 开启 CORS，然后访问 **[r2.viki.moe](https://r2.viki.moe)** 立即开始管理 R2 桶。
## 私有部署
这里提供几个常见的静态托管平台部署选项，点击按钮即可一键部署：
| 平台 | 快速部署 |
| ---------------- | ------------------------------------------------------------------------------------------ |
| Vercel | [][vercel-deploy] |
| Netlify | [][netlify-deploy] |
| Cloudflare Pages | [][cloudflare-deploy] |
> 如果用得不错，别忘了点个免费的小星星 ✨，对这个项目很重要，非常感谢～
其他服务只需部署 `src` 目录即可，部署后记得更新 CORS 规则允许你的域名访问 R2 API。
## 反馈途径
- [GitHub Issues](https://github.com/vikiboss/r2-web/issues) - 提交 bug 报告、功能建议
- [反馈 QQ 群](https://qm.qq.com/q/e47kAlbdsc) - 即时交流、使用反馈（群号：1091212613）
## 为什么是 R2 Web？
**传统方案痛点：**
- 官方控制台功能基础，登录、管理麻烦，无法高效管理大量文件（复制、移动、重命名等）
- 第三方客户端要下载安装，跨平台麻烦
- 命令行工具上手门槛高，不适合临时操作
- 其他 Web 项目不专注 R2，功能不完善，体验欠佳
**R2 Web 解决的问题：**
- 打开浏览器就能用，跨平台零成本
- 拖拽、粘贴上传 + 图片压缩，省流量省时间
- PWA 支持，装到桌面像原生应用
- 纯前端实现，数据不经过第三方服务器
**R2 Web 无法替代的场景：**
- 超大文件上传（>300MB），建议使用 rclone 等工具
- 复杂权限管理，建议使用官方控制台或 API
- 自动化脚本，建议使用官方 SDK 或 CLI
- API 集成，无后端服务，建议使用官方 SDK 或直接调用 R2 API
## 使用场景
- **文件管理**: 目录浏览、重命名、移动、删除，轻松管理大量文件。
- **文件浏览**: 内置图片/视频/音频/文本预览，快速查看内容无需下载。
- **私有图床**: 拖拽/粘贴上传，自动压缩，复制为 Markdown/HTML 格式。
## 设计理念
- 零构建，源码即产物，无需编译打包
- 零框架，原生 Web 技术优先，不依赖框架
- 零后端，所有逻辑在浏览器中完成，直连 R2 API
- 极简美学，黑白灰 + R2 橙色，小圆角、扁平化
- 性能至上，懒加载、防抖节流、请求缓存
- 细节优先，流畅动画、及时反馈、键盘导航
## 界面截图
## 功能速览
| 功能类别 | 具体功能 |
| ------------ | ---------------------------------------------------------------------------------------------------------------------- |
| **文件管理** | 目录浏览、分页加载、懒加载缩略图；按名称/日期/大小排序；重命名、移动、复制、删除（支持递归）；多选批量删除、复制、移动 |
| **文件上传** | 拖拽/粘贴/选择器上传；文件名模板（哈希、日期、UUID 等占位符）；上传前自动压缩图片（WebAssembly） |
| **文件预览** | 图片预览（常见格式）；视频/音频内嵌播放器；文本文件预览（代码高亮） |
| **链接复制** | URL 直链、Markdown、HTML、预签名 URL |
| **个性化** | 简体/繁体/英语/日语；深色模式（跟随系统）；配置分享链接/二维码 |
| **PWA** | 安装到桌面，原生体验 |
## 快速开始
### 1. 配置 R2 桶 CORS
在 Cloudflare 控制台配置 CORS 规则（路径：R2 → 存储桶 → 设置 → CORS 策略）：
```json
[
{
"AllowedOrigins": ["https://r2.viki.moe"],
"AllowedMethods": ["GET", "POST", "PUT", "DELETE", "HEAD"],
"AllowedHeaders": ["*"],
"ExposeHeaders": ["ETag"],
"MaxAgeSeconds": 86400
}
]
```
> [!TIP]
> 私有部署？ 把 `AllowedOrigins` 改成你的域名即可。
### 2. 填写凭证连接
访问 [r2.viki.moe](https://r2.viki.moe)，填写 R2 凭证进行连接。凭证只存储在浏览器 localStorage，不会上传。
### 3. 开始使用
开始管理文件、目录，拖拽文件、直接 Ctrl + V 即可上传，右键文件可进行重命名、复制链接等操作。
如果当作图床使用，建议设置文件名模板，生成带哈希的唯一文件名、开启图片压缩，提升性能和安全性。
## 实用技巧
### 文件名模板示例
- `[name]_[hash:6].[ext]` - 原文件名 + 6 位哈希（默认）
- `images/[date:YYYY/MM/DD]/[uuid].[ext]` - 按日期分目录
- `backup/[timestamp]-[name].[ext]` - 时间戳前缀备份
### 配置分享链接
生成「配置分享链接」或「配置分享二维码」，快速在多设备同步配置。
> [!CAUTION]
> 链接包含 R2 访问凭证，请不要直接分享到公共平台。
### 缓存优化
项目内置支持请求缓存，对目录内容等常见频繁请求返回数据进行了缓存。
对于 CDN 缓存，建议在 Cloudflare 控制台配置缓存规则提升加载速度。
## 技术实现
纯前端应用，无构建步骤，代码写完即可部署。
**核心技术：** HTML5/CSS3/ES6+，CSS Layers、原生 `