From 1383f2028a8ca249ca33d5f6b25a3511fc43712a Mon Sep 17 00:00:00 2001
From: luorijun <luorijun@outlook.com>
Date: Mon, 9 Jun 2025 11:17:38 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E5=B8=83=E5=B1=80=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E4=BC=98=E5=8C=96=E5=AF=BC=E8=88=AA=E6=A0=8F?=
 =?UTF-8?q?=E5=92=8C=E5=A4=B4=E9=83=A8=E7=BB=93=E6=9E=84=EF=BC=9B=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=E6=A0=B7=E5=BC=8F=E4=BB=A5=E6=94=B9=E5=96=84=E5=93=8D?=
 =?UTF-8?q?=E5=BA=94=E5=BC=8F=E8=AE=BE=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     |  2 +-
 src/app/admin/_client/header.tsx              |  6 +-
 src/app/admin/_client/layout.tsx              | 81 +++++++++++++++++++
 src/app/admin/_client/navbar.tsx              | 19 +++--
 src/app/admin/bills/page.tsx                  |  3 +-
 src/app/admin/channels/page.tsx               |  2 +-
 src/app/admin/layout.tsx                      | 21 ++---
 src/app/admin/resources/_client/short.tsx     |  7 +-
 .../composites/user-center/index.tsx          |  6 +-
 src/components/page.tsx                       |  3 +-
 src/components/providers/StoreProvider.tsx    |  2 +-
 src/components/ui/pagination.tsx              |  2 +-
 src/lib/stores/layout.ts                      |  4 +-
 13 files changed, 119 insertions(+), 39 deletions(-)
 create mode 100644 src/app/admin/_client/layout.tsx

diff --git a/README.md b/README.md
index 260ab74..7afb6c7 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 ## TODO
 
-页头个人中心
+全局修改断点命名
 
 页头链接完善跳转地址
 
diff --git a/src/app/admin/_client/header.tsx b/src/app/admin/_client/header.tsx
index 4224e7a..99e929c 100644
--- a/src/app/admin/_client/header.tsx
+++ b/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>
diff --git a/src/app/admin/_client/layout.tsx b/src/app/admin/_client/layout.tsx
new file mode 100644
index 0000000..47534b9
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/app/admin/_client/navbar.tsx b/src/app/admin/_client/navbar.tsx
index 15938ea..303d5bc 100644
--- a/src/app/admin/_client/navbar.tsx
+++ b/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`,
diff --git a/src/app/admin/bills/page.tsx b/src/app/admin/bills/page.tsx
index d332c66..5622d4e 100644
--- a/src/app/admin/bills/page.tsx
+++ b/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}>
diff --git a/src/app/admin/channels/page.tsx b/src/app/admin/channels/page.tsx
index a28ecf0..85681e4 100644
--- a/src/app/admin/channels/page.tsx
+++ b/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}>
diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
index 554f52d..f81a37f 100644
--- a/src/app/admin/layout.tsx
+++ b/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(
-      `h-screen bg-card overflow-hidden min-w-7xl overflow-y-hidden`,
-      `flex items-stretch`,
-    )}>
-
-      <Navbar/>
-
-      <div className="flex-auto flex flex-col items-stretch">
-        <Header/>
-        {props.children}
-      </div>
-    </div>
+    <Layout
+      navbar={<Navbar/>}
+      header={<Header/>}
+      content={props.children}
+    />
   )
 }
diff --git a/src/app/admin/resources/_client/short.tsx b/src/app/admin/resources/_client/short.tsx
index 4628b97..e118345 100644
--- a/src/app/admin/resources/_client/short.tsx
+++ b/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"/>
diff --git a/src/components/composites/user-center/index.tsx b/src/components/composites/user-center/index.tsx
index 3377973..69805be 100644
--- a/src/components/composites/user-center/index.tsx
+++ b/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/>
           退出登录
diff --git a/src/components/page.tsx b/src/components/page.tsx
index a09b236..ed78e4d 100644
--- a/src/components/page.tsx
+++ b/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 */}
diff --git a/src/components/providers/StoreProvider.tsx b/src/components/providers/StoreProvider.tsx
index bcab60e..b6f065e 100644
--- a/src/components/providers/StoreProvider.tsx
+++ b/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 (
diff --git a/src/components/ui/pagination.tsx b/src/components/ui/pagination.tsx
index fb31f82..94f5ab7 100644
--- a/src/components/ui/pagination.tsx
+++ b/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">
         共
         {' '}
diff --git a/src/lib/stores/layout.ts b/src/lib/stores/layout.ts
index 52fb29a..a6054ab 100644
--- a/src/lib/stores/layout.ts
+++ b/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}
     }),