Skip to content

wangbaoqiang-lixiaolu/tg-box

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Drop中转站

Drop中转站是一个基于 Cloudflare Pages 的多功能内容分享平台,支持文本、代码、诗歌、图片和文件的在线分享和存储。

功能特点

  • 多种内容类型支持:
    • 普通文本:支持markdown格式
    • 代码:自动语法高亮
    • 诗歌:优雅排版展示
    • 图片:支持预览和下载
    • 文件:支持所有类型文件的上传和下载
  • 美观的界面设计:
    • 响应式布局,完美适配手机和电脑
    • 优雅的中文字体渲染
    • 简洁现代的界面风格
  • 便捷的操作体验:
    • 一键添加新内容
    • 拖拽上传文件
    • 实时预览效果
    • 快速编辑和删除

技术架构

  • 前端:
    • HTML5 + CSS3 + JavaScript
    • Prism.js 用于代码高亮
  • 后端:
    • Cloudflare Pages 托管静态资源
    • Cloudflare Workers 处理动态请求
    • Cloudflare D1 SQLite 数据库存储内容
    • Cloudflare KV 存储图片和文件
    • Telegram Bot API 作为可选的文件存储后端

项目结构

.
├── index.html                    # 主页面
├── css/                         # 样式文件
│   └── style.css               # 主样式文件
├── js/                         # JavaScript文件
│   ├── main.js                # 主逻辑文件
│   └── theme.js               # 主题相关
├── functions/                  # Cloudflare Functions
│   ├── contents/              # 内容管理相关API
│   │   └── [id].js           # 内容CRUD操作
│   ├── images/               # 图片处理相关API
│   │   └── [name].js        # 图片上传和获取
│   └── files/               # 文件处理相关API
│       ├── upload.js        # 文件上传
│       └── [name].js        # 文件获取和删除
├── schema.sql                # 数据库结构
├── _routes.json             # API路由配置
└── README.md               # 项目文档

使用教程

1. 添加新内容

  1. 点击页面顶部的"添加新内容"按钮
  2. 在弹出的对话框中选择内容类型:
    • 普通文本:直接输入或粘贴文本内容
    • 代码:输入代码,支持自动语法高亮
    • 诗歌:按诗歌格式排版输入
    • 图片:点击上传或拖拽图片文件
    • 文件:点击上传或拖拽任意类型文件
  3. 填写标题
  4. 点击"保存"按钮完成添加

2. 编辑内容

  1. 找到要编辑的内容卡片
  2. 点击右上角的编辑图标
  3. 在弹出的对话框中修改内容
  4. 点击"保存"保存修改

3. 删除内容

  1. 找到要删除的内容卡片
  2. 点击右上角的删除图标
  3. 确认删除操作

4. 下载文件/图片

  1. 找到要下载的文件/图片卡片
  2. 点击下载图标或文件名即可下载

部署教程

1. 准备工作

  1. 注册 Cloudflare 账号
  2. 安装 Node.js 和 npm
  3. 安装 Wrangler CLI:
    npm install -g wrangler
  4. (可选)如果使用 Telegram 存储:
    • 创建 Telegram Bot
    • 创建用于存储的 Telegram 频道或群组

2. Telegram 机器人配置(可选)

如果你选择使用 Telegram 作为文件存储后端,需要完成以下步骤:

  1. 创建 Telegram Bot:

    • 在 Telegram 中找到 @BotFather
    • 发送 /newbot 命令
    • 按提示设置机器人名称和用户名
    • 保存获得的 Bot Token
  2. 创建存储频道:

    • 在 Telegram 创建一个新频道或群组
    • 将机器人添加为频道/群组管理员
    • 获取频道/群组 ID:
      • 将频道/群组设为公开
      • 发送一条消息并转发到 @getidsbot
      • 记录获得的 chat id(格式如:-1001234567890)
  3. 配置环境变量: 在 Cloudflare Pages 的环境变量中添加:

    • STORAGE_TYPE: 设置为 TELEGRAM
    • TELEGRAM_BOT_TOKEN: 你的机器人 Token
    • TELEGRAM_CHAT_ID: 存储频道/群组的 ID
  4. 权限设置:

    • 确保机器人在频道/群组中具有发送消息和文件的权限
    • 建议将频道/群组设为私密,以保护文件安全
  5. 存储限制:

    • 单个文件最大支持 2GB
    • 图片和视频会自动压缩
    • 所有类型文件都支持上传
    • 下载链接格式:
      • 小于 20MB 的文件:直接下载链接
      • 大于 20MB 的文件:Telegram 消息链接

3. 本地开发

  1. 克隆项目:

    git clone <项目地址>
    cd dropbox
  2. 安装依赖:

    npm install
  3. 配置环境:

    # 登录到 Cloudflare
    wrangler login
    
    # 创建 D1 数据库
    wrangler d1 create drop-db
    
    # 创建 KV 命名空间
    wrangler kv:namespace create IMAGES
    wrangler kv:namespace create FILES
  4. 初始化数据库:

    wrangler d1 execute drop-db --file=./schema.sql
  5. 启动开发服务器:

    npm run dev

4. 部署到生产环境

  1. 在 Cloudflare Pages 中创建新项目
  2. 连接 GitHub 仓库
  3. 配置构建设置:
    • 构建命令:npm run build
    • 输出目录:/
  4. 配置环境变量:
    • DB: D1 数据库绑定
    • IMAGES: KV 命名空间绑定
    • FILES: KV 命名空间绑定
    • SYNC_INTERVAL: 内容同步间隔(毫秒),例如:
      • 30秒:设置为 30000
      • 1分钟:设置为 60000
      • 5分钟:设置为 300000
      • 注意:最小值为5000(5秒)
  5. 部署:
    npm run deploy

5. 配置说明

同步间隔设置

  • 默认值:30秒(30000毫秒)
  • 修改方法:在 Cloudflare Pages 的环境变量中设置 SYNC_INTERVAL
  • 设置位置:Cloudflare Dashboard > Pages > 你的项目 > Settings > Environment variables
  • 生效时间:修改后用户刷新页面即可生效
  • 注意事项:
    • 值必须大于等于5000(5秒)
    • 较短的同步间隔会增加API请求频率
    • 建议根据实际需求和免费额度(10万次/天)合理设置
    • 计算公式:(24小时 * 3600秒) / (同步间隔秒数) = 每天请求次数/用户

常见问题

  1. Q: 上传文件大小有限制吗? A:

    • 使用 Cloudflare KV 存储时,单个文件最大支持 25MB
    • 使用 Telegram 存储时,单个文件最大支持 2GB
  2. Q: 支持哪些代码语言的高亮? A: 支持所有主流编程语言,包括但不限于:JavaScript、Python、Java、C++、Go等。

  3. Q: 如何备份数据? A:

    • 数据库内容:通过 Cloudflare D1 的导出功能备份
    • KV 存储的文件:需要单独下载备份
    • Telegram 存储的文件:在 Telegram 频道/群组中永久保存
  4. Q: 为什么选择 Telegram 作为存储后端? A:

    • 无需额外服务器和存储费用
    • 支持大文件(最大 2GB)
    • 全球 CDN 加速
    • 可靠的文件存储和访问
    • 方便的文件管理和备份
  5. Q: Telegram 存储的文件安全吗? A:

    • 文件存储在私密频道/群组中
    • 访问需要通过应用的 API
    • 建议定期检查频道/群组权限设置
    • 敏感文件建议加密后再上传

技术支持

如果遇到问题或需要帮助,可以:

  1. 提交 GitHub Issue
  2. 查看 Cloudflare 官方文档
  3. 参考代码注释

开源协议

本项目采用 MIT 协议开源。

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • JavaScript 53.7%
  • CSS 32.9%
  • Batchfile 10.3%
  • HTML 3.1%