From 8124e59de5fe86fab3ea86b77a6d0985fa8b4fd0 Mon Sep 17 00:00:00 2001
From: sagitchu <sagitchu@gmail.com>
Date: Sun, 15 Mar 2026 23:12:48 +0800
Subject: [PATCH] Roll back port column separation in forward table
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Merge entry address:port into single '入口' column
- Merge target address:port into single '目标' column
- Remove separate port columns from compact table
- Keep UI improvements: always show checkbox, selection highlight
---
 vite-frontend/src/pages/forward.tsx | 85 +++++++++--------------------
 1 file changed, 26 insertions(+), 59 deletions(-)

diff --git a/vite-frontend/src/pages/forward.tsx b/vite-frontend/src/pages/forward.tsx
index 3f50a76..56d0e56 100644
--- a/vite-frontend/src/pages/forward.tsx
+++ b/vite-frontend/src/pages/forward.tsx
@@ -1015,63 +1015,36 @@ const SortableCompactTableRow = ({
         </div>
       </TableCell>
       <TableCell
-        className={`${selectedIds.has(forward.id) ? "bg-primary-50/70 dark:bg-primary-900/40" : ""}`}
+        className={`max-w-[220px] ${selectedIds.has(forward.id) ? "bg-primary-50/70 dark:bg-primary-900/40" : ""}`}
       >
-        <span
-          className="text-sm font-mono font-medium cursor-pointer hover:bg-default-200/50 rounded px-1 transition-colors"
-          onClick={() =>
-            copyToClipboard(
-              (forward.inIp || "").replace(/:\d+$/, "") || "默认IP",
-              "入口地址",
-            )
-          }
+        <button
+          className={`w-full truncate rounded-md bg-default-100/50 px-2.5 py-1.5 text-left font-mono text-xs font-medium text-default-700 transition-all ${
+            hasMultipleAddresses(forward.inIp)
+              ? "hover:bg-default-200 hover:shadow-sm cursor-pointer"
+              : "cursor-default"
+          }`}
+          title={formatInAddress(forward.inIp, forward.inPort)}
+          type="button"
+          onClick={() => showAddressModal(forward.inIp, forward.inPort, "入口端口")}
         >
-          {(forward.inIp || "").replace(/:\d+$/, "") || "默认IP"}
-        </span>
+          {formatInAddress(forward.inIp, forward.inPort)}
+        </button>
       </TableCell>
       <TableCell
-        className={`${selectedIds.has(forward.id) ? "bg-primary-50/70 dark:bg-primary-900/40" : ""}`}
+        className={`max-w-[240px] ${selectedIds.has(forward.id) ? "bg-primary-50/70 dark:bg-primary-900/40" : ""}`}
       >
-        <span
-          className="text-sm font-mono font-medium cursor-pointer hover:bg-default-200/50 rounded px-1 transition-colors"
-          onClick={() => copyToClipboard(forward.inPort.toString(), "入口端口")}
+        <button
+          className={`w-full truncate rounded-md bg-default-100/50 px-2.5 py-1.5 text-left font-mono text-xs font-medium text-default-700 transition-all ${
+            hasMultipleAddresses(forward.remoteAddr)
+              ? "hover:bg-default-200 hover:shadow-sm cursor-pointer"
+              : "cursor-default"
+          }`}
+          title={formatRemoteAddress(forward.remoteAddr)}
+          type="button"
+          onClick={() => showAddressModal(forward.remoteAddr, null, "目标地址")}
         >
-          {forward.inPort}
-        </span>
-      </TableCell>
-      {/* 入口端口点击复制 */}
-      <TableCell
-        className={`${selectedIds.has(forward.id) ? "bg-primary-50/70 dark:bg-primary-900/40" : ""}`}
-      >
-        <span
-          className="text-sm font-mono font-medium cursor-pointer hover:bg-default-200/50 rounded px-1 transition-colors"
-          onClick={() =>
-            copyToClipboard(
-              forward.remoteAddr.split(",")[0].replace(/:\d+$/, ""),
-              "落地地址",
-            )
-          }
-        >
-          {forward.remoteAddr.split(",")[0].replace(/:\d+$/, "")}
-        </span>
-        {forward.remoteAddr.includes(",") && (
-          <span className="text-primary-400 ml-0.5">...</span>
-        )}
-      </TableCell>
-      <TableCell
-        className={`${selectedIds.has(forward.id) ? "bg-primary-50/70 dark:bg-primary-900/40" : ""}`}
-      >
-        <span
-          className="text-sm font-mono font-medium cursor-pointer hover:bg-default-200/50 rounded px-1 transition-colors"
-          onClick={() =>
-            copyToClipboard(
-              forward.remoteAddr.split(",")[0].match(/:(\d+)$/)?.[1] || "",
-              "落地端口",
-            )
-          }
-        >
-          {forward.remoteAddr.split(",")[0].match(/:(\d+)$/)?.[1] || "-"}
-        </span>
+          {formatRemoteAddress(forward.remoteAddr)}
+        </button>
       </TableCell>
 
       <TableCell
@@ -4214,14 +4187,8 @@ export default function ForwardPage() {
                             ‾倍率
                           </sup>
                         </TableColumn>
-                        <TableColumn className="w-[150px]">
-                          入口地址
-                        </TableColumn>
-                        <TableColumn className="w-[80px]">端口</TableColumn>
-                        <TableColumn className="w-[120px]">
-                          落地地址
-                        </TableColumn>
-                        <TableColumn className="w-[80px]">端口</TableColumn>
+                        <TableColumn className="w-[180px]">入口</TableColumn>
+                        <TableColumn className="w-[180px]">目标</TableColumn>
                         <TableColumn className="w-[80px]">策略</TableColumn>
                         <TableColumn className="w-[100px]">用量</TableColumn>
                         <TableColumn className="w-[80px]">状态</TableColumn>