fix(panel): 删除镜像与取消构建改用面板确认对话框，失败原因显示在对话框内，镜像来源徽标跟随界面语言

panel/src/components/ConfirmDialog.test.tsx

@@ -0,0 +1,90 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi } from "vitest";
+import { useState } from "react";
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import i18next from "i18next";
+import { ConfirmDialog } from "./ConfirmDialog";
+
+function Harness({ onConfirm }: { onConfirm: () => Promise<void> }) {
+  const [open, setOpen] = useState(true);
+  return (
+    <>
+      <span>{open ? "open" : "closed"}</span>
+      <button onClick={() => setOpen(true)}>reopen</button>
+      <ConfirmDialog
+        open={open}
+        onOpenChange={setOpen}
+        title="Remove it?"
+        description="It cannot come back."
+        confirmLabel="Remove"
+        onConfirm={onConfirm}
+      />
+    </>
+  );
+}
+
+describe("ConfirmDialog", () => {
+  it("closes once the action succeeds", async () => {
+    const action = vi.fn().mockResolvedValue(undefined);
+    render(<Harness onConfirm={action} />);
+
+    await userEvent.click(within(screen.getByRole("dialog")).getByRole("button", { name: "Remove" }));
+    expect(action).toHaveBeenCalledTimes(1);
+    expect(await screen.findByText("closed")).toBeTruthy();
+    expect(screen.queryByRole("dialog")).toBeNull();
+  });
+
+  it("keeps the dialog open with the reason when the action fails, and lets it be retried", async () => {
+    const action = vi
+      .fn()
+      .mockRejectedValueOnce({ status: 409, code: "test", message: "still in use" })
+      .mockResolvedValueOnce(undefined);
+    render(<Harness onConfirm={action} />);
+
+    const dialog = screen.getByRole("dialog");
+    await userEvent.click(within(dialog).getByRole("button", { name: "Remove" }));
+    expect((await within(dialog).findByRole("alert")).textContent).toBe("still in use");
+    expect(screen.getByText("open")).toBeTruthy();
+
+    await userEvent.click(within(dialog).getByRole("button", { name: "Remove" }));
+    expect(await screen.findByText("closed")).toBeTruthy();
+    expect(action).toHaveBeenCalledTimes(2);
+  });
+
+  it("cannot be dismissed while the action runs, and clears the old failure on retry", async () => {
+    let finish!: (v?: unknown) => void;
+    const action = vi
+      .fn()
+      .mockRejectedValueOnce({ status: 409, code: "test", message: "still in use" })
+      .mockImplementationOnce(() => new Promise((r) => (finish = r)));
+    render(<Harness onConfirm={action} />);
+    const dialog = screen.getByRole("dialog");
+    const cancel = within(dialog).getByRole("button", { name: i18next.t("common:cancel") });
+
+    await userEvent.click(within(dialog).getByRole("button", { name: "Remove" }));
+    await within(dialog).findByRole("alert");
+    await userEvent.click(within(dialog).getByRole("button", { name: "Remove" }));
+    expect(within(dialog).queryByRole("alert")).toBeNull();
+    await userEvent.keyboard("{Escape}");
+    await userEvent.click(cancel, { pointerEventsCheck: 0 });
+    expect(screen.getByText("open")).toBeTruthy();
+
+    finish();
+    expect(await screen.findByText("closed")).toBeTruthy();
+  });
+
+  it("forgets an old failure when reopened", async () => {
+    const action = vi.fn().mockRejectedValue({ status: 409, code: "test", message: "still in use" });
+    render(<Harness onConfirm={action} />);
+    const dialog = screen.getByRole("dialog");
+
+    await userEvent.click(within(dialog).getByRole("button", { name: "Remove" }));
+    await within(dialog).findByRole("alert");
+    await userEvent.click(within(dialog).getByRole("button", { name: i18next.t("common:cancel") }));
+    expect(await screen.findByText("closed")).toBeTruthy();
+
+    await userEvent.click(screen.getByRole("button", { name: "reopen" }));
+    expect(within(await screen.findByRole("dialog")).queryByRole("alert")).toBeNull();
+  });
+});

panel/src/components/ConfirmDialog.tsx

@@ -0,0 +1,84 @@
+import { useState, type ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { ConfirmFooter } from "@/components/ConfirmFooter";
+import { MessageLine } from "@/components/MessageLine";
+import { humanizeError } from "@/lib/api";
+
+interface Props {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description?: ReactNode;
+  confirmLabel: string;
+  /** Defaults to "Cancel"; name what dismissing keeps when the action is itself a cancel. */
+  cancelLabel?: string;
+  confirmVariant?: "destructive" | "default";
+  /** Runs the action. The dialog closes when it resolves; a rejection is shown in
+   *  the dialog, which stays open so the action can be retried or dismissed. */
+  onConfirm: () => Promise<void>;
+}
+
+// ConfirmDialog asks before an action that cannot be taken back, in the panel's
+// own dialog rather than window.confirm (which some embedded browsers block, so
+// the action could never be confirmed there). The failure stays next to the
+// buttons that caused it.
+export function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel,
+  cancelLabel,
+  confirmVariant = "destructive",
+  onConfirm,
+}: Props) {
+  const { t } = useTranslation("common");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  function setOpen(next: boolean) {
+    if (busy) return;
+    if (!next) setError(null);
+    onOpenChange(next);
+  }
+
+  async function confirm() {
+    setBusy(true);
+    setError(null);
+    try {
+      await onConfirm();
+      setBusy(false);
+      onOpenChange(false);
+    } catch (err) {
+      setError(humanizeError(err));
+      setBusy(false);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          {description && <DialogDescription>{description}</DialogDescription>}
+        </DialogHeader>
+        {error && <MessageLine kind="error" message={error} compact />}
+        <ConfirmFooter
+          onCancel={() => setOpen(false)}
+          onConfirm={() => void confirm()}
+          loading={busy}
+          cancelLabel={cancelLabel ?? t("cancel")}
+          confirmLabel={confirmLabel}
+          confirmVariant={confirmVariant}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}