22 lines
1.5 KiB
TypeScript
22 lines
1.5 KiB
TypeScript
'use client'
|
|
import { useTheme } from '@/components/providers/ThemeProvider'
|
|
import { Sun, Moon, LogOut, User } from 'lucide-react'
|
|
import { useRouter } from 'next/navigation'
|
|
|
|
interface TopBarProps { user: { username: string; display_name: string; role: string } | null }
|
|
|
|
export default function TopBar({ user }: TopBarProps) {
|
|
const { theme, toggleTheme } = useTheme()
|
|
const router = useRouter()
|
|
const handleLogout = async () => { await fetch('/api/auth/logout', { method: 'POST' }); router.push('/login'); router.refresh() }
|
|
return (
|
|
<header className="fixed top-0 left-60 right-0 h-14 bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 flex items-center justify-between px-6 z-30">
|
|
<div />
|
|
<div className="flex items-center gap-4">
|
|
<button onClick={toggleTheme} className="p-2 rounded-lg text-slate-500 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800 transition-colors" title={theme === 'dark' ? '切换到亮色模式' : '切换到暗色模式'}>{theme === 'dark' ? <Sun size={18} /> : <Moon size={18} />}</button>
|
|
{user && (<div className="flex items-center gap-3"><div className="flex items-center gap-2 text-sm text-slate-600 dark:text-slate-300"><User size={16} /><span>{user.display_name}</span></div><button onClick={handleLogout} className="p-2 rounded-lg text-slate-500 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800 transition-colors" title="退出登录"><LogOut size={18} /></button></div>)}
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|