style(NodeSwitcher): unify style with Select component for consistency
Build and Deploy / Build and Push Docker Image (push) Successful in 4m19s

- 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
This commit is contained in:
2026-08-08 15:25:18 +08:00
parent e4b9602d0e
commit eb85a8536d
+12 -9
View File
@@ -96,7 +96,7 @@ export function NodeSwitcher() {
setMenuStyle({ setMenuStyle({
position: 'fixed', position: 'fixed',
left: rect.left, left: rect.left,
width: Math.max(rect.width, 140), width: rect.width, // 菜单宽度和按钮一致
zIndex: 80, zIndex: 80,
...(openUp ...(openUp
? { bottom: viewportH - rect.top + 6, top: 'auto' } ? { bottom: viewportH - rect.top + 6, top: 'auto' }
@@ -148,21 +148,24 @@ export function NodeSwitcher() {
const currentLabel = allOptions.find((o) => o.value === selected)?.label || '本机节点' const currentLabel = allOptions.find((o) => o.value === selected)?.label || '本机节点'
return ( return (
<div className="relative"> <div className="relative shrink-0">
<button <button
ref={buttonRef} ref={buttonRef}
type="button" type="button"
onClick={() => setOpen(!open)} onClick={() => setOpen(!open)}
className={cn( 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', 'ui-control ui-select-trigger h-[var(--ui-height-md)] px-[var(--ui-px-md)] text-left text-[length:var(--ui-font-md)]',
selected !== 'local' open && 'ui-control-open',
? 'border-amber-500/30 bg-amber-500/10 text-amber-600 hover:bg-amber-500/15 dark:text-amber-400' 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)]',
)} )}
> >
<MonitorDot size={12} className="shrink-0" /> <MonitorDot size={14} className="shrink-0" />
<span className="max-w-[100px] truncate">{currentLabel}</span> <span className="min-w-0 flex-1 truncate">{currentLabel}</span>
<ChevronDown size={12} className="shrink-0 opacity-60" /> <ChevronDown
size={14}
strokeWidth={1.5}
className={cn('shrink-0 text-[var(--text-muted)] transition-transform', open && 'rotate-180')}
/>
</button> </button>
{open && {open &&