Home

Awesome

CloudPaste - 在线剪贴板 📋

Cloudflare Workers Vue.js License

一个基于 Cloudflare Workers 的在线剪贴板和文件分享服务。支持 Markdown、密码保护、文件上传等功能。

<table> <tr> <td><img src="https://github.com/user-attachments/assets/b3245bf3-976c-43dd-b097-f6a1477abe50" width="400"/></td> <td><img src="https://github.com/user-attachments/assets/98b91043-f1e2-4d29-a4c6-3ed53ca37387" width="400"/></td> </tr> <tr> <td><img src="https://github.com/user-attachments/assets/50fc8f8d-4fcb-4b20-9487-ad9998a4ede7" width="400"/></td> <td><img src="https://github.com/user-attachments/assets/c14ef420-651f-4803-810f-7daee80483cc" width="400"/></td> </tr> <tr> <td><img src="https://github.com/user-attachments/assets/50460f21-12bb-43cc-9ea3-f6a7b455c314" width="400"/></td> <td><img src="https://github.com/user-attachments/assets/932e940e-1a42-4852-a832-af4349ba66d1" width="400"/></td> </tr> </table>

✨ 功能特点

📝 文本分享

📁 文件分享

👨‍💻 管理功能

🔐 访问控制

🛡️ 安全特性

🎨 界面优化

🚀 部署（自动）

1. GitHub Actions 部署(可选)

  1. Fork 本仓库

    • 点击右上角的 Fork 按钮
    • 等待仓库克隆完成

  2. 设置 GitHub Secrets

    在你的 GitHub 仓库中，转到 Settings -> Secrets and variables -> Actions -> New Repository secrets ，添加以下 secrets：

    • CF_API_TOKEN: Cloudflare API 令牌

    • CF_ACCOUNT_ID: Cloudflare 账户 ID

      • 在 Cloudflare 仪表板右侧可以找到

    • ADMIN_USERNAME: 管理员用户名

      • 设置你的管理员账号

    • ADMIN_PASSWORD: 管理员密码

      • 设置你的管理员密码

  3. 运行工作流

2. 一键部署

部署后默认无密码,需在 cloudflare 的对应 worker 下的变量和机密中设置：

Deploy to Cloudflare Workers

🚀 部署（手动）

1. 准备工作

  1. 注册 Cloudflare 账号
  2. 进入 Cloudflare 控制台

2. 创建存储资源

  1. 创建 KV 命名空间

    • 名称：PASTE_STORE
    • 用于存储文本内容

  2. 创建 KV 命名空间

    • 名称：UPLOAD_STATUS
    • 用于存储上传功能的开关状态

  3. 创建 R2 存储桶

    • 名称：cloudpaste-files
    • 用于存储上传的文件

3. 创建 Worker

  1. 创建新的 Worker 脚本

  2. 配置环境变量：

    ADMIN_USERNAME=你的管理员用户名
ADMIN_PASSWORD=你的管理员密码

  3. 绑定存储：

    • KV 绑定：

      # 文本存储
变量名：PASTE_STORE
选择创建的 KV 命名空间

# 上传状态控制
变量名：UPLOAD_STATUS
选择创建的 KV 命名空间

    • R2 绑定：

      变量名：FILE_STORE
选择创建的 R2 存储桶

  4. KV 命名空间说明：

    • PASTE_STORE: 用于存储文本分享内容和元数据
    • UPLOAD_STATUS: 用于存储和控制上传功能的开关状态
      • textUpload: 控制文本上传功能
      • fileUpload: 控制文件上传功能
    • FILE_STORE: 用于存储上传的文件

  5. 配置示例代码 (wrangler.toml):

    [[kv_namespaces]]
binding = "PASTE_STORE"
id = "你的KV命名空间ID"

[[kv_namespaces]]
binding = "UPLOAD_STATUS"
id = "你的KV命名空间ID"

[[r2_buckets]]
bucket_name = "cloudpaste-files"
binding = "FILE_STORE"

4. 部署代码

  1. 复制 worker.js 的完整代码
  2. 粘贴到 Worker 的编辑器中
  3. 保存并部署

🔧 代码结构说明

主要组件

  1. worker.js

    • 主要的 Worker 代码
    • 包含路由处理和 API 实现

  2. 工具函数

    • generateId: 生成随机 ID
    • hashPassword: 密码加密
    • verifyPassword: 密码验证
    • calculateExpiryTime: 计算过期时间
    • isExpired: 检查是否过期

  3. 前端组件

    • Vue 3 应用
    • Markdown 渲染
    • 代码高亮
    • 文件上传界面

📡 API 端点

  1. 文本相关

    POST /api/paste     # 创建文本分享
GET  /api/paste/:id # 获取文本内容

  2. 文件相关

    POST /api/file      # 上传文件
GET  /api/file/:id  # 获取文件信息
GET  /api/file/:id?download=true # 下载文件
GET  /download/:id  # 直接下载文件

  3. 管理相关

    POST   /api/admin/login                    # 管理员登录
GET    /api/admin/shares                   # 获取分享列表
GET    /api/admin/storage                  # 获取存储空间使用情况
DELETE /api/admin/paste/:id                # 删除文本分享
DELETE /api/admin/file/:id                 # 删除文件分享
PUT    /api/admin/paste/:id/content        # 更新文本内容
PUT    /api/admin/paste/:id/password       # 修改文本分享密码
PUT    /api/admin/file/:id/password        # 修改文件分享密码
GET    /api/admin/upload-status            # 获取上传状态
PUT    /api/admin/upload-status            # 更新上传状态
PUT    /api/admin/file/:id/settings        # 修改文件分享设置

🔄 自动化功能

过期内容清理

⚠️ 使用限制

📝 注意事项

  1. 确保正确配置环境变量

  2. 定期检查存储使用量

    • 通过管理面板监控存储空间
    • 注意存储空间使用率预警
    • 及时清理不需要的内容

  3. 监控错误日志

  4. 注意 Worker 使用配额

  5. 直链下载若要在服务器传输文件

    # 直接下载
curl -O https://your-domain/download/fileId

# 带密码下载
curl -H "X-Password: your-password" -O https://your-domain/download/fileId

🛠️ 使用

📱 浏览器支持

📄 许可证

MIT License

🔗 相关链接

Star History

Star History Chart