sulaimaannaasif6866
01593dcbdc
Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
279 lines
9.4 KiB
TypeScript
279 lines
9.4 KiB
TypeScript
import { useEffect, useState } from "react";
|
||
import { api, ApiError } from "../api";
|
||
import type { ApiKey } from "../types";
|
||
import { Copy, KeyRound, Plus, Trash2 } from "lucide-react";
|
||
|
||
const TIERS = [
|
||
{ key: "free", label: "免费 (free)", rate: 120 },
|
||
{ key: "partner", label: "合作方 (partner)", rate: 600 },
|
||
{ key: "internal", label: "内部 (internal)", rate: 6000 },
|
||
];
|
||
|
||
function tierLabel(tier: string): string {
|
||
return TIERS.find((t) => t.key === tier)?.label ?? tier;
|
||
}
|
||
|
||
export default function ApiKeysPage() {
|
||
const [rows, setRows] = useState<ApiKey[]>([]);
|
||
const [error, setError] = useState("");
|
||
const [creating, setCreating] = useState(false);
|
||
const [newKey, setNewKey] = useState<string | null>(null);
|
||
|
||
async function load() {
|
||
setError("");
|
||
try {
|
||
const res = await api.listApiKeys();
|
||
setRows(res.items);
|
||
} catch (e) {
|
||
setError(e instanceof ApiError ? e.message : "加载失败");
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
load();
|
||
}, []);
|
||
|
||
async function revoke(id: string, name: string) {
|
||
if (!confirm(`确认吊销密钥「${name}」？使用该密钥的请求将立即被拒绝。`)) return;
|
||
try {
|
||
await api.revokeApiKey(id);
|
||
await load();
|
||
} catch (e) {
|
||
setError(e instanceof ApiError ? e.message : "操作失败");
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="mx-auto max-w-4xl">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<div>
|
||
<h2 className="text-lg font-semibold text-gray-800 flex items-center gap-2">
|
||
<KeyRound className="h-5 w-5 text-emerald-600" /> API 密钥
|
||
</h2>
|
||
<p className="text-sm text-gray-500 mt-1">
|
||
公开 API 免费只读，匿名也可调用（低额度）。签发密钥可获得更高速率上限并归属用量。
|
||
</p>
|
||
</div>
|
||
<button
|
||
onClick={() => setCreating(true)}
|
||
className="px-4 py-2 rounded-lg bg-emerald-600 text-white text-sm font-medium hover:bg-emerald-700 flex items-center gap-1.5"
|
||
>
|
||
<Plus className="h-4 w-4" /> 签发密钥
|
||
</button>
|
||
</div>
|
||
|
||
{error && (
|
||
<div className="mb-3 bg-red-50 text-red-700 text-sm rounded px-4 py-2">{error}</div>
|
||
)}
|
||
|
||
{newKey && (
|
||
<div className="mb-4 bg-amber-50 border border-amber-200 rounded-lg p-4">
|
||
<div className="text-sm font-medium text-amber-800 mb-1">
|
||
密钥已生成，请立即复制保存——它只显示这一次。
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<code className="flex-1 bg-white border rounded px-3 py-2 text-sm break-all">
|
||
{newKey}
|
||
</code>
|
||
<button
|
||
onClick={() => navigator.clipboard?.writeText(newKey)}
|
||
className="px-3 py-2 rounded border text-sm text-gray-600 hover:bg-gray-50 flex items-center gap-1"
|
||
>
|
||
<Copy className="h-4 w-4" /> 复制
|
||
</button>
|
||
<button
|
||
onClick={() => setNewKey(null)}
|
||
className="px-3 py-2 rounded text-sm text-gray-500 hover:bg-gray-100"
|
||
>
|
||
我已保存
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{creating && (
|
||
<CreateKeyForm
|
||
onClose={() => setCreating(false)}
|
||
onCreated={(plaintext) => {
|
||
setCreating(false);
|
||
setNewKey(plaintext);
|
||
load();
|
||
}}
|
||
/>
|
||
)}
|
||
|
||
<div className="bg-white border rounded-lg overflow-hidden">
|
||
<table className="w-full text-sm">
|
||
<thead className="bg-gray-50 text-gray-500 text-left">
|
||
<tr>
|
||
<th className="px-4 py-2 font-medium">名称</th>
|
||
<th className="px-4 py-2 font-medium">前缀</th>
|
||
<th className="px-4 py-2 font-medium">级别</th>
|
||
<th className="px-4 py-2 font-medium">速率/分钟</th>
|
||
<th className="px-4 py-2 font-medium">用量(今日/累计)</th>
|
||
<th className="px-4 py-2 font-medium">状态</th>
|
||
<th className="px-4 py-2 font-medium"></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="divide-y">
|
||
{rows.length === 0 ? (
|
||
<tr>
|
||
<td colSpan={7} className="px-4 py-8 text-center text-gray-400">
|
||
暂无密钥
|
||
</td>
|
||
</tr>
|
||
) : (
|
||
rows.map((k) => (
|
||
<tr key={k.id} className={k.revoked_at ? "opacity-50" : ""}>
|
||
<td className="px-4 py-2 text-gray-800">
|
||
{k.name}
|
||
{k.owner_email && (
|
||
<span className="block text-xs text-gray-400">{k.owner_email}</span>
|
||
)}
|
||
</td>
|
||
<td className="px-4 py-2 text-gray-500">
|
||
<code>{k.key_prefix}…</code>
|
||
</td>
|
||
<td className="px-4 py-2 text-gray-600">{tierLabel(k.tier)}</td>
|
||
<td className="px-4 py-2 text-gray-600">{k.rate_limit_per_min}</td>
|
||
<td className="px-4 py-2 text-gray-600">
|
||
{k.usage.today} / {k.usage.total}
|
||
</td>
|
||
<td className="px-4 py-2">
|
||
{k.revoked_at ? (
|
||
<span className="text-xs rounded px-2 py-0.5 bg-red-50 text-red-700">
|
||
已吊销
|
||
</span>
|
||
) : (
|
||
<span className="text-xs rounded px-2 py-0.5 bg-emerald-50 text-emerald-700">
|
||
启用中
|
||
</span>
|
||
)}
|
||
</td>
|
||
<td className="px-4 py-2 text-right">
|
||
{!k.revoked_at && (
|
||
<button
|
||
onClick={() => revoke(k.id, k.name)}
|
||
className="text-gray-400 hover:text-red-600"
|
||
title="吊销"
|
||
>
|
||
<Trash2 className="h-4 w-4" />
|
||
</button>
|
||
)}
|
||
</td>
|
||
</tr>
|
||
))
|
||
)}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function CreateKeyForm({
|
||
onClose,
|
||
onCreated,
|
||
}: {
|
||
onClose: () => void;
|
||
onCreated: (plaintext: string) => void;
|
||
}) {
|
||
const [name, setName] = useState("");
|
||
const [ownerEmail, setOwnerEmail] = useState("");
|
||
const [tier, setTier] = useState("free");
|
||
const [rate, setRate] = useState(120);
|
||
const [busy, setBusy] = useState(false);
|
||
const [error, setError] = useState("");
|
||
|
||
function pickTier(t: string) {
|
||
setTier(t);
|
||
const def = TIERS.find((x) => x.key === t);
|
||
if (def) setRate(def.rate);
|
||
}
|
||
|
||
async function submit() {
|
||
if (!name.trim()) {
|
||
setError("名称不能为空");
|
||
return;
|
||
}
|
||
setBusy(true);
|
||
setError("");
|
||
try {
|
||
const res = await api.createApiKey({
|
||
name: name.trim(),
|
||
owner_email: ownerEmail.trim() || undefined,
|
||
tier,
|
||
rate_limit_per_min: rate,
|
||
});
|
||
onCreated(res.key);
|
||
} catch (e) {
|
||
setError(e instanceof ApiError ? e.message : "创建失败");
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="mb-4 bg-white border rounded-lg p-5">
|
||
<h3 className="font-medium text-gray-700 mb-3">签发新密钥</h3>
|
||
{error && <div className="mb-3 bg-red-50 text-red-700 text-sm rounded px-3 py-2">{error}</div>}
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<label className="block">
|
||
<span className="text-xs text-gray-500">名称 *</span>
|
||
<input
|
||
className="w-full border rounded-md px-3 py-2 text-sm mt-1"
|
||
value={name}
|
||
onChange={(e) => setName(e.target.value)}
|
||
placeholder="例如：我的 App / 合作方 X"
|
||
/>
|
||
</label>
|
||
<label className="block">
|
||
<span className="text-xs text-gray-500">负责人邮箱（可选）</span>
|
||
<input
|
||
className="w-full border rounded-md px-3 py-2 text-sm mt-1"
|
||
value={ownerEmail}
|
||
onChange={(e) => setOwnerEmail(e.target.value)}
|
||
placeholder="owner@example.com"
|
||
/>
|
||
</label>
|
||
<label className="block">
|
||
<span className="text-xs text-gray-500">级别</span>
|
||
<select
|
||
className="w-full border rounded-md px-3 py-2 text-sm mt-1 bg-white"
|
||
value={tier}
|
||
onChange={(e) => pickTier(e.target.value)}
|
||
>
|
||
{TIERS.map((t) => (
|
||
<option key={t.key} value={t.key}>
|
||
{t.label}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
<label className="block">
|
||
<span className="text-xs text-gray-500">速率上限（次/分钟）</span>
|
||
<input
|
||
type="number"
|
||
min={1}
|
||
className="w-full border rounded-md px-3 py-2 text-sm mt-1"
|
||
value={rate}
|
||
onChange={(e) => setRate(Math.max(1, parseInt(e.target.value || "1", 10)))}
|
||
/>
|
||
</label>
|
||
</div>
|
||
<div className="mt-4 flex gap-2">
|
||
<button
|
||
onClick={submit}
|
||
disabled={busy}
|
||
className="px-4 py-2 rounded bg-emerald-600 text-white text-sm hover:bg-emerald-700 disabled:opacity-60"
|
||
>
|
||
生成
|
||
</button>
|
||
<button onClick={onClose} className="px-4 py-2 rounded border text-sm text-gray-600">
|
||
取消
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|