262 lines
11 KiB
TypeScript
262 lines
11 KiB
TypeScript
import { useState } from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
import { useThemeStore, useTabStore, useNotificationStore, useUserStore } from '@/store';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu';
|
|
import {
|
|
Search,
|
|
Bell,
|
|
Menu,
|
|
X,
|
|
Settings,
|
|
User,
|
|
LogOut,
|
|
CheckCheck,
|
|
AlertTriangle,
|
|
Info,
|
|
CheckCircle,
|
|
Palette,
|
|
Check,
|
|
} from 'lucide-react';
|
|
import { formatDistanceToNow } from '@/lib/utils';
|
|
import { useTheme, THEME_OPTIONS } from '@/hooks/useTheme';
|
|
|
|
export function Header() {
|
|
const { sidebarCollapsed, toggleSidebar } = useThemeStore();
|
|
const { tabs, activeTab, removeTab, setActiveTab } = useTabStore();
|
|
const { notifications, unreadCount, markAsRead, markAllAsRead } = useNotificationStore();
|
|
const { user, logout } = useUserStore();
|
|
const { theme, setTheme } = useTheme();
|
|
const [searchValue, setSearchValue] = useState('');
|
|
|
|
const handleLogout = () => {
|
|
logout();
|
|
window.location.href = '/login';
|
|
};
|
|
|
|
const displayName = user?.real_name || user?.username || '管理员';
|
|
|
|
const getNotificationIcon = (type: string) => {
|
|
switch (type) {
|
|
case 'error':
|
|
return <AlertTriangle className="h-4 w-4 text-red-500" />;
|
|
case 'warning':
|
|
return <AlertTriangle className="h-4 w-4 text-amber-500" />;
|
|
case 'success':
|
|
return <CheckCircle className="h-4 w-4 text-emerald-500" />;
|
|
default:
|
|
return <Info className="h-4 w-4 text-blue-500" />;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<header className="fixed top-0 right-0 left-0 z-30 h-14 bg-slate-900/95 backdrop-blur supports-[backdrop-filter]:bg-slate-900/60 border-b border-slate-800 transition-all duration-300"
|
|
style={{ marginLeft: sidebarCollapsed ? '4rem' : '16rem' }}
|
|
>
|
|
<div className="flex items-center justify-between h-full px-4">
|
|
{/* Left: Toggle & Search */}
|
|
<div className="flex items-center gap-3 flex-1">
|
|
{sidebarCollapsed && (
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-8 w-8 text-slate-400 hover:text-slate-100"
|
|
onClick={toggleSidebar}
|
|
>
|
|
<Menu className="h-4 w-4" />
|
|
</Button>
|
|
)}
|
|
|
|
{/* Global Search */}
|
|
<div className="relative w-96 max-w-full">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
|
|
<Input
|
|
type="text"
|
|
placeholder="搜索服务器、应用、工单、文档..."
|
|
value={searchValue}
|
|
onChange={(e) => setSearchValue(e.target.value)}
|
|
className="pl-9 h-9 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500 focus-visible:ring-blue-500/30"
|
|
/>
|
|
<kbd className="absolute right-3 top-1/2 -translate-y-1/2 px-1.5 py-0.5 text-xs font-mono text-slate-500 bg-slate-800 rounded">
|
|
⌘K
|
|
</kbd>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* Right: Actions */}
|
|
<div className="flex items-center gap-2">
|
|
{/* Theme Switcher */}
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-slate-100">
|
|
<Palette className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-56 bg-slate-800 border-slate-700">
|
|
<DropdownMenuLabel className="text-slate-300">主题切换</DropdownMenuLabel>
|
|
<DropdownMenuSeparator className="bg-slate-700" />
|
|
{THEME_OPTIONS.map((option) => (
|
|
<DropdownMenuItem
|
|
key={option.id}
|
|
className={cn(
|
|
'flex items-center gap-2 cursor-pointer focus:bg-slate-700 focus:text-slate-100',
|
|
theme === option.id ? 'text-slate-100' : 'text-slate-300'
|
|
)}
|
|
onClick={() => setTheme(option.id)}
|
|
>
|
|
<span
|
|
className="w-3 h-3 rounded-full shrink-0 ring-2 ring-slate-900"
|
|
style={{ backgroundColor: option.primaryColor }}
|
|
/>
|
|
<div className="flex-1 min-w-0">
|
|
<span className="text-sm font-medium">{option.name}</span>
|
|
<span className="block text-xs text-slate-500 truncate">{option.description}</span>
|
|
</div>
|
|
{theme === option.id && <Check className="h-4 w-4 text-blue-400 shrink-0" />}
|
|
</DropdownMenuItem>
|
|
))}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
|
|
{/* Notifications */}
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-slate-100 relative">
|
|
<Bell className="h-4 w-4" />
|
|
{unreadCount > 0 && (
|
|
<span className="absolute -top-0.5 -right-0.5 h-4 w-4 rounded-full bg-red-500 text-[10px] font-medium text-white flex items-center justify-center">
|
|
{unreadCount > 99 ? '99+' : unreadCount}
|
|
</span>
|
|
)}
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-80 bg-slate-800 border-slate-700">
|
|
<DropdownMenuLabel className="flex items-center justify-between text-slate-300">
|
|
<span>通知</span>
|
|
{unreadCount > 0 && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-6 text-xs text-slate-400 hover:text-slate-100"
|
|
onClick={markAllAsRead}
|
|
>
|
|
<CheckCheck className="h-3 w-3 mr-1" />
|
|
全部已读
|
|
</Button>
|
|
)}
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuSeparator className="bg-slate-700" />
|
|
<div className="max-h-80 overflow-y-auto">
|
|
{notifications.length === 0 ? (
|
|
<div className="py-8 text-center text-slate-500">
|
|
<Bell className="h-8 w-8 mx-auto mb-2 opacity-50" />
|
|
<p className="text-sm">暂无通知</p>
|
|
</div>
|
|
) : (
|
|
notifications.slice(0, 10).map((notification) => (
|
|
<DropdownMenuItem
|
|
key={notification.id}
|
|
className={cn(
|
|
'flex items-start gap-3 p-3 cursor-pointer focus:bg-slate-700',
|
|
!notification.read && 'bg-slate-700/30'
|
|
)}
|
|
onClick={() => markAsRead(notification.id)}
|
|
>
|
|
{getNotificationIcon(notification.type)}
|
|
<div className="flex-1 min-w-0">
|
|
<p className={cn('text-sm font-medium', !notification.read ? 'text-slate-200' : 'text-slate-400')}>
|
|
{notification.title}
|
|
</p>
|
|
<p className="text-xs text-slate-500 mt-0.5 line-clamp-2">{notification.message}</p>
|
|
<p className="text-xs text-slate-600 mt-1">
|
|
{formatDistanceToNow(notification.timestamp)}
|
|
</p>
|
|
</div>
|
|
{!notification.read && (
|
|
<span className="w-2 h-2 rounded-full bg-blue-500 mt-1" />
|
|
)}
|
|
</DropdownMenuItem>
|
|
))
|
|
)}
|
|
</div>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
|
|
<Separator orientation="vertical" className="h-6 bg-slate-800" />
|
|
|
|
{/* User Menu */}
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" className="h-8 gap-2 px-2 text-slate-300 hover:text-slate-100">
|
|
<div className="w-6 h-6 rounded-full bg-blue-600 flex items-center justify-center text-white text-xs font-medium">
|
|
{displayName.charAt(0)}
|
|
</div>
|
|
<span className="hidden md:inline text-sm">{displayName}</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-48 bg-slate-800 border-slate-700">
|
|
<DropdownMenuLabel className="text-slate-300">我的账号</DropdownMenuLabel>
|
|
<DropdownMenuSeparator className="bg-slate-700" />
|
|
<DropdownMenuItem className="text-slate-300 focus:bg-slate-700 focus:text-slate-100">
|
|
<User className="h-4 w-4 mr-2" />
|
|
个人中心
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem className="text-slate-300 focus:bg-slate-700 focus:text-slate-100">
|
|
<Settings className="h-4 w-4 mr-2" />
|
|
账号设置
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator className="bg-slate-700" />
|
|
<DropdownMenuItem className="text-red-400 focus:bg-slate-700 focus:text-red-400" onClick={handleLogout}>
|
|
<LogOut className="h-4 w-4 mr-2" />
|
|
退出登录
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
{tabs.length > 0 && (
|
|
<div className="flex items-center h-9 px-2 bg-slate-950 border-b border-slate-800 overflow-x-auto">
|
|
{tabs.map((tab) => (
|
|
<div
|
|
key={tab.id}
|
|
className={cn(
|
|
'group flex items-center gap-2 px-3 py-1.5 text-sm border-r border-slate-800 cursor-pointer transition-colors whitespace-nowrap',
|
|
activeTab === tab.id
|
|
? 'bg-slate-900 text-slate-100'
|
|
: 'text-slate-500 hover:text-slate-300 hover:bg-slate-900/50'
|
|
)}
|
|
onClick={() => setActiveTab(tab.id)}
|
|
>
|
|
<span>{tab.title}</span>
|
|
{tab.closable && (
|
|
<button
|
|
className="opacity-0 group-hover:opacity-100 p-0.5 rounded hover:bg-slate-700 transition-all"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
removeTab(tab.id);
|
|
}}
|
|
>
|
|
<X className="h-3 w-3" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</header>
|
|
);
|
|
}
|