📊 用于记录和可视化 Cloudflare Workers 使用额度的监控面板。

• 📈 实时用量监控 - 自动获取 Cloudflare Workers 调用数据并可视化展示
• 📊 额度进度条 - 直观显示今日请求用量占比（基于免费版 100,000 次/天限制）
• 🕐 多时间范围 - 支持查看最近 24 小时、7 天、30 天的统计数据
• 📉 请求趋势图表 - 使用 ECharts 展示请求数和错误数趋势
• 🔄 自动更新 - 通过 GitHub Actions 每 20 分钟自动同步数据
• 🌐 GitHub Pages 部署 - 零成本托管，自动部署到 GitHub Pages

访问在线演示：workers-usage.265209.xyz

点击右上角的 Fork 按钮将仓库复制到你的账户下。

在你 Fork 的仓库中，进入 Settings → Secrets and variables → Actions，添加以下两个 Repository Secrets：

1. 登录 Cloudflare Dashboard
2. 进入 My Profile → API Tokens
3. 点击 Create Token
4. 使用 Custom token 模板
5. 添加以下权限：
   • Account → Account Analytics → Read
6. 完成创建并复制 Token

1. 进入仓库的 Settings → Pages
2. 在 Source 下选择 gh-pages 分支
3. 保存设置

1. 进入 Actions 标签页
2. 选择 Update Worker Stats 工作流
3. 点击 Run workflow 手动触发

cf-workers-usage/
├── . github/
│   └── workflows/
│       └── update-stats.yml    # GitHub Actions 工作流配置
├── public/
│   └── index.html              # 前端监控面板页面
├── scripts/
│   └── fetch-data.js           # 数据获取脚本
└── package.json

1. 数据获取 - fetch-data.js 通过 Cloudflare GraphQL API 获取过去 30 天的 Workers 调用统计
2. 自动更新 - GitHub Actions 每 20 分钟执行一次数据同步
3. 数据存储 - 获取的数据保存为 data.json 文件
4. 页面展示 - index.html 加载 JSON 数据并使用 ECharts 进行可视化
5. 自动部署 - 使用 peaceiris/actions-gh-pages 自动部署到 GitHub Pages

编辑 .github/workflows/update-stats. yml 中的 cron 表达式：

schedule:
  - cron: '*/20 * * * *'  # 每 20 分钟运行一次

在 .github/workflows/update-stats. yml 中修改 cname 参数：

- name: Deploy to GitHub Pages
  uses: peaceiris/actions-gh-pages@v3
  with:
    github_token:  ${{ secrets.GITHUB_TOKEN }}
    publish_dir: ./public
    cname: your-custom-domain.com  # 修改为你的域名

在 public/index.html 中找到并修改：

const DAILY_LIMIT = 100000;  // 修改为你的计划额度

• 前端: HTML + CSS + JavaScript + ECharts
• 后端: Node.js + Axios
• CI/CD: GitHub Actions
• 部署: GitHub Pages

ISC License

欢迎提交 Issues 和 Pull Requests！