From de91d7a8821f93adba232f074e95ee9f8b7f7792 Mon Sep 17 00:00:00 2001
From: Rogee <rogee@ipao.vip>
Date: Thu, 3 Sep 2026 17:16:08 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E5=89=8D=E7=AB=AF=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E9=A3=8E=E6=A0=BC=E7=BB=9F=E4=B8=80=E5=B9=B6=E6=B8=85=E7=90=86?=
 =?UTF-8?q?=E6=9C=AA=E4=BD=BF=E7=94=A8=E5=AF=BC=E5=85=A5=EF=BC=9B=E7=A7=BB?=
 =?UTF-8?q?=E9=99=A4=E8=BF=87=E6=97=B6=E7=9A=84=20PR=20=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E8=A7=84=E5=88=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 AGENTS.md                          |   2 -
 web/src/BrowserImagesPage.jsx      | 446 +++++++++++++++++------
 web/src/BrowserImagesPage.test.jsx | 216 +++++++----
 web/src/GatewaysPage.jsx           |  16 +-
 web/src/GatewaysPage.test.jsx      |  43 ++-
 web/src/NetworkExitsPage.jsx       | 551 ++++++++++++++++++++++-------
 web/src/NetworkExitsPage.test.jsx  | 243 +++++++++----
 7 files changed, 1120 insertions(+), 397 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index 620d565..e8d6c2b 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -90,5 +90,3 @@
 - 后端变更必须通过 `go test ./...`、`go vet ./...`，并完成 `./cmd/control-plane` 和 `./cmd/docker-gateway` 双端构建；涉及并发、生命周期或共享状态的变更须运行 `go test -race ./...`。Docker 或 Compose 变更还须通过 `docker compose config --quiet`。
 - 前端变更必须从 lockfile 安装、通过仓库的非交互式测试命令，并通过 `npm --prefix web run build`。主题、Layout、导航、资源动作或 data provider 的变更需要聚焦的交互覆盖，包括适用的错误与禁用状态。
 - 除非 issue 明确批准契约变更，保持既有 API 与 Docker 生命周期行为不变。在 PR 中文档化任何状态码、载荷、配置、迁移、安全或重试方面的影响。
-- 每个 PR 限定于单个 issue，标题、正文或分支名中包含 issue 编号，并报告确切的验证命令与结果。除非 issue 明确要求，不使用 close intent。
-- 每个代码 PR 均需独立评审。P0/P1 问题必须修复并复审；P2 问题记录为后续工作。实现 agent 不得合并、部署、发布或修改生产配置；将已批准的 PR 移交指定交付角色。
diff --git a/web/src/BrowserImagesPage.jsx b/web/src/BrowserImagesPage.jsx
index 79637fb..04e81f5 100644
--- a/web/src/BrowserImagesPage.jsx
+++ b/web/src/BrowserImagesPage.jsx
@@ -1,187 +1,419 @@
-import { useState } from 'react'
-import { Link, useNavigate } from 'react-router'
-import { useDataProvider, useList } from '@refinedev/core'
+import { useState } from "react";
+import { useDataProvider, useList } from "@refinedev/core";
 import {
-  Alert, Button, Card, CardContent, ConfirmDialog, Field, Input, Modal, PageHeader, PageState,
-  Select, StatusPill, Switch, Table, Textarea, conflictMessage,
-} from './lib/ui.jsx'
-import { useTitle } from './lib/hooks.js'
+  Alert,
+  Button,
+  ConfirmDialog,
+  Field,
+  Input,
+  Modal,
+  PageHeader,
+  PageState,
+  Switch,
+  Table,
+} from "./lib/ui.jsx";
+import { useTitle } from "./lib/hooks.js";
 
-const versionPattern = /^\d[A-Za-z0-9._-]{0,63}$/
-const refPattern = /^[A-Za-z0-9][A-Za-z0-9._:/@-]{0,300}$/
+const versionPattern = /^\d[A-Za-z0-9._-]{0,63}$/;
+const refPattern = /^[A-Za-z0-9][A-Za-z0-9._:/@-]{0,300}$/;
 
 function ImageCreateModal({ open, onClose, onSubmit, busy, error }) {
-  const [form, setForm] = useState({ version: '', image_ref: '', note: '' })
-  const update = (key, value) => setForm(current => ({ ...current, [key]: value }))
-  const valid = versionPattern.test(form.version) && refPattern.test(form.image_ref)
-  const versionInvalid = form.version !== '' && !versionPattern.test(form.version)
-  const refInvalid = form.image_ref !== '' && !refPattern.test(form.image_ref)
+  const [form, setForm] = useState({ version: "", image_ref: "", note: "" });
+  const update = (key, value) =>
+    setForm((current) => ({ ...current, [key]: value }));
+  const valid =
+    versionPattern.test(form.version) && refPattern.test(form.image_ref);
+  const versionInvalid =
+    form.version !== "" && !versionPattern.test(form.version);
+  const refInvalid = form.image_ref !== "" && !refPattern.test(form.image_ref);
 
   async function submit(event) {
-    event.preventDefault()
-    if (!valid) return
-    const created = await onSubmit({ version: form.version, image_ref: form.image_ref, note: form.note, enabled: true })
+    event.preventDefault();
+    if (!valid) return;
+    const created = await onSubmit({
+      version: form.version,
+      image_ref: form.image_ref,
+      note: form.note,
+      enabled: true,
+    });
     if (created) {
-      setForm({ version: '', image_ref: '', note: '' })
-      onClose()
+      setForm({ version: "", image_ref: "", note: "" });
+      onClose();
     }
   }
 
   return (
-    <Modal open={open} onClose={onClose} title="添加镜像版本" labelledBy="image-create-title"
-      footer={<>
-        <Button onClick={onClose} disabled={busy}>取消</Button>
-        <Button variant="primary" type="submit" form="image-create-form" busy={busy} busyText="保存中…" disabled={!valid}>添加版本</Button>
-      </>}>
+    <Modal
+      open={open}
+      onClose={onClose}
+      title="添加镜像版本"
+      labelledBy="image-create-title"
+      footer={
+        <>
+          <Button onClick={onClose} disabled={busy}>
+            取消
+          </Button>
+          <Button
+            variant="primary"
+            type="submit"
+            form="image-create-form"
+            busy={busy}
+            busyText="保存中…"
+            disabled={!valid}
+          >
+            添加版本
+          </Button>
+        </>
+      }
+    >
       <form id="image-create-form" onSubmit={submit} noValidate>
-        {error ? <Alert variant="destructive" className="mb-4">{error.message}</Alert> : null}
+        {error ? (
+          <Alert variant="destructive" className="mb-4">
+            {error.message}
+          </Alert>
+        ) : null}
         <div className="space-y-4">
-          <Field id="image-version" label="版本" required error={versionInvalid ? '数字开头，最长 64 字符' : undefined} helper="镜像版本号，如 148.0.7778.215">
-            <Input id="image-version" required maxLength={64} value={form.version} onChange={event => update('version', event.target.value)} invalid={versionInvalid} />
+          <Field
+            id="image-version"
+            label="版本"
+            required
+            error={versionInvalid ? "数字开头，最长 64 字符" : undefined}
+            helper="镜像版本号，如 148.0.7778.215"
+          >
+            <Input
+              id="image-version"
+              required
+              maxLength={64}
+              value={form.version}
+              onChange={(event) => update("version", event.target.value)}
+              invalid={versionInvalid}
+            />
           </Field>
-          <Field id="image-ref" label="镜像引用" required error={refInvalid ? '格式不正确' : undefined} helper="registry/repo:tag 或 @sha256 摘要">
-            <Input id="image-ref" required maxLength={301} value={form.image_ref} onChange={event => update('image_ref', event.target.value)} placeholder="registry/repo:tag 或 @sha256 摘要" invalid={refInvalid} />
+          <Field
+            id="image-ref"
+            label="镜像引用"
+            required
+            error={refInvalid ? "格式不正确" : undefined}
+            helper="registry/repo:tag 或 @sha256 摘要"
+          >
+            <Input
+              id="image-ref"
+              required
+              maxLength={301}
+              value={form.image_ref}
+              onChange={(event) => update("image_ref", event.target.value)}
+              placeholder="registry/repo:tag 或 @sha256 摘要"
+              invalid={refInvalid}
+            />
           </Field>
           <Field id="image-note" label="备注" helper="可选，最长 200 字符">
-            <Input id="image-note" maxLength={200} value={form.note} onChange={event => update('note', event.target.value)} />
+            <Input
+              id="image-note"
+              maxLength={200}
+              value={form.note}
+              onChange={(event) => update("note", event.target.value)}
+            />
           </Field>
         </div>
       </form>
     </Modal>
-  )
+  );
 }
 
 function ImageEditForm({ editing, onChange, onSave, busy }) {
-  const refInvalid = editing.image_ref !== '' && !refPattern.test(editing.image_ref)
+  const refInvalid =
+    editing.image_ref !== "" && !refPattern.test(editing.image_ref);
   return (
     <div className="space-y-4">
-      <Field id="edit-image-ref" label="镜像引用" required error={refInvalid ? '格式不正确' : undefined} helper="registry/repo:tag 或 @sha256 摘要">
-        <Input id="edit-image-ref" value={editing.image_ref} invalid={refInvalid} onChange={event => onChange({ ...editing, image_ref: event.target.value })} />
+      <Field
+        id="edit-image-ref"
+        label="镜像引用"
+        required
+        error={refInvalid ? "格式不正确" : undefined}
+        helper="registry/repo:tag 或 @sha256 摘要"
+      >
+        <Input
+          id="edit-image-ref"
+          value={editing.image_ref}
+          invalid={refInvalid}
+          onChange={(event) =>
+            onChange({ ...editing, image_ref: event.target.value })
+          }
+        />
       </Field>
       <Field id="edit-image-note" label="备注" helper="可选，最长 200 字符">
-        <Input id="edit-image-note" maxLength={200} value={editing.note} onChange={event => onChange({ ...editing, note: event.target.value })} />
+        <Input
+          id="edit-image-note"
+          maxLength={200}
+          value={editing.note}
+          onChange={(event) =>
+            onChange({ ...editing, note: event.target.value })
+          }
+        />
       </Field>
       <div className="space-y-1.5">
         <p className="text-sm font-medium">启用（可用于创建与升级）</p>
-        <Switch id="edit-image-enabled" checked={editing.enabled} onCheckedChange={checked => onChange({ ...editing, enabled: checked })} />
+        <Switch
+          id="edit-image-enabled"
+          checked={editing.enabled}
+          onCheckedChange={(checked) =>
+            onChange({ ...editing, enabled: checked })
+          }
+        />
       </div>
-      <Button variant="primary" busy={busy} busyText="保存中…" disabled={refInvalid} onClick={onSave}>保存</Button>
+      <Button
+        variant="primary"
+        busy={busy}
+        busyText="保存中…"
+        disabled={refInvalid}
+        onClick={onSave}
+      >
+        保存
+      </Button>
     </div>
-  )
+  );
 }
 
 export function BrowserImageList() {
-  const dataProvider = useDataProvider()('default')
-  const { result, query } = useList({ resource: 'browser-images' })
-  const error = query.error
-  const isPending = query.isPending
-  const images = result.data ?? []
-  const [createOpen, setCreateOpen] = useState(false)
-  const [createError, setCreateError] = useState(null)
-  const [editing, setEditing] = useState(null)
-  const [busyAlias, setBusyAlias] = useState('')
-  const [notice, setNotice] = useState(null)
-  const [deleting, setDeleting] = useState(null)
-  useTitle('CreatorHub · 镜像版本')
+  const dataProvider = useDataProvider()("default");
+  const { result, query } = useList({ resource: "browser-images" });
+  const error = query.error;
+  const isPending = query.isPending;
+  const images = result.data ?? [];
+  const [createOpen, setCreateOpen] = useState(false);
+  const [createError, setCreateError] = useState(null);
+  const [editing, setEditing] = useState(null);
+  const [busyAlias, setBusyAlias] = useState("");
+  const [notice, setNotice] = useState(null);
+  const [deleting, setDeleting] = useState(null);
+  useTitle("CreatorHub · 镜像版本");
 
   async function createImage(data) {
-    setBusyAlias('create')
-    setCreateError(null)
+    setBusyAlias("create");
+    setCreateError(null);
     try {
-      await dataProvider.create({ resource: 'browser-images', variables: data })
-      await query.refetch()
-      return true
+      await dataProvider.create({
+        resource: "browser-images",
+        variables: data,
+      });
+      await query.refetch();
+      return true;
     } catch (reason) {
-      setCreateError(reason)
-      return false
+      setCreateError(reason);
+      return false;
     } finally {
-      setBusyAlias('')
+      setBusyAlias("");
     }
   }
 
   async function toggleEnabled(image) {
-    setBusyAlias(image.version)
-    setNotice(null)
+    setBusyAlias(image.version);
+    setNotice(null);
     try {
-      await dataProvider.update({ resource: 'browser-images', id: image.version, variables: { image_ref: image.image_ref, note: image.note, enabled: !image.enabled } })
-      await query.refetch()
+      await dataProvider.update({
+        resource: "browser-images",
+        id: image.version,
+        variables: {
+          image_ref: image.image_ref,
+          note: image.note,
+          enabled: !image.enabled,
+        },
+      });
+      await query.refetch();
     } catch (reason) {
-      setNotice({ variant: 'destructive', text: reason.message })
+      setNotice({ variant: "destructive", text: reason.message });
     } finally {
-      setBusyAlias('')
+      setBusyAlias("");
     }
   }
 
   async function removeImage(image) {
-    setBusyAlias(image.version)
-    setNotice(null)
+    setBusyAlias(image.version);
+    setNotice(null);
     try {
-      await dataProvider.deleteOne({ resource: 'browser-images', id: image.version })
-      await query.refetch()
-      setDeleting(null)
+      await dataProvider.deleteOne({
+        resource: "browser-images",
+        id: image.version,
+      });
+      await query.refetch();
+      setDeleting(null);
     } catch (reason) {
-      setNotice({ variant: 'destructive', text: reason.message })
+      setNotice({ variant: "destructive", text: reason.message });
     } finally {
-      setBusyAlias('')
+      setBusyAlias("");
     }
   }
 
   async function saveEdit() {
     if (!refPattern.test(editing.image_ref)) {
-      setEditing({ ...editing, error: '镜像引用格式不正确' })
-      return
+      setEditing({ ...editing, error: "镜像引用格式不正确" });
+      return;
     }
-    setBusyAlias(editing.version)
-    setNotice(null)
+    setBusyAlias(editing.version);
+    setNotice(null);
     try {
-      await dataProvider.update({ resource: 'browser-images', id: editing.version, variables: { image_ref: editing.image_ref, note: editing.note, enabled: editing.enabled } })
-      setEditing(null)
-      await query.refetch()
+      await dataProvider.update({
+        resource: "browser-images",
+        id: editing.version,
+        variables: {
+          image_ref: editing.image_ref,
+          note: editing.note,
+          enabled: editing.enabled,
+        },
+      });
+      setEditing(null);
+      await query.refetch();
     } catch (reason) {
-      setEditing({ ...editing, error: reason.message })
+      setEditing({ ...editing, error: reason.message });
     } finally {
-      setBusyAlias('')
+      setBusyAlias("");
     }
   }
 
-  const message = notice?.text || (error ? null : notice?.message) || (notice ? notice.message : null)
+  const message =
+    notice?.text ||
+    (error ? null : notice?.message) ||
+    (notice ? notice.message : null);
 
   return (
     <div>
-      <PageHeader icon="ri-inbox-line" title="镜像版本" description="维护可用浏览器镜像版本；创建与升级环境时从中选择">
-        <Button variant="primary" icon="ri-add-line" onClick={() => setCreateOpen(true)}>添加版本</Button>
+      <PageHeader
+        icon="ri-inbox-line"
+        title="镜像版本"
+        description="维护可用浏览器镜像版本；创建与升级环境时从中选择"
+      >
+        <Button
+          variant="primary"
+          icon="ri-add-line"
+          onClick={() => setCreateOpen(true)}
+        >
+          添加版本
+        </Button>
       </PageHeader>
-      {message ? <Alert variant="destructive" className="mb-4">{message}</Alert> : null}
-      <PageState pending={isPending} error={error} empty={images.length === 0} emptyText="暂无镜像版本；网关会在镜像缺失时按引用自动拉取。">
+      {message ? (
+        <Alert variant="destructive" className="mb-4">
+          {message}
+        </Alert>
+      ) : null}
+      <PageState
+        pending={isPending}
+        error={error}
+        empty={images.length === 0}
+        emptyText="暂无镜像版本；网关会在镜像缺失时按引用自动拉取。"
+      >
         <Table
           columns={[
-            { header: '版本', width: '22%', render: image => <span className="font-semibold">{image.version}</span> },
-            { header: '镜像引用', width: '38%', render: image => <code className="anywhere font-mono text-[13px]">{image.image_ref}</code> },
-            { header: '备注', width: '20%', render: image => <span className={image.note ? '' : 'text-muted'}>{image.note || '—'}</span> },
-            { header: '启用', width: '8%', render: image => <Switch id={`image-enabled-${image.version}`} aria-label={`启用 ${image.version}`} checked={image.enabled} disabled={busyAlias === image.version} onCheckedChange={() => toggleEnabled(image)} /> },
-            { header: '操作', width: '12%', align: 'right', render: image => (
-              <span className="inline-flex gap-1">
-                <button type="button" aria-label={`编辑 ${image.version}`} disabled={busyAlias === image.version} onClick={() => setEditing({ ...image, error: '' })}
-                  className="rounded p-1.5 text-muted hover:bg-[#f5f7fa] hover:text-primary disabled:opacity-50"><i className="ri-edit-line" aria-hidden="true" /></button>
-                <button type="button" aria-label={`删除 ${image.version}`} disabled={busyAlias === image.version} onClick={() => setDeleting(image)}
-                  className="rounded p-1.5 text-danger hover:bg-[#fdf1f0] disabled:opacity-50"><i className="ri-delete-bin-line" aria-hidden="true" /></button>
-              </span>
-            ) },
+            {
+              header: "版本",
+              width: "22%",
+              render: (image) => (
+                <span className="font-semibold">{image.version}</span>
+              ),
+            },
+            {
+              header: "镜像引用",
+              width: "38%",
+              render: (image) => (
+                <code className="anywhere font-mono text-[13px]">
+                  {image.image_ref}
+                </code>
+              ),
+            },
+            {
+              header: "备注",
+              width: "20%",
+              render: (image) => (
+                <span className={image.note ? "" : "text-muted"}>
+                  {image.note || "—"}
+                </span>
+              ),
+            },
+            {
+              header: "启用",
+              width: "8%",
+              render: (image) => (
+                <Switch
+                  id={`image-enabled-${image.version}`}
+                  aria-label={`启用 ${image.version}`}
+                  checked={image.enabled}
+                  disabled={busyAlias === image.version}
+                  onCheckedChange={() => toggleEnabled(image)}
+                />
+              ),
+            },
+            {
+              header: "操作",
+              width: "12%",
+              align: "right",
+              render: (image) => (
+                <span className="inline-flex gap-1">
+                  <button
+                    type="button"
+                    aria-label={`编辑 ${image.version}`}
+                    disabled={busyAlias === image.version}
+                    onClick={() => setEditing({ ...image, error: "" })}
+                    className="rounded p-1.5 text-muted hover:bg-[#f5f7fa] hover:text-primary disabled:opacity-50"
+                  >
+                    <i className="ri-edit-line" aria-hidden="true" />
+                  </button>
+                  <button
+                    type="button"
+                    aria-label={`删除 ${image.version}`}
+                    disabled={busyAlias === image.version}
+                    onClick={() => setDeleting(image)}
+                    className="rounded p-1.5 text-danger hover:bg-[#fdf1f0] disabled:opacity-50"
+                  >
+                    <i className="ri-delete-bin-line" aria-hidden="true" />
+                  </button>
+                </span>
+              ),
+            },
           ]}
-          rows={images} rowKey={image => image.version} minWidth="900px"
+          rows={images}
+          rowKey={(image) => image.version}
+          minWidth="900px"
         />
       </PageState>
-      <ImageCreateModal open={createOpen} onClose={() => { setCreateOpen(false); setCreateError(null) }} onSubmit={createImage} busy={busyAlias === 'create'} error={createError} />
+      <ImageCreateModal
+        open={createOpen}
+        onClose={() => {
+          setCreateOpen(false);
+          setCreateError(null);
+        }}
+        onSubmit={createImage}
+        busy={busyAlias === "create"}
+        error={createError}
+      />
       {editing === null ? null : (
-        <Modal open onClose={() => setEditing(null)} title={`编辑 ${editing.version}`} labelledBy="image-edit-title"
-          footer={<Button onClick={() => setEditing(null)}>关闭</Button>}>
-          {editing.error ? <Alert variant="destructive" className="mb-4">{editing.error}</Alert> : null}
-          <ImageEditForm editing={editing} onChange={next => setEditing({ ...next, error: editing.error })} onSave={saveEdit} busy={busyAlias === editing.version} />
+        <Modal
+          open
+          onClose={() => setEditing(null)}
+          title={`编辑 ${editing.version}`}
+          labelledBy="image-edit-title"
+          footer={<Button onClick={() => setEditing(null)}>关闭</Button>}
+        >
+          {editing.error ? (
+            <Alert variant="destructive" className="mb-4">
+              {editing.error}
+            </Alert>
+          ) : null}
+          <ImageEditForm
+            editing={editing}
+            onChange={(next) => setEditing({ ...next, error: editing.error })}
+            onSave={saveEdit}
+            busy={busyAlias === editing.version}
+          />
         </Modal>
       )}
-      <ConfirmDialog open={deleting !== null} onClose={() => setDeleting(null)} onConfirm={() => removeImage(deleting)}
-        title="删除镜像版本" confirmLabel="确认删除" busy={busyAlias === deleting?.version}
-        body={`删除镜像版本 ${deleting?.version}？仍被环境引用时删除会被拒绝。`} />
+      <ConfirmDialog
+        open={deleting !== null}
+        onClose={() => setDeleting(null)}
+        onConfirm={() => removeImage(deleting)}
+        title="删除镜像版本"
+        confirmLabel="确认删除"
+        busy={busyAlias === deleting?.version}
+        body={`删除镜像版本 ${deleting?.version}？仍被环境引用时删除会被拒绝。`}
+      />
     </div>
-  )
+  );
 }
diff --git a/web/src/BrowserImagesPage.test.jsx b/web/src/BrowserImagesPage.test.jsx
index 4ed4bf0..d846ff3 100644
--- a/web/src/BrowserImagesPage.test.jsx
+++ b/web/src/BrowserImagesPage.test.jsx
@@ -1,95 +1,171 @@
-import { afterEach, describe, expect, it, vi } from 'vitest'
-import { cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { Refine } from '@refinedev/core'
-import { MemoryRouter } from 'react-router'
-import { BrowserImageList } from './BrowserImagesPage'
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Refine } from "@refinedev/core";
+import { MemoryRouter } from "react-router";
+import { BrowserImageList } from "./BrowserImagesPage";
 
-afterEach(() => { cleanup(); vi.restoreAllMocks() })
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
 
 const images = [
-  { id: '148.0.0.1', version: '148.0.0.1', image_ref: 'reg/img:148', note: '', enabled: true },
-  { id: '144.0.0.1', version: '144.0.0.1', image_ref: 'reg/img:144', note: '旧版', enabled: false },
-]
+  {
+    id: "148.0.0.1",
+    version: "148.0.0.1",
+    image_ref: "reg/img:148",
+    note: "",
+    enabled: true,
+  },
+  {
+    id: "144.0.0.1",
+    version: "144.0.0.1",
+    image_ref: "reg/img:144",
+    note: "旧版",
+    enabled: false,
+  },
+];
 
 function provider(overrides = {}) {
   return {
-    getList: vi.fn(() => Promise.resolve({ data: images, total: images.length })),
+    getList: vi.fn(() =>
+      Promise.resolve({ data: images, total: images.length }),
+    ),
     create: vi.fn().mockResolvedValue({ data: images[0] }),
     update: vi.fn().mockResolvedValue({ data: images[0] }),
-    deleteOne: vi.fn().mockResolvedValue({ data: { id: '144.0.0.1' } }),
-    getOne: vi.fn(), getMany: vi.fn(), getManyReference: vi.fn(), updateMany: vi.fn(), deleteMany: vi.fn(), browserAction: vi.fn(),
+    deleteOne: vi.fn().mockResolvedValue({ data: { id: "144.0.0.1" } }),
+    getOne: vi.fn(),
+    getMany: vi.fn(),
+    getManyReference: vi.fn(),
+    updateMany: vi.fn(),
+    deleteMany: vi.fn(),
+    browserAction: vi.fn(),
     ...overrides,
-  }
+  };
 }
 
-const renderImages = dataProvider => render(
-  <QueryClientProvider client={new QueryClient({ defaultOptions: { queries: { retry: false } } })}>
-    <Refine dataProvider={dataProvider}>
-      <MemoryRouter><BrowserImageList /></MemoryRouter>
-    </Refine>
-  </QueryClientProvider>,
-)
+const renderImages = (dataProvider) =>
+  render(
+    <QueryClientProvider
+      client={
+        new QueryClient({ defaultOptions: { queries: { retry: false } } })
+      }
+    >
+      <Refine dataProvider={dataProvider}>
+        <MemoryRouter>
+          <BrowserImageList />
+        </MemoryRouter>
+      </Refine>
+    </QueryClientProvider>,
+  );
 
-describe('BrowserImageList', () => {
-  it('adds an image version', async () => {
-    const dataProvider = provider()
-    renderImages(dataProvider)
+describe("BrowserImageList", () => {
+  it("adds an image version", async () => {
+    const dataProvider = provider();
+    renderImages(dataProvider);
 
-    await screen.findAllByText('reg/img:148')
-    fireEvent.click(screen.getByRole('button', { name: '添加版本' }))
-    const dialog = screen.getByRole('dialog')
-    fireEvent.change(within(dialog).getByRole('textbox', { name: '版本' }), { target: { value: '150.0.0.1' } })
-    fireEvent.change(within(dialog).getByRole('textbox', { name: '镜像引用' }), { target: { value: 'reg/img:150' } })
-    fireEvent.click(within(dialog).getByRole('button', { name: '添加版本' }))
+    await screen.findAllByText("reg/img:148");
+    fireEvent.click(screen.getByRole("button", { name: "添加版本" }));
+    const dialog = screen.getByRole("dialog");
+    fireEvent.change(within(dialog).getByRole("textbox", { name: "版本" }), {
+      target: { value: "150.0.0.1" },
+    });
+    fireEvent.change(
+      within(dialog).getByRole("textbox", { name: "镜像引用" }),
+      { target: { value: "reg/img:150" } },
+    );
+    fireEvent.click(within(dialog).getByRole("button", { name: "添加版本" }));
 
-    await waitFor(() => expect(dataProvider.create).toHaveBeenCalledWith({ resource: 'browser-images', variables: { version: '150.0.0.1', image_ref: 'reg/img:150', note: '', enabled: true } }))
-    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull())
-  })
+    await waitFor(() =>
+      expect(dataProvider.create).toHaveBeenCalledWith({
+        resource: "browser-images",
+        variables: {
+          version: "150.0.0.1",
+          image_ref: "reg/img:150",
+          note: "",
+          enabled: true,
+        },
+      }),
+    );
+    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
+  });
 
-  it('keeps the create modal open after a failure', async () => {
-    const dataProvider = provider({ create: vi.fn().mockRejectedValue(new Error('镜像创建失败')) })
-    renderImages(dataProvider)
+  it("keeps the create modal open after a failure", async () => {
+    const dataProvider = provider({
+      create: vi.fn().mockRejectedValue(new Error("镜像创建失败")),
+    });
+    renderImages(dataProvider);
 
-    await screen.findAllByText('reg/img:148')
-    fireEvent.click(screen.getByRole('button', { name: '添加版本' }))
-    const dialog = screen.getByRole('dialog')
-    fireEvent.change(within(dialog).getByRole('textbox', { name: '版本' }), { target: { value: '150.0.0.1' } })
-    fireEvent.change(within(dialog).getByRole('textbox', { name: '镜像引用' }), { target: { value: 'reg/img:150' } })
-    fireEvent.click(within(dialog).getByRole('button', { name: '添加版本' }))
+    await screen.findAllByText("reg/img:148");
+    fireEvent.click(screen.getByRole("button", { name: "添加版本" }));
+    const dialog = screen.getByRole("dialog");
+    fireEvent.change(within(dialog).getByRole("textbox", { name: "版本" }), {
+      target: { value: "150.0.0.1" },
+    });
+    fireEvent.change(
+      within(dialog).getByRole("textbox", { name: "镜像引用" }),
+      { target: { value: "reg/img:150" } },
+    );
+    fireEvent.click(within(dialog).getByRole("button", { name: "添加版本" }));
 
-    expect((await within(dialog).findByRole('alert')).textContent).toContain('镜像创建失败')
-    expect(screen.getByRole('dialog')).toBeTruthy()
-  })
+    expect((await within(dialog).findByRole("alert")).textContent).toContain(
+      "镜像创建失败",
+    );
+    expect(screen.getByRole("dialog")).toBeTruthy();
+  });
 
-  it('toggles enabled through update', async () => {
-    const dataProvider = provider()
-    renderImages(dataProvider)
+  it("toggles enabled through update", async () => {
+    const dataProvider = provider();
+    renderImages(dataProvider);
 
-    fireEvent.click(await screen.findByRole('switch', { name: '启用 144.0.0.1' }))
+    fireEvent.click(
+      await screen.findByRole("switch", { name: "启用 144.0.0.1" }),
+    );
 
-    await waitFor(() => expect(dataProvider.update).toHaveBeenCalledWith({ resource: 'browser-images', id: '144.0.0.1', variables: { image_ref: 'reg/img:144', note: '旧版', enabled: true } }))
-  })
+    await waitFor(() =>
+      expect(dataProvider.update).toHaveBeenCalledWith({
+        resource: "browser-images",
+        id: "144.0.0.1",
+        variables: { image_ref: "reg/img:144", note: "旧版", enabled: true },
+      }),
+    );
+  });
 
-  it('blocks invalid input before submit', async () => {
-    const dataProvider = provider()
-    renderImages(dataProvider)
+  it("blocks invalid input before submit", async () => {
+    const dataProvider = provider();
+    renderImages(dataProvider);
 
-    await screen.findAllByText('reg/img:148')
-    fireEvent.click(screen.getByRole('button', { name: '添加版本' }))
-    const dialog = screen.getByRole('dialog')
-    fireEvent.change(within(dialog).getByRole('textbox', { name: '版本' }), { target: { value: 'v1!' } })
-    expect(within(dialog).getByRole('button', { name: '添加版本' }).disabled).toBe(true)
-    expect(dataProvider.create).not.toHaveBeenCalled()
-  })
+    await screen.findAllByText("reg/img:148");
+    fireEvent.click(screen.getByRole("button", { name: "添加版本" }));
+    const dialog = screen.getByRole("dialog");
+    fireEvent.change(within(dialog).getByRole("textbox", { name: "版本" }), {
+      target: { value: "v1!" },
+    });
+    expect(
+      within(dialog).getByRole("button", { name: "添加版本" }).disabled,
+    ).toBe(true);
+    expect(dataProvider.create).not.toHaveBeenCalled();
+  });
 
-  it('surfaces delete rejection (referenced by env)', async () => {
-    const dataProvider = provider({ deleteOne: vi.fn().mockRejectedValue(new Error('该版本正被环境引用')) })
-    renderImages(dataProvider)
+  it("surfaces delete rejection (referenced by env)", async () => {
+    const dataProvider = provider({
+      deleteOne: vi.fn().mockRejectedValue(new Error("该版本正被环境引用")),
+    });
+    renderImages(dataProvider);
 
-    fireEvent.click(await screen.findByLabelText('删除 148.0.0.1'))
-    fireEvent.click(await screen.findByRole('button', { name: '确认删除' }))
+    fireEvent.click(await screen.findByLabelText("删除 148.0.0.1"));
+    fireEvent.click(await screen.findByRole("button", { name: "确认删除" }));
 
-    expect((await screen.findByRole('alert')).textContent).toContain('该版本正被环境引用')
-  })
-})
+    expect((await screen.findByRole("alert")).textContent).toContain(
+      "该版本正被环境引用",
+    );
+  });
+});
diff --git a/web/src/GatewaysPage.jsx b/web/src/GatewaysPage.jsx
index ed16684..2f07751 100644
--- a/web/src/GatewaysPage.jsx
+++ b/web/src/GatewaysPage.jsx
@@ -146,7 +146,11 @@ function GatewayFormModal({ open, onClose, onSubmit, busy, error, initial }) {
             label="名称"
             required
             error={nameInvalid ? "字母、数字与 . _ -，最长 64 字符" : undefined}
-            helper={editing ? "改名会同步更新引用该网关的环境" : "网关唯一标识，如 gw-main"}
+            helper={
+              editing
+                ? "改名会同步更新引用该网关的环境"
+                : "网关唯一标识，如 gw-main"
+            }
           >
             <Input
               id={`gateway-${mode}-name`}
@@ -177,8 +181,14 @@ function GatewayFormModal({ open, onClose, onSubmit, busy, error, initial }) {
           <Field
             id={`gateway-${mode}-token`}
             label={editing ? "令牌（留空保持不变）" : "令牌（可选）"}
-            error={tokenInvalid ? "至少 16 个字符，字母、数字与 . _ -" : undefined}
-            helper={editing ? "填写时须与网关 GATEWAY_TOKEN 一致" : "填写则须与网关 GATEWAY_TOKEN 一致；留空由平台生成"}
+            error={
+              tokenInvalid ? "至少 16 个字符，字母、数字与 . _ -" : undefined
+            }
+            helper={
+              editing
+                ? "填写时须与网关 GATEWAY_TOKEN 一致"
+                : "填写则须与网关 GATEWAY_TOKEN 一致；留空由平台生成"
+            }
           >
             <Input
               id={`gateway-${mode}-token`}
diff --git a/web/src/GatewaysPage.test.jsx b/web/src/GatewaysPage.test.jsx
index 0e62bd6..266c847 100644
--- a/web/src/GatewaysPage.test.jsx
+++ b/web/src/GatewaysPage.test.jsx
@@ -43,15 +43,13 @@ function provider(overrides = {}) {
     getList: vi.fn(() =>
       Promise.resolve({ data: gateways, total: gateways.length }),
     ),
-    create: vi
-      .fn()
-      .mockResolvedValue({
-        data: {
-          name: "gw-2",
-          endpoint: "http://gw2:8081",
-          token: "generated-token-abcdef",
-        },
-      }),
+    create: vi.fn().mockResolvedValue({
+      data: {
+        name: "gw-2",
+        endpoint: "http://gw2:8081",
+        token: "generated-token-abcdef",
+      },
+    }),
     deleteOne: vi.fn().mockResolvedValue({ data: { id: "gw-1" } }),
     getOne: vi.fn(),
     getMany: vi.fn(),
@@ -109,8 +107,12 @@ describe("GatewayList", () => {
 
     fireEvent.click(screen.getByRole("button", { name: "注册网关" }));
     const reopened = screen.getByRole("dialog");
-    expect(within(reopened).getByRole("textbox", { name: "名称" }).value).toBe("");
-    expect(within(reopened).getByRole("textbox", { name: "Endpoint" }).value).toBe("");
+    expect(within(reopened).getByRole("textbox", { name: "名称" }).value).toBe(
+      "",
+    );
+    expect(
+      within(reopened).getByRole("textbox", { name: "Endpoint" }).value,
+    ).toBe("");
   });
 
   it("keeps the registration modal open after a failure", async () => {
@@ -170,16 +172,23 @@ describe("GatewayList", () => {
     expect(endpoint.value).toBe("http://docker-gateway:8081");
     fireEvent.change(name, { target: { value: "gw-main" } });
     fireEvent.change(endpoint, { target: { value: "http://gw-main:8081" } });
-    fireEvent.change(within(dialog).getByRole("textbox", { name: "令牌（留空保持不变）" }), {
-      target: { value: "rotated-gateway-token" },
-    });
+    fireEvent.change(
+      within(dialog).getByRole("textbox", { name: "令牌（留空保持不变）" }),
+      {
+        target: { value: "rotated-gateway-token" },
+      },
+    );
     fireEvent.click(within(dialog).getByRole("button", { name: "保存" }));
 
     await waitFor(() =>
       expect(update).toHaveBeenCalledWith({
         resource: "gateways",
         id: "gw-1",
-        variables: { name: "gw-main", endpoint: "http://gw-main:8081", token: "rotated-gateway-token" },
+        variables: {
+          name: "gw-main",
+          endpoint: "http://gw-main:8081",
+          token: "rotated-gateway-token",
+        },
       }),
     );
     expect(dataProvider.getList).toHaveBeenCalledTimes(2);
@@ -193,7 +202,9 @@ describe("GatewayList", () => {
     const dialog = screen.getByRole("dialog");
     fireEvent.click(within(dialog).getByRole("button", { name: "保存" }));
 
-    expect((await within(dialog).findByRole("alert")).textContent).toContain("网关名称已存在");
+    expect((await within(dialog).findByRole("alert")).textContent).toContain(
+      "网关名称已存在",
+    );
     expect(screen.getByRole("dialog")).toBeTruthy();
   });
 
diff --git a/web/src/NetworkExitsPage.jsx b/web/src/NetworkExitsPage.jsx
index b271c02..2de0925 100644
--- a/web/src/NetworkExitsPage.jsx
+++ b/web/src/NetworkExitsPage.jsx
@@ -1,87 +1,242 @@
-import { useMemo, useState } from 'react'
-import { Link, useParams } from 'react-router'
-import { useDataProvider, useList, useOne } from '@refinedev/core'
+import { useMemo, useState } from "react";
+import { Link, useParams } from "react-router";
+import { useDataProvider, useList, useOne } from "@refinedev/core";
 import {
-  Alert, Button, Card, CardContent, ConfirmDialog, DetailList, Field, Input, Modal, PageHeader,
-  PageState, Select, StatusPill, conflictMessage,
-} from './lib/ui.jsx'
-import { useTitle } from './lib/hooks.js'
+  Alert,
+  Button,
+  Card,
+  CardContent,
+  ConfirmDialog,
+  DetailList,
+  Field,
+  Input,
+  Modal,
+  PageHeader,
+  PageState,
+  Select,
+  StatusPill,
+  conflictMessage,
+} from "./lib/ui.jsx";
+import { useTitle } from "./lib/hooks.js";
 
-const createInitial = { protocol: 'socks5', host: '', port: '', username: '', password: '', expected_public_ip: '', expected_region: '' }
-const healthText = { unchecked: '未检测', healthy: '健康', unhealthy: '不健康', disabled: '已停用' }
-const protocolOptions = ['http', 'https', 'socks4', 'socks5'].map(value => ({ value, label: value }))
+const createInitial = {
+  protocol: "socks5",
+  host: "",
+  port: "",
+  username: "",
+  password: "",
+  expected_public_ip: "",
+  expected_region: "",
+};
+const healthText = {
+  unchecked: "未检测",
+  healthy: "健康",
+  unhealthy: "不健康",
+  disabled: "已停用",
+};
+const protocolOptions = ["http", "https", "socks4", "socks5"].map((value) => ({
+  value,
+  label: value,
+}));
 
 function ExitHealthPill({ exit }) {
-  const known = Object.hasOwn(healthText, exit.health_status)
-  const tone = exit.health_status === 'healthy' ? 'success' : exit.health_status === 'disabled' ? 'neutral' : exit.health_status === 'unchecked' ? 'warning' : 'danger'
-  return <StatusPill tone={tone} label={known ? healthText[exit.health_status] : '未知状态'} sub={known ? undefined : exit.health_status} />
+  const known = Object.hasOwn(healthText, exit.health_status);
+  const tone =
+    exit.health_status === "healthy"
+      ? "success"
+      : exit.health_status === "disabled"
+        ? "neutral"
+        : exit.health_status === "unchecked"
+          ? "warning"
+          : "danger";
+  return (
+    <StatusPill
+      tone={tone}
+      label={known ? healthText[exit.health_status] : "未知状态"}
+      sub={known ? undefined : exit.health_status}
+    />
+  );
 }
 
 function ExitActions({ exit, busy, onAction }) {
-  const disabled = busy || exit.health_status === 'disabled'
+  const disabled = busy || exit.health_status === "disabled";
   return (
     <div className="flex flex-wrap gap-2">
-      <Button size="sm" icon="ri-refresh-line" disabled={disabled} onClick={() => onAction(exit, 'check')}>检测</Button>
-      <Button size="sm" variant="danger" icon="ri-forbid-line" disabled={disabled} onClick={() => onAction(exit, 'disable')}>停用</Button>
+      <Button
+        size="sm"
+        icon="ri-refresh-line"
+        disabled={disabled}
+        onClick={() => onAction(exit, "check")}
+      >
+        检测
+      </Button>
+      <Button
+        size="sm"
+        variant="danger"
+        icon="ri-forbid-line"
+        disabled={disabled}
+        onClick={() => onAction(exit, "disable")}
+      >
+        停用
+      </Button>
     </div>
-  )
+  );
 }
 
 function ExitCreateModal({ open, onClose, onSubmit, busy, error }) {
-  const [form, setForm] = useState(createInitial)
-  const update = (key, value) => setForm(current => ({ ...current, [key]: value }))
-  const port = Number(form.port)
-  const credentialsValid = !form.password || !!form.username
-  const valid = form.host.trim() && Number.isInteger(port) && port > 0 && port <= 65535 && credentialsValid
+  const [form, setForm] = useState(createInitial);
+  const update = (key, value) =>
+    setForm((current) => ({ ...current, [key]: value }));
+  const port = Number(form.port);
+  const credentialsValid = !form.password || !!form.username;
+  const valid =
+    form.host.trim() &&
+    Number.isInteger(port) &&
+    port > 0 &&
+    port <= 65535 &&
+    credentialsValid;
 
   async function submit(event) {
-    event.preventDefault()
-    if (!valid) return
+    event.preventDefault();
+    if (!valid) return;
     const created = await onSubmit({
-      protocol: form.protocol, host: form.host.trim(), port,
-      username: form.username, password: form.password,
-      expected_public_ip: form.expected_public_ip.trim(), expected_region: form.expected_region.trim(),
-    })
+      protocol: form.protocol,
+      host: form.host.trim(),
+      port,
+      username: form.username,
+      password: form.password,
+      expected_public_ip: form.expected_public_ip.trim(),
+      expected_region: form.expected_region.trim(),
+    });
     if (created) {
-      setForm(createInitial)
-      onClose()
+      setForm(createInitial);
+      onClose();
     }
   }
 
   return (
-    <Modal open={open} onClose={onClose} title="创建网络出口" labelledBy="exit-create-title" size="lg"
-      footer={<>
-        <Button onClick={onClose} disabled={busy}>取消</Button>
-        <Button variant="primary" type="submit" form="exit-create-form" busy={busy} busyText="创建中…" disabled={!valid}>创建网络出口</Button>
-      </>}>
+    <Modal
+      open={open}
+      onClose={onClose}
+      title="创建网络出口"
+      labelledBy="exit-create-title"
+      size="lg"
+      footer={
+        <>
+          <Button onClick={onClose} disabled={busy}>
+            取消
+          </Button>
+          <Button
+            variant="primary"
+            type="submit"
+            form="exit-create-form"
+            busy={busy}
+            busyText="创建中…"
+            disabled={!valid}
+          >
+            创建网络出口
+          </Button>
+        </>
+      }
+    >
       <form id="exit-create-form" onSubmit={submit} noValidate>
-        {error ? <Alert variant="destructive" className="mb-4">{conflictMessage(error, '出口地址或认证信息与现有资源冲突；表单内容已保留。')}</Alert> : null}
+        {error ? (
+          <Alert variant="destructive" className="mb-4">
+            {conflictMessage(
+              error,
+              "出口地址或认证信息与现有资源冲突；表单内容已保留。",
+            )}
+          </Alert>
+        ) : null}
         <div className="grid gap-4 sm:grid-cols-3">
           <Field id="exit-protocol" label="协议" required helper="代理协议">
-            <Select id="exit-protocol" value={form.protocol} onChange={event => update('protocol', event.target.value)} options={protocolOptions} />
+            <Select
+              id="exit-protocol"
+              value={form.protocol}
+              onChange={(event) => update("protocol", event.target.value)}
+              options={protocolOptions}
+            />
           </Field>
           <Field id="exit-host" label="主机" required helper="代理服务器地址">
-            <Input id="exit-host" required maxLength={253} value={form.host} onChange={event => update('host', event.target.value)} placeholder="如 proxy.example" />
+            <Input
+              id="exit-host"
+              required
+              maxLength={253}
+              value={form.host}
+              onChange={(event) => update("host", event.target.value)}
+              placeholder="如 proxy.example"
+            />
           </Field>
           <Field id="exit-port" label="端口" required helper="1..65535">
-            <Input id="exit-port" type="number" min={1} max={65535} required value={form.port} onChange={event => update('port', event.target.value)} />
+            <Input
+              id="exit-port"
+              type="number"
+              min={1}
+              max={65535}
+              required
+              value={form.port}
+              onChange={(event) => update("port", event.target.value)}
+            />
           </Field>
-          <Field id="exit-username" label="用户名（可选）" helper="直接保存到系统并用于代理认证">
-            <Input id="exit-username" maxLength={255} value={form.username} onChange={event => update('username', event.target.value)} />
+          <Field
+            id="exit-username"
+            label="用户名（可选）"
+            helper="直接保存到系统并用于代理认证"
+          >
+            <Input
+              id="exit-username"
+              maxLength={255}
+              value={form.username}
+              onChange={(event) => update("username", event.target.value)}
+            />
           </Field>
-          <Field id="exit-password" label="密码（可选）" error={!credentialsValid ? '填写密码时必须同时填写用户名' : undefined} helper="明文保存并直接用于代理认证">
-            <Input id="exit-password" maxLength={255} value={form.password} onChange={event => update('password', event.target.value)} invalid={!credentialsValid} />
+          <Field
+            id="exit-password"
+            label="密码（可选）"
+            error={
+              credentialsValid ? undefined : "填写密码时必须同时填写用户名"
+            }
+            helper="明文保存并直接用于代理认证"
+          >
+            <Input
+              id="exit-password"
+              maxLength={255}
+              value={form.password}
+              onChange={(event) => update("password", event.target.value)}
+              invalid={!credentialsValid}
+            />
           </Field>
-          <Field id="exit-ip" label="出口IP（可选）" helper="健康检测时比对的预期公网 IP">
-            <Input id="exit-ip" value={form.expected_public_ip} onChange={event => update('expected_public_ip', event.target.value)} />
+          <Field
+            id="exit-ip"
+            label="出口IP（可选）"
+            helper="健康检测时比对的预期公网 IP"
+          >
+            <Input
+              id="exit-ip"
+              value={form.expected_public_ip}
+              onChange={(event) =>
+                update("expected_public_ip", event.target.value)
+              }
+            />
           </Field>
-          <Field id="exit-region" label="出口地区（可选）" helper="如 CN-Shanghai">
-            <Input id="exit-region" maxLength={64} value={form.expected_region} onChange={event => update('expected_region', event.target.value)} />
+          <Field
+            id="exit-region"
+            label="出口地区（可选）"
+            helper="如 CN-Shanghai"
+          >
+            <Input
+              id="exit-region"
+              maxLength={64}
+              value={form.expected_region}
+              onChange={(event) =>
+                update("expected_region", event.target.value)
+              }
+            />
           </Field>
         </div>
       </form>
     </Modal>
-  )
+  );
 }
 
 function ExitCard({ exit, boundAccounts, bindingsError, busy, onAction }) {
@@ -90,137 +245,281 @@ function ExitCard({ exit, boundAccounts, bindingsError, busy, onAction }) {
       <CardContent className="space-y-3">
         <div className="flex min-w-0 items-start justify-between gap-3">
           <div className="min-w-0">
-            <Link to={`/network-exits/${encodeURIComponent(exit.id)}`} className="anywhere font-semibold text-ink hover:text-primary">{exit.protocol}://{exit.host}:{exit.port}</Link>
-            <p className="anywhere text-xs text-muted">{exit.id} · 用户名 {exit.username || '无'} · 密码 {exit.password || '无'}</p>
+            <Link
+              to={`/network-exits/${encodeURIComponent(exit.id)}`}
+              className="anywhere font-semibold text-ink hover:text-primary"
+            >
+              {exit.protocol}://{exit.host}:{exit.port}
+            </Link>
+            <p className="anywhere text-xs text-muted">
+              {exit.id} · 用户名 {exit.username || "无"} · 密码{" "}
+              {exit.password || "无"}
+            </p>
           </div>
           <ExitHealthPill exit={exit} />
         </div>
-        <div className="text-sm"><span className="text-muted">出口IP：</span><span className="anywhere">{exit.observed_public_ip || '尚无观测'}</span></div>
-        <p className="text-xs text-muted">最近检测：{exit.last_checked_at ? new Date(exit.last_checked_at).toLocaleString('zh-CN') : '未检测'}</p>
+        <div className="text-sm">
+          <span className="text-muted">出口IP：</span>
+          <span className="anywhere">
+            {exit.observed_public_ip || "尚无观测"}
+          </span>
+        </div>
+        <p className="text-xs text-muted">
+          最近检测：
+          {exit.last_checked_at
+            ? new Date(exit.last_checked_at).toLocaleString("zh-CN")
+            : "未检测"}
+        </p>
         <div className="text-sm">
           <span className="text-muted">绑定账号：</span>
-          {bindingsError ? '状态未知' : (
-            <span className="anywhere">{boundAccounts?.length ? boundAccounts.join('、') : '未绑定'}</span>
+          {bindingsError ? (
+            "状态未知"
+          ) : (
+            <span className="anywhere">
+              {boundAccounts?.length ? boundAccounts.join("、") : "未绑定"}
+            </span>
           )}
         </div>
         <ExitActions exit={exit} busy={busy} onAction={onAction} />
       </CardContent>
     </Card>
-  )
+  );
 }
 
 export function NetworkExitList() {
-  const dataProvider = useDataProvider()('default')
-  const [createOpen, setCreateOpen] = useState(false)
-  const [busy, setBusy] = useState('')
-  const [createError, setCreateError] = useState(null)
-  const [notice, setNotice] = useState(null)
-  const [disabling, setDisabling] = useState(null)
-  const { result, query } = useList({ resource: 'network-exits' })
-  const error = query.error
-  const isPending = query.isPending
-  const exits = result.data ?? []
-  const { result: bindingResult, query: browsersQuery } = useList({ resource: 'browsers', queryOptions: { retry: false } })
-  const browsers = bindingResult.data ?? []
-  const bindingsError = browsersQuery.error
-  const refetchBrowsers = browsersQuery.refetch
+  const dataProvider = useDataProvider()("default");
+  const [createOpen, setCreateOpen] = useState(false);
+  const [busy, setBusy] = useState("");
+  const [createError, setCreateError] = useState(null);
+  const [notice, setNotice] = useState(null);
+  const [disabling, setDisabling] = useState(null);
+  const { result, query } = useList({ resource: "network-exits" });
+  const error = query.error;
+  const isPending = query.isPending;
+  const exits = result.data ?? [];
+  const { result: bindingResult, query: browsersQuery } = useList({
+    resource: "browsers",
+    queryOptions: { retry: false },
+  });
+  const browsers = bindingResult.data ?? [];
+  const bindingsError = browsersQuery.error;
+  const refetchBrowsers = browsersQuery.refetch;
   const accountsByExit = useMemo(() => {
-    const map = new Map
+    const map = new Map();
     for (const runtime of browsers) {
-      if (!runtime.network_exit_id || !runtime.account_id) continue
-      map.set(runtime.network_exit_id, [...(map.get(runtime.network_exit_id) || []), runtime.account_id])
+      if (!runtime.network_exit_id || !runtime.account_id) continue;
+      map.set(runtime.network_exit_id, [
+        ...(map.get(runtime.network_exit_id) || []),
+        runtime.account_id,
+      ]);
     }
-    return map
-  }, [browsers])
-  useTitle('CreatorHub · 网络出口')
+    return map;
+  }, [browsers]);
+  useTitle("CreatorHub · 网络出口");
 
   async function createExit(data) {
-    setBusy('create')
-    setCreateError(null)
+    setBusy("create");
+    setCreateError(null);
     try {
-      await dataProvider.create({ resource: 'network-exits', variables: data })
-      await query.refetch()
-      setNotice({ variant: 'success', text: '网络出口已创建；检测通过后才可用于账号绑定。' })
-      return true
+      await dataProvider.create({ resource: "network-exits", variables: data });
+      await query.refetch();
+      setNotice({
+        variant: "success",
+        text: "网络出口已创建；检测通过后才可用于账号绑定。",
+      });
+      return true;
     } catch (reason) {
-      setCreateError(reason)
-      return false
+      setCreateError(reason);
+      return false;
     } finally {
-      setBusy('')
+      setBusy("");
     }
   }
 
   async function runAction(exit, action) {
-    setBusy(exit.id)
-    setNotice(null)
+    setBusy(exit.id);
+    setNotice(null);
     try {
-      await dataProvider.networkExitAction(exit.id, action)
-      await Promise.all([query.refetch(), refetchBrowsers()])
-      setNotice({ variant: 'success', text: action === 'check' ? '出口检测完成。' : '出口已停用；绑定账号不会自动恢复。' })
+      await dataProvider.networkExitAction(exit.id, action);
+      await Promise.all([query.refetch(), refetchBrowsers()]);
+      setNotice({
+        variant: "success",
+        text:
+          action === "check"
+            ? "出口检测完成。"
+            : "出口已停用；绑定账号不会自动恢复。",
+      });
     } catch (reason) {
-      setNotice({ variant: 'destructive', text: conflictMessage(reason, action === 'check' ? '已停用的出口不能检测。' : '出口当前不能停用。') })
+      setNotice({
+        variant: "destructive",
+        text: conflictMessage(
+          reason,
+          action === "check" ? "已停用的出口不能检测。" : "出口当前不能停用。",
+        ),
+      });
     } finally {
-      setBusy('')
+      setBusy("");
     }
   }
 
   return (
     <div>
-      <PageHeader icon="ri-earth-line" title="网络出口" description="维护固定出口、健康观测与账号绑定">
-        <Button variant="primary" icon="ri-add-line" onClick={() => setCreateOpen(true)}>创建网络出口</Button>
+      <PageHeader
+        icon="ri-earth-line"
+        title="网络出口"
+        description="维护固定出口、健康观测与账号绑定"
+      >
+        <Button
+          variant="primary"
+          icon="ri-add-line"
+          onClick={() => setCreateOpen(true)}
+        >
+          创建网络出口
+        </Button>
       </PageHeader>
-      {notice ? <Alert variant={notice.variant} className="mb-4">{notice.text}</Alert> : null}
-      {error ? <Alert variant="destructive" className="mb-4">{error.message}</Alert> : null}
-      {bindingsError ? (
-        <Alert variant="destructive" className="mb-4">
-          环境不可用{bindingsError.status ? `（${bindingsError.status}）` : ''}：无法读取账号绑定，状态暂时未知。
-          <Button size="sm" onClick={() => refetchBrowsers()}>重试环境状态</Button>
+      {notice ? (
+        <Alert variant={notice.variant} className="mb-4">
+          {notice.text}
         </Alert>
       ) : null}
-      <PageState pending={isPending} error={error} empty={exits.length === 0} emptyText="暂无网络出口。创建并检测健康后，才能绑定运行环境。">
+      {error ? (
+        <Alert variant="destructive" className="mb-4">
+          {error.message}
+        </Alert>
+      ) : null}
+      {bindingsError ? (
+        <Alert variant="destructive" className="mb-4">
+          环境不可用{bindingsError.status ? `（${bindingsError.status}）` : ""}
+          ：无法读取账号绑定，状态暂时未知。
+          <Button size="sm" onClick={() => refetchBrowsers()}>
+            重试环境状态
+          </Button>
+        </Alert>
+      ) : null}
+      <PageState
+        pending={isPending}
+        error={error}
+        empty={exits.length === 0}
+        emptyText="暂无网络出口。创建并检测健康后，才能绑定运行环境。"
+      >
         <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
-          {exits.map(exit => (
-            <ExitCard key={exit.id} exit={exit} boundAccounts={accountsByExit.get(exit.id)} bindingsError={!!bindingsError}
-              busy={busy === exit.id} onAction={(exit, action) => (action === 'disable' ? setDisabling(exit) : runAction(exit, action))} />
+          {exits.map((exit) => (
+            <ExitCard
+              key={exit.id}
+              exit={exit}
+              boundAccounts={accountsByExit.get(exit.id)}
+              bindingsError={!!bindingsError}
+              busy={busy === exit.id}
+              onAction={(exit, action) =>
+                action === "disable"
+                  ? setDisabling(exit)
+                  : runAction(exit, action)
+              }
+            />
           ))}
         </div>
       </PageState>
-      <ExitCreateModal open={createOpen} onClose={() => { setCreateOpen(false); setCreateError(null) }} onSubmit={createExit} busy={busy === 'create'} error={createError} />
-      <ConfirmDialog open={disabling !== null} onClose={() => setDisabling(null)} onConfirm={() => { const exit = disabling; setDisabling(null); runAction(exit, 'disable') }}
-        title="停用网络出口" confirmLabel="确认停用" busy={busy === disabling?.id}
-        body={`停用网络出口 ${disabling?.id}？绑定账号将暂停，排队任务进入 hold。`} />
+      <ExitCreateModal
+        open={createOpen}
+        onClose={() => {
+          setCreateOpen(false);
+          setCreateError(null);
+        }}
+        onSubmit={createExit}
+        busy={busy === "create"}
+        error={createError}
+      />
+      <ConfirmDialog
+        open={disabling !== null}
+        onClose={() => setDisabling(null)}
+        onConfirm={() => {
+          const exit = disabling;
+          setDisabling(null);
+          runAction(exit, "disable");
+        }}
+        title="停用网络出口"
+        confirmLabel="确认停用"
+        busy={busy === disabling?.id}
+        body={`停用网络出口 ${disabling?.id}？绑定账号将暂停，排队任务进入 hold。`}
+      />
     </div>
-  )
+  );
 }
 
 export function NetworkExitDetail() {
-  const { id } = useParams()
-  const { result, error, isPending } = useOne({ resource: 'network-exits', id, queryOptions: { retry: false } })
-  const exit = result
-  useTitle('CreatorHub · 出口详情')
-  if (isPending) return <PageState pending />
-  if (error || !exit) return <Alert variant="destructive">{error?.message || '网络出口不存在'}</Alert>
+  const { id } = useParams();
+  const { result, error, isPending } = useOne({
+    resource: "network-exits",
+    id,
+    queryOptions: { retry: false },
+  });
+  const exit = result;
+  useTitle("CreatorHub · 出口详情");
+  if (isPending) return <PageState pending />;
+  if (error || !exit)
+    return (
+      <Alert variant="destructive">{error?.message || "网络出口不存在"}</Alert>
+    );
   return (
     <div>
-      <PageHeader icon="ri-earth-line" title="网络出口详情" description={<span className="anywhere">{exit.protocol}://{exit.host}:{exit.port}</span>}>
-        <Button icon="ri-arrow-left-line" as={Link} to="/network-exits">返回出口列表</Button>
+      <PageHeader
+        icon="ri-earth-line"
+        title="网络出口详情"
+        description={
+          <span className="anywhere">
+            {exit.protocol}://{exit.host}:{exit.port}
+          </span>
+        }
+      >
+        <Button icon="ri-arrow-left-line" as={Link} to="/network-exits">
+          返回出口列表
+        </Button>
       </PageHeader>
       <Card>
         <CardContent className="space-y-4">
           <ExitHealthPill exit={exit} />
-          <DetailList rows={[
-            ['ID', <span className="anywhere">{exit.id}</span>],
-            ['健康 / 版本', <span className="anywhere">{healthText[exit.health_status] ?? exit.health_status} · {exit.version}</span>],
-            ['用户名', <span className="anywhere">{exit.username || '无'}</span>],
-            ['密码', <span className="anywhere">{exit.password || '无'}</span>],
-            ['出口IP', <span className="anywhere">{exit.observed_public_ip || '尚无观测'}</span>],
-            ['最近检测', exit.last_checked_at ? new Date(exit.last_checked_at).toLocaleString('zh-CN') : '未检测'],
-          ]} />
+          <DetailList
+            rows={[
+              ["ID", <span className="anywhere">{exit.id}</span>],
+              [
+                "健康 / 版本",
+                <span className="anywhere">
+                  {healthText[exit.health_status] ?? exit.health_status} ·{" "}
+                  {exit.version}
+                </span>,
+              ],
+              [
+                "用户名",
+                <span className="anywhere">{exit.username || "无"}</span>,
+              ],
+              [
+                "密码",
+                <span className="anywhere">{exit.password || "无"}</span>,
+              ],
+              [
+                "出口IP",
+                <span className="anywhere">
+                  {exit.observed_public_ip || "尚无观测"}
+                </span>,
+              ],
+              [
+                "最近检测",
+                exit.last_checked_at
+                  ? new Date(exit.last_checked_at).toLocaleString("zh-CN")
+                  : "未检测",
+              ],
+            ]}
+          />
           <div className="flex flex-wrap gap-3">
-            <Button as={Link} to={`/audit?network_exit_id=${encodeURIComponent(exit.id)}`}>查看审计</Button>
+            <Button
+              as={Link}
+              to={`/audit?network_exit_id=${encodeURIComponent(exit.id)}`}
+            >
+              查看审计
+            </Button>
           </div>
         </CardContent>
       </Card>
     </div>
-  )
+  );
 }
diff --git a/web/src/NetworkExitsPage.test.jsx b/web/src/NetworkExitsPage.test.jsx
index fa934fe..919d535 100644
--- a/web/src/NetworkExitsPage.test.jsx
+++ b/web/src/NetworkExitsPage.test.jsx
@@ -1,96 +1,193 @@
-import { afterEach, describe, expect, it, vi } from 'vitest'
-import { cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { Refine } from '@refinedev/core'
-import { MemoryRouter } from 'react-router'
-import { NetworkExitList } from './NetworkExitsPage'
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Refine } from "@refinedev/core";
+import { MemoryRouter } from "react-router";
+import { NetworkExitList } from "./NetworkExitsPage";
 
-afterEach(() => { cleanup(); vi.restoreAllMocks() })
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
 
-const httpError = (message, status, body) => Object.assign(new Error(message), { status, body })
+const httpError = (message, status, body) =>
+  Object.assign(new Error(message), { status, body });
 
-const networkExit = { id: 'exit-a', protocol: 'socks5', host: 'proxy.example', port: 1080, username: 'proxy-user', password: 'plain-password', health_status: 'healthy', observed_public_ip: '203.0.113.1' }
+const networkExit = {
+  id: "exit-a",
+  protocol: "socks5",
+  host: "proxy.example",
+  port: 1080,
+  username: "proxy-user",
+  password: "plain-password",
+  health_status: "healthy",
+  observed_public_ip: "203.0.113.1",
+};
 
 function provider(exits = [], overrides = {}) {
   return {
-    getList: vi.fn(({ resource }) => Promise.resolve(resource === 'network-exits' ? { data: exits, total: exits.length } : { data: [], total: 0 })),
+    getList: vi.fn(({ resource }) =>
+      Promise.resolve(
+        resource === "network-exits"
+          ? { data: exits, total: exits.length }
+          : { data: [], total: 0 },
+      ),
+    ),
     create: vi.fn().mockResolvedValue({ data: networkExit }),
     networkExitAction: vi.fn().mockResolvedValue(networkExit),
-    getOne: vi.fn(), getMany: vi.fn(), getManyReference: vi.fn(), update: vi.fn(), updateMany: vi.fn(), delete: vi.fn(), deleteMany: vi.fn(),
+    getOne: vi.fn(),
+    getMany: vi.fn(),
+    getManyReference: vi.fn(),
+    update: vi.fn(),
+    updateMany: vi.fn(),
+    delete: vi.fn(),
+    deleteMany: vi.fn(),
     ...overrides,
-  }
+  };
 }
 
-const renderExits = dataProvider => render(
-  <QueryClientProvider client={new QueryClient({ defaultOptions: { queries: { retry: false } } })}>
-    <Refine dataProvider={dataProvider}>
-      <MemoryRouter><NetworkExitList /></MemoryRouter>
-    </Refine>
-  </QueryClientProvider>,
-)
+const renderExits = (dataProvider) =>
+  render(
+    <QueryClientProvider
+      client={
+        new QueryClient({ defaultOptions: { queries: { retry: false } } })
+      }
+    >
+      <Refine dataProvider={dataProvider}>
+        <MemoryRouter>
+          <NetworkExitList />
+        </MemoryRouter>
+      </Refine>
+    </QueryClientProvider>,
+  );
 
-describe('NetworkExitList', () => {
-  it('shows the ordered empty-state instruction', async () => {
-    renderExits(provider())
-    expect(await screen.findByText(/创建并检测健康后/)).toBeTruthy()
-  })
+describe("NetworkExitList", () => {
+  it("shows the ordered empty-state instruction", async () => {
+    renderExits(provider());
+    expect(await screen.findByText(/创建并检测健康后/)).toBeTruthy();
+  });
 
-  it('shows stored credentials and runs an explicit health check', async () => {
-    const dataProvider = provider([networkExit])
-    renderExits(dataProvider)
+  it("shows stored credentials and runs an explicit health check", async () => {
+    const dataProvider = provider([networkExit]);
+    renderExits(dataProvider);
 
-    expect((await screen.findAllByText(/proxy-user/)).length).toBeGreaterThan(0)
-    expect((await screen.findAllByText(/plain-password/)).length).toBeGreaterThan(0)
-    fireEvent.click(screen.getAllByRole('button', { name: '检测' })[0])
-    await waitFor(() => expect(dataProvider.networkExitAction).toHaveBeenCalledWith('exit-a', 'check'))
-  })
+    expect((await screen.findAllByText(/proxy-user/)).length).toBeGreaterThan(
+      0,
+    );
+    expect(
+      (await screen.findAllByText(/plain-password/)).length,
+    ).toBeGreaterThan(0);
+    fireEvent.click(screen.getAllByRole("button", { name: "检测" })[0]);
+    await waitFor(() =>
+      expect(dataProvider.networkExitAction).toHaveBeenCalledWith(
+        "exit-a",
+        "check",
+      ),
+    );
+  });
 
-  it('creates with plain credentials and closes on success', async () => {
-    const dataProvider = provider()
-    renderExits(dataProvider)
+  it("creates with plain credentials and closes on success", async () => {
+    const dataProvider = provider();
+    renderExits(dataProvider);
 
-    fireEvent.click(await screen.findByRole('button', { name: '创建网络出口' }))
-    const dialog = screen.getByRole('dialog')
-    fireEvent.change(within(dialog).getByRole('textbox', { name: '主机' }), { target: { value: 'proxy.example' } })
-    fireEvent.change(within(dialog).getByRole('spinbutton', { name: '端口' }), { target: { value: '1080' } })
-    fireEvent.change(within(dialog).getByRole('textbox', { name: '用户名（可选）' }), { target: { value: 'proxy-user' } })
-    fireEvent.change(within(dialog).getByRole('textbox', { name: '密码（可选）' }), { target: { value: 'plain-password' } })
-    fireEvent.click(within(dialog).getByRole('button', { name: '创建网络出口' }))
+    fireEvent.click(
+      await screen.findByRole("button", { name: "创建网络出口" }),
+    );
+    const dialog = screen.getByRole("dialog");
+    fireEvent.change(within(dialog).getByRole("textbox", { name: "主机" }), {
+      target: { value: "proxy.example" },
+    });
+    fireEvent.change(within(dialog).getByRole("spinbutton", { name: "端口" }), {
+      target: { value: "1080" },
+    });
+    fireEvent.change(
+      within(dialog).getByRole("textbox", { name: "用户名（可选）" }),
+      { target: { value: "proxy-user" } },
+    );
+    fireEvent.change(
+      within(dialog).getByRole("textbox", { name: "密码（可选）" }),
+      { target: { value: "plain-password" } },
+    );
+    fireEvent.click(
+      within(dialog).getByRole("button", { name: "创建网络出口" }),
+    );
 
-    await waitFor(() => expect(dataProvider.create).toHaveBeenCalledWith({ resource: 'network-exits', variables: {
-      protocol: 'socks5', host: 'proxy.example', port: 1080, username: 'proxy-user', password: 'plain-password', expected_public_ip: '', expected_region: '',
-    } }))
-    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull())
-  })
+    await waitFor(() =>
+      expect(dataProvider.create).toHaveBeenCalledWith({
+        resource: "network-exits",
+        variables: {
+          protocol: "socks5",
+          host: "proxy.example",
+          port: 1080,
+          username: "proxy-user",
+          password: "plain-password",
+          expected_public_ip: "",
+          expected_region: "",
+        },
+      }),
+    );
+    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
+  });
 
-  it('keeps the create modal open after a failure', async () => {
-    const dataProvider = provider([], { create: vi.fn().mockRejectedValue(new Error('创建失败')) })
-    renderExits(dataProvider)
+  it("keeps the create modal open after a failure", async () => {
+    const dataProvider = provider([], {
+      create: vi.fn().mockRejectedValue(new Error("创建失败")),
+    });
+    renderExits(dataProvider);
 
-    fireEvent.click(await screen.findByRole('button', { name: '创建网络出口' }))
-    const dialog = screen.getByRole('dialog')
-    fireEvent.change(within(dialog).getByRole('textbox', { name: '主机' }), { target: { value: 'proxy.example' } })
-    fireEvent.change(within(dialog).getByRole('spinbutton', { name: '端口' }), { target: { value: '1080' } })
-    fireEvent.click(within(dialog).getByRole('button', { name: '创建网络出口' }))
+    fireEvent.click(
+      await screen.findByRole("button", { name: "创建网络出口" }),
+    );
+    const dialog = screen.getByRole("dialog");
+    fireEvent.change(within(dialog).getByRole("textbox", { name: "主机" }), {
+      target: { value: "proxy.example" },
+    });
+    fireEvent.change(within(dialog).getByRole("spinbutton", { name: "端口" }), {
+      target: { value: "1080" },
+    });
+    fireEvent.click(
+      within(dialog).getByRole("button", { name: "创建网络出口" }),
+    );
 
-    expect((await within(dialog).findByRole('alert')).textContent).toContain('创建失败')
-    expect(screen.getByRole('dialog')).toBeTruthy()
-  })
+    expect((await within(dialog).findByRole("alert")).textContent).toContain(
+      "创建失败",
+    );
+    expect(screen.getByRole("dialog")).toBeTruthy();
+  });
 
-  it('shows unknown bindings and retries when browsers return 502', async () => {
+  it("shows unknown bindings and retries when browsers return 502", async () => {
     const dataProvider = provider([networkExit], {
-      getList: vi.fn(({ resource }) => resource === 'browsers'
-        ? Promise.reject(httpError('bad gateway', 502))
-        : Promise.resolve({ data: [networkExit], total: 1 })),
-    })
-    renderExits(dataProvider)
+      getList: vi.fn(({ resource }) =>
+        resource === "browsers"
+          ? Promise.reject(httpError("bad gateway", 502))
+          : Promise.resolve({ data: [networkExit], total: 1 }),
+      ),
+    });
+    renderExits(dataProvider);
 
-    expect(await screen.findByText(/环境不可用/)).toBeTruthy()
-    expect((await screen.findAllByText(/绑定账号：状态未知|状态未知/)).length).toBeGreaterThan(0)
-    expect(screen.queryByText(/绑定账号：未绑定/)).toBeNull()
-    expect(screen.queryByText(/^未绑定$/)).toBeNull()
-    expect(screen.getAllByRole('button', { name: '检测' })[0].disabled).toBe(false)
-    fireEvent.click(screen.getByRole('button', { name: '重试环境状态' }))
-    await waitFor(() => expect(dataProvider.getList.mock.calls.filter(([call]) => call.resource === 'browsers').length).toBeGreaterThan(1))
-  })
-})
+    expect(await screen.findByText(/环境不可用/)).toBeTruthy();
+    expect(
+      (await screen.findAllByText(/绑定账号：状态未知|状态未知/)).length,
+    ).toBeGreaterThan(0);
+    expect(screen.queryByText(/绑定账号：未绑定/)).toBeNull();
+    expect(screen.queryByText(/^未绑定$/)).toBeNull();
+    expect(screen.getAllByRole("button", { name: "检测" })[0].disabled).toBe(
+      false,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "重试环境状态" }));
+    await waitFor(() =>
+      expect(
+        dataProvider.getList.mock.calls.filter(
+          ([call]) => call.resource === "browsers",
+        ).length,
+      ).toBeGreaterThan(1),
+    );
+  });
+});