89 lines
3.4 KiB
TypeScript
89 lines
3.4 KiB
TypeScript
|
import { useState } from 'react';
|
||
|
|
import { User, LogOut, LayoutDashboard, LogIn } from 'lucide-react';
|
||
|
|
|
||
|
|
interface UserAuthProps {
|
||
|
|
user: any;
|
||
|
|
onOpenAuth: () => void;
|
||
|
|
onLogout: () => void;
|
||
|
|
onNavigateToAdmin: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function UserAuth({ user, onOpenAuth, onLogout, onNavigateToAdmin }: UserAuthProps) {
|
||
|
|
const [showUserMenu, setShowUserMenu] = useState(false);
|
||
|
|
|
||
|
|
if (!user) {
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
onClick={onOpenAuth}
|
||
|
|
className="flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 hover:bg-white/20 backdrop-blur-md border border-white/10 text-white font-medium text-sm transition-all duration-200 shadow-lg hover:shadow-blue-500/20 pointer-events-auto"
|
||
|
|
>
|
||
|
|
<LogIn size={16} />
|
||
|
|
<span>登录 / 注册</span>
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="relative pointer-events-auto">
|
||
|
|
{/* Overlay for closing menu */}
|
||
|
|
{showUserMenu && (
|
||
|
|
<div
|
||
|
|
className="fixed inset-0 z-40"
|
||
|
|
onClick={() => setShowUserMenu(false)}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<button
|
||
|
|
onClick={() => setShowUserMenu(!showUserMenu)}
|
||
|
|
className="flex items-center gap-3 pl-2 pr-4 py-1.5 rounded-full bg-black/40 hover:bg-black/60 backdrop-blur-md border border-white/10 text-white transition-all duration-200 relative z-50"
|
||
|
|
>
|
||
|
|
<div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center shadow-inner">
|
||
|
|
<User size={16} />
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-col items-start text-xs">
|
||
|
|
<span className="text-gray-400 leading-none mb-0.5">已登录</span>
|
||
|
|
<span className="font-bold leading-none max-w-[80px] truncate">{user.username}</span>
|
||
|
|
</div>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
{/* Dropdown Menu */}
|
||
|
|
{showUserMenu && (
|
||
|
|
<div className="absolute top-full right-0 mt-2 w-48 bg-gray-900/95 backdrop-blur-xl border border-white/10 rounded-xl shadow-2xl overflow-hidden animate-in fade-in slide-in-from-top-2 duration-200 z-50">
|
||
|
|
<div className="p-4 border-b border-white/10 bg-white/5">
|
||
|
|
<p className="text-xs text-gray-400 mb-1">账号信息</p>
|
||
|
|
<p className="text-sm font-bold text-white truncate">{user.full_name || user.username}</p>
|
||
|
|
<p className="text-xs text-gray-500 truncate">{user.email}</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="p-1">
|
||
|
|
<button
|
||
|
|
onClick={() => {
|
||
|
|
// Open admin in new tab
|
||
|
|
window.open('/admin', '_blank');
|
||
|
|
setShowUserMenu(false);
|
||
|
|
}}
|
||
|
|
className="w-full text-left px-3 py-2.5 text-sm text-gray-200 hover:bg-white/10 hover:text-white flex items-center gap-3 transition-colors rounded-lg"
|
||
|
|
>
|
||
|
|
<LayoutDashboard size={16} className="text-blue-400" />
|
||
|
|
进入后台管理
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<div className="h-px bg-white/10 my-1 mx-2"></div>
|
||
|
|
|
||
|
|
<button
|
||
|
|
onClick={() => {
|
||
|
|
onLogout();
|
||
|
|
setShowUserMenu(false);
|
||
|
|
}}
|
||
|
|
className="w-full text-left px-3 py-2.5 text-sm text-red-400 hover:bg-red-500/10 hover:text-red-300 flex items-center gap-3 transition-colors rounded-lg"
|
||
|
|
>
|
||
|
|
<LogOut size={16} />
|
||
|
|
退出登录
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|