重构布局组件，优化导航栏和头部结构；调整样式以改善响应式设计

README.md

@@ -1,6 +1,6 @@
 ## TODO
 
-页头个人中心
+全局修改断点命名
 
 页头链接完善跳转地址
 

src/app/admin/_client/header.tsx

@@ -13,21 +13,21 @@ export default function Header(props: HeaderProps) {
 
   return (
     <header className={merge(
-      `flex-none h-16`,
+      `flex-none h-16 overflow-hidden`,
       `flex items-stretch`,
     )}>
       {/* left */}
       <div className="flex-auto flex items-center gap-2">
         <Button
           theme="ghost"
-          className="w-9 h-9"
+          className="w-9 h-9 ml-4 md:ml-0"
           onClick={toggleNavbar}>
           {navbar
             ? <PanelLeftCloseIcon/>
             : <PanelLeftOpenIcon/>
           }
         </Button>
-        <span>
+        <span className="max-md:hidden">
           欢迎来到，蓝狐代理
         </span>
       </div>

src/app/admin/_client/layout.tsx

@@ -0,0 +1,81 @@
+'use client'
+import {ReactNode} from 'react'
+import {useLayoutStore} from '@/components/providers/StoreProvider'
+import {merge} from '@/lib/utils'
+import {Slot} from '@radix-ui/react-slot'
+
+type AdminLayoutProps = {
+  navbar: ReactNode
+  header: ReactNode
+  content: ReactNode
+}
+
+export default function Layout(props: AdminLayoutProps) {
+  const navbar = useLayoutStore(store => store.navbar)
+  const setNevBar = useLayoutStore(store => store.setNavbar)
+
+  return (
+    <div className="relative h-dvh overflow-hidden">
+
+      {/* 结构 */}
+      <div
+        data-expand={navbar}
+        className={merge(
+          `transition-[grid-template-columns] duration-300 ease-in-out`,
+          `w-full h-full grid`,
+          `grid-rows-[64px_1fr]`,
+          `data-[expand=true]:grid-cols-[200px_1fr]`,
+          `data-[expand=false]:grid-cols-[0px_1fr]`,
+          `md:data-[expand=false]:grid-cols-[64px_1fr]`,
+        )}
+      >
+        <div className="col-start-1 row-start-1 row-span-2 bg-card overflow-hidden relative z-20">
+          {props.navbar}
+        </div>
+
+        <div className="col-start-2 row-start-1 bg-card overflow-hidden relative z-20">
+          {props.header}
+        </div>
+
+        <svg className="col-start-2 row-start-2 w-full h-full z-20 pointer-events-none" preserveAspectRatio="none">
+          <defs>
+            <mask id="top-left-rounded-mask">
+              <rect width="100%" height="100%" fill="white"/>
+              <circle cx="16" cy="16" r="16" fill="black"/>
+              <rect x="16" y="0" width="100%" height="32" fill="black"/>
+              <rect x="0" y="16" width="32" height="100%" fill="black"/>
+              <rect x="16" y="16" width="100%" height="100%" fill="black"/>
+            </mask>
+          </defs>
+          <rect width="100%" height="100%" className="fill-card" mask="url(#top-left-rounded-mask)"/>
+        </svg>
+
+        <div
+          data-expand={navbar}
+          className={merge(
+            `md:hidden`,
+            `transition-opacity duration-300 ease-in-out`,
+            `col-start-1 row-start-1 col-span-2 row-span-2 bg-black/50 z-10`,
+            `max-md:data-[expand=true]:opacity-100 data-[expand=false]:opacity-0`,
+            `max-md:data-[expand=true]:pointer-events-auto data-[expand=false]:pointer-events-none`,
+          )}
+          onClick={() => setNevBar(false)}
+        >
+        </div>
+      </div>
+
+      {/* 内容 */}
+      <div
+        data-expand={navbar}
+        className={merge(
+          `transition-[margin] duration-300 ease-in-out`,
+          `absolute inset-0 overflow-hidden`,
+          `mt-[64px]`,
+          `md:data-[expand=true]:ml-[200px]`,
+          `md:data-[expand=false]:ml-[64px]`,
+        )}>
+        {props.content}
+      </div>
+    </div>
+  )
+}

src/app/admin/_client/navbar.tsx

@@ -1,5 +1,5 @@
 'use client'
-import {ReactNode, useState} from 'react'
+import {ComponentProps, ReactNode, useState} from 'react'
 import {merge} from '@/lib/utils'
 import {useLayoutStore} from '@/components/providers/StoreProvider'
 import Link from 'next/link'
@@ -19,7 +19,7 @@ import {Eye} from 'lucide-react'
 import {Archive} from 'lucide-react'
 import {ArchiveRestore} from 'lucide-react'
 
-export type NavbarProps = {}
+export type NavbarProps = {} & ComponentProps<'nav'>
 
 export default function Navbar(props: NavbarProps) {
   const navbar = useLayoutStore(store => store.navbar)
@@ -29,10 +29,8 @@ export default function Navbar(props: NavbarProps) {
       data-expand={navbar}
       className={merge(
         `transition-[flex-basis] duration-300 ease-in-out`,
-        `flex-none`,
         `flex flex-col overflow-hidden group`,
         `data-[expand=true]:basis-52 data-[expand=false]:basis-16`,
-        ` `,
       )}>
       {/* logo */}
       <Link
@@ -56,7 +54,7 @@ export default function Navbar(props: NavbarProps) {
       {/* routes */}
       <section className={merge(
         `transition-[padding] duration-300 ease-in-out`,
-        `flex-auto overflow-auto`,
+        `flex-auto overflow-x-hidden overflow-y-auto`,
         `group-data-[expand=true]:px-4 group-data-[expand=false]:px-3`,
       )}>
         <TooltipProvider>
@@ -119,6 +117,13 @@ function NavItem(props: {
     }
   }
 
+  const setNavbar = useLayoutStore(store => store.setNavbar)
+  const closeNavBarIfMobile = () => {
+    if (window.innerWidth < 768) {
+      setNavbar(false)
+    }
+  }
+
   return (
     <Tooltip open={open} onOpenChange={handleOpenChange}>
       <TooltipTrigger asChild>
@@ -129,7 +134,9 @@ function NavItem(props: {
             `hover:bg-gray-100`,
             `group-data-[expand=true]:px-4`,
           )}
-          href={props.href}>
+          href={props.href}
+          onClick={closeNavBarIfMobile}
+        >
           <span className="flex-none w-10 h-10 flex items-center justify-center">{props.icon}</span>
           <span className={merge(
             `flex-auto`,

src/app/admin/bills/page.tsx

@@ -96,10 +96,9 @@ export default function BillsPage(props: BillsPageProps) {
       {/* 操作区 */}
       <section className="flex justify-between flex-wrap">
         <div>
-          <h1 className="text-xl font-bold">账单管理</h1>
         </div>
 
-        <Form form={form} onSubmit={onSubmit} className="flex items-end gap-4">
+        <Form form={form} onSubmit={onSubmit} className="flex items-end gap-4 flex-wrap">
           <FormField name="type" label={<span className="text-sm">账单类型</span>}>
             {({id, field}) => (
               <Select value={field.value} onValueChange={field.onChange}>

src/app/admin/channels/page.tsx

@@ -99,7 +99,7 @@ export default function ChannelsPage(props: ChannelsPageProps) {
     <Page>
       <section className="flex justify-between">
         <div></div>
-        <Form form={filterForm} handler={filterHandler} className="flex-none flex gap-4 items-end">
+        <Form form={filterForm} handler={filterHandler} className="flex-auto flex flex-wrap gap-4 items-end">
           <FormField<FilterSchema, 'auth_type'> name="auth_type" label={<span className="text-sm">认证方式</span>}>
             {({field}) => (
               <Select value={field.value} onValueChange={field.onChange}>

src/app/admin/layout.tsx

@@ -1,7 +1,7 @@
 import {ReactNode} from 'react'
-import {merge} from '@/lib/utils'
 import Header from './_client/header'
-import Navbar from '@/app/admin/_client/navbar'
+import Navbar from './_client/navbar'
+import Layout from './_client/layout'
 
 export type AdminLayoutProps = {
   children: ReactNode
@@ -9,17 +9,10 @@ export type AdminLayoutProps = {
 
 export default async function AdminLayout(props: AdminLayoutProps) {
   return (
-    <div className={merge(
+    <Layout
-      `h-screen bg-card overflow-hidden min-w-7xl overflow-y-hidden`,
+      navbar={<Navbar/>}
-      `flex items-stretch`,
+      header={<Header/>}
-    )}>
+      content={props.children}
-
+    />
-      <Navbar/>
-
-      <div className="flex-auto flex flex-col items-stretch">
-        <Header/>
-        {props.children}
-      </div>
-    </div>
   )
 }

src/app/admin/resources/_client/short.tsx

@@ -108,19 +108,18 @@ export default function ShortResource(props: ShortResourceProps) {
     },
   })
 
-  const onSubmit = async (value: FilterSchema) => {
+  const handler = form.handleSubmit(async (value: FilterSchema) => {
     await refresh(1, data.size)
-  }
+  })
 
   return (
     <>
       {/* 操作区 */}
       <section className="flex justify-between flex-wrap">
         <div>
-
         </div>
 
-        <Form form={form} onSubmit={onSubmit} className="flex items-end gap-4 flex-wrap">
+        <Form form={form} handler={handler} className="flex items-end gap-4 flex-wrap">
           <FormField name="resource_no" label={<span className="text-sm">套餐编号</span>}>
             {({id, field}) => (
               <Input {...field} id={id} className="h-9"/>

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

@@ -52,10 +52,10 @@ export default function UserCenter() {
           <span>{profile.name}</span>
         </Button>
       </HoverCardTrigger>
-      <HoverCardContent className="w-40 p-1" align="end">
+      <HoverCardContent className="w-36 p-1" align="end">
         <Button
           theme="ghost"
-          className="w-full justify-start"
+          className="w-full justify-start text-sm h-9 px-3"
           onClick={() => router.push('/admin/profile')}>
           <UserPenIcon/>
           个人中心
@@ -63,7 +63,7 @@ export default function UserCenter() {
         <Button
           theme="ghost"
           color="fail"
-          className="w-full justify-start"
+          className="w-full justify-start text-sm h-9 px-3"
           onClick={doLogout}>
           <LogOutIcon/>
           退出登录

src/components/page.tsx

@@ -10,7 +10,8 @@ export default function Page(props: ComponentProps<'main'> & PageProps) {
     <main
       {...props}
       className={merge(
-        `flex-auto rounded-tl-xl overflow-hidden relative`,
+        `relative size-full`,
+        props.className,
       )}>
 
       {/* background */}

src/components/providers/StoreProvider.tsx

@@ -28,7 +28,7 @@ export default function StoreProvider(props: ProfileProviderProps) {
   const layout = useRef<StoreApi<LayoutStore>>(null)
   if (!layout.current) {
     console.log('📦 create layout store')
-    layout.current = createLayoutStore()
+    layout.current = createLayoutStore(window.matchMedia(`(min-width: 1024px)`).matches)
   }
 
   return (

src/components/ui/pagination.tsx

@@ -107,7 +107,7 @@ function Pagination({
   const paginationItems = generatePaginationItems()
 
   return (
-    <div className={`flex items-center justify-between gap-4 ${className || ''}`}>
+    <div className={`flex flex-wrap items-center justify-end gap-4 ${className || ''}`}>
       <div className="flex-none flex items-center gap-2 text-sm text-muted-foreground">
         共
         {' '}

src/lib/stores/layout.ts

@@ -11,9 +11,9 @@ export type LayoutActions = {
   setNavbar: (navbar: boolean) => void
 }
 
-export const createLayoutStore = () => {
+export const createLayoutStore = (open: boolean) => {
   return createStore<LayoutStore>()(setState => ({
-    navbar: true,
+    navbar: open,
     toggleNavbar: () => setState((state) => {
       return {navbar: !state.navbar}
     }),