# GHCS v0.2 · keys/page.tsx · API密钥管理前端

部署路径：`~/guanghu-dev/ghcs-mono/frontend/src/app/console/keys/page.tsx`

```tsx
"use client";

import { useState, useEffect, useCallback } from "react";
import {
  KeyIcon,
  PlusIcon,
  TrashIcon,
  EyeIcon,
  EyeSlashIcon,
  PencilIcon,
  ShieldCheckIcon,
  XMarkIcon,
  CheckIcon,
  ArrowPathIcon,
} from "@heroicons/react/24/outline";

const SUPPLIER_COLORS: Record<string, string> = {
  deepseek: "#4F46E5",
  qwen: "#0EA5E9",
  glm: "#8B5CF6",
  moonshot: "#10B981",
  other: "#6B7280",
};

type Supplier = {
  key: string;
  name: string;
  color: string;
  key_count: number;
  active_count: number;
};

type ApiKey = {
  id: string;
  supplier: string;
  supplier_name: string;
  key_name: string;
  api_key_masked: string;
  is_active: boolean;
  monthly_budget: number | null;
  created_at: string;
  updated_at: string;
};

type UsageItem = {
  id: string;
  supplier: string;
  key_name: string;
  total_calls: number;
  total_tokens: number;
  estimated_cost: number;
  monthly_budget: number | null;
  budget_used_percent: number | null;
  is_active: boolean;
};

type Alert = {
  level: "red" | "yellow";
  key_id: string;
  key_name: string;
  supplier: string;
  message: string;
};

export default function ApiKeysPage() {
  const [suppliers, setSuppliers] = useState<Supplier[]>([]);
  const [keys, setKeys] = useState<ApiKey[]>([]);
  const [usage, setUsage] = useState<UsageItem[]>([]);
  const [alerts, setAlerts] = useState<Alert[]>([]);
  const [loading, setLoading] = useState(true);

  const [showModal, setShowModal] = useState(false);
  const [editingKey, setEditingKey] = useState<ApiKey | null>(null);
  const [form, setForm] = useState({
    supplier: "deepseek",
    key_name: "",
    api_key: "",
    monthly_budget: "",
  });
  const [showKey, setShowKey] = useState(false);
  const [activeTab, setActiveTab] = useState<"keys" | "usage">("keys");

  const API_BASE = process.env.NEXT_PUBLIC_CONSOLE_API || "";

  const fetchAll = useCallback(async () => {
    try {
      const [supRes, keyRes, usageRes, healthRes] = await Promise.all([
        fetch(`${API_BASE}/api/keys/suppliers`),
        fetch(`${API_BASE}/api/keys/list`),
        fetch(`${API_BASE}/api/keys/usage`),
        fetch(`${API_BASE}/api/keys/health-check`),
      ]);
      if (supRes.ok) setSuppliers((await supRes.json()).suppliers);
      if (keyRes.ok) setKeys((await keyRes.json()).keys);
      if (usageRes.ok) setUsage((await usageRes.json()).items);
      if (healthRes.ok) setAlerts((await healthRes.json()).alerts);
    } catch (e) {
      console.error("加载失败", e);
    } finally {
      setLoading(false);
    }
  }, [API_BASE]);

  useEffect(() => {
    fetchAll();
  }, [fetchAll]);

  const openAdd = (supplier: string) => {
    setEditingKey(null);
    setForm({ supplier, key_name: "", api_key: "", monthly_budget: "" });
    setShowKey(false);
    setShowModal(true);
  };

  const openEdit = (key: ApiKey) => {
    setEditingKey(key);
    setForm({
      supplier: key.supplier,
      key_name: key.key_name,
      api_key: "",
      monthly_budget: key.monthly_budget?.toString() || "",
    });
    setShowKey(false);
    setShowModal(true);
  };

  const handleSubmit = async () => {
    if (!form.key_name) return alert("请输入密钥名称");
    const url = editingKey
      ? `${API_BASE}/api/keys/${editingKey.id}`
      : `${API_BASE}/api/keys/add`;
    const method = editingKey ? "PUT" : "POST";
    const body: Record<string, unknown> = {
      supplier: form.supplier,
      key_name: form.key_name,
    };
    if (form.api_key) body.api_key = form.api_key;
    if (form.monthly_budget) body.monthly_budget = parseFloat(form.monthly_budget);
    const res = await fetch(url, {
      method,
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(body),
    });
    if (res.ok) {
      setShowModal(false);
      fetchAll();
    } else {
      const err = await res.json();
      alert("操作失败: " + (err.detail || "未知错误"));
    }
  };

  const handleDelete = async (keyId: string, keyName: string) => {
    if (!confirm(`确认删除密钥 "${keyName}"？此操作不可恢复。`)) return;
    const res = await fetch(`${API_BASE}/api/keys/${keyId}`, { method: "DELETE" });
    if (res.ok) fetchAll();
  };

  const handleToggleActive = async (key: ApiKey) => {
    const res = await fetch(`${API_BASE}/api/keys/${key.id}`, {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ is_active: !key.is_active }),
    });
    if (res.ok) fetchAll();
  };

  const totalCost = usage.reduce((s, u) => s + u.estimated_cost, 0);
  const totalCalls = usage.reduce((s, u) => s + u.total_calls, 0);

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-gray-100 flex items-center gap-3">
          <KeyIcon className="w-7 h-7 text-indigo-400" />
          API 密钥管理
        </h1>
        <p className="text-gray-400 mt-1">
          管理商业API供应商密钥 · 用量监控 · 费用告警
        </p>
      </div>

      {alerts.length > 0 && (
        <div className="space-y-2">
          {alerts.map((a, i) => (
            <div
              key={i}
              className={`p-3 rounded-lg border flex items-start gap-3 ${
                a.level === "red"
                  ? "bg-red-900/30 border-red-700/50 text-red-300"
                  : "bg-yellow-900/30 border-yellow-700/50 text-yellow-300"
              }`}
            >
              <ShieldCheckIcon className="w-5 h-5 mt-0.5 flex-shrink-0" />
              <div>
                <span className="font-semibold">{a.key_name}</span>{" "}
                <span className="opacity-75">({a.supplier})</span>
                <p className="text-sm mt-0.5">{a.message}</p>
              </div>
            </div>
          ))}
        </div>
      )}

      <div className="flex gap-1 bg-gray-800/50 rounded-lg p-1 w-fit">
        <button
          onClick={() => setActiveTab("keys")}
          className={`px-4 py-2 rounded-md text-sm font-medium transition ${
            activeTab === "keys"
              ? "bg-gray-700 text-white"
              : "text-gray-400 hover:text-gray-200"
          }`}
        >
          密钥列表
        </button>
        <button
          onClick={() => setActiveTab("usage")}
          className={`px-4 py-2 rounded-md text-sm font-medium transition ${
            activeTab === "usage"
              ? "bg-gray-700 text-white"
              : "text-gray-400 hover:text-gray-200"
          }`}
        >
          用量统计
        </button>
      </div>

      {activeTab === "keys" ? (
        <div className="space-y-6">
          {loading ? (
            <div className="text-gray-400 py-8 text-center">
              <ArrowPathIcon className="w-6 h-6 animate-spin inline" /> 加载中...
            </div>
          ) : (
            suppliers.map((sup) => {
              const supKeys = keys.filter((k) => k.supplier === sup.key);
              return (
                <div
                  key={sup.key}
                  className="bg-gray-800/50 rounded-xl border border-gray-700/50 overflow-hidden"
                >
                  <div className="p-4 flex items-center justify-between border-b border-gray-700/30">
                    <div className="flex items-center gap-3">
                      <div
                        className="w-3 h-3 rounded-full"
                        style= backgroundColor: sup.color 
                      />
                      <h3 className="text-lg font-semibold text-gray-100">
                        {sup.name}
                      </h3>
                      <span className="text-sm text-gray-500">
                        {sup.active_count}/{sup.key_count} 活跃
                      </span>
                    </div>
                    <button
                      onClick={() => openAdd(sup.key)}
                      className="flex items-center gap-1.5 px-3 py-1.5 bg-indigo-600 hover:bg-indigo-500 text-white text-sm rounded-lg transition"
                    >
                      <PlusIcon className="w-4 h-4" />
                      添加密钥
                    </button>
                  </div>

                  {supKeys.length === 0 ? (
                    <div className="p-6 text-center text-gray-500 text-sm">
                      暂无密钥，点击上方按钮添加
                    </div>
                  ) : (
                    <div className="divide-y divide-gray-700/20">
                      {supKeys.map((key) => (
                        <div
                          key={key.id}
                          className="p-4 flex items-center justify-between hover:bg-gray-700/20 transition"
                        >
                          <div className="flex items-center gap-4">
                            <button
                              onClick={() => handleToggleActive(key)}
                              className={`relative w-10 h-5 rounded-full transition ${
                                key.is_active
                                  ? "bg-green-500"
                                  : "bg-gray-600"
                              }`}
                            >
                              <div
                                className={`absolute top-0.5 w-4 h-4 bg-white rounded-full transition ${
                                  key.is_active ? "left-5" : "left-0.5"
                                }`}
                              />
                            </button>
                            <div>
                              <div className="flex items-center gap-2">
                                <span className="text-gray-100 font-medium">
                                  {key.key_name}
                                </span>
                                <span className="text-gray-500 text-xs font-mono bg-gray-700/50 px-2 py-0.5 rounded">
                                  {key.api_key_masked}
                                </span>
                              </div>
                              <div className="text-xs text-gray-500 mt-1">
                                创建: {key.created_at.slice(0, 10)}
                                {key.updated_at !== key.created_at &&
                                  ` · 更新: ${key.updated_at.slice(0, 10)}`}
                              </div>
                            </div>
                          </div>
                          <div className="flex items-center gap-2">
                            <button
                              onClick={() => openEdit(key)}
                              className="p-1.5 text-gray-400 hover:text-gray-200 transition"
                              title="编辑"
                            >
                              <PencilIcon className="w-4 h-4" />
                            </button>
                            <button
                              onClick={() => handleDelete(key.id, key.key_name)}
                              className="p-1.5 text-gray-400 hover:text-red-400 transition"
                              title="删除"
                            >
                              <TrashIcon className="w-4 h-4" />
                            </button>
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              );
            })
          )}
        </div>
      ) : (
        <div className="space-y-4">
          <div className="grid grid-cols-3 gap-4">
            <div className="bg-gray-800/50 rounded-xl border border-gray-700/50 p-4">
              <div className="text-gray-400 text-sm">总调用次数</div>
              <div className="text-2xl font-bold text-gray-100">
                {totalCalls.toLocaleString()}
              </div>
            </div>
            <div className="bg-gray-800/50 rounded-xl border border-gray-700/50 p-4">
              <div className="text-gray-400 text-sm">预估月费</div>
              <div className="text-2xl font-bold text-indigo-400">
                ¥{totalCost.toFixed(2)}
              </div>
            </div>
            <div className="bg-gray-800/50 rounded-xl border border-gray-700/50 p-4">
              <div className="text-gray-400 text-sm">活跃密钥</div>
              <div className="text-2xl font-bold text-green-400">
                {usage.filter((u) => u.is_active).length}
              </div>
            </div>
          </div>

          {usage.length === 0 ? (
            <div className="text-gray-500 text-center py-8">暂无调用记录</div>
          ) : (
            <div className="bg-gray-800/50 rounded-xl border border-gray-700/50 overflow-hidden">
              <table className="w-full text-sm">
                <thead>
                  <tr className="border-b border-gray-700/30 text-gray-400">
                    <td className="p-3">密钥</td>
                    <td className="p-3">供应商</td>
                    <td className="p-3 text-right">调用次数</td>
                    <td className="p-3 text-right">Token 用量</td>
                    <td className="p-3 text-right">预估费用</td>
                    <td className="p-3 text-right">预算</td>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-700/20">
                  {usage.map((u) => (
                    <tr key={u.id} className="hover:bg-gray-700/20">
                      <td className="p-3">
                        <span className="text-gray-100">{u.key_name}</span>
                      </td>
                      <td className="p-3">
                        <span
                          className="inline-flex items-center gap-1.5"
                          style= color: SUPPLIER_COLORS[u.supplier] || "#6B7280" 
                        >
                          <span
                            className="w-2 h-2 rounded-full inline-block"
                            style=
                              backgroundColor: SUPPLIER_COLORS[u.supplier] || "#6B7280",
                            
                          />
                          {u.supplier}
                        </span>
                      </td>
                      <td className="p-3 text-right text-gray-300">
                        {u.total_calls.toLocaleString()}
                      </td>
                      <td className="p-3 text-right text-gray-300">
                        {u.total_tokens.toLocaleString()}
                      </td>
                      <td className="p-3 text-right text-indigo-400 font-mono">
                        ¥{u.estimated_cost.toFixed(2)}
                      </td>
                      <td className="p-3 text-right">
                        {u.monthly_budget ? (
                          <div className="flex items-center justify-end gap-2">
                            <div className="w-16 h-1.5 bg-gray-700 rounded-full overflow-hidden">
                              <div
                                className={`h-full rounded-full transition ${
                                  (u.budget_used_percent || 0) >= 100
                                    ? "bg-red-500"
                                    : (u.budget_used_percent || 0) >= 80
                                    ? "bg-yellow-500"
                                    : "bg-green-500"
                                }`}
                                style={{
                                  width: `${Math.min(u.budget_used_percent || 0, 100)}%`,
                                }}
                              />
                            </div>
                            <span className="text-gray-400 text-xs">
                              {u.budget_used_percent}%
                            </span>
                          </div>
                        ) : (
                          <span className="text-gray-600">—</span>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
      )}

      {showModal && (
        <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
          <div className="bg-gray-800 rounded-xl border border-gray-700 w-full max-w-md p-6 space-y-4">
            <div className="flex items-center justify-between">
              <h3 className="text-lg font-semibold text-gray-100">
                {editingKey ? "编辑密钥" : "添加密钥"}
              </h3>
              <button
                onClick={() => setShowModal(false)}
                className="p-1 text-gray-400 hover:text-gray-200"
              >
                <XMarkIcon className="w-5 h-5" />
              </button>
            </div>

            <div>
              <label className="block text-sm text-gray-400 mb-1">供应商</label>
              <select
                value={form.supplier}
                onChange={(e) => setForm({ ...form, supplier: e.target.value })}
                className="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-gray-100 text-sm focus:outline-none focus:border-indigo-500"
              >
                {Object.keys(SUPPLIER_COLORS).map((k) => (
                  <option key={k} value={k}>{k}</option>
                ))}
              </select>
            </div>

            <div>
              <label className="block text-sm text-gray-400 mb-1">
                密钥名称
              </label>
              <input
                type="text"
                placeholder="例如: 个人开发Key"
                value={form.key_name}
                onChange={(e) => setForm({ ...form, key_name: e.target.value })}
                className="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-gray-100 text-sm focus:outline-none focus:border-indigo-500"
              />
            </div>

            <div>
              <label className="block text-sm text-gray-400 mb-1">
                API Key {editingKey && "（留空则不修改）"}
              </label>
              <div className="relative">
                <input
                  type={showKey ? "text" : "password"}
                  placeholder={editingKey ? "留空保持原密钥" : "sk-..."}
                  value={form.api_key}
                  onChange={(e) => setForm({ ...form, api_key: e.target.value })}
                  className="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 pr-10 text-gray-100 text-sm font-mono focus:outline-none focus:border-indigo-500"
                />
                <button
                  onClick={() => setShowKey(!showKey)}
                  className="absolute right-2 top-2 text-gray-400 hover:text-gray-200"
                >
                  {showKey ? (
                    <EyeSlashIcon className="w-4 h-4" />
                  ) : (
                    <EyeIcon className="w-4 h-4" />
                  )}
                </button>
              </div>
            </div>

            <div>
              <label className="block text-sm text-gray-400 mb-1">
                月度预算（元，可选）
              </label>
              <input
                type="number"
                placeholder="超出80%时会告警"
                value={form.monthly_budget}
                onChange={(e) => setForm({ ...form, monthly_budget: e.target.value })}
                className="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-gray-100 text-sm focus:outline-none focus:border-indigo-500"
              />
            </div>

            <div className="flex gap-3 pt-2">
              <button
                onClick={() => setShowModal(false)}
                className="flex-1 px-4 py-2 bg-gray-700 hover:bg-gray-600 text-gray-300 rounded-lg text-sm transition"
              >
                取消
              </button>
              <button
                onClick={handleSubmit}
                className="flex-1 px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg text-sm flex items-center justify-center gap-2 transition"
              >
                <CheckIcon className="w-4 h-4" />
                {editingKey ? "保存" : "添加"}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
```

---

## 📁 部署

下载这个文件，然后拖到 VS Code 里替换：

[keys-page.tsx](GHCS%20v0%202%20%C2%B7%20keys%20page%20tsx%20%C2%B7%20API%E5%AF%86%E9%92%A5%E7%AE%A1%E7%90%86%E5%89%8D%E7%AB%AF/keys-page.tsx)

keys-page.tsx

或者终端里执行：

```bash
base64 -d << 'B64END' > ~/guanghu-dev/ghcs-mono/frontend/src/app/console/keys/page.tsx
base64_data
B64END
```

保存后刷新 [http://localhost:3000/console/keys](http://localhost:3000/console/keys)