style(NodeSwitcher): unify style with Select component for consistency
Build and Deploy / Build and Push Docker Image (push) Successful in 4m19s
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:
@@ -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 &&
|
||||
|
||||
Reference in New Issue
Block a user