100 lines
3.7 KiB
TypeScript
100 lines
3.7 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { Bell, Search, User, ChevronDown, Moon, Sun, Palette } from 'lucide-react';
|
|
import { useTheme } from '../contexts/ThemeContext';
|
|
|
|
export interface userData {
|
|
userName: string;
|
|
typeName: string;
|
|
}
|
|
|
|
const Header: React.FC = () => {
|
|
const { theme, toggleTheme } = useTheme();
|
|
const isDark = theme === 'dark';
|
|
const [userData, setUserData] = useState<userData>({
|
|
userName: '',
|
|
typeName: ''
|
|
});
|
|
|
|
useEffect(() => {
|
|
let userInfo: any = localStorage.getItem('userInfo');
|
|
if (userInfo) {
|
|
userInfo = JSON.parse(userInfo);
|
|
setUserData(userInfo);
|
|
}
|
|
}, []);
|
|
return (
|
|
<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 className="relative">
|
|
<Search className={`absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 ${isDark ? 'text-slate-500' : 'text-red-200'}`} />
|
|
<input
|
|
type="text"
|
|
placeholder="搜索场景、智能体、任务..."
|
|
className={`w-80 pl-10 pr-4 py-2 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-white/20 transition-all duration-200 theme-transition ${
|
|
isDark
|
|
? 'bg-slate-800/50 border border-blue-800/30 text-white placeholder-slate-500'
|
|
: 'bg-red-700 border border-red-800 text-white placeholder-red-200'
|
|
}`}
|
|
/>
|
|
</div> */}
|
|
</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 className={`relative p-2 rounded-lg transition-colors ${
|
|
isDark ? 'hover:bg-slate-800/50' : 'hover:bg-red-500'
|
|
}`}>
|
|
<Bell className={`w-5 h-5 ${isDark ? 'text-slate-400' : 'text-white'}`} />
|
|
<span className={`absolute top-1 right-1 w-2 h-2 rounded-full ${isDark ? 'bg-cyan-500' : 'bg-white'}`} />
|
|
</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 ${isDark ? 'text-white' : 'text-white'}`}>{userData.userName}</p>
|
|
<p className={`text-xs ${isDark ? 'text-blue-400/60' : 'text-red-200'}`}>{userData.typeName}</p>
|
|
</div>
|
|
{/* <ChevronDown className={`w-4 h-4 ${isDark ? 'text-slate-500' : 'text-white'}`} /> */}
|
|
</button>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default Header;
|