OpenRouter 额度监控看板

精准追踪您的 OpenRouter API Key 使用情况，实时获取当月额度、各周期消耗以及账单健康状态。

在线演示 | 快速开始 | 功能特性

---

📖 项目简介

OpenRouter 额度监控看板是一个轻量级的单页应用（SPA），专为 OpenRouter API 用户设计。通过可视化仪表盘实时展示 API Key 的额度使用情况，帮助开发者更好地管理和监控 API 消耗。

✨ 核心亮点

• 🎯 零后端依赖 - 纯前端实现，开箱即用
• 🚀 实时监控 - 直连 OpenRouter API，数据即时更新
• 📊 多维度分析 - 支持日/周/月/总计等多时段消耗统计
• 🎨 科技感 UI - 采用现代化深色主题，视觉体验出色
• 📱 响应式设计 - 完美适配桌面端与移动端
• 🔒 隐私优先 - API Key 仅用于客户端请求，不经过任何服务器

---

🚀 快速开始

方式一：直接使用（推荐）

1. 下载项目

   git clone https://github.com/ReanimatingTheNew/api-router-token-checker.git
   cd api-router-token-checker

2. 打开页面

   • 双击 index.html 文件，或
   • 使用任意 HTTP 服务器运行，例如：

     # Python 3
     python -m http.server 8080
     
     # Node.js (需要先安装 http-server)
     npx http-server -p 8080

3. 输入 API Key

   • 在输入框中粘贴您的 OpenRouter API Key（格式：sk-or-v1-...）
   • 点击"解析额度数据"按钮

方式二：在线托管

将 index.html 部署到以下任意平台：

• GitHub Pages
• Vercel
• Netlify
• Cloudflare Pages

---

📊 功能特性

1️⃣ 核心指标展示

指标	说明
剩余限额 (Remaining)	当前周期内可用的剩余额度
周期已消耗	当前重置周期已使用的金额
总限额 (Limit)	账户设置的周期总额度上限

2️⃣ 多维度消耗分析

• 📅 历史累计消耗 - 账户创建至今的总花费
• 📆 本月消耗 - 当前自然月的使用量
• 📅 本周消耗 - 当前自然周的使用量
• 📊 今日消耗 - 当天的实时消耗

3️⃣ 额度健康监控

• 🎯 可视化进度条 - 直观显示额度消耗百分比
• ⚠️ 智能状态提示 - 自动识别额度健康状态
• 🔴 超额预警 - 接近或超过限额时变色提醒

4️⃣ API Key 属性详情

• 🏷️ 密钥标签 - 显示 Key 的友好名称
• 🔄 重置周期 - 月度/周度/按需等周期类型
• 💳 账户层级 - 免费 Tier 或付费账户识别
• 🔑 BYOK 策略 - 自备 Key 是否计入限额

---

🛠️ 技术栈

技术	版本/说明	用途
HTML5	-	页面结构
Tailwind CSS	3.x (CDN)	原子化样式框架
Lucide Icons	Latest	矢量图标库
JavaScript (ES6+)	原生	业务逻辑与 API 交互
OpenRouter API	v1	数据源接口

特色技术实现

• ✅ 渐进式动画 - 使用 Tailwind 自定义动画系统
• ✅ 深色主题优化 - 精心调配的色彩对比度
• ✅ 滚动自适应 - CSS 滚动条美化与平滑滚动
• ✅ Toast 通知 - 自研轻量级消息提示组件

---

📡 API 说明

接口地址

GET https://openrouter.ai/api/v1/auth/key

请求头

Authorization: Bearer sk-or-v1-xxxxx

响应示例

{
  "data": {
    "label": "My API Key",
    "limit": 100,
    "limit_remaining": 59.84,
    "limit_reset": "monthly",
    "usage": 97.60,
    "usage_daily": 1.57,
    "usage_weekly": 40.16,
    "usage_monthly": 40.16,
    "is_free_tier": false,
    "include_byok_in_limit": false
  }
}

---

🎨 界面预览

主要界面元素

1. 顶部导航 - GitHub 开源徽章，一键跳转仓库
2. 标题区 - 项目名称与功能描述
3. 输入表单 - API Key 安全输入框（密码类型）
4. 数据仪表盘 - 三大核心指标卡片
5. 进度条 - 额度消耗可视化展示
6. 详情面板 - 多维度消耗分析与 Key 属性

动画与交互

• 🌊 渐变背景 - 柔和的彩色光晕动画
• ✨ Shimmer 效果 - 进度条流光动画
• 🎭 Hover 反馈 - 卡片悬浮时的微交互
• 📱 Toast 通知 - 操作成功/失败的优雅提示

---

🔐 隐私与安全

数据处理原则

✅ API Key 仅在浏览器本地使用
✅ 不经过任何中间服务器或后端
✅ 不存储到 Cookie 或 LocalStorage
✅ 每次查询需重新输入
✅ 支持 HTTPS 加密传输

Mock 数据模式

当遇到以下情况时，系统会自动启用 Mock 演示数据：

• 🚫 浏览器 CORS 跨域限制
• 🌐 网络连接失败
• ⏱️ 请求超时（10 秒）

⚠️ 注意：Mock 数据仅用于 UI 演示，非真实账户数据

---

🤝 贡献指南

欢迎提交 Issue 和 Pull Request！

开发建议

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启 Pull Request

改进方向

• 支持多 API Key 管理
• 历史数据趋势图表
• 自定义告警阈值
• 导出 PDF/Excel 报表
• 国际化多语言支持

---

📄 许可证

本项目采用 MIT 许可证 - 详见 LICENSE 文件

---

🙏 致谢

• OpenRouter - 提供强大的 AI 路由服务
• Tailwind CSS - 现代化的 CSS 框架
• Lucide Icons - 精美的开源图标库

---

📮 联系方式

• 🐛 问题反馈：GitHub Issues
• 💬 功能建议：GitHub Discussions

---

如果这个项目对您有帮助，请给个 ⭐ Star 支持一下！

Made with ❤️ by ReanimatingTheNew