实现个人中心下拉菜单；更新部分 eslint 规则

src/components/composites/user-center/index.tsx

@@ -0,0 +1,74 @@
+'use client'
+import {useProfileStore} from '@/components/providers/StoreProvider'
+import {Button} from '@/components/ui/button'
+import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from '@/components/ui/dropdown-menu'
+import {Avatar, AvatarFallback, AvatarImage} from '@/components/ui/avatar'
+import {LogOutIcon, UserIcon, UserPenIcon} from 'lucide-react'
+import {usePathname, useRouter} from 'next/navigation'
+import {logout} from '@/actions/auth'
+import {useState} from 'react'
+import {HoverCard, HoverCardContent, HoverCardTrigger} from '@/components/ui/hover-card'
+
+export default function UserCenter() {
+  const router = useRouter()
+
+  // 登录控制
+  const profile = useProfileStore(store => store.profile)
+  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 !profile ? (
+    <Button
+      theme="fail"
+      onClick={() => router.push('/login')}>
+      去登录
+    </Button>
+  ) : (
+    <HoverCard openDelay={150} closeDelay={150}>
+      <HoverCardTrigger>
+        <Button
+          theme="ghost"
+          className="flex gap-2 items-center h-12"
+          onClick={toAdminPage}
+        >
+          <Avatar>
+            <AvatarImage src={profile.avatar} alt="avatar"/>
+            <AvatarFallback className="bg-primary-muted"><UserIcon/></AvatarFallback>
+          </Avatar>
+          <span>{profile.name}</span>
+        </Button>
+      </HoverCardTrigger>
+      <HoverCardContent className="w-40 p-1" align="end">
+        <Button
+          theme="ghost"
+          className="w-full justify-start"
+          onClick={() => router.push('/admin/profile')}>
+          <UserPenIcon/>
+          个人中心
+        </Button>
+        <Button
+          theme="ghost"
+          color="fail"
+          className="w-full justify-start"
+          onClick={doLogout}>
+          <LogOutIcon/>
+          退出登录
+        </Button>
+      </HoverCardContent>
+    </HoverCard>
+  )
+}

src/components/ui/avatar.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import * as React from 'react'
+import * as AvatarPrimitive from '@radix-ui/react-avatar'
+
+import {merge} from '@/lib/utils'
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={merge(
+        'relative flex size-8 shrink-0 overflow-hidden rounded-full',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={merge('aspect-square size-full', className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={merge(
+        'bg-muted flex size-full items-center justify-center rounded-full',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {Avatar, AvatarImage, AvatarFallback}

src/components/ui/button.tsx

@@ -18,15 +18,62 @@ export const buttonVariants = cva(
         gradient: 'bg-gradient-to-r from-blue-400 to-cyan-300 text-white ring-offset-2',
         default: 'bg-primary text-primary-foreground hover:bg-primary/90',
         outline: 'border bg-background hover:bg-secondary hover:text-secondary-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
-        ghost: 'text-foreground hover:bg-muted',
+        ghost: 'text-foreground bg-transparent',
         accent: 'bg-accent text-accent-foreground hover:bg-accent/90',
         fail: 'bg-fail text-white hover:bg-fail/90',
         warn: '',
         done: '',
       },
+      color: {
+        plain: '',
+        primary: '',
+        secondary: '',
+        accent: '',
+        done: '',
+        warn: '',
+        fail: '',
+      },
     },
+    compoundVariants: [
+      {
+        theme: 'ghost',
+        color: 'plain',
+        className: 'hover:bg-plain/10',
+      },
+      {
+        theme: 'ghost',
+        color: 'primary',
+        className: 'hover:bg-primary/10 text-primary',
+      },
+      {
+        theme: 'ghost',
+        color: 'secondary',
+        className: 'hover:bg-secondary/10 text-secondary',
+      },
+      {
+        theme: 'ghost',
+        color: 'accent',
+        className: 'hover:bg-accent/10 text-accent',
+      },
+      {
+        theme: 'ghost',
+        color: 'done',
+        className: 'hover:bg-done/10 text-done',
+      },
+      {
+        theme: 'ghost',
+        color: 'warn',
+        className: 'hover:bg-warn/10 text-warn',
+      },
+      {
+        theme: 'ghost',
+        color: 'fail',
+        className: 'hover:bg-fail/10 text-fail',
+      },
+    ],
     defaultVariants: {
       theme: 'default',
+      color: 'plain',
     },
   },
 )
@@ -34,11 +81,11 @@ export const buttonVariants = cva(
 type ButtonProps = React.ComponentProps<'button'> & VariantProps<typeof buttonVariants>
 
 export function Button(rawProps: ButtonProps) {
-  const {className, theme, ...props} = rawProps
+  const {className, theme, color, ...props} = rawProps
   return (
     <button
       {...props}
-      className={merge(buttonVariants({theme}), className)}
+      className={merge(buttonVariants({theme, color}), className)}
     />
   )
 }

src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,257 @@
+'use client'
+
+import * as React from 'react'
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+import {CheckIcon, ChevronRightIcon, CircleIcon} from 'lucide-react'
+
+import {merge} from '@/lib/utils'
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props}/>
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props}/>
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={merge(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+          className,
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props}/>
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: 'default' | 'fail'
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={merge(
+        'focus:bg-secondary focus:text-secondary-foreground data-[variant=fail]:text-fail data-[variant=fail]:focus:bg-fail/10 dark:data-[variant=fail]:focus:bg-fail/20 data-[variant=fail]:focus:text-fail data-[variant=fail]:*:[svg]:!text-fail [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={merge(
+        'focus:bg-secondary focus:text-secondary-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4"/>
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={merge(
+        'focus:bg-secondary focus:text-secondary-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current"/>
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={merge(
+        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={merge('bg-border -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={merge(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props}/>
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={merge(
+        'focus:bg-secondary focus:text-secondary-foreground data-[state=open]:bg-secondary data-[state=open]:text-secondary-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4"/>
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={merge(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

src/components/ui/hover-card.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import * as React from 'react'
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
+
+import {merge} from '@/lib/utils'
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props}/>
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props}/>
+  )
+}
+
+function HoverCardContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={merge(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg border p-4 shadow-md outline-hidden',
+          className,
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  )
+}
+
+export {HoverCard, HoverCardTrigger, HoverCardContent}