🔧 开发者页（DeveloperPage）

API 文档查阅、AI Keys 管理、API 使用统计三大模块。

页面结构

Tab 栏：API 文档 / API Keys / 使用统计
API 文档 Tab：markdown 渲染的 API 使用文档（纯前端渲染，无 API 请求）
API Keys Tab：Keys 列表（提供商/模型/状态/操作）+ 新建表单
使用统计 Tab：调用次数和 Token 消耗图表

触发时机详解

API Keys Tab — 核心操作

1. 切换到「API Keys」Tab → GET /api/apikeys

触发条件：点击"API Keys" Tab → setActiveTab("api-keys") → 获取该用户的 Keys 列表

GET /api/apikeys

✅ 切换到 API Keys Tab 时触发

响应:

[{
  "id": "string",
  "user_id": "string",
  "provider": "openai|anthropic|...",
  "model": "gpt-4o|claude-3-5-sonnet-...",
  "api_key_encrypted": "sk-...",
  "is_active": 0|1,
  "created_at": "ISO8601"
}]

2. 添加 API Key → Modal → POST /api/apikeys

触发条件：点击"添加 API Key"按钮 → 弹出 Modal → 填写信息 → 点击"添加"按钮

POST /api/apikeys

✅ 点击"添加"按钮触发

参数	类型	必填	说明
`api_key`	string	必填	API Key 内容（sk-...）
`provider`	string	必填	提供商：openai / anthropic / google / deepseek / zhipu / ollama
`model`	string	选填	模型名称（如 gpt-4o，自动从 Key 推断或手动填写）
`label`	string	选填	备注标签

副作用：成功后重新 GET /api/apikeys

3. 禁用 / 启用 Key → PUT /api/apikeys/:id

触发条件：点击 Key 卡片的"禁用"/"启用"切换按钮 → 直接发送 PUT

PUT /api/apikeys/:id

✅ 点击切换按钮直接触发（无需确认）

参数	类型	必填	说明
`is_active`	boolean	必填	false=禁用, true=启用

副作用：成功后重新 GET /api/apikeys

4. 删除 Key → DELETE /api/apikeys/:id

触发条件：点击 Key 卡片的"删除"按钮 → confirm() 确认 → 发送 DELETE

DELETE /api/apikeys/:id

✅ confirm 确认后触发

副作用：成功后重新 GET /api/apikeys

使用统计 Tab

5. 切换到「使用统计」Tab → GET /api/apikeys/stats

触发条件：点击"使用统计" Tab → setActiveTab("usage-stats") → 获取统计数据

GET /api/apikeys/stats

✅ 切换到使用统计 Tab 时触发

响应:

{
  "total_calls": 1234,
  "prompt_tokens": 567890,
  "completion_tokens": 123456,
  "total_tokens": 691346,
  "by_model": {
    "gpt-4o": {"calls": 800, "tokens": 400000},
    "claude-3-5-sonnet": {"calls": 434, "tokens": 291346}
  },
  "by_day": [{"date": "2024-01-01", "calls": 45, "tokens": 1234}, ...]
}

API 文档 Tab

6. 切换到「API 文档」Tab

触发条件：点击"API 文档" Tab → setActiveTab("api-docs")（纯前端渲染，无 API 请求）

注意：API 文档 Tab 是纯前端 markdown 渲染，文档内容内置在代码中，不涉及后端 API 调用。

← ⚙️ 设置 🔐 登录注册 →