feat(api): API keys + Redis rate limiting + usage stats

Add an optional API-key layer to the public read-only API. Keys grant
higher per-minute rate limits and attribute usage; anonymous callers are
still allowed at a lower IP-based budget.

- migration 0008_api_key: api_key table (sha256 hash only, plaintext shown once)
- apikey pkg: key generation + hashing
- ratelimit pkg: Redis fixed-window limiter + per-key usage counters; fails open
- public API middleware: X-API-Key / Bearer auth, X-RateLimit-* headers, 429+Retry-After
- admin: issue/list/revoke keys + usage view (API + UI tab)

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

admin-frontend/src/App.tsx

@@ -4,9 +4,10 @@ import Login from "./components/Login";
 import ProductList from "./components/ProductList";
 import ProductDetail from "./components/ProductDetail";
 import SubmissionsPage from "./components/SubmissionsPage";
-import { Inbox, LogOut, Package } from "lucide-react";
+import ApiKeysPage from "./components/ApiKeysPage";
+import { Inbox, KeyRound, LogOut, Package } from "lucide-react";
 
-type Tab = "products" | "submissions";
+type Tab = "products" | "submissions" | "keys";
 type View = { name: "list" } | { name: "detail"; id: string };
 
 export default function App() {
@@ -99,6 +100,16 @@ export default function App() {
                 </span>
               )}
             </button>
+            <button
+              onClick={() => setTab("keys")}
+              className={`px-3 py-1.5 rounded-md flex items-center gap-1.5 ${
+                tab === "keys"
+                  ? "bg-emerald-50 text-emerald-700"
+                  : "text-gray-600 hover:bg-gray-100"
+              }`}
+            >
+              <KeyRound className="h-4 w-4" /> API 密钥
+            </button>
           </nav>
         </div>
         <div className="flex items-center gap-4 text-sm text-gray-600">
@@ -112,7 +123,9 @@ export default function App() {
         </div>
       </header>
       <main className="flex-1 overflow-auto p-6">
-        {tab === "submissions" ? (
+        {tab === "keys" ? (
+          <ApiKeysPage />
+        ) : tab === "submissions" ? (
           <SubmissionsPage onPending={setPending} />
         ) : view.name === "list" ? (
           <ProductList onOpen={(id) => setView({ name: "detail", id })} />

admin-frontend/src/api.ts

@@ -123,4 +123,18 @@ export const api = {
       method: "POST",
       body: JSON.stringify({ note }),
     }),
+  listApiKeys: () =>
+    request<{ items: import("./types").ApiKey[] }>("/keys"),
+  createApiKey: (body: {
+    name: string;
+    owner_email?: string;
+    tier?: string;
+    rate_limit_per_min?: number;
+  }) =>
+    request<{ key: string; item: import("./types").ApiKey; warning: string }>(
+      "/keys",
+      { method: "POST", body: JSON.stringify(body) },
+    ),
+  revokeApiKey: (id: string) =>
+    request<{ status: string }>(`/keys/${id}`, { method: "DELETE" }),
 };

admin-frontend/src/components/ApiKeysPage.tsx

@@ -0,0 +1,278 @@
+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="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>
+  );
+}

admin-frontend/src/types.ts

@@ -137,6 +137,25 @@ export interface SubmissionDetail {
   existing_product?: ProductDetail;
 }
 
+export interface ApiKeyUsage {
+  total: number;
+  today: number;
+  last_used_at?: number | null;
+}
+
+export interface ApiKey {
+  id: string;
+  name: string;
+  key_prefix: string;
+  owner_email: string | null;
+  tier: string;
+  rate_limit_per_min: number;
+  revoked_at: string | null;
+  created_by: string | null;
+  created_at: string;
+  usage: ApiKeyUsage;
+}
+
 export const FIELD_LABELS: Record<string, string> = {
   name: "名称",
   gtin: "条码",