实现响应式导航栏组件

src/app/admin/_client/header.tsx

@@ -1,11 +1,14 @@
 'use client'
 import {PanelLeftCloseIcon, PanelLeftOpenIcon} from 'lucide-react'
 import {Button} from '@/components/ui/button'
-import {useLayoutStore} from '@/components/providers/StoreProvider'
+import {useLayoutStore} from '@/app/stores'
 import {merge} from '@/lib/utils'
 import UserCenter from '@/components/composites/user-center'
+import {User} from '@/lib/models'
 
-export type HeaderProps = {}
+export type HeaderProps = {
+  profile: User
+}
 
 export default function Header(props: HeaderProps) {
   const navbar = useLayoutStore(store => store.navbar)
@@ -34,7 +37,7 @@ export default function Header(props: HeaderProps) {
 
       {/* right */}
       <div className="flex-none flex items-center justify-end pr-4">
-        <UserCenter/>
+        <UserCenter profile={props.profile}/>
       </div>
     </header>
   )

src/app/admin/_client/layout.tsx

@@ -1,6 +1,6 @@
 'use client'
 import {ReactNode} from 'react'
-import {useLayoutStore} from '@/components/providers/StoreProvider'
+import {useLayoutStore} from '@/app/stores'
 import {merge} from '@/lib/utils'
 
 type AdminLayoutProps = {

src/app/admin/_client/navbar.tsx

@@ -1,7 +1,7 @@
 'use client'
 import {ComponentProps, ReactNode, useState} from 'react'
 import {merge} from '@/lib/utils'
-import {useLayoutStore} from '@/components/providers/StoreProvider'
+import {useLayoutStore} from '@/app/stores'
 import Link from 'next/link'
 import Image from 'next/image'
 import logoAvatar from '../_assets/logo-avatar.svg'

src/app/admin/identify/page.tsx

@@ -11,7 +11,7 @@ import {Identify} from '@/actions/user'
 import {toast} from 'sonner'
 import {useEffect, useRef, useState} from 'react'
 import * as qrcode from 'qrcode'
-import {useProfileStore} from '@/components/providers/StoreProvider'
+import {useProfileStore} from '@/app/stores'
 import {merge} from '@/lib/utils'
 import banner from './_assets/banner.webp'
 import personal from './_assets/personal.webp'

src/app/admin/layout.tsx

@@ -2,16 +2,24 @@ import {ReactNode} from 'react'
 import Header from './_client/header'
 import Navbar from './_client/navbar'
 import Layout from './_client/layout'
+import {getProfile} from '@/actions/auth'
+import {redirect} from 'next/navigation'
 
 export type AdminLayoutProps = {
   children: ReactNode
 }
 
 export default async function AdminLayout(props: AdminLayoutProps) {
+  const resp = await getProfile()
+  const profile = resp.success ? resp.data : null
+  if (!profile) {
+    redirect('/login')
+  }
+
   return (
     <Layout
       navbar={<Navbar/>}
-      header={<Header/>}
+      header={<Header profile={profile}/>}
       content={props.children}
     />
   )

src/app/admin/profile/page.tsx

@@ -7,7 +7,7 @@ import {Button} from '@/components/ui/button'
 import {useForm} from 'react-hook-form'
 import {zodResolver} from '@hookform/resolvers/zod'
 import * as z from 'zod'
-import {useProfileStore} from '@/components/providers/StoreProvider'
+import {useProfileStore} from '@/app/stores'
 import {toast} from 'sonner'
 import {CheckCircle, QrCodeIcon} from 'lucide-react'
 import * as qrcode from 'qrcode'