c2d9aaedc9
主要变更： - 使用 shadcn/ui 重构 UI 组件库 - 实现 Zustand 状态管理（authStore、uiStore） - 使用 axios 封装 HTTP 客户端，支持 token 自动刷新和加密 - 添加登录/注册表单，支持登录后跳转回原页面 - 实现 Dashboard 布局（Sidebar、Header、UserNav） - 添加用户管理页面（DataTable、分页、编辑弹窗） - 添加个人中心和系统设置页面 - 实现全局错误边界和 ErrorBoundary 组件 - 使用 Next.js 16 proxy.ts 替代 middleware.ts - 修复 ThemeToggle 和 LoginForm 的水合错误 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
81 lines
2.4 KiB
TypeScript
81 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import { LogOut, User, Settings } from 'lucide-react';
|
|
import { useRouter } from 'next/navigation';
|
|
|
|
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuGroup,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu';
|
|
import { performLogout } from '@/lib/auth';
|
|
import { useAuthStore } from '@/stores';
|
|
|
|
export function UserNav() {
|
|
const router = useRouter();
|
|
const { user } = useAuthStore();
|
|
|
|
const handleLogout = () => {
|
|
performLogout({ showToast: true });
|
|
};
|
|
|
|
if (!user) {
|
|
return (
|
|
<Button variant="ghost" size="sm" onClick={() => router.push('/login')}>
|
|
登录
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
// 获取用户名首字母作为头像
|
|
const initials = user.name
|
|
? user.name.slice(0, 2).toUpperCase()
|
|
: user.email.slice(0, 2).toUpperCase();
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" className="relative h-9 w-9 rounded-full">
|
|
<Avatar className="h-9 w-9">
|
|
<AvatarFallback className="bg-primary text-primary-foreground">
|
|
{initials}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="w-56" align="end" forceMount>
|
|
<DropdownMenuLabel className="font-normal">
|
|
<div className="flex flex-col space-y-1">
|
|
<p className="text-sm font-medium leading-none">{user.name}</p>
|
|
<p className="text-xs leading-none text-muted-foreground">
|
|
{user.email}
|
|
</p>
|
|
</div>
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem onClick={() => router.push('/profile')}>
|
|
<User className="mr-2 h-4 w-4" />
|
|
个人中心
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => router.push('/settings')}>
|
|
<Settings className="mr-2 h-4 w-4" />
|
|
系统设置
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={handleLogout} className="text-destructive">
|
|
<LogOut className="mr-2 h-4 w-4" />
|
|
退出登录
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|