90 lines
3.3 KiB
TypeScript
90 lines
3.3 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Bell, Search, User, ChevronDown, Moon, Palette } from 'lucide-react';
|
|
import { NotificationDialog } from '@/components/workspace/notification-dialog';
|
|
import { useTheme } from '../contexts/ThemeContext';
|
|
import { useUnreadCount } from '@/core/notifications';
|
|
|
|
const Header: React.FC = () => {
|
|
const { theme, toggleTheme } = useTheme();
|
|
const isDark = theme === 'dark';
|
|
const [notificationOpen, setNotificationOpen] = useState(false);
|
|
const { data: unreadCount = 0 } = useUnreadCount();
|
|
|
|
return (
|
|
<>
|
|
<NotificationDialog
|
|
open={notificationOpen}
|
|
onOpenChange={setNotificationOpen}
|
|
/>
|
|
<header className={`h-16 flex items-center justify-between px-6 theme-transition ${
|
|
isDark
|
|
? 'bg-slate-900/50 backdrop-blur-xl border-b border-blue-800/30'
|
|
: 'bg-red-600 border-b border-red-700'
|
|
}`}>
|
|
{/* 左侧 - 搜索框 */}
|
|
<div className="flex items-center gap-4">
|
|
|
|
</div>
|
|
|
|
{/* 右侧 - 用户信息和通知 */}
|
|
<div className="flex items-center gap-4">
|
|
{/* 主题切换按钮 */}
|
|
<button
|
|
onClick={toggleTheme}
|
|
className={`p-2 rounded-lg transition-all duration-200 ${
|
|
isDark
|
|
? 'hover:bg-slate-800/50 text-slate-400 hover:text-white'
|
|
: 'hover:bg-red-500 text-white'
|
|
}`}
|
|
title={isDark ? '切换到红白主题' : '切换到深色主题'}
|
|
>
|
|
{isDark ? <Palette className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
|
|
</button>
|
|
|
|
{/* 通知 */}
|
|
<button
|
|
type="button"
|
|
onClick={() => setNotificationOpen(true)}
|
|
className={`relative p-2 rounded-lg transition-colors ${
|
|
isDark ? 'hover:bg-slate-800/50' : 'hover:bg-red-500'
|
|
}`}
|
|
title="通知"
|
|
>
|
|
<Bell className={`w-5 h-5 ${isDark ? 'text-slate-400' : 'text-white'}`} />
|
|
{unreadCount > 0 && (
|
|
<span
|
|
className={`absolute top-1 right-1 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-medium leading-none text-white ${
|
|
isDark ? 'bg-cyan-500' : 'bg-white text-red-600'
|
|
}`}
|
|
>
|
|
{unreadCount > 99 ? '99+' : unreadCount}
|
|
</span>
|
|
)}
|
|
</button>
|
|
|
|
{/* 分隔线 */}
|
|
<div className={`w-px h-8 ${isDark ? 'bg-blue-800/30' : 'bg-red-500'}`} />
|
|
|
|
{/* 用户信息 */}
|
|
<button className={`flex items-center gap-3 px-3 py-1.5 rounded-lg transition-colors ${
|
|
isDark ? 'hover:bg-slate-800/50' : 'hover:bg-red-500'
|
|
}`}>
|
|
<div className={`w-8 h-8 rounded-full flex items-center justify-center ${
|
|
isDark ? 'bg-gradient-to-br from-blue-500 to-cyan-400' : 'bg-white'
|
|
}`}>
|
|
<User className={`w-4 h-4 ${isDark ? 'text-white' : 'text-red-600'}`} />
|
|
</div>
|
|
<div className="text-left">
|
|
<p className="text-sm font-medium text-white">张策略</p>
|
|
<p className={`text-xs ${isDark ? 'text-blue-400/60' : 'text-red-200'}`}>策略分析师</p>
|
|
</div>
|
|
<ChevronDown className={`w-4 h-4 ${isDark ? 'text-slate-500' : 'text-white'}`} />
|
|
</button>
|
|
</div>
|
|
</header>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Header;
|