布局组件

发布于 2025年8月29日

全文共计 1420 字

预计阅读 6 分钟

布局组件

布局组件负责控制页面的整体结构和布局，提供一致的页面框架和导航体验。

主要布局组件

1. RootLayout (根布局)

整个应用的根布局，包含全局状态和主题管理。

基本结构

// src/app/layout.tsx
import { ClerkProvider } from '@clerk/nextjs';
import { ThemeProvider } from '@/components/theme/theme-provider';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ClerkProvider>
      <html lang="zh-CN" suppressHydrationWarning>
        <body>
          <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
            <div className="flex min-h-screen flex-col">
              <MainNavbar />
              <main className="flex-auto">{children}</main>
              <Footer />
            </div>
          </ThemeProvider>
        </body>
      </html>
    </ClerkProvider>
  );
}

功能特性

认证集成: 通过ClerkProvider提供全局认证上下文
主题支持: 使用ThemeProvider管理明暗主题切换
响应式结构: 采用Flexbox布局确保内容区域自适应
全局状态: 提供全局状态管理和样式重置

2. MainNavbar (主导航栏)

页面顶部的主导航栏，包含网站Logo、导航链接和用户认证按钮。

基本结构

// src/components/layout/navbar/main-navbar.tsx
import { NavbarContent } from './navbar-content';

export function MainNavbar() {
  return (
    <header className="sticky top-0 z-50 w-full border-b bg-background/80 backdrop-blur">
      <div className="container flex h-16 items-center justify-between">
        <NavbarContent />
      </div>
    </header>
  );
}

功能特性

响应式设计: 在不同屏幕尺寸下自适应显示
导航链接: 提供主要页面的快速访问
用户认证: 集成认证状态显示
主题切换: 提供明暗主题切换功能

3. Footer (页脚)

页面底部的页脚组件，包含版权信息和相关链接。

基本结构

// src/components/layout/footer.tsx
export function Footer() {
  return (
    <footer className="border-t bg-background">
      <div className="container py-8 md:py-12">
        <div className="grid grid-cols-1 gap-8 md:grid-cols-4">
          <div className="md:col-span-2">
            <FooterLogo />
            <FooterDescription />
          </div>
          <FooterLinks />
          <FooterSocial />
        </div>
        <FooterCopyright />
      </div>
    </footer>
  );
}

功能特性

多列布局: 支持多列信息展示
链接导航: 提供重要页面的快速访问
社交链接: 展示社交媒体账号
版权信息: 显示版权声明和备案信息

页面布局组件

1. PageContainer (页面容器)

标准页面内容容器，提供一致的内边距和最大宽度。

基本用法

import { PageContainer } from '@/components/layout/page-container';

<PageContainer>
  <h1>页面标题</h1>
  <p>页面内容</p>
</PageContainer>

Props说明

属性名	类型	默认值	描述
className	string	-	自定义CSS类名
children	React.ReactNode	-	页面内容

功能特性

响应式内边距: 在不同屏幕尺寸下提供合适的内边距
最大宽度限制: 限制内容区域最大宽度
居中对齐: 在宽屏设备上居中显示内容
可扩展性: 支持自定义样式扩展

2. ThreeColumnLayout (三栏布局)

三栏布局组件，常用于文档和博客页面。

基本用法

import { ThreeColumnLayout } from '@/components/layout/three-column-layout';

<ThreeColumnLayout
  leftSidebar={<DocsSidebar />}
  rightSidebar={<TableOfContents />}
>
  <DocContent />
</ThreeColumnLayout>

Props说明

属性名	类型	描述
leftSidebar	React.ReactNode	左侧边栏内容
rightSidebar	React.ReactNode	右侧边栏内容
children	React.ReactNode	主内容区域

功能特性

响应式布局: 在不同屏幕尺寸下自适应显示
侧边栏控制: 支持显示/隐藏侧边栏
内容优先: 在小屏幕设备上优先显示主内容
可配置性: 支持灵活的侧边栏配置

布局工具组件

1. ResponsiveGrid (响应式网格)

响应式网格布局组件，用于展示卡片列表。

基本用法

import { ResponsiveGrid } from '@/components/layout/responsive-grid';

<ResponsiveGrid>
  <BlogCard />
  <BlogCard />
  <BlogCard />
</ResponsiveGrid>

Props说明

属性名	类型	默认值	描述
className	string	-	自定义CSS类名
children	React.ReactNode	-	网格项内容

功能特性

自适应列数: 根据屏幕宽度自动调整列数
一致间距: 保持网格项之间的一致间距
响应式断点: 在不同断点下调整布局
可扩展性: 支持自定义样式扩展

2. AppGrid (应用网格)

应用页面的网格布局组件，用于展示功能模块。

基本用法

import { AppGrid } from '@/components/layout/app-grid';

<AppGrid>
  <FeatureCard />
  <FeatureCard />
  <FeatureCard />
</AppGrid>

功能特性

模块化布局: 适用于功能模块展示
视觉层次: 提供清晰的视觉层次结构
响应式设计: 在不同设备上自适应显示
一致性: 保持与其他页面的一致性

布局状态管理

1. LayoutStore (布局状态存储)

使用Zustand管理全局布局状态。

基本用法

// src/stores/layout-store.ts
import { create } from 'zustand';

interface LayoutState {
  isSidebarOpen: boolean;
  toggleSidebar: () => void;
  closeSidebar: () => void;
}

export const useLayoutStore = create<LayoutState>((set) => ({
  isSidebarOpen: false,
  toggleSidebar: () => set((state) => ({ isSidebarOpen: !state.isSidebarOpen })),
  closeSidebar: () => set({ isSidebarOpen: false }),
}));

功能特性

状态共享: 在组件间共享布局状态
响应式更新: 状态变化时自动更新相关组件
持久化: 支持状态持久化存储
类型安全: 提供完整的TypeScript类型支持

2. useResponsiveLayout (响应式布局钩子)

自定义钩子用于检测响应式断点。

基本用法

// src/hooks/use-responsive-layout.ts
import { useMedia } from 'react-use';

export function useResponsiveLayout() {
  const isMobile = useMedia('(max-width: 768px)');
  const isTablet = useMedia('(min-width: 769px) and (max-width: 1024px)');
  const isDesktop = useMedia('(min-width: 1025px)');
  
  return { isMobile, isTablet, isDesktop };
}

功能特性

断点检测: 检测不同屏幕尺寸断点
实时更新: 窗口大小变化时实时更新
性能优化: 使用高效的媒体查询检测
类型安全: 提供完整的TypeScript类型支持

布局设计原则

1. 一致性原则

视觉一致性: 保持整个网站的视觉风格统一
交互一致性: 提供一致的用户交互体验
导航一致性: 保持导航结构和位置的一致性
布局一致性: 维持页面布局的基本结构一致

2. 响应式设计

移动优先: 优先考虑移动设备的用户体验
弹性布局: 使用弹性布局适应不同屏幕尺寸
断点设计: 合理设置响应式断点
触摸优化: 优化触摸设备的交互体验

3. 可访问性

键盘导航: 支持完整的键盘导航
屏幕阅读器: 兼容屏幕阅读器设备
对比度: 确保足够的颜色对比度
语义化: 使用语义化的HTML标签

性能优化

1. 布局优化

最小化重排: 减少DOM重排和重绘
CSS优化: 使用高效的CSS选择器
懒加载: 延迟加载非关键布局组件
代码分割: 按需加载布局相关代码

2. 加载优化

骨架屏: 提供内容加载时的占位符
预加载: 预加载关键布局资源
缓存策略: 合理使用浏览器缓存
资源压缩: 压缩CSS和JavaScript资源

通过这些布局组件，项目能够构建出结构清晰、响应式良好且用户体验优秀的页面布局。

布局组件

发布于 2025年8月29日

全文共计 1420 字

预计阅读 6 分钟

布局组件

布局组件负责控制页面的整体结构和布局，提供一致的页面框架和导航体验。

主要布局组件

1. RootLayout (根布局)

整个应用的根布局，包含全局状态和主题管理。

基本结构

// src/app/layout.tsx
import { ClerkProvider } from '@clerk/nextjs';
import { ThemeProvider } from '@/components/theme/theme-provider';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ClerkProvider>
      <html lang="zh-CN" suppressHydrationWarning>
        <body>
          <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
            <div className="flex min-h-screen flex-col">
              <MainNavbar />
              <main className="flex-auto">{children}</main>
              <Footer />
            </div>
          </ThemeProvider>
        </body>
      </html>
    </ClerkProvider>
  );
}

功能特性

认证集成: 通过ClerkProvider提供全局认证上下文
主题支持: 使用ThemeProvider管理明暗主题切换
响应式结构: 采用Flexbox布局确保内容区域自适应
全局状态: 提供全局状态管理和样式重置

2. MainNavbar (主导航栏)

页面顶部的主导航栏，包含网站Logo、导航链接和用户认证按钮。

基本结构

// src/components/layout/navbar/main-navbar.tsx
import { NavbarContent } from './navbar-content';

export function MainNavbar() {
  return (
    <header className="sticky top-0 z-50 w-full border-b bg-background/80 backdrop-blur">
      <div className="container flex h-16 items-center justify-between">
        <NavbarContent />
      </div>
    </header>
  );
}

功能特性

响应式设计: 在不同屏幕尺寸下自适应显示
导航链接: 提供主要页面的快速访问
用户认证: 集成认证状态显示
主题切换: 提供明暗主题切换功能

3. Footer (页脚)

页面底部的页脚组件，包含版权信息和相关链接。

基本结构

// src/components/layout/footer.tsx
export function Footer() {
  return (
    <footer className="border-t bg-background">
      <div className="container py-8 md:py-12">
        <div className="grid grid-cols-1 gap-8 md:grid-cols-4">
          <div className="md:col-span-2">
            <FooterLogo />
            <FooterDescription />
          </div>
          <FooterLinks />
          <FooterSocial />
        </div>
        <FooterCopyright />
      </div>
    </footer>
  );
}

功能特性

多列布局: 支持多列信息展示
链接导航: 提供重要页面的快速访问
社交链接: 展示社交媒体账号
版权信息: 显示版权声明和备案信息

页面布局组件

1. PageContainer (页面容器)

标准页面内容容器，提供一致的内边距和最大宽度。

基本用法

import { PageContainer } from '@/components/layout/page-container';

<PageContainer>
  <h1>页面标题</h1>
  <p>页面内容</p>
</PageContainer>

Props说明

属性名	类型	默认值	描述
className	string	-	自定义CSS类名
children	React.ReactNode	-	页面内容

功能特性

响应式内边距: 在不同屏幕尺寸下提供合适的内边距
最大宽度限制: 限制内容区域最大宽度
居中对齐: 在宽屏设备上居中显示内容
可扩展性: 支持自定义样式扩展

2. ThreeColumnLayout (三栏布局)

三栏布局组件，常用于文档和博客页面。

基本用法

import { ThreeColumnLayout } from '@/components/layout/three-column-layout';

<ThreeColumnLayout
  leftSidebar={<DocsSidebar />}
  rightSidebar={<TableOfContents />}
>
  <DocContent />
</ThreeColumnLayout>

Props说明

属性名	类型	描述
leftSidebar	React.ReactNode	左侧边栏内容
rightSidebar	React.ReactNode	右侧边栏内容
children	React.ReactNode	主内容区域

功能特性

响应式布局: 在不同屏幕尺寸下自适应显示
侧边栏控制: 支持显示/隐藏侧边栏
内容优先: 在小屏幕设备上优先显示主内容
可配置性: 支持灵活的侧边栏配置

布局工具组件

1. ResponsiveGrid (响应式网格)

响应式网格布局组件，用于展示卡片列表。

基本用法

import { ResponsiveGrid } from '@/components/layout/responsive-grid';

<ResponsiveGrid>
  <BlogCard />
  <BlogCard />
  <BlogCard />
</ResponsiveGrid>

Props说明

属性名	类型	默认值	描述
className	string	-	自定义CSS类名
children	React.ReactNode	-	网格项内容

功能特性

自适应列数: 根据屏幕宽度自动调整列数
一致间距: 保持网格项之间的一致间距
响应式断点: 在不同断点下调整布局
可扩展性: 支持自定义样式扩展

2. AppGrid (应用网格)

应用页面的网格布局组件，用于展示功能模块。

基本用法

import { AppGrid } from '@/components/layout/app-grid';

<AppGrid>
  <FeatureCard />
  <FeatureCard />
  <FeatureCard />
</AppGrid>

功能特性

模块化布局: 适用于功能模块展示
视觉层次: 提供清晰的视觉层次结构
响应式设计: 在不同设备上自适应显示
一致性: 保持与其他页面的一致性

布局状态管理

1. LayoutStore (布局状态存储)

使用Zustand管理全局布局状态。

基本用法

// src/stores/layout-store.ts
import { create } from 'zustand';

interface LayoutState {
  isSidebarOpen: boolean;
  toggleSidebar: () => void;
  closeSidebar: () => void;
}

export const useLayoutStore = create<LayoutState>((set) => ({
  isSidebarOpen: false,
  toggleSidebar: () => set((state) => ({ isSidebarOpen: !state.isSidebarOpen })),
  closeSidebar: () => set({ isSidebarOpen: false }),
}));

功能特性

状态共享: 在组件间共享布局状态
响应式更新: 状态变化时自动更新相关组件
持久化: 支持状态持久化存储
类型安全: 提供完整的TypeScript类型支持

2. useResponsiveLayout (响应式布局钩子)

自定义钩子用于检测响应式断点。

基本用法

// src/hooks/use-responsive-layout.ts
import { useMedia } from 'react-use';

export function useResponsiveLayout() {
  const isMobile = useMedia('(max-width: 768px)');
  const isTablet = useMedia('(min-width: 769px) and (max-width: 1024px)');
  const isDesktop = useMedia('(min-width: 1025px)');
  
  return { isMobile, isTablet, isDesktop };
}

功能特性

断点检测: 检测不同屏幕尺寸断点
实时更新: 窗口大小变化时实时更新
性能优化: 使用高效的媒体查询检测
类型安全: 提供完整的TypeScript类型支持

布局设计原则

1. 一致性原则

视觉一致性: 保持整个网站的视觉风格统一
交互一致性: 提供一致的用户交互体验
导航一致性: 保持导航结构和位置的一致性
布局一致性: 维持页面布局的基本结构一致

2. 响应式设计

移动优先: 优先考虑移动设备的用户体验
弹性布局: 使用弹性布局适应不同屏幕尺寸
断点设计: 合理设置响应式断点
触摸优化: 优化触摸设备的交互体验

3. 可访问性

键盘导航: 支持完整的键盘导航
屏幕阅读器: 兼容屏幕阅读器设备
对比度: 确保足够的颜色对比度
语义化: 使用语义化的HTML标签

性能优化

1. 布局优化

最小化重排: 减少DOM重排和重绘
CSS优化: 使用高效的CSS选择器
懒加载: 延迟加载非关键布局组件
代码分割: 按需加载布局相关代码

2. 加载优化

骨架屏: 提供内容加载时的占位符
预加载: 预加载关键布局资源
缓存策略: 合理使用浏览器缓存
资源压缩: 压缩CSS和JavaScript资源

通过这些布局组件，项目能够构建出结构清晰、响应式良好且用户体验优秀的页面布局。