71 lines
2.0 KiB
TypeScript
71 lines
2.0 KiB
TypeScript
'use client'
|
|
import {useProfileStore} from '@/components/stores-provider'
|
|
import {Button} from '@/components/ui/button'
|
|
import {Avatar, AvatarFallback, AvatarImage} from '@/components/ui/avatar'
|
|
import {LoaderIcon, LogOutIcon, UserIcon, UserPenIcon} from 'lucide-react'
|
|
import {usePathname, useRouter} from 'next/navigation'
|
|
import {logout} from '@/actions/auth'
|
|
import {HoverCard, HoverCardContent, HoverCardTrigger} from '@/components/ui/hover-card'
|
|
import {User} from '@/lib/models'
|
|
|
|
type UserCenterProps = {
|
|
profile: User
|
|
}
|
|
|
|
export default function UserCenter(props: UserCenterProps) {
|
|
const router = useRouter()
|
|
|
|
// 登录控制
|
|
const refreshProfile = useProfileStore(store => store.refreshProfile)
|
|
const doLogout = async () => {
|
|
const resp = await logout()
|
|
if (resp.success) {
|
|
refreshProfile().then()
|
|
router.replace('/')
|
|
}
|
|
}
|
|
|
|
// 展示与跳转
|
|
const pathname = usePathname()
|
|
const toAdminPage = () => {
|
|
if (!pathname.startsWith('/admin')) {
|
|
router.push('/admin')
|
|
}
|
|
}
|
|
|
|
return (
|
|
<HoverCard openDelay={150} closeDelay={150}>
|
|
<HoverCardTrigger>
|
|
<Button
|
|
theme="ghost"
|
|
className="flex gap-2 items-center h-12"
|
|
onClick={toAdminPage}
|
|
>
|
|
<Avatar>
|
|
<AvatarImage src={props.profile.avatar} alt="avatar"/>
|
|
<AvatarFallback className="bg-primary-muted"><UserIcon/></AvatarFallback>
|
|
</Avatar>
|
|
<span>{props.profile.name}</span>
|
|
</Button>
|
|
</HoverCardTrigger>
|
|
<HoverCardContent className="w-36 p-1" align="end">
|
|
<Button
|
|
theme="ghost"
|
|
className="w-full justify-start text-sm h-9 px-3"
|
|
onClick={() => router.push('/admin/profile')}>
|
|
<UserPenIcon/>
|
|
个人中心
|
|
</Button>
|
|
<Button
|
|
theme="ghost"
|
|
color="fail"
|
|
className="w-full justify-start text-sm h-9 px-3"
|
|
onClick={doLogout}>
|
|
<LogOutIcon/>
|
|
退出登录
|
|
</Button>
|
|
</HoverCardContent>
|
|
</HoverCard>
|
|
)
|
|
}
|