CF-Pico - Cloudflare Pages 现代化的个人图床服务

基于 Cloudflare Pages + GitHub 私有仓库 + R2 存储 + Telegram 频道 + HuggingFace 的现代化个人图床服务

CF-Pico 是一个基于 Cloudflare Pages 的现代化个人图床服务，支持 GitHub 私有仓库、Cloudflare R2、Telegram 频道 和 HuggingFace Dataset 四种存储方式。提供随机图片 API、分类管理、批量上传、管理后台等完整功能，界面采用毛玻璃效果，支持暗色/亮色主题。

• 🖼️ 随机图片 API - /api/random、/api/wallpaper、api/cover、/api/tg
• 📂 分类管理 - 支持横屏（wallpaper/sh）和竖屏（cover/sd）分类 + Telegram 独立分类 + HuggingFace 独立分类
• 📤 批量上传 - 多文件选择、拖拽上传、粘贴上传（Ctrl+V）
• 🔒 私有仓库 - 图片存储在 GitHub 私有仓库中，安全可控
• ☁️ R2 存储支持 - 支持 Cloudflare R2 作为存储，CDN 加速
• ✈️ Telegram 存储支持 - 支持 Telegram 频道作为存储后端
• 🤗 HuggingFace 存储支持 - 支持 HuggingFace Dataset 作为存储后端，100GB 免费空间
• 🌐 代理访问 - 通过 /api/image?path= 统一代理，不暴露后端域名
• 🚀 大文件分片上传 - 支持最大 500MB 文件，分片上传到 Telegram
• 🚀 GitHub Release 大文件存储 - GitHub 存储支持最大 2GB 文件

• 🔐 密码保护 - 管理页面需要密码登录（支持环境变量配置）
• 🖼️ 图片预览 - 网格视图展示，支持点击放大预览
• 📋 一键复制 - 点击复制图片链接（自动补全域名）
• 🗑️ 删除图片 - 网页上直接删除，同步到 GitHub/R2/Telegram/HuggingFace
• 📊 分页浏览 - 每页 48 张图片，支持翻页
• 📁 目录树 - 左侧显示分类及图片数量
• 📜 上传历史 - 记录所有上传图片，支持搜索和批量删除
• 🔍 图片搜索 - 按文件名快速搜索图片
• 📦 批量操作 - 批量复制链接（URL/Markdown/HTML）、批量删除
• 🎯 筛选功能 - 按文件类型、存储渠道、文件夹筛选

• 🔄 WebP 转换 - 上传时可选择自动转换为 WebP 格式（前端转换）
• 📷 原格式保留 - 不转换时保持原格式上传
• ⚡ 自动压缩 - 超过阈值自动压缩（可配置）

• 🎲 随机背景 - 每次刷新页面背景随机变化
• 🌫️ 毛玻璃效果 - 现代化毛玻璃界面设计
• 🌙 暗色/亮色主题 - 支持一键切换明暗主题
• 🎨 响应式布局 - 完美适配 PC、平板、手机
• 🖱️ 粘贴上传 - 支持 Ctrl+V 粘贴截图上传

创建一个新的私有仓库用于存储图片，例如 cf-pico：

cf-pico/
├── wallpaper/   # 横屏图片存放目录
├── cover/       # 竖屏图片存放目录
├── sh/          # 横屏图片（备用）
└── sd/          # 竖屏图片（备用）

git clone https://github.com/chnbsdan/cf-pico.git
cd cf-pico

npm install

在 Cloudflare Pages 项目设置 → 环境变量 中添加：

在项目根目录创建 .env.production 文件：

GITHUB_TOKEN=你的GitHub_Token
GITHUB_USER=chnbsdan
GITHUB_REPO=chnbsdan/cf-pico
GITHUB_RELEASE_TAG=cf-pico-storage
PUBLIC_BASE_URL=https://你的域名.com
VITE_ADMIN_PASSWORD=你的管理密码
VITE_LOGIN_PASSWORD=你的登录密码
TG_BOT_TOKEN=你的Telegram_Bot_Token
TG_CHAT_ID=你的Telegram频道ID
HF_TOKEN=你的HuggingFace_Token
HF_REPO=你的HuggingFace_Dataset名称
FOLDER_WALLPAPER=wallpaper
FOLDER_COVER=cover

注意：.env.production 文件不要提交到公开仓库（已在 .gitignore 中）。

1. 进入 Cloudflare Pages 项目 → 设置 → 绑定
2. 点击 添加绑定 → 选择 R2 存储桶
3. 填写：
   • 变量名称：IMAGES_BUCKET
   • R2 存储桶：选择你的存储桶
4. 点击 保存

1. 推送到 GitHub 仓库，Cloudflare Pages 会自动部署
2. 或在 Cloudflare Pages 中手动触发部署

# 随机获取图片
curl https://your-domain.com/api/random

# 随机获取 Telegram 图片
curl https://your-domain.com/api/tg

# 全屏展示 Telegram 随机壁纸（60秒自动刷新）
# 浏览器访问：https://your-domain.com/api/tg?format=html

# 获取统计信息
curl https://your-domain.com/api/stats

# 上传图片（选择存储方式）
curl -X POST \
  -F "file=@image.jpg" \
  -F "folder=wallpaper" \
  -F "storage=huggingface" \
  https://your-domain.com/api/upload

# 代理访问图片
https://your-domain.com/api/image?path=wallpaper/20260617_image.jpg

# 访问大文件（带扩展名）
https://your-domain.com/api/large/file_xxx.mp4

# 短链接访问
https://your-domain.com/api/short/20260701_photo.jpg

# GitHub Release 文件在线预览
https://your-domain.com/api/github?path=20260706_abc123.mp4

cf-pico/
├── functions/                    # Cloudflare Pages Functions
│   ├── api/
│   │   ├── utils/                # 公共工具函数
│   │   │   ├── helpers.js        # 通用辅助函数
│   │   │   ├── r2.js             # R2 存储操作
│   │   │   ├── telegram.js       # Telegram 存储操作
│   │   │   ├── github.js         # GitHub 存储操作（含 Releases）
│   │   │   └── huggingface.js    # HuggingFace 存储操作
│   │   ├── hf/                   # HuggingFace 路由
│   │   │   └── [path].js         # HuggingFace 文件代理
│   │   ├── github.js             # GitHub Release 文件代理
│   │   ├── upload/               # 分片上传
│   │   │   ├── init.js           # 初始化分片
│   │   │   ├── chunk.js          # 上传分片
│   │   │   └── complete.js       # 完成分片
│   │   ├── large/                # 大文件操作
│   │   │   └── [id].js           # 下载/删除大文件
│   │   ├── short/                # 短链接
│   │   │   └── [id].js           # 短链接访问
│   │   ├── upload.js             # 普通上传
│   │   ├── list.js               # 文件列表
│   │   ├── stats.js              # 统计信息
│   │   ├── random.js             # 随机图片
│   │   ├── wallpaper.js          # 壁纸
│   │   ├── cover.js              # 封面
│   │   ├── image.js              # 图片代理
│   │   ├── tg.js                 # Telegram 随机
│   │   ├── history.js            # 历史记录
│   │   └── admin/
│   │       └── delete.js         # 删除文件
│   └── [[path]].js               # 路由兜底（SPA 支持）
├── src/
│   ├── components/               # UI 组件
│   │   ├── Header.jsx
│   │   ├── StatsCard.jsx
│   │   ├── UploadArea.jsx
│   │   ├── UploadResult.jsx
│   │   ├── ThemeToggle.jsx
│   │   ├── FileCard.jsx          # 文件卡片（管理后台）
│   │   ├── BatchActionBar.jsx    # 批量操作栏
│   │   ├── FileDetailDialog.jsx  # 文件详情弹窗
│   │   ├── FilterDropdown.jsx    # 筛选下拉
│   │   ├── SkeletonLoader.jsx    # 骨架屏加载
│   │   └── Footer.jsx
│   ├── pages/
│   │   ├── Manage.jsx            # 图片管理页面
│   │   └── ApiDocs.jsx           # API 文档页面
│   ├── lib/
│   │   └── api.js                # API 调用封装
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
├── public/
│   ├── favicon.ico
│   └── logo.png                  # 自定义 Logo（可选）
├── .env.production               # 生产环境变量（可选）
├── package.json
└── README.md

访问 /manage 进入管理后台，密码通过环境变量 VITE_ADMIN_PASSWORD 配置。

# 安装依赖
npm install

# 创建本地环境变量（可选）
cp .env.example .env.local
# 编辑 .env.local 填入你的配置

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览生产版本
npm run preview

• 🚀 GitHub Release 大文件存储 - GitHub 存储支持最大 2GB 文件（小文件走 Contents API，大文件走 Releases）
• 🎬 GitHub 视频代理 - 新增 /api/github 代理接口，支持 GitHub Release 视频在线预览
• 📊 HF 上传进度条 - HuggingFace 直传时显示实时进度条和上传速度
• 📝 三种命名方式 - 支持默认(日期_随机数)/原始名称_日期/6位短名称
• 🔄 HF WebP 转换 - HuggingFace 渠道上传图片时支持 WebP 格式转换
• 🎯 选谁就传谁 - 音视频不再强制走 Telegram，完全由用户选择存储渠道
• 🐛 修复 HF 链接 - HuggingFace 返回完整域名链接，可直接访问
• 🐛 修复上传结果 - 上传结果组件正常显示成功/失败列表
• 🐛 修复文件类型识别 - 代理函数支持 80+ 主流文件类型（pdf, mp4, mp3, avi, docx 等）
• ✨ 粘贴上传优化 - 支持 Ctrl+V 粘贴截图上传

• 🤗 新增 HuggingFace 存储支持 - 支持 HuggingFace Dataset 作为存储后端，100GB 免费空间
• 🚀 独立 HuggingFace 路由 - /api/hf/{path} 独立代理，不与其他存储混淆
• 🎯 后台完整集成 - 列表、筛选、单个删除、批量删除全支持
• 📋 文件详情优化 - 自动补全完整域名链接
• 🐛 修复批量删除路径问题 - HuggingFace 批量删除传 path 字段

• 🚀 代码拆分重构 - 将 [[path]].js 拆分为 20+ 个独立路由文件
• 🚀 短链接支持 - 新增 /api/short/{filename} 短链接访问
• 🚀 大文件流式下载 - 支持超大文件流式传输，不占用服务器内存
• 🚀 管理后台增强 - 新增文件详情弹窗、批量操作栏、筛选下拉、骨架屏加载
• 🚀 文件卡片组件 - 统一展示图片/音频/视频文件
• 🐛 修复 btoa 错误 - btoa() 只在 GitHub 分支执行，MP3/视频走 Telegram 不触发
• 🐛 修复链接扩展名 - 大文件链接带 .mp4/.mp3 等扩展名
• 🐛 修复 _redirects 静态资源拦截 - 静态文件不被路由拦截
• ✨ 图片 WEBP 转换 - 前端 Canvas 转换，更可靠
• ✨ 前端压缩 - 图片压缩阈值可配置
• 🎨 设置弹窗 - 压缩质量、命名方式等设置整合到弹窗

• ✨ 新增 Telegram 存储支持 - 用户可选择将图片上传到 Telegram 频道
• ✨ 新增登录页面 - 参考 cf-tgbed 风格，支持密码登录
• ✨ 新增 /api/tg 接口 - 随机返回 Telegram 图片，支持 ?format=html 全屏壁纸模式
• ✨ 管理后台新增 Telegram 分类 - 独立展示 Telegram 存储的图片
• ✨ 图片代理优化 - 强制设置正确的 MIME 类型，实现 Telegram 图片在线预览
• 🐛 修复缓存问题 - 设置 Cache-Control: no-cache 确保最新图片正常预览
• 🐛 修复链接生成 - 正确生成 Telegram 图片的代理链接（包含子路径）
• 🎨 上传界面优化 - 增加存储方式选择（GitHub / R2 / Telegram）
• 🎨 统一 UI 风格 - 首页和管理后台统一毛玻璃风格

• ✨ 管理密码支持环境变量配置（VITE_ADMIN_PASSWORD）
• ✨ 上传历史记录支持搜索功能
• 🐛 修复 R2 存储链接 undefined.r2.dev 问题
• 🐛 修复私有仓库图片代理 302 重定向问题
• 🎨 优化图片加载速度（懒加载 + 预加载）

• 🚀 从 Vercel 迁移到 Cloudflare Pages
• ✨ 新增 Cloudflare R2 存储支持
• ✨ 新增上传历史记录功能
• ✨ 新增暗色/亮色主题切换
• ✨ 新增批量操作（复制/删除）

本项目采用 MIT License 开源协议。

• GitHub 仓库
• Cloudflare Pages
• GitHub Token 申请
• HuggingFace

• GitHub: chnbsdan
• 博客: Aoso Blog

如果觉得这个项目对你有帮助，欢迎 ⭐ Star 支持！