CF-Workers-UsagePanel 是一个基于 Cloudflare Workers 构建的请求量统计监控面板,帮助您实时追踪和管理多个 Cloudflare 账户的 Workers 和 Pages 请求使用情况。

• ✅ 多账号管理 - 在一个面板中管理所有 Cloudflare 账号的请求量
• ✅ 实时监控 - 自动定时更新请求数据,掌握最新使用情况
• ✅ 精美界面 - 采用现代化设计,支持亮色/暗色主题切换
• ✅ 移动优化 - 完美适配移动端,随时随地查看数据
• ✅ 零成本部署 - 完全免费,部署在 Cloudflare Workers 上

👉 点击预览演示

💡 Demo 站点已预配置多个示例账号,你可以直接登录体验完整功能

• 实时数据展示

  • Workers 请求数统计
  • Pages 请求数统计
  • 总请求数及使用百分比
  • 可视化进度条展示

• 多账号管理

  • 支持添加无限个 Cloudflare 账号
  • 每个账号独立显示使用情况
  • 一键删除不需要的账号

• 自动更新机制

  • 过期自动更新
  • 数据持久化存储在 KV

• 管理员系统

  • 密码保护的管理面板
  • Cookie 认证机制
  • 安全的登录/登出功能

• 现代化设计

  • 玻璃态(Glassmorphism)设计风格
  • 流畅的动画过渡效果
  • 渐变色彩搭配

• 主题切换

  • 支持亮色/暗色主题
  • 自动检测系统偏好
  • 主题偏好本地持久化

• 响应式布局

  • 完美适配桌面端
  • 优化移动端显示
  • 自适应各种屏幕尺寸

1. 登录 Cloudflare Dashboard
2. 进入 Workers & Pages
3. 点击 创建应用程序 → 创建 Worker
4. 为你的 Worker 命名(例如:usage-panel)
5. 点击 部署

1. 点击 快速编辑 或 编辑代码
2. 将 _worker.js 的全部内容复制粘贴到编辑器中
3. 点击 保存并部署

1. 在左侧菜单中,点击 KV
2. 点击 创建命名空间
3. 命名为 UsagePanel_KV(名称可自定义)
4. 点击 添加
5. 记下创建的 命名空间 ID

1. 返回你的 Worker 页面
2. 进入 设置 → 变量
3. 滚动到 KV 命名空间绑定 部分
4. 点击 添加绑定
   • 变量名称: KV (⚠️ 必须是大写 KV,不能修改)
   • KV 命名空间: 选择刚才创建的 UsagePanel_KV
5. 点击 保存并部署

在 设置 → 变量 → 环境变量 中添加:

添加步骤:

1. 点击 添加变量
2. 变量名称 填写 PASSWORD
3. 值 填写你的密码(请使用强密码)
4. 点击 保存并部署

⚠️ 重要提示:

• PASSWORD 变量是必须设置的,否则 Worker 会返回错误
• 支持多种变量名,优先级从上到下
• 建议使用 PASSWORD 和 USERNAME 这两个标准变量名

⚠️ 这是最关键的配置步骤!

• 变量名称必须是: KV (大写,不能改)
• 绑定类型: KV 命名空间
• 用途: 存储以下数据
  • usage.json - 汇总的请求使用数据
  • usage_config.json - 所有 Cloudflare 账号的配置信息

usage.json (总使用量):

{
  "success": true,
  "pages": 10900,
  "workers": 9670,
  "total": 20570,
  "max": 200000,
  "msg": "✅ 成功加载请求数使用数据"
}

usage_config.json (账号配置列表):

[
  {
    "ID": 1,
    "Name": "主账号",
    "Email": null,
    "GlobalAPIKey": null,
    "AccountID": "6d7***************************90",
    "APIToken": "duN***********************************fs",
    "UpdateTime": 1736455698819,
    "Usage": {
      "success": true,
      "pages": 10900,
      "workers": 9670,
      "total": 20570,
      "max": 100000
    }
  }
]

1. 部署完成后,访问你的 Worker 地址: https://your-worker.workers.dev/
2. 首页右上角点击会显示一个登录气泡,点击进入管理面板
3. 输入你设置的 USERNAME 和 PASSWORD 登录

登录管理面板后:

1. 点击 ➕ 添加账号
2. 填写以下信息:
   • 账号名称: 自定义名称
   • Account ID: 在 Cloudflare Dashboard 右侧可以找到
   • API Token: 创建一个具有 Analytics:Read 权限的 Token
3. 点击 确认添加

创建 API Token:

1. 访问 https://dash.cloudflare.com/profile/api-tokens
2. 点击 Create Token
3. 使用模板 Read analytics 或自定义:
   • Permissions: Account → Analytics → Read
   • Account Resources: 选择对应账号
4. 点击 Continue to summary → Create Token
5. 复制生成的 Token

获取 Account ID:

1. 登录 Cloudflare Dashboard
2. 选择任意域名或进入 Workers 页面
3. 在页面右侧栏可以看到 Account ID

• 登录后自动显示所有账号的使用情况
• 可以看到每个账号的 Workers、Pages 和总请求数

• 访问 https://your-worker.workers.dev/
• 显示所有账号的汇总数据
• 包含总使用量、百分比、详细统计

# 使用管理员 Token
curl https://your-worker.workers.dev/usage.json?token=ADMIN_TOKEN

获取 Token:

• 在主页或管理面板中,查看网络请求中的 token 参数
• 或使用 MD5(MD5(PASSWORD + USERNAME)) 计算管理员 Token

1. 进入管理面板
2. 找到要删除的账号
3. 点击 🗑️ 删除 按钮
4. 确认删除

1. Cookie 认证

   • 登录成功后设置 HttpOnly Cookie
   • Cookie 值 = MD5(管理员TOKEN + User-Agent)
   • 有效期 24 小时
   • 所有管理 API 都需要 Cookie 验证

2. Token 认证

   • 临时 Token = MD5(域名 + 管理员TOKEN + UA)
   • 管理员 Token = MD5(MD5(PASSWORD + USERNAME))
   • 用于访问 usage.json 接口

• ✅ 使用强密码(建议 16+ 字符,包含大小写字母、数字、符号)
• ✅ 定期更换密码
• ✅ 不要在公共场所泄露 Worker 域名
• ✅ 使用 API Token 而非 Global API Key(权限更小)
• ✅ 定期检查账号列表,删除不需要的配置
• ⚠️ API Token 和 Global API Key 具有敏感权限,妥善保管

• 深色背景配合柔和渐变
• 适合夜间查看,保护眼睛
• 紫色、靛蓝色调为主

• 清新明亮的界面
• 适合白天使用
• 自动调整对比度,确保可读性

• 点击右下角的 🌙/☀️ 图标
• 主题偏好自动保存在本地
• 首次访问自动检测系统偏好

• ✅ 完美响应式设计
• ✅ 优化触摸操作
• ✅ 自适应字体大小
• ✅ 紧凑的卡片布局
• ✅ 底部导航按钮优化
• ✅ 支持横竖屏切换

• 运行环境: Cloudflare Workers
• 存储: Cloudflare KV
• 前端: 原生 HTML + CSS + JavaScript
• 字体: Google Fonts (Outfit)
• 图标: SVG
• API: Cloudflare GraphQL API

检查清单:

• ✅ 是否设置了 PASSWORD 环境变量?
• ✅ 是否绑定了 KV 命名空间?
• ✅ KV 绑定的变量名是否为 KV(大写)?
• ✅ Worker 是否成功部署?

解决方法:

1. 创建一个 KV 命名空间
2. 在 Worker 设置中绑定 KV
3. 变量名称必须是 KV(大写)
4. 保存并重新部署

检查:

• 确认 PASSWORD 环境变量已设置
• 确认输入的账号密码正确
• 默认账号是 admin(除非你设置了 USERNAME)
• 清除浏览器 Cookie 后重试

原因:

• API Token 或 Global API Key 权限不足
• Account ID 错误
• Cloudflare API 访问失败

解决:

1. 检查 API Token 是否有 Analytics:Read 权限
2. 确认 Account ID 正确
3. 等待定时任务执行或手动刷新

方法一:配置 Cron Triggers

• 在 Worker 设置中添加 Cron 触发器
• 例如: 0 */6 * * * (每 6 小时)

方法二:手动刷新

• 进入管理面板点击 🔄 手动刷新

说明:

• 数据来源于 Cloudflare GraphQL API
• 统计的是当天 UTC 0:00 到当前时间的请求数
• 可能有轻微延迟(通常 5-10 分钟)

步骤:

1. 导出旧 KV 的数据:

   wrangler kv:key get "usage_config.json" --binding=KV

2. 在新 Worker 创建 KV 并绑定
3. 导入数据:

   wrangler kv:key put "usage_config.json" --binding=KV --path=config.json

4. 设置相同的环境变量

本项目基于 GNU General Public License v3 (GPLv3) 开源。

• 感谢 Cloudflare 提供的强大平台
• 感谢所有为这个项目提供建议和反馈的用户
• 界面设计灵感来源于现代化的 Web 设计趋势