fix(ui): remove sidebar collapse footer and unify header control heights
Build and Deploy / build-and-push (push) Successful in 52s

This commit is contained in:
2026-07-26 16:27:24 +08:00
parent 88ca62b6c0
commit eb8df6de0f
3 changed files with 22 additions and 40 deletions
+15 -31
View File
@@ -33,7 +33,7 @@ import { SystemNotice } from '@/components/business/SystemNotice'
import { ToastHost } from '@/components/business/ToastHost'
import { resetAuthCache } from '@/lib/auth'
import { eventBus } from '@/lib/event-bus'
import { Button, cn } from '@/components/ui'
import { cn } from '@/components/ui'
const NAV_ITEMS = [
{ path: '/', icon: LayoutDashboard, label: '数据仪表', exact: true },
@@ -213,23 +213,6 @@ export default function Layout() {
)
})}
</nav>
{/* 桌面端:侧栏底部放一个次要折叠入口,主入口在顶栏 */}
{!isMobile && (
<div className="border-t border-[var(--border)] p-2">
<button
onClick={() => setCollapsed((v) => !v)}
title={collapsed ? '展开侧边栏' : '收起侧边栏'}
className={cn(
'flex h-9 w-full items-center rounded-md text-[12px] text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]',
sidebarCollapsed ? 'justify-center' : 'gap-2 px-2.5',
)}
>
{collapsed ? <ChevronRight size={15} strokeWidth={1.5} /> : <ChevronLeft size={15} strokeWidth={1.5} />}
{!sidebarCollapsed && <span></span>}
</button>
</div>
)}
</aside>
<main className="flex min-w-0 flex-1 flex-col">
@@ -237,19 +220,19 @@ export default function Layout() {
<div className="flex min-w-0 flex-1 items-center gap-2">
{isMobile ? (
<button
className="rounded-md p-2 text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)]"
className="inline-flex h-8 w-8 items-center justify-center rounded-md text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] hover:text-[var(--text-primary)]"
onClick={() => setMenuOpen(true)}
title="打开菜单"
>
<Menu size={18} strokeWidth={1.5} />
<Menu size={16} strokeWidth={1.5} />
</button>
) : (
<button
className="rounded-md p-2 text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] hover:text-[var(--text-primary)]"
className="inline-flex h-8 w-8 items-center justify-center rounded-md text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] hover:text-[var(--text-primary)]"
onClick={() => setCollapsed((v) => !v)}
title={collapsed ? '展开侧边栏' : '收起侧边栏'}
>
{collapsed ? <PanelLeftOpen size={17} strokeWidth={1.5} /> : <PanelLeftClose size={17} strokeWidth={1.5} />}
{collapsed ? <PanelLeftOpen size={16} strokeWidth={1.5} /> : <PanelLeftClose size={16} strokeWidth={1.5} />}
</button>
)}
<p className="truncate text-[13px] text-[var(--text-muted)]" title={sentence}>
@@ -257,30 +240,30 @@ export default function Layout() {
</p>
</div>
<div className="flex items-center gap-1.5">
{/* 顶栏工具统一 h-8,避免通知/主题/用户高度不一致 */}
<div className="flex h-8 items-center gap-1.5">
<NodeSwitcher />
<SystemNotice />
<Button
variant="secondary"
size="icon"
<button
type="button"
onClick={toggleTheme}
title={theme === 'light' ? '深色模式' : '浅色模式'}
className="h-8 w-8"
className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-[var(--border)] bg-[var(--bg-primary)] text-[var(--text-secondary)] transition-colors hover:border-[var(--border-hover)] hover:bg-[var(--bg-tertiary)] hover:text-[var(--text-primary)]"
>
{theme === 'light' ? <Moon size={15} strokeWidth={1.5} /> : <Sun size={15} strokeWidth={1.5} />}
</Button>
</button>
{/* 用户菜单:退出登录放这里,比左下角更干净 */}
<div className="relative" ref={userMenuRef}>
<button
type="button"
onClick={() => setUserMenuOpen((v) => !v)}
className={cn(
'flex h-8 items-center gap-1.5 rounded-md border border-[var(--border)] bg-[var(--bg-primary)] px-2 text-[12px] text-[var(--text-secondary)] transition-colors hover:border-[var(--border-hover)] hover:text-[var(--text-primary)]',
'inline-flex h-8 items-center gap-1.5 rounded-md border border-[var(--border)] bg-[var(--bg-primary)] px-2 text-[12px] leading-none text-[var(--text-secondary)] transition-colors hover:border-[var(--border-hover)] hover:text-[var(--text-primary)]',
userMenuOpen && 'border-[var(--border-hover)] text-[var(--text-primary)]',
)}
title="账户"
>
<span className="flex h-5 w-5 items-center justify-center rounded-full bg-[var(--bg-tertiary)] text-[var(--text-muted)]">
<span className="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-[var(--bg-tertiary)] text-[var(--text-muted)]">
<UserRound size={12} strokeWidth={1.75} />
</span>
<span className="hidden max-w-[96px] truncate sm:inline">{username}</span>
@@ -293,6 +276,7 @@ export default function Layout() {
<div className="truncate text-[11px] text-[var(--text-muted)]"></div>
</div>
<button
type="button"
onClick={() => {
setUserMenuOpen(false)
void logout()
+2 -2
View File
@@ -76,10 +76,10 @@ export function NodeSwitcher() {
return (
<div
className={cn(
'inline-flex h-8 max-w-[150px] items-center gap-1 rounded-md border px-2 text-[11px]',
'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-secondary)] text-[var(--text-secondary)]',
: 'border-[var(--border)] bg-[var(--bg-primary)] text-[var(--text-secondary)]',
)}
>
<MonitorDot size={12} className="shrink-0" />
+5 -7
View File
@@ -3,7 +3,6 @@ import { Bell, Check } from 'lucide-react'
import { api, LOG_CATEGORY, LOG_STATUS, type AppLog } from '@/api'
import { LOG_EVENTS } from '@/constants'
import { useEventBus } from '@/hooks/useEventBus'
import { Button } from '@/components/ui'
import { formatDateTime } from '@/lib/format'
import { cn } from '@/lib/utils'
@@ -63,18 +62,17 @@ export function SystemNotice() {
return (
<div className="relative">
<Button
variant="secondary"
size="icon"
className="relative h-8 w-8"
<button
type="button"
className="relative inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-[var(--border)] bg-[var(--bg-primary)] text-[var(--text-secondary)] transition-colors hover:border-[var(--border-hover)] hover:bg-[var(--bg-tertiary)] hover:text-[var(--text-primary)]"
title="系统通知"
onClick={() => setOpen((v) => !v)}
>
<Bell size={15} strokeWidth={1.5} />
{unread > 0 ? (
<span className="absolute right-1 top-1 h-2 w-2 animate-pulse rounded-full bg-red-500" />
<span className="absolute right-1.5 top-1.5 h-1.5 w-1.5 animate-pulse rounded-full bg-red-500" />
) : null}
</Button>
</button>
{open ? (
<>