Files
claude-relay-service/web/admin-spa
sususu98 7f9869ae20 feat: 添加 CCR (Claude Code Router) 账户类型支持
实现通过供应商前缀语法进行 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,`
- 从流式和非流式响应中捕获使用数据
- 支持缓存令牌跟踪(创建和读取)
2025-09-10 14:21:48 +08:00
..
2025-08-08 15:56:32 +08:00
2025-08-08 15:56:32 +08:00
2025-08-10 17:46:31 +09:00
2025-09-08 17:26:14 +08:00
2025-08-22 22:09:38 +08:00

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

重要提示:

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

开发注意事项

  1. 所有 API 请求都通过 /api 目录下的模块进行封装
  2. 状态管理使用 Pinia存放在 /stores 目录
  3. 组件按功能模块组织在 /components 目录下
  4. 保持与原版页面的功能和样式一致性

代理配置

如果你的后端服务器需要通过代理访问(例如服务器在国外),可以配置 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:

  1. 确保主服务运行Claude Relay Service 必须运行在 http://localhost:3000
  2. 检查代理配置Vite 会自动代理 /admin/api 请求到 3000 端口
  3. 重启开发服务器:如果修改了配置,需要重启 npm run dev
  4. 测试代理:运行 node test-proxy.js 检查代理是否正常工作

Q: 如何处理开发和生产环境的 API 配置?

A:

  • 开发环境:使用 Vite 代理,自动转发请求到 localhost:3000
  • 生产环境:直接使用相对路径 /admin,无需配置
  • 两种环境都使用相同的 API 路径,通过环境变量自动切换

Q: 如何部署到生产环境?

A:

  1. 运行 npm run build 构建项目
  2. dist 目录内容复制到服务器的 /web/admin/ 路径
  3. 确保服务器配置了 SPA 路由回退规则