CloudPaste - 在线剪贴板
2024-11-27 20:24:0 Author: www.upx8.com(查看原文) 阅读量:2 收藏

介绍

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

截图

✨ 功能特点

  1. 格式支持：可处理普通文本与 Markdown 格式文本，且在编辑 Markdown 时能实时预览并同步滚动，具备完整的 Markdown 样式呈现，如标题、加粗、斜体、链接等样式展示效果良好，列表嵌套显示经过优化，表格样式得到美化，代码块能实时语法高亮，任务列表样式符合标准，引用块样式也得以优化，还支持数学公式渲染（基于 KaTeX）。
  2. 编辑器特性：其编辑器支持双向拉伸调整大小，方便用户根据需求改变编辑区域大小，同时可设置密码保护分享内容，自定义过期时间以控制分享时长，并且能自定义分享链接后缀，使分享链接更具辨识度。
  1. 上传操作：支持拖拽上传以及多文件上传，不过单个文件大小有限制，默认为 25MB，也可在不超服务器 R2 限制的前提下自定义。上传过程中有实时进度显示，让用户随时掌握上传情况。
  2. 安全与时效：同样可设置密码保护与自定义过期时间，防止文件被未授权访问与长时间占用服务器资源。
  1. 登录权限：设有管理员登录入口，管理员可凭借账号密码登录管理后台。
  2. 链接管理：能够查看所有已生成的分享链接，对文本和文件上传进行管理以避免资源被盗刷，可依据文本或文件类型进行分类过滤，方便快速定位特定类型的分享，还能删除分享并带有确认提示，同时可复制分享链接以及查看分享统计数据，了解分享的访问情况等。
  3. 存储监控：可监控存储空间使用情况，包括已用空间、总容量以及使用率百分比，并且当存储空间达到预警值时会给出提示。
  4. 内容编辑：管理员能修改分享密码（无论是文本还是文件分享），对于文本分享内容还可进行编辑，编辑时支持实时 Markdown 预览，可切换 Markdown 开关，编辑体验与主页编辑器一致，还提供分屏预览模式，便于对比编辑前后效果。
  1. 密码机制：支持为文本和文件分享设置密码，管理员可随时修改或移除密码，且密码采用加密存储方式，保障密码安全。
  2. 文本权限：仅管理员可编辑已分享的文本内容，普通用户仅具备查看权限，防止普通用户随意篡改分享文本。
  3. 上传管控：管理员可开启或关闭文本上传功能以及文件上传功能，有效防止恶意上传行为导致资源被占用。
  1. 密码安全：密码加密存储，确保密码在存储过程中的安全性，防止密码泄露。
  2. 自动清理：每当有请求访问时，若当前时间为整点（分钟为 0），则触发清理操作，自动清理过期资源，释放存储空间。
  3. 权限控制：具备访问权限控制，仅授权用户可访问相应资源，同时设置 CORS 安全配置，防止跨域攻击等安全问题。
  1. 屏幕适配：采用全分辨率自适应布局，针对不同屏幕尺寸均有优化，包括超大屏幕（>1400px）、大屏幕（1200px - 1399px）、中等屏幕（992px - 1199px）、小屏幕（768px - 991px）、平板（576px - 767px）、手机横屏（481px - 575px）以及手机竖屏（<480px），确保在各种设备上都能有良好的显示效果。
  2. 布局与样式：拥有响应式编辑器布局，优化移动端适配，滚动条样式得到美化，动画过渡效果平滑，代码块显示效果更佳，中文标点符号能完整对齐，列表项也可完美对齐，提升用户视觉体验。
  1. 注册 Cloudflare 账号
  2. 进入 Cloudflare 控制台

  1. 创建 KV 命名空间

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

  2. 创建 R2 存储桶

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

  1. 创建新的 Worker

  2. 配置环境变量：

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

  3. 绑定存储：

    • KV 绑定： 
      变量名：PASTE_STORE
选择创建的 KV 命名空间
    • R2 绑定： 
      变量名：FILE_STORE
选择创建的 R2 存储桶
  1. 复制 worker.js 的完整代码 worker代码链接
  2. 粘贴到 Worker 的编辑器中
  3. 保存并部署

  1. worker.js

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

  2. 工具函数

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

  3. 前端组件

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

  1. 文本相关

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

  2. 文件相关

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

  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        # 修改文件分享密码
  • 自动检测过期内容
  • 定时清理过期文件和文本
  • 释放存储空间
  • 每整点自动触发清理
  • 文件大小上限：25MB
  • 支持的过期时间：1小时、1天、7天、30天，永不过期
  • 并发请求受 Worker 限制
  1. 确保正确配置环境变量
  2. 定期检查存储使用量
    • 通过管理面板监控存储空间
    • 注意存储空间使用率预警
    • 及时清理不需要的内容
  3. 监控错误日志
  4. 注意 Worker 使用配额
  • Cloudflare Workers
  • Cloudflare KV
  • Cloudflare R2
  • Vue 3
  • Marked (Markdown 渲染)
  • Highlight.js (代码高亮)
  • Chrome (推荐)
  • Firefox
  • Safari
  • Edge
  • 移动端浏览器

项目地址：https://github.com/ling-drag0n/CloudPaste


文章来源: https://www.upx8.com/4467
如有侵权请联系:admin#unsafe.sh