From 2cc584713f03a7a1e7231f6b64f11d6fe3675635 Mon Sep 17 00:00:00 2001
From: TaskPool <admin@viaeon.com>
Date: Thu, 6 Aug 2026 14:37:43 +0800
Subject: [PATCH] fix(NodeSwitcher): use custom dropdown instead of native
 select for consistent styling

---
 web/src/components/business/NodeSwitcher.tsx | 89 +++++++++++++-------
 1 file changed, 58 insertions(+), 31 deletions(-)

diff --git a/web/src/components/business/NodeSwitcher.tsx b/web/src/components/business/NodeSwitcher.tsx
index f04ab65..5e6806f 100644
--- a/web/src/components/business/NodeSwitcher.tsx
+++ b/web/src/components/business/NodeSwitcher.tsx
@@ -14,6 +14,7 @@ export function NodeSwitcher() {
   const [nodes, setNodes] = useState<InterconnectNode[]>([])
   const [selected, setSelected] = useState(activeInterconnectNodeId || 'local')
   const [isMaster, setIsMaster] = useState(false)
+  const [open, setOpen] = useState(false)
 
   const fetchNodes = useCallback(async () => {
     try {
@@ -73,38 +74,64 @@ export function NodeSwitcher() {
 
   if (!isMaster) return null
 
+  const handleSelect = (val: string) => {
+    setSelected(val)
+    setOpen(false)
+    if (val === 'local') {
+      setActiveInterconnectNodeId('')
+    } else {
+      const name = nodes.find((n) => n.id === val)?.name || ''
+      setActiveInterconnectNodeId(val, name)
+    }
+    window.location.reload()
+  }
+
+  const allOptions = [
+    { value: 'local', label: '本机节点' },
+    ...nodes.map((n) => ({ value: n.id, label: n.name })),
+  ]
+
+  const currentLabel = allOptions.find((o) => o.value === selected)?.label || '本机节点'
+
   return (
-    <div
-      className={cn(
-        'inline-flex h-8 max-w-[150px] shrink-0 items-center gap-1 rounded-md border px-2 text-[11px] leading-none',
-        selected !== 'local'
-          ? 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'
-          : 'border-[var(--border)] bg-[var(--bg-primary)] text-[var(--text-secondary)]',
-      )}
-    >
-      <MonitorDot size={12} className="shrink-0" />
-      <select
-        className="max-w-[120px] truncate border-0 bg-transparent text-[11px] outline-none"
-        value={selected}
-        onChange={(e) => {
-          const val = e.target.value
-          setSelected(val)
-          if (val === 'local') {
-            setActiveInterconnectNodeId('')
-          } else {
-            const name = nodes.find((n) => n.id === val)?.name || ''
-            setActiveInterconnectNodeId(val, name)
-          }
-          window.location.reload()
-        }}
+    <div className="relative">
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className={cn(
+          'inline-flex h-8 max-w-[150px] shrink-0 items-center gap-1.5 rounded-md border px-2 text-[11px] leading-none transition-colors',
+          selected !== 'local'
+            ? 'border-amber-500/30 bg-amber-500/10 text-amber-600 hover:bg-amber-500/15 dark:text-amber-400'
+            : 'border-[var(--border)] bg-[var(--bg-primary)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]',
+        )}
       >
-        <option value="local">本机节点</option>
-        {nodes.map((n) => (
-          <option key={n.id} value={n.id}>
-            {n.name}
-          </option>
-        ))}
-      </select>
+        <MonitorDot size={12} className="shrink-0" />
+        <span className="max-w-[100px] truncate">{currentLabel}</span>
+      </button>
+
+      {open && (
+        <div className="absolute left-0 top-full z-[80] mt-1 min-w-[140px] rounded-md border border-[var(--border)] bg-[var(--bg-secondary)] py-1 shadow-lg">
+          {allOptions.map((opt) => (
+            <button
+              key={opt.value}
+              type="button"
+              onClick={() => handleSelect(opt.value)}
+              className={cn(
+                'w-full px-3 py-1.5 text-left text-xs transition-colors',
+                opt.value === selected
+                  ? 'bg-[var(--bg-selected)] text-[var(--text-primary)]'
+                  : 'text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]',
+              )}
+            >
+              {opt.label}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {open && (
+        <div className="fixed inset-0 z-[70]" onClick={() => setOpen(false)} />
+      )}
     </div>
   )
-}
+}
\ No newline at end of file