ApiKeySettings 组件

ApiKeySettings 组件

概述

ApiKeySettings 是 API 密钥管理组件，允许用户生成、查看、重新生成和撤销 API 密钥，以及配置 MCP Prompt 的默认公开设置。

文件路径

src/components/settings/api-key-settings.tsx

功能特性

  • 密钥生成: 一键生成新 API 密钥
  • 密钥显示: 支持显示/隐藏密钥
  • 密钥复制: 一键复制到剪贴板
  • 重新生成: 生成新密钥使旧密钥失效
  • 密钥撤销: 完全删除 API 密钥
  • 公开设置: 配置 MCP Prompt 默认是否公开
  • 确认对话框: 重要操作需要确认

接口定义

interface ApiKeySettingsProps {
  initialApiKey: string | null;        // 初始 API 密钥
  initialPublicByDefault: boolean;     // 初始公开设置
}

// 组件状态
interface ApiKeyState {
  apiKey: string | null;      // 当前 API 密钥
  showKey: boolean;           // 是否显示明文
  isLoading: boolean;         // 加载状态
  publicByDefault: boolean;   // 默认公开设置
}

使用示例

import { ApiKeySettings } from "@/components/settings/api-key-settings";

export default async function SettingsPage() {
  const user = await getUser();
  
  return (
    <ApiKeySettings
      initialApiKey={user.apiKey}
      initialPublicByDefault={user.mcpPromptsPublicByDefault}
    />
  );
}

API 端点

生成/重新生成密钥

POST /api/user/api-key

撤销密钥

DELETE /api/user/api-key

更新公开设置

PATCH /api/user/api-key
Body: { mcpPromptsPublicByDefault: boolean }

密钥显示

密钥显示为掩码格式：

前10位 + 32个• + 后8位

示例：

pak_1234abcd••••••••••••••••••••••••••xyz78901

UI 组件

密钥存在时

  • 密钥显示区域（可切换显示/隐藏）
  • 复制按钮
  • 默认公开开关
  • 重新生成按钮（带确认对话框）
  • 撤销按钮（带确认对话框，红色警告）

密钥不存在时

  • 提示文本
  • 生成密钥按钮

确认对话框

重新生成

标题：重新生成 API 密钥？
描述：这将使您现有的 API 密钥失效。使用旧密钥的应用将停止工作。
操作：取消 / 重新生成

撤销

标题：撤销 API 密钥？
描述：此操作无法撤销。您的 API 密钥将永久删除。
操作：取消 / 撤销（红色按钮）

依赖

  • next-intl - 国际化
  • lucide-react - 图标
  • sonner - toast 通知
  • @/components/ui/* - UI 组件

- Button - Switch - Label - Card - AlertDialog

注意事项

  1. API 密钥只显示一次，刷新后无法再次查看明文
  2. 重新生成会立即使旧密钥失效
  3. 撤销操作不可恢复
  4. 公开设置影响通过 MCP 创建的新 Prompt
  5. 所有操作都有加载状态防止重复提交
  6. 建议在安全环境下复制和保存密钥

安全最佳实践

  • 不要在客户端代码中硬编码 API 密钥
  • 定期轮换（重新生成）API 密钥
  • 如果密钥泄露，立即撤销并重新生成
  • 仅在必要时将密钥设置为公开
← 返回目录