attacker
37c657987b
- unused-vars 全清零: 删除未用 import + 前缀 _ - catch (e: any) 94处移除显式标注 (strict=false 隐式推断) - Record<string,any>→Record<string,unknown> 安全替换168处 (无属性访问场景) - tsc -b 零错误, npm run build 通过 - 9/9 API 回归测试通过
314 lines
13 KiB
TypeScript
314 lines
13 KiB
TypeScript
import { useCallback, useEffect } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { cn } from '@/lib/utils';
|
|
import { useThemeStore, useNotificationStore, useUserStore } from '@/store';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu';
|
|
import {
|
|
Bell,
|
|
Menu,
|
|
Settings,
|
|
User,
|
|
LogOut,
|
|
CheckCheck,
|
|
AlertTriangle,
|
|
Info,
|
|
CheckCircle,
|
|
Palette,
|
|
Check,
|
|
} from 'lucide-react';
|
|
import { formatDistanceToNow } from '@/lib/utils';
|
|
import { useTheme, THEME_OPTIONS } from '@/hooks/useTheme';
|
|
|
|
// Keyboard shortcut handler — Cmd/Ctrl+B 切换侧边栏
|
|
function useKeyboardShortcuts() {
|
|
useEffect(() => {
|
|
const handler = (e: KeyboardEvent) => {
|
|
if ((e.metaKey || e.ctrlKey) && e.key === 'b') {
|
|
e.preventDefault();
|
|
window.dispatchEvent(new CustomEvent('toggle-sidebar'));
|
|
}
|
|
};
|
|
window.addEventListener('keydown', handler);
|
|
return () => window.removeEventListener('keydown', handler);
|
|
}, []);
|
|
}
|
|
|
|
export function Header() {
|
|
const { sidebarCollapsed, toggleSidebar } = useThemeStore();
|
|
const { notifications, unreadCount, markAsRead, markAllAsRead } = useNotificationStore();
|
|
const { user, logout } = useUserStore();
|
|
const { theme, setTheme } = useTheme();
|
|
const navigate = useNavigate();
|
|
useKeyboardShortcuts();
|
|
|
|
const handleLogout = () => {
|
|
logout();
|
|
window.location.href = '/login';
|
|
};
|
|
|
|
const displayName = user?.real_name || user?.username || '管理员';
|
|
|
|
const getNotificationIcon = useCallback((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={cn(
|
|
'fixed top-0 right-0 z-30 h-[var(--header-height)] bg-[var(--dg-bg-secondary)]/95 backdrop-blur-md',
|
|
'border-b border-[var(--dg-border)] transition-[margin] duration-300 ease-in-out',
|
|
'supports-[backdrop-filter]:bg-[var(--dg-bg-secondary)]/75',
|
|
)}
|
|
style={{ marginLeft: 'var(--sidebar-width)', left: 0 }}
|
|
>
|
|
<div className="flex items-center justify-between h-full px-4">
|
|
{/* Left: Toggle & Search */}
|
|
<div className="flex items-center gap-3 flex-1 min-w-0">
|
|
{/* Sidebar Toggle */}
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-8 w-8 text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)] flex-shrink-0"
|
|
onClick={toggleSidebar}
|
|
title={sidebarCollapsed ? '展开侧边栏' : '收起侧边栏'}
|
|
>
|
|
<Menu className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Right: Actions */}
|
|
<div className="flex items-center gap-1.5 flex-shrink-0">
|
|
{/* Theme Switcher */}
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-8 w-8 text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]"
|
|
title="切换主题"
|
|
>
|
|
<Palette className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
align="end"
|
|
className="w-60 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]"
|
|
style={{ boxShadow: 'var(--shadow-dropdown)' }}
|
|
>
|
|
<DropdownMenuLabel className="text-[var(--dg-text-secondary)]">主题切换</DropdownMenuLabel>
|
|
<DropdownMenuSeparator className="bg-[var(--dg-border)]" />
|
|
{THEME_OPTIONS.map((option) => (
|
|
<DropdownMenuItem
|
|
key={option.id}
|
|
className={cn(
|
|
'flex items-center gap-2.5 cursor-pointer transition-colors',
|
|
'focus:bg-[var(--dg-bg-hover)] focus:text-[var(--dg-text-primary)]',
|
|
theme === option.id
|
|
? 'text-[var(--dg-text-primary)]'
|
|
: 'text-[var(--dg-text-secondary)]',
|
|
)}
|
|
onClick={() => setTheme(option.id)}
|
|
>
|
|
<span
|
|
className="w-3.5 h-3.5 rounded-full shrink-0 ring-2"
|
|
style={{
|
|
backgroundColor: option.primaryColor,
|
|
boxShadow: '0 0 0 2px var(--dg-bg-primary)',
|
|
}}
|
|
/>
|
|
<div className="flex-1 min-w-0">
|
|
<span className="text-sm font-medium">{option.name}</span>
|
|
<span className="block text-xs text-[var(--dg-text-muted)] truncate">
|
|
{option.description}
|
|
</span>
|
|
</div>
|
|
{theme === option.id && (
|
|
<Check className="h-4 w-4 text-[var(--dg-blue)] shrink-0" />
|
|
)}
|
|
</DropdownMenuItem>
|
|
))}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
|
|
{/* Notifications */}
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-8 w-8 text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)] relative"
|
|
title="通知"
|
|
>
|
|
<Bell className="h-4 w-4" />
|
|
{unreadCount > 0 && (
|
|
<span className="absolute -top-0.5 -right-0.5 h-4.5 w-4.5 rounded-full bg-red-500 text-[10px] font-semibold text-white flex items-center justify-center animate-scale-in">
|
|
{unreadCount > 99 ? '99+' : unreadCount}
|
|
</span>
|
|
)}
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
align="end"
|
|
className="w-96 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] p-0"
|
|
style={{ boxShadow: 'var(--shadow-dropdown)' }}
|
|
>
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between px-4 py-3 border-b border-[var(--dg-border)]">
|
|
<span className="text-sm font-medium text-[var(--dg-text-primary)]">
|
|
通知
|
|
</span>
|
|
{unreadCount > 0 && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-7 text-xs text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]"
|
|
onClick={markAllAsRead}
|
|
>
|
|
<CheckCheck className="h-3.5 w-3.5 mr-1" />
|
|
全部已读
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Notification List */}
|
|
<div className="max-h-80 overflow-y-auto scrollbar-thin">
|
|
{notifications.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center py-10 text-[var(--dg-text-muted)]">
|
|
<Bell className="h-10 w-10 mb-3 opacity-30" />
|
|
<p className="text-sm">暂无通知</p>
|
|
</div>
|
|
) : (
|
|
notifications.slice(0, 10).map((notification) => (
|
|
<div
|
|
key={notification.id}
|
|
className={cn(
|
|
'flex items-start gap-3 px-4 py-3 cursor-pointer transition-colors',
|
|
'hover:bg-[var(--dg-bg-hover)] border-b border-[var(--dg-border)] last:border-0',
|
|
!notification.read && 'bg-[var(--dg-blue)]/[0.04]',
|
|
)}
|
|
onClick={() => markAsRead(notification.id)}
|
|
>
|
|
<div className="mt-0.5 flex-shrink-0">
|
|
{getNotificationIcon(notification.type)}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p
|
|
className={cn(
|
|
'text-sm font-medium',
|
|
!notification.read
|
|
? 'text-[var(--dg-text-primary)]'
|
|
: 'text-[var(--dg-text-secondary)]',
|
|
)}
|
|
>
|
|
{notification.title}
|
|
</p>
|
|
<p className="text-xs text-[var(--dg-text-muted)] mt-0.5 line-clamp-2">
|
|
{notification.message}
|
|
</p>
|
|
<p className="text-xs text-[var(--dg-text-muted)]/60 mt-1">
|
|
{formatDistanceToNow(notification.timestamp)}
|
|
</p>
|
|
</div>
|
|
{!notification.read && (
|
|
<span className="w-2 h-2 rounded-full bg-[var(--dg-blue)] mt-2 flex-shrink-0" />
|
|
)}
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
{notifications.length > 0 && (
|
|
<div className="px-4 py-2 border-t border-[var(--dg-border)] text-center">
|
|
<button
|
|
className="text-xs text-[var(--dg-text-muted)] hover:text-[var(--dg-blue)] transition-colors"
|
|
onClick={() => navigate('/alert-center')}
|
|
>
|
|
查看全部通知
|
|
</button>
|
|
</div>
|
|
)}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
|
|
<Separator orientation="vertical" className="h-5 bg-[var(--dg-border)] mx-1" />
|
|
|
|
{/* User Menu */}
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
className="h-8 gap-2 px-2 text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]"
|
|
>
|
|
<div className="w-7 h-7 rounded-full bg-gradient-to-br from-[var(--dg-blue)] to-[var(--dg-purple)] flex items-center justify-center text-white text-xs font-bold">
|
|
{displayName.charAt(0).toUpperCase()}
|
|
</div>
|
|
<span className="hidden md:inline text-sm max-w-[100px] truncate">
|
|
{displayName}
|
|
</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
align="end"
|
|
className="w-52 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]"
|
|
style={{ boxShadow: 'var(--shadow-dropdown)' }}
|
|
>
|
|
<DropdownMenuLabel className="text-[var(--dg-text-secondary)]">
|
|
<div className="flex flex-col">
|
|
<span className="text-sm font-medium text-[var(--dg-text-primary)]">
|
|
{displayName}
|
|
</span>
|
|
<span className="text-xs text-[var(--dg-text-muted)] truncate">
|
|
{user?.email || user?.username || ''}
|
|
</span>
|
|
</div>
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuSeparator className="bg-[var(--dg-border)]" />
|
|
<DropdownMenuItem
|
|
className="text-[var(--dg-text-secondary)] focus:bg-[var(--dg-bg-hover)] focus:text-[var(--dg-text-primary)] cursor-pointer"
|
|
onClick={() => navigate('/users')}
|
|
>
|
|
<User className="h-4 w-4 mr-2.5" />
|
|
个人中心
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
className="text-[var(--dg-text-secondary)] focus:bg-[var(--dg-bg-hover)] focus:text-[var(--dg-text-primary)] cursor-pointer"
|
|
onClick={() => navigate('/settings')}
|
|
>
|
|
<Settings className="h-4 w-4 mr-2.5" />
|
|
账号设置
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator className="bg-[var(--dg-border)]" />
|
|
<DropdownMenuItem
|
|
className="text-red-400 focus:bg-red-500/10 focus:text-red-400 cursor-pointer"
|
|
onClick={handleLogout}
|
|
>
|
|
<LogOut className="h-4 w-4 mr-2.5" />
|
|
退出登录
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|