(auth)/layout.tsx - 认证布局

基本信息

属性	值
路径	src/app/(auth)/layout.tsx
类型	Next.js 布局组件
功能	认证页面组的共享布局

功能描述

为登录页、注册页等认证相关页面提供统一的居中布局，确保在不同屏幕尺寸下都有良好的视觉效果。

代码实现

export default function AuthLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="min-h-screen flex items-center justify-center -mt-16">
      {children}
    </div>
  );
}

布局特性

CSS 类说明

类名	作用
min-h-screen	最小高度为视口高度
flex	启用 Flexbox
items-center	垂直居中
justify-center	水平居中
-mt-16	负上边距（补偿页头高度）

布局效果

┌─────────────────────────────────┐
│         Page Header             │  ← -mt-16 补偿此区域
├─────────────────────────────────┤
│                                 │
│                                 │
│       ┌─────────────┐           │
│       │   children  │           │  ← 居中内容
│       │  (login/    │           │
│       │  register)  │           │
│       └─────────────┘           │
│                                 │
│                                 │
└─────────────────────────────────┘

应用范围

此布局应用于 (auth) 路由组下的所有页面：

路由	页面
/login	登录页
/register	注册页

技术说明

• 使用 React 的 children 属性渲染子页面内容
• 不需要 "use client" 指令（纯布局组件）
• 负边距确保内容在视觉上居中（考虑固定页头）

相关文件

• src/app/(auth)/login/page.tsx - 登录页
• src/app/(auth)/register/page.tsx - 注册页