From efb613b0b5d1522ae892202247ea6186c77095d4 Mon Sep 17 00:00:00 2001
From: sagitchu <sagitchu@gmail.com>
Date: Sun, 15 Mar 2026 23:31:39 +0800
Subject: [PATCH] Fix TypeScript compilation errors

- Add isIndeterminate support to Checkbox component
- Use showAddressModal in SortableTableRow for multi-address display
- Remove unused onClose parameter in search modal
- Remove unused infoPopoverPlacement and related code in node.tsx
---
 vite-frontend/src/components/ui/checkbox.tsx  |  9 ++--
 vite-frontend/src/pages/forward.tsx           | 48 ++++++++-----------
 vite-frontend/src/pages/node.tsx              | 36 --------------
 .../src/shadcn-bridge/heroui/checkbox.tsx     |  8 +++-
 4 files changed, 33 insertions(+), 68 deletions(-)

diff --git a/vite-frontend/src/components/ui/checkbox.tsx b/vite-frontend/src/components/ui/checkbox.tsx
index 118cbcd..3b2b76e 100644
--- a/vite-frontend/src/components/ui/checkbox.tsx
+++ b/vite-frontend/src/components/ui/checkbox.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { CheckIcon } from "lucide-react";
+import { CheckIcon, MinusIcon } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
@@ -11,17 +11,18 @@ function Checkbox({
   return (
     <CheckboxPrimitive.Root
       className={cn(
-        "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow transition-transform duration-100 active:scale-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+        "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow transition-transform duration-100 active:scale-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground",
         className,
       )}
       data-slot="checkbox"
       {...props}
     >
       <CheckboxPrimitive.Indicator
-        className="flex items-center justify-center text-current data-[state=checked]:animate-in data-[state=checked]:zoom-in-75 data-[state=checked]:duration-150"
+        className="flex items-center justify-center text-current data-[state=checked]:animate-in data-[state=checked]:zoom-in-75 data-[state=checked]:duration-150 data-[state=indeterminate]:animate-in data-[state=indeterminate]:zoom-in-75 data-[state=indeterminate]:duration-150"
         data-slot="checkbox-indicator"
       >
-        <CheckIcon className="h-3.5 w-3.5" />
+        <CheckIcon className="h-3.5 w-3.5 data-[state=indeterminate]:hidden" />
+        <MinusIcon className="h-3.5 w-3.5 hidden data-[state=indeterminate]:block" />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
   );
diff --git a/vite-frontend/src/pages/forward.tsx b/vite-frontend/src/pages/forward.tsx
index 56d0e56..359c2e8 100644
--- a/vite-frontend/src/pages/forward.tsx
+++ b/vite-frontend/src/pages/forward.tsx
@@ -784,44 +784,38 @@ const SortableTableRow = ({
       <TableCell
         className={`${FORWARD_GROUPED_TABLE_COLUMN_CLASS.inbound} max-w-[280px] ${selectedIds.has(forward.id) ? "bg-primary-50/70 dark:bg-primary-900/40" : ""}`}
       >
-        <div
-          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 select-text ${
-            hasMultipleAddresses(forward.inIp)
-              ? "hover:bg-default-200 hover:shadow-sm cursor-pointer"
-              : "cursor-text"
+        <button
+          type="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="点击复制"
-          onClick={(e) => {
-            e.stopPropagation();
-            copyToClipboard(
-              (forward.inIp || "").replace(/:\d+$/, "") || "默认IP",
-              "入口地址",
-            );
+          title={formatInAddress(forward.inIp, forward.inPort)}
+          onClick={() => {
+            if (hasMultipleAddresses(forward.inIp)) {
+              showAddressModal(forward.inIp, forward.inPort, "入口端口");
+            }
           }}
         >
           {formatInAddress(forward.inIp, forward.inPort)}
-        </div>
+        </button>
       </TableCell>
       <TableCell
         className={`${FORWARD_GROUPED_TABLE_COLUMN_CLASS.target} max-w-[280px] ${selectedIds.has(forward.id) ? "bg-primary-50/70 dark:bg-primary-900/40" : ""}`}
       >
-        <div
-          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 select-text ${
-            hasMultipleAddresses(forward.remoteAddr)
-              ? "hover:bg-default-200 hover:shadow-sm cursor-pointer"
-              : "cursor-text"
+        <button
+          type="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="点击复制"
-          onClick={(e) => {
-            e.stopPropagation();
-            copyToClipboard(
-              forward.remoteAddr.split(",")[0].split(":")[0],
-              "落地地址",
-            );
+          title={formatRemoteAddress(forward.remoteAddr)}
+          onClick={() => {
+            if (hasMultipleAddresses(forward.remoteAddr)) {
+              showAddressModal(forward.remoteAddr, null, "目标地址");
+            }
           }}
         >
           {formatRemoteAddress(forward.remoteAddr)}
-        </div>
+        </button>
       </TableCell>
       <TableCell className={FORWARD_GROUPED_TABLE_COLUMN_CLASS.strategy}>
         <Chip
@@ -5986,7 +5980,7 @@ export default function ForwardPage() {
         onOpenChange={setIsSearchModalOpen}
       >
         <ModalContent>
-          {(onClose) => (
+          {() => (
             <>
               <ModalHeader className="flex flex-col gap-1">
                 搜索筛选用户规则
diff --git a/vite-frontend/src/pages/node.tsx b/vite-frontend/src/pages/node.tsx
index 094b57e..b98733d 100644
--- a/vite-frontend/src/pages/node.tsx
+++ b/vite-frontend/src/pages/node.tsx
@@ -374,40 +374,6 @@ export default function NodePage() {
   const [upgradeProgress, setUpgradeProgress] = useState<
     Record<number, { stage: string; percent: number; message: string }>
   >({});
-  const [infoPopoverPlacement, setInfoPopoverPlacement] = useState<
-    Record<number, "left" | "bottom">
-  >({});
-
-  const updateInfoPopoverPlacement = useCallback(
-    (nodeId: number, triggerElement: HTMLElement | null) => {
-      if (!triggerElement) {
-        return;
-      }
-
-      const rect = triggerElement.getBoundingClientRect();
-      const cardElement = triggerElement.closest("[data-node-card='true']");
-      const cardRect =
-        cardElement instanceof HTMLElement
-          ? cardElement.getBoundingClientRect()
-          : null;
-      const estimatedPanelWidth = 288;
-      const containerPadding = 16;
-      const availableLeftSpace = cardRect
-        ? rect.left - cardRect.left
-        : rect.left;
-      const nextPlacement: "left" | "bottom" =
-        availableLeftSpace >= estimatedPanelWidth + containerPadding
-          ? "left"
-          : "bottom";
-
-      setInfoPopoverPlacement((prev) =>
-        prev[nodeId] === nextPlacement
-          ? prev
-          : { ...prev, [nodeId]: nextPlacement },
-      );
-    },
-    [],
-  );
 
   const handleNodeOffline = useCallback((nodeId: number) => {
     setNodeList((prev) =>
@@ -1744,8 +1710,6 @@ export default function NodePage() {
                     !node.expiryReminderDismissed,
                 );
                 const hasInfoTrigger = hasRemark || hasExpiryInfo;
-                const infoCount = Number(hasExpiryInfo) + Number(hasRemark);
-                const infoPlacement = infoPopoverPlacement[node.id] ?? "left";
 
                 return (
                   <SortableItem key={node.id} id={node.id}>
diff --git a/vite-frontend/src/shadcn-bridge/heroui/checkbox.tsx b/vite-frontend/src/shadcn-bridge/heroui/checkbox.tsx
index 158271a..8632da5 100644
--- a/vite-frontend/src/shadcn-bridge/heroui/checkbox.tsx
+++ b/vite-frontend/src/shadcn-bridge/heroui/checkbox.tsx
@@ -11,6 +11,7 @@ export interface CheckboxProps
   classNames?: Record<string, string>;
   color?: string;
   isDisabled?: boolean;
+  isIndeterminate?: boolean;
   isSelected?: boolean;
   onValueChange?: (value: boolean) => void;
   size?: string;
@@ -20,6 +21,7 @@ export function Checkbox({
   children,
   className,
   isDisabled,
+  isIndeterminate,
   isSelected,
   onValueChange,
   ...props
@@ -32,6 +34,10 @@ export function Checkbox({
     onValueChange?.(value === true);
   };
 
+  const checkedValue: boolean | "indeterminate" = isIndeterminate
+    ? "indeterminate"
+    : Boolean(isSelected);
+
   return (
     <div
       className={cn(
@@ -41,7 +47,7 @@ export function Checkbox({
       )}
     >
       <BaseCheckbox
-        checked={Boolean(isSelected)}
+        checked={checkedValue}
         disabled={isDisabled}
         onCheckedChange={handleCheckedChange}
         {...props}