From fdbb37ad48afc0c56952ceff93de416054ae0b1c Mon Sep 17 00:00:00 2001
From: Rogee <rogee@ipao.vip>
Date: Thu, 3 Sep 2026 18:39:29 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E7=BD=91=E7=BB=9C=E5=87=BA?=
 =?UTF-8?q?=E5=8F=A3=E5=88=97=E8=A1=A8=E6=94=B9=E4=B8=BA=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/NetworkExitsPage.jsx | 148 +++++++++++++++++++++--------------
 1 file changed, 91 insertions(+), 57 deletions(-)

diff --git a/web/src/NetworkExitsPage.jsx b/web/src/NetworkExitsPage.jsx
index 2de0925..aecb2b6 100644
--- a/web/src/NetworkExitsPage.jsx
+++ b/web/src/NetworkExitsPage.jsx
@@ -15,6 +15,7 @@ import {
   PageState,
   Select,
   StatusPill,
+  Table,
   conflictMessage,
 } from "./lib/ui.jsx";
 import { useTitle } from "./lib/hooks.js";
@@ -239,50 +240,90 @@ function ExitCreateModal({ open, onClose, onSubmit, busy, error }) {
   );
 }
 
-function ExitCard({ exit, boundAccounts, bindingsError, busy, onAction }) {
-  return (
-    <Card>
-      <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>
-          </div>
-          <ExitHealthPill exit={exit} />
+function ExitTable({ exits, accountsByExit, bindingsError, busy, onAction }) {
+  const columns = [
+    {
+      header: "出口",
+      width: "20%",
+      render: (exit) => (
+        <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}</p>
         </div>
-        <div className="text-sm">
-          <span className="text-muted">出口IP：</span>
+      ),
+    },
+    {
+      header: "状态",
+      width: "9%",
+      render: (exit) => <ExitHealthPill exit={exit} />,
+    },
+    {
+      header: "用户名",
+      width: "11%",
+      render: (exit) => (
+        <span className="anywhere">{exit.username || "无"}</span>
+      ),
+    },
+    {
+      header: "密码",
+      width: "11%",
+      render: (exit) => (
+        <span className="anywhere">{exit.password || "无"}</span>
+      ),
+    },
+    {
+      header: "出口IP",
+      width: "13%",
+      render: (exit) => (
+        <span className="anywhere">{exit.observed_public_ip || "尚无观测"}</span>
+      ),
+    },
+    {
+      header: "最近检测",
+      width: "15%",
+      render: (exit) =>
+        exit.last_checked_at
+          ? new Date(exit.last_checked_at).toLocaleString("zh-CN")
+          : "未检测",
+    },
+    {
+      header: "绑定账号",
+      width: "13%",
+      render: (exit) => {
+        if (bindingsError) return <span className="text-muted">状态未知</span>;
+        const accounts = accountsByExit.get(exit.id);
+        return (
           <span className="anywhere">
-            {exit.observed_public_ip || "尚无观测"}
+            {accounts?.length ? accounts.join("、") : "未绑定"}
           </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>
-          )}
-        </div>
-        <ExitActions exit={exit} busy={busy} onAction={onAction} />
-      </CardContent>
-    </Card>
+        );
+      },
+    },
+    {
+      header: "操作",
+      width: "8%",
+      align: "right",
+      render: (exit) => (
+        <ExitActions
+          exit={exit}
+          busy={busy === exit.id}
+          onAction={onAction}
+        />
+      ),
+    },
+  ];
+  return (
+    <Table
+      columns={columns}
+      rows={exits}
+      rowKey={(exit) => exit.id}
+      minWidth="1100px"
+    />
   );
 }
 
@@ -402,22 +443,15 @@ export function NetworkExitList() {
         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)
-              }
-            />
-          ))}
-        </div>
+        <ExitTable
+          exits={exits}
+          accountsByExit={accountsByExit}
+          bindingsError={!!bindingsError}
+          busy={busy}
+          onAction={(exit, action) =>
+            action === "disable" ? setDisabling(exit) : runAction(exit, action)
+          }
+        />
       </PageState>
       <ExitCreateModal
         open={createOpen}

From c333d59796f433e7f23eb6a7106fb14bffc953bb Mon Sep 17 00:00:00 2001
From: Rogee <rogee@ipao.vip>
Date: Fri, 4 Sep 2026 09:54:55 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E7=BD=91=E7=BB=9C=E5=87=BA=E5=8F=A3?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E4=BB=A5=20ID=20=E4=BD=9C=E4=B8=BA=E4=B8=BB?=
 =?UTF-8?q?=E6=A0=87=E8=AF=86=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/NetworkExitsPage.jsx      | 22 +++++++++++-----------
 web/src/NetworkExitsPage.test.jsx |  5 ++++-
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/web/src/NetworkExitsPage.jsx b/web/src/NetworkExitsPage.jsx
index aecb2b6..729a96b 100644
--- a/web/src/NetworkExitsPage.jsx
+++ b/web/src/NetworkExitsPage.jsx
@@ -244,16 +244,18 @@ function ExitTable({ exits, accountsByExit, bindingsError, busy, onAction }) {
   const columns = [
     {
       header: "出口",
-      width: "20%",
+      width: "22%",
       render: (exit) => (
         <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}
+            {exit.id}
           </Link>
-          <p className="anywhere text-xs text-muted">{exit.id}</p>
+          <p className="anywhere text-xs text-muted">
+            {exit.protocol}://{exit.host}:{exit.port}
+          </p>
         </div>
       ),
     },
@@ -264,14 +266,14 @@ function ExitTable({ exits, accountsByExit, bindingsError, busy, onAction }) {
     },
     {
       header: "用户名",
-      width: "11%",
+      width: "10%",
       render: (exit) => (
         <span className="anywhere">{exit.username || "无"}</span>
       ),
     },
     {
       header: "密码",
-      width: "11%",
+      width: "10%",
       render: (exit) => (
         <span className="anywhere">{exit.password || "无"}</span>
       ),
@@ -280,7 +282,9 @@ function ExitTable({ exits, accountsByExit, bindingsError, busy, onAction }) {
       header: "出口IP",
       width: "13%",
       render: (exit) => (
-        <span className="anywhere">{exit.observed_public_ip || "尚无观测"}</span>
+        <span className="anywhere">
+          {exit.observed_public_ip || "尚无观测"}
+        </span>
       ),
     },
     {
@@ -309,11 +313,7 @@ function ExitTable({ exits, accountsByExit, bindingsError, busy, onAction }) {
       width: "8%",
       align: "right",
       render: (exit) => (
-        <ExitActions
-          exit={exit}
-          busy={busy === exit.id}
-          onAction={onAction}
-        />
+        <ExitActions exit={exit} busy={busy === exit.id} onAction={onAction} />
       ),
     },
   ];
diff --git a/web/src/NetworkExitsPage.test.jsx b/web/src/NetworkExitsPage.test.jsx
index 919d535..102892c 100644
--- a/web/src/NetworkExitsPage.test.jsx
+++ b/web/src/NetworkExitsPage.test.jsx
@@ -74,10 +74,13 @@ describe("NetworkExitList", () => {
     expect(await screen.findByText(/创建并检测健康后/)).toBeTruthy();
   });
 
-  it("shows stored credentials and runs an explicit health check", async () => {
+  it("shows the exit ID as the primary identifier with stored credentials", async () => {
     const dataProvider = provider([networkExit]);
     renderExits(dataProvider);
 
+    const idLink = await screen.findByRole("link", { name: "exit-a" });
+    expect(idLink.getAttribute("href")).toBe("/network-exits/exit-a");
+    expect(screen.getByText("socks5://proxy.example:1080")).toBeTruthy();
     expect((await screen.findAllByText(/proxy-user/)).length).toBeGreaterThan(
       0,
     );