为导航栏添加缩窄后弹出提示功能

src/app/admin/_client/navbar.tsx

@@ -1,11 +1,12 @@
 'use client'
-import {ReactNode} from 'react'
+import {ReactNode, useState} from 'react'
 import {merge} from '@/lib/utils'
 import {useLayoutStore} from '@/components/providers/StoreProvider'
 import Link from 'next/link'
 import Image from 'next/image'
 import logoAvatar from '../_assets/logo-avatar.svg'
 import logoText from '../_assets/logo-text.svg'
+import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from '@/components/ui/tooltip'
 
 export type NavbarProps = {}
 
@@ -41,20 +42,22 @@ export default function Navbar(props: NavbarProps) {
         `flex-auto overflow-auto`,
         `group-data-[expand=true]:px-4 group-data-[expand=false]:px-3`,
       )}>
-        <NavItem href={'/admin'} icon={`🏠`} label={`账户总览`}/>
-        <NavTitle label={`个人信息`}/>
-        <NavItem href={`/admin/profile`} icon={`📝`} label={`个人中心`}/>
-        <NavItem href={`/admin/identify`} icon={`🆔`} label={`实名认证`}/>
-        <NavItem href={`/admin/whitelist`} icon={`🔒`} label={`白名单`}/>
-        <NavItem href={`/admin/bills`} icon={`💰`} label={`我的账单`}/>
-        <NavTitle label={`套餐管理`}/>
-        <NavItem href={`/admin/purchase`} icon={`🛒`} label={`购买套餐`}/>
-        <NavItem href={`/admin/resources`} icon={`📦`} label={`套餐管理`}/>
-        <NavTitle label={`IP 管理`}/>
-        <NavItem href={`/admin/extract`} icon={`📤`} label={`提取 IP`}/>
-        <NavItem href={`/admin/channels`} icon={`👁️`} label={`IP 管理`}/>
-        <NavItem href={`/admin`} icon={`📜`} label={`提取记录`}/>
-        <NavItem href={`/admin`} icon={`🗂️`} label={`使用记录`}/>
+        <TooltipProvider>
+          <NavItem href={'/admin'} icon={`🏠`} label={`账户总览`} expand={navbar}/>
+          <NavTitle label={`个人信息`}/>
+          <NavItem href={`/admin/profile`} icon={`📝`} label={`个人中心`} expand={navbar}/>
+          <NavItem href={`/admin/identify`} icon={`🆔`} label={`实名认证`} expand={navbar}/>
+          <NavItem href={`/admin/whitelist`} icon={`🔒`} label={`白名单`} expand={navbar}/>
+          <NavItem href={`/admin/bills`} icon={`💰`} label={`我的账单`} expand={navbar}/>
+          <NavTitle label={`套餐管理`}/>
+          <NavItem href={`/admin/purchase`} icon={`🛒`} label={`购买套餐`} expand={navbar}/>
+          <NavItem href={`/admin/resources`} icon={`📦`} label={`套餐管理`} expand={navbar}/>
+          <NavTitle label={`IP 管理`}/>
+          <NavItem href={`/admin/extract`} icon={`📤`} label={`提取 IP`} expand={navbar}/>
+          <NavItem href={`/admin/channels`} icon={`👁️`} label={`IP 管理`} expand={navbar}/>
+          <NavItem href={`/admin`} icon={`📜`} label={`提取记录`} expand={navbar}/>
+          <NavItem href={`/admin`} icon={`🗂️`} label={`使用记录`} expand={navbar}/>
+        </TooltipProvider>
       </section>
     </nav>
   )
@@ -86,21 +89,38 @@ function NavItem(props: {
   href: string
   icon?: ReactNode
   label: string
+  expand?: boolean
 }) {
+
+  const [open, setOpen] = useState(false)
+
+  const handleOpenChange = (open: boolean) => {
+    if (!props.expand) {
+      setOpen(open)
+    }
+  }
+
   return (
-    <Link className={merge(
-      `transition-[padding] duration-300 ease-in-out`,
-      `flex items-center rounded-md gap-2 whitespace-nowrap`,
-      `hover:bg-gray-100`,
-      `group-data-[expand=true]:px-4`,
-    )} href={props.href}>
-      <span className={`flex-none w-10 h-10 flex items-center justify-center`}>{props.icon}</span>
-      <span className={merge(
-        `flex-auto`,
-        `transition-[width,opacity] duration-300 ease-in-out`,
-        `group-data-[expand=true]:w-auto group-data-[expand=true]:opacity-100`,
-        `group-data-[expand=false]:w-0 group-data-[expand=false]:opacity-0`,
-      )}>{props.label}</span>
-    </Link>
+    <Tooltip open={open} onOpenChange={handleOpenChange}>
+      <TooltipTrigger asChild>
+        <Link className={merge(
+          `transition-[padding] duration-300 ease-in-out`,
+          `flex items-center rounded-md gap-2 whitespace-nowrap`,
+          `hover:bg-gray-100`,
+          `group-data-[expand=true]:px-4`,
+        )} href={props.href}>
+          <span className={`flex-none w-10 h-10 flex items-center justify-center`}>{props.icon}</span>
+          <span className={merge(
+            `flex-auto`,
+            `transition-[width,opacity] duration-300 ease-in-out`,
+            `group-data-[expand=true]:w-auto group-data-[expand=true]:opacity-100`,
+            `group-data-[expand=false]:w-0 group-data-[expand=false]:opacity-0`,
+          )}>{props.label}</span>
+        </Link>
+      </TooltipTrigger>
+      <TooltipContent side={`right`} sideOffset={16}>
+        <p>{props.label}</p>
+      </TooltipContent>
+    </Tooltip>
   )
 }

src/app/test/route.ts

@@ -1,14 +0,0 @@
-import {NextRequest, NextResponse} from 'next/server'
-
-export async function GET(req: NextRequest) {
-  const headers: {
-    [key: string]: string
-  } = {}
-  req.headers.forEach((value, key) => {
-    headers[key] = value
-  })
-  return NextResponse.json({
-    headers: headers,
-    cookies: req.cookies.getAll(),
-  })
-}

src/components/ui/tooltip.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import * as React from 'react'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+
+import {merge} from '@/lib/utils'
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={merge(
+          'bg-card border animate-in fade-in-0 zoom-in-95 ',
+          'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-sm text-balance',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {/*<TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />*/}
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export {Tooltip, TooltipTrigger, TooltipContent, TooltipProvider}