From eb85a8536dcd82afa6c3b76f33582c927049e9c8 Mon Sep 17 00:00:00 2001
From: TaskPool <admin@viaeon.com>
Date: Sat, 8 Aug 2026 15:25:18 +0800
Subject: [PATCH] style(NodeSwitcher): unify style with Select component for
 consistency

- Use ui-control and ui-select-trigger classes
- Change height to var(--ui-height-md) (36px)
- Change font-size to var(--ui-font-md) (14px)
- Remove max-width constraint, let width adapt to content
- Icon size from 12px to 14px
- Menu width now matches button width exactly
- Add arrow icon rotation on open
---
 web/src/components/business/NodeSwitcher.tsx | 21 +++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/web/src/components/business/NodeSwitcher.tsx b/web/src/components/business/NodeSwitcher.tsx
index f41ed7a..969b723 100644
--- a/web/src/components/business/NodeSwitcher.tsx
+++ b/web/src/components/business/NodeSwitcher.tsx
@@ -96,7 +96,7 @@ export function NodeSwitcher() {
       setMenuStyle({
         position: 'fixed',
         left: rect.left,
-        width: Math.max(rect.width, 140),
+        width: rect.width, // 菜单宽度和按钮一致
         zIndex: 80,
         ...(openUp
           ? { bottom: viewportH - rect.top + 6, top: 'auto' }
@@ -148,21 +148,24 @@ export function NodeSwitcher() {
   const currentLabel = allOptions.find((o) => o.value === selected)?.label || '本机节点'
 
   return (
-    <div className="relative">
+    <div className="relative shrink-0">
       <button
         ref={buttonRef}
         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)]',
+          'ui-control ui-select-trigger h-[var(--ui-height-md)] px-[var(--ui-px-md)] text-left text-[length:var(--ui-font-md)]',
+          open && 'ui-control-open',
+          selected !== 'local' && 'border-amber-500/30 bg-amber-500/10 text-amber-600 hover:bg-amber-500/15 dark:text-amber-400',
         )}
       >
-        <MonitorDot size={12} className="shrink-0" />
-        <span className="max-w-[100px] truncate">{currentLabel}</span>
-        <ChevronDown size={12} className="shrink-0 opacity-60" />
+        <MonitorDot size={14} className="shrink-0" />
+        <span className="min-w-0 flex-1 truncate">{currentLabel}</span>
+        <ChevronDown
+          size={14}
+          strokeWidth={1.5}
+          className={cn('shrink-0 text-[var(--text-muted)] transition-transform', open && 'rotate-180')}
+        />
       </button>
 
       {open &&