fix(passkey): 删除 passkey 先确认并显示名称与注册时间，邮箱未验证时后端拒删最后一把，错误内联显示

panel/dev/mockApi.ts

@@ -899,12 +899,19 @@ async function handleSession(ctx: SessionContext): Promise<boolean> {
     default:
       if (ctx.method === "DELETE" && ctx.parts[2] === "account" && ctx.parts[3] === "passkey" && ctx.parts[4] === "credentials" && ctx.parts[5]) {
         const id = ctx.parts[5];
-        if (ctx.state.passkeys[ctx.account.id]) {
-          const idx = ctx.state.passkeys[ctx.account.id].findIndex((k) => k.id === id);
-          if (idx >= 0) {
-            ctx.state.passkeys[ctx.account.id].splice(idx, 1);
-          }
+        const list = ctx.state.passkeys[ctx.account.id] ?? [];
+        const idx = list.findIndex((k) => k.id === id);
+        if (idx < 0) {
+          sendError(ctx.res, 404, "not_found", "passkey not found");
+          return true;
         }
+        // Same rule as the real API: the only passkey of an account without a
+        // verified email stays, or the account would have no way to sign in.
+        if (list.length === 1 && !ctx.account.emailVerified) {
+          sendError(ctx.res, 409, "last_passkey", "this is your only passkey and your email is not verified");
+          return true;
+        }
+        list.splice(idx, 1);
         ctx.res.statusCode = 204;
         ctx.res.end();
         return true;

panel/src/i18n/resources/en-US/account.json

@@ -44,6 +44,11 @@
   "created_at": "Registered at: ",
   "last_used": "Last used: ",
   "never": "Never",
+  "passkey_delete_aria": "Delete passkey “{{name}}”",
+  "passkey_delete_title": "Delete this passkey?",
+  "passkey_delete_desc": "“{{name}}” (registered {{created}}) will no longer sign you in. You can register it again later.",
+  "passkey_delete_confirm": "Delete",
+  "passkey_last_hint": "This is your only passkey and your email is not verified, so deleting it would lock you out. Verify an email or add another passkey first.",
   "migration": "Account migration",
   "migration_desc": "Move everything a retired account owns onto this one. Migration starts in-game and finishes here.",
   "account_id": "Account ID",

panel/src/i18n/resources/en-US/errors.json

@@ -37,6 +37,7 @@
   "invalid_attestation": "Could not verify this Passkey, please try again.",
   "passkey_already_bound": "This Passkey is already bound to another account.",
   "passkey_unavailable": "Passkey subsystem is not available right now.",
+  "last_passkey": "This is your only passkey and your email is not verified, so it can't be removed. Verify an email or add another passkey first.",
   "passkey_not_allowed": "The operation was cancelled by the user or browser.",
   "passkey_aborted": "Passkey registration was aborted.",
   "bad_name": "That server name is invalid — use 3–32 lowercase letters, digits or dashes, and avoid reserved names.",

panel/src/i18n/resources/zh-CN/account.json

@@ -44,6 +44,11 @@
   "created_at": "注册时间：",
   "last_used": "上次使用：",
   "never": "从未",
+  "passkey_delete_aria": "删除 Passkey「{{name}}」",
+  "passkey_delete_title": "删除这个 Passkey？",
+  "passkey_delete_desc": "「{{name}}」（注册于 {{created}}）删除后无法再用它登录，需要时可以重新注册。",
+  "passkey_delete_confirm": "删除",
+  "passkey_last_hint": "这是你唯一的 Passkey，邮箱也还没验证，删掉就没法登录了。先验证邮箱或再注册一个 Passkey，才能删除它。",
   "migration": "账户迁移",
   "migration_desc": "将被弃用账户名下的所有服务器转移到本账户。迁移在游戏内发起，在此完成。",
   "account_id": "账户 ID",

panel/src/i18n/resources/zh-CN/errors.json

@@ -37,6 +37,7 @@
   "invalid_attestation": "无法验证此 Passkey，请重试。",
   "passkey_already_bound": "此 Passkey 已被其他账户绑定。",
   "passkey_unavailable": "Passkey 功能当前不可用。",
+  "last_passkey": "这是你唯一的 Passkey，邮箱也还没验证，不能删除。先验证邮箱或再注册一个 Passkey。",
   "passkey_not_allowed": "操作已被用户或浏览器取消。",
   "passkey_aborted": "Passkey 注册已被取消。",
   "bad_name": "服务器名称不合法：需为 3–32 位小写字母、数字或连字符，且不能使用保留名。",

panel/src/lib/api.ts

@@ -13,6 +13,7 @@ import type {
   LinkResult,
   LinkStatus,
   BindResult,
+  PasskeyCredential,
   PatchUserRequest,
   PlayersResult,
   QuotaInput,
@@ -560,7 +561,7 @@ export const api = rejectingSync({
     request<any>("POST", "/account/passkey/register/finish", { name, attestation }),
 
   passkeyList: () =>
-    request<{ credentials: any[] }>("GET", "/account/passkey/credentials"),
+    request<{ credentials: PasskeyCredential[] }>("GET", "/account/passkey/credentials"),
 
   passkeyDelete: (id: string) =>
     request<void>("DELETE", urlPath`/account/passkey/credentials/${id}`),
@@ -800,6 +801,8 @@ export function humanizeError(e: unknown): string {
       return t("passkey_already_bound");
     case "passkey_unavailable":
       return t("passkey_unavailable");
+    case "last_passkey":
+      return t("last_passkey");
     case "quota_exceeded":
       return t("quota_exceeded");
     case "already_claimed":

panel/src/lib/types.ts

@@ -392,6 +392,15 @@ export interface QuotaInput {
   max_storage_gb?: number | null;
 }
 
+// One registered passkey as GET /account/passkey/credentials lists it.
+export interface PasskeyCredential {
+  id: string;
+  name: string;
+  aaguid?: string;
+  created_at: string;
+  last_used_at?: string | null;
+}
+
 export interface SessionView {
   token_hash: string;
   created_at: string;

panel/src/pages/Account.tsx

@@ -6,8 +6,12 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Loading, ErrorState } from "@/components/States";
+import { ConfirmFooter } from "@/components/ConfirmFooter";
+import { MessageLine } from "@/components/MessageLine";
 import { PageHeader } from "@/components/PageHeader";
 import { api, humanizeError } from "@/lib/api";
+import { formatAbsolute } from "@/lib/format";
+import type { PasskeyCredential } from "@/lib/types";
 import { useAsync } from "@/lib/hooks";
 import { useTier } from "@/lib/tier";
 import { base64urlToBytes, bytesToBase64url } from "@/lib/utils";
@@ -30,7 +34,7 @@ import {
 export function Account() {
   const status = useAsync(() => api.linkStatus(), []);
   const { identity, refresh } = useTier();
-  const { t } = useTranslation("account");
+  const { t, i18n } = useTranslation("account");
 
   // Email verification state
   const [emailInput, setEmailInput] = useState("");
@@ -93,7 +97,15 @@ export function Account() {
   const [registeringPasskey, setRegisteringPasskey] = useState(false);
   const [passkeyError, setPasskeyError] = useState<string | null>(null);
   const [registerDialogOpen, setRegisterDialogOpen] = useState(false);
-  const [deletingMap, setDeletingMap] = useState<Record<string, boolean>>({});
+  // Deleting a passkey goes through a confirm dialog that names it. The API
+  // refuses to remove the only passkey of an account whose email is unverified
+  // (it would be left with no way back in); the button mirrors that rule so the
+  // refusal is explained up front instead of after a round trip.
+  const [pendingDelete, setPendingDelete] = useState<PasskeyCredential | null>(null);
+  const [deletingPasskey, setDeletingPasskey] = useState(false);
+  const [deleteError, setDeleteError] = useState<string | null>(null);
+  const credentials = passkeys.data?.credentials ?? [];
+  const keepLastPasskey = credentials.length === 1 && !identity?.email_verified;
 
   const abortControllerRef = useRef<AbortController | null>(null);
 
@@ -165,16 +177,30 @@ export function Account() {
     }
   }
 
-  async function handleDeletePasskey(id: string) {
-    if (deletingMap[id]) return;
-    setDeletingMap((prev) => ({ ...prev, [id]: true }));
+  function askDeletePasskey(cred: PasskeyCredential) {
+    setDeleteError(null);
+    setPendingDelete(cred);
+  }
+
+  async function confirmDeletePasskey() {
+    if (!pendingDelete || deletingPasskey) return;
+    setDeletingPasskey(true);
+    setDeleteError(null);
     try {
-      await api.passkeyDelete(id);
+      await api.passkeyDelete(pendingDelete.id);
+      setPendingDelete(null);
       await passkeys.reload();
     } catch (err) {
-      alert(humanizeError(err));
+      // Another device may have changed the list meanwhile: refresh it. A 404
+      // means the passkey is already gone, which is what was asked for.
+      void passkeys.reload();
+      if ((err as { code?: string }).code === "not_found") {
+        setPendingDelete(null);
+      } else {
+        setDeleteError(humanizeError(err));
+      }
     } finally {
-      setDeletingMap((prev) => ({ ...prev, [id]: false }));
+      setDeletingPasskey(false);
     }
   }
 
@@ -404,47 +430,82 @@ export function Account() {
             <Loading label={t("loading_passkeys")} />
           ) : passkeys.error ? (
             <ErrorState error={passkeys.error} onRetry={passkeys.reload} />
-          ) : !passkeys.data?.credentials || passkeys.data.credentials.length === 0 ? (
+          ) : credentials.length === 0 ? (
             <p className="text-xs text-muted-foreground py-2 italic">{t("no_passkeys")}</p>
           ) : (
-            <div className="border rounded-md divide-y bg-background/50">
-              {passkeys.data.credentials.map((cred: any) => (
-                <div key={cred.id} className="flex items-center justify-between p-3">
-                  <div className="space-y-1">
-                    <p className="font-medium text-foreground flex items-center gap-1.5">
-                      <KeyRound className="h-3.5 w-3.5 text-muted-foreground" />
-                      {cred.name}
-                    </p>
-                    <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
-                      <span>
-                        {t("created_at")}
-                        {new Date(cred.created_at).toLocaleString()}
-                      </span>
-                      <span>
-                        {t("last_used")}
-                        {cred.last_used_at ? new Date(cred.last_used_at).toLocaleString() : t("never")}
-                      </span>
+            <>
+              <ul className="border rounded-md divide-y bg-background/50">
+                {credentials.map((cred) => (
+                  <li key={cred.id} className="flex items-center justify-between gap-3 p-3">
+                    <div className="min-w-0 space-y-1">
+                      <p className="font-medium text-foreground flex items-center gap-1.5">
+                        <KeyRound className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                        <span className="truncate">{cred.name}</span>
+                      </p>
+                      <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
+                        <span>
+                          {t("created_at")}
+                          {formatAbsolute(cred.created_at, i18n.language)}
+                        </span>
+                        <span>
+                          {t("last_used")}
+                          {cred.last_used_at ? formatAbsolute(cred.last_used_at, i18n.language) : t("never")}
+                        </span>
+                      </div>
                     </div>
-                  </div>
-                  <Button
-                    size="icon"
-                    variant="ghost"
-                    onClick={() => handleDeletePasskey(cred.id)}
-                    disabled={deletingMap[cred.id]}
-                    className="text-muted-foreground hover:text-destructive"
-                  >
-                    <Trash2 className="h-4 w-4" />
-                  </Button>
-                </div>
-              ))}
-            </div>
+                    <Button
+                      size="icon"
+                      variant="ghost"
+                      onClick={() => askDeletePasskey(cred)}
+                      disabled={keepLastPasskey}
+                      aria-label={t("passkey_delete_aria", { name: cred.name })}
+                      title={keepLastPasskey ? t("passkey_last_hint") : t("passkey_delete_aria", { name: cred.name })}
+                      className="shrink-0 text-muted-foreground hover:text-destructive"
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </Button>
+                  </li>
+                ))}
+              </ul>
+              {keepLastPasskey && (
+                <p className="text-xs text-muted-foreground">{t("passkey_last_hint")}</p>
+              )}
+            </>
           )}
+          <Dialog
+            open={pendingDelete !== null}
+            onOpenChange={(open) => {
+              if (!open && !deletingPasskey) setPendingDelete(null);
+            }}
+          >
+            <DialogContent hideClose={deletingPasskey}>
+              <DialogHeader>
+                <DialogTitle>{t("passkey_delete_title")}</DialogTitle>
+                <DialogDescription>
+                  {pendingDelete &&
+                    t("passkey_delete_desc", {
+                      name: pendingDelete.name,
+                      created: formatAbsolute(pendingDelete.created_at, i18n.language),
+                    })}
+                </DialogDescription>
+              </DialogHeader>
+              {deleteError && <MessageLine kind="error" message={deleteError} />}
+              <ConfirmFooter
+                onCancel={() => setPendingDelete(null)}
+                onConfirm={() => void confirmDeletePasskey()}
+                loading={deletingPasskey}
+                disabled={deletingPasskey || keepLastPasskey}
+                cancelLabel={t("common:cancel")}
+                confirmLabel={t("passkey_delete_confirm")}
+              />
+            </DialogContent>
+          </Dialog>
         </CardContent>
       </Card>
 
       <MigrationCard
         userId={identity?.user_id}
-        hasPasskey={(passkeys.data?.credentials?.length ?? 0) > 0}
+        hasPasskey={credentials.length > 0}
       />
 
       <Card>