封装 Header 和 Navbar 组件，调整用户界面

src/app/admin/_client/header.tsx

@@ -0,0 +1,42 @@
+'use client'
+import {PanelLeftCloseIcon, PanelLeftOpenIcon} from 'lucide-react'
+import {Button} from '@/components/ui/button'
+import Profile from './profile'
+import {useLayoutStore} from '@/components/providers/StoreProvider'
+import {merge} from '@/lib/utils'
+
+export type HeaderProps = {}
+
+export default function Header(props: HeaderProps) {
+
+  const navbar = useLayoutStore(store => store.navbar)
+  const toggleNavbar = useLayoutStore(store => store.toggleNavbar)
+
+  return (
+    <header className={merge(
+      `flex-none h-16`,
+      `flex items-stretch`,
+    )}>
+      {/* left */}
+      <div className={`flex-auto flex items-center gap-2`}>
+        <Button
+          theme="ghost"
+          className="w-9 h-9"
+          onClick={toggleNavbar}>
+          {navbar
+            ? <PanelLeftCloseIcon/>
+            : <PanelLeftOpenIcon/>
+          }
+        </Button>
+        <span>
+          欢迎来到，蓝狐代理
+        </span>
+      </div>
+
+      {/* right */}
+      <div className={`flex-none flex items-center justify-end pr-4`}>
+        <Profile/>
+      </div>
+    </header>
+  )
+}