mirror of
https://github.com/Wei-Shaw/claude-relay-service.git
synced 2026-01-22 16:43:35 +00:00
实现通过供应商前缀语法进行 CCR 后端路由的完整支持。 用户现在可以在 Claude Code 中使用 `/model ccr,model_name` 将请求路由到 CCR 后端。 暂时没有实现`/v1/messages/count_tokens`,因为这需要在CCR后端支持。 CCR类型的账户也暂时没有考虑模型的支持情况 ## 核心实现 ### 供应商前缀路由 - 添加 modelHelper 工具用于解析模型名称中的 `ccr,` 供应商前缀 - 检测到前缀时自动路由到 CCR 账户池 - 转发到 CCR 后端前移除供应商前缀 ### 账户管理 - 创建 ccrAccountService 实现 CCR 账户的完整 CRUD 操作 - 支持账户属性:名称、API URL、API Key、代理、优先级、配额 - 实现账户状态:active、rate_limited、unauthorized、overloaded - 支持模型映射和支持模型配置 ### 请求转发 - 实现 ccrRelayService 处理 CCR 后端通信 - 支持流式和非流式请求 - 从 SSE 流中解析和捕获使用数据 - 支持 Bearer 和 x-api-key 两种认证格式 ### 统一调度 - 将 CCR 账户集成到 unifiedClaudeScheduler - 添加 \_selectCcrAccount 方法用于 CCR 特定账户选择 - 支持 CCR 账户的会话粘性 - 防止跨类型会话映射(CCR 会话仅用于 CCR 请求) ### 错误处理 - 实现全面的错误状态管理 - 处理 401(未授权)、429(速率限制)、529(过载)错误 - 成功请求后自动从错误状态恢复 - 支持可配置的速率限制持续时间 ### Web 管理界面 - 添加 CcrAccountForm 组件用于创建/编辑 CCR 账户 - 将 CCR 账户集成到 AccountsView 中,提供完整管理功能 - 支持账户切换、重置和使用统计 - 在界面中显示账户状态和错误信息 ### API 端点 - POST /admin/ccr-accounts - 创建 CCR 账户 - GET /admin/ccr-accounts - 列出所有 CCR 账户 - PUT /admin/ccr-accounts/:id - 更新 CCR 账户 - DELETE /admin/ccr-accounts/:id - 删除 CCR 账户 - PUT /admin/ccr-accounts/:id/toggle - 切换账户启用状态 - PUT /admin/ccr-accounts/:id/toggle-schedulable - 切换可调度状态 - POST /admin/ccr-accounts/:id/reset-usage - 重置每日使用量 - POST /admin/ccr-accounts/:id/reset-status - 重置错误状态 ## 技术细节 - CCR 账户使用 'ccr' 作为 accountType 标识符 - 带有 `ccr,` 前缀的请求绕过普通账户池 - 转发到 CCR 后端前清理模型名称内的`ccr,` - 从流式和非流式响应中捕获使用数据 - 支持缓存令牌跟踪(创建和读取)
Claude Relay Service 管理后台 SPA
这是 Claude Relay Service 管理后台的 Vue3 SPA 重构版本。
开发环境要求
- Node.js >= 16
- npm >= 7
安装和运行
1. 安装依赖
cd web/admin-spa
npm install
2. 开发模式运行
npm run dev
重要提示:
- 开发服务器启动后,会自动在浏览器中打开
- 必须访问完整路径:http://localhost:3001/web/admin/
- 不要访问 http://localhost:3001/ (会显示404)
- 首次访问会自动跳转到登录页面
3. 生产构建
npm run build
构建产物将输出到 dist 目录。
4. 预览生产构建
npm run preview
项目结构
web/admin-spa/
├── public/ # 静态资源
├── src/
│ ├── api/ # API 接口封装
│ ├── assets/ # 资源文件
│ ├── components/ # 组件
│ ├── composables/ # 组合式函数
│ ├── router/ # 路由配置
│ ├── stores/ # Pinia 状态管理
│ ├── utils/ # 工具函数
│ ├── views/ # 页面视图
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── package.json
└── vite.config.js
功能模块
- ✅ 登录认证
- ✅ 仪表板(系统统计、使用趋势、模型分布)
- 🚧 API Keys 管理
- 🚧 账户管理(Claude/Gemini)
- 🚧 使用教程
- 🚧 系统设置
技术栈
- Vue 3.3.4
- Vue Router 4
- Pinia(状态管理)
- Element Plus 2.4.4
- Tailwind CSS
- Chart.js 4.4.0
- Vite 5
开发注意事项
- 所有 API 请求都通过
/api目录下的模块进行封装 - 状态管理使用 Pinia,存放在
/stores目录 - 组件按功能模块组织在
/components目录下 - 保持与原版页面的功能和样式一致性
代理配置
如果你的后端服务器需要通过代理访问(例如服务器在国外),可以配置 HTTP 代理:
方法一:使用环境变量文件(推荐)
创建 .env.development.local 文件:
# 后端服务器地址
VITE_API_TARGET=http://74.48.134.98:3000
# HTTP 代理配置
VITE_HTTP_PROXY=http://127.0.0.1:7890
方法二:使用系统环境变量
# Linux/Mac
export VITE_HTTP_PROXY=http://127.0.0.1:7890
npm run dev
# Windows
set VITE_HTTP_PROXY=http://127.0.0.1:7890
npm run dev
注意:.env.development.local 文件不会被提交到版本控制,适合存放本地特定的配置。
部署
构建后的文件需要部署到 Claude Relay Service 的 web/admin/ 路径下。
常见问题
Q: 访问 localhost:3001 显示 404?
A: 这是正常的。应用配置在 /web/admin/ 路径下,必须访问完整路径:http://localhost:3001/web/admin/
Q: 登录时 API 请求失败(500错误)?
A:
- 确保主服务运行:Claude Relay Service 必须运行在 http://localhost:3000
- 检查代理配置:Vite 会自动代理
/admin和/api请求到 3000 端口 - 重启开发服务器:如果修改了配置,需要重启
npm run dev - 测试代理:运行
node test-proxy.js检查代理是否正常工作
Q: 如何处理开发和生产环境的 API 配置?
A:
- 开发环境:使用 Vite 代理,自动转发请求到 localhost:3000
- 生产环境:直接使用相对路径
/admin,无需配置 - 两种环境都使用相同的 API 路径,通过环境变量自动切换
Q: 如何部署到生产环境?
A:
- 运行
npm run build构建项目 - 将
dist目录内容复制到服务器的/web/admin/路径 - 确保服务器配置了 SPA 路由回退规则