lanhu/web
2
0
Fork 0
Code Issues Actions Packages Releases 11 Activity

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

Browse Source
This commit is contained in:
luorijun
2025-06-09 11:17:38 +08:00
parent 5ba7d45e97
commit 1383f2028a
13 changed files with 119 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

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

6
src/app/admin/_client/header.tsx
View File

@@ -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>

81
src/app/admin/_client/layout.tsx Normal file
View File

@@ -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>
)
}

19
src/app/admin/_client/navbar.tsx
View File

@@ -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`,

3
src/app/admin/bills/page.tsx
View File

@@ -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}>

2
src/app/admin/channels/page.tsx
View File

@@ -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}>

21
src/app/admin/layout.tsx
View File

@@ -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}
/>
)
}

7
src/app/admin/resources/_client/short.tsx
View File

@@ -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"/>

6
src/components/composites/user-center/index.tsx
View File

@@ -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/>
退出登录

3
src/components/page.tsx
View File

@@ -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 */}

2
src/components/providers/StoreProvider.tsx
View File

@@ -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 (

2
src/components/ui/pagination.tsx
View File

@@ -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">
共
{' '}

4
src/lib/stores/layout.ts
View File

@@ -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}
}),