book/layout.tsx - 书籍布局

基本信息

属性	值
路径	src/app/book/layout.tsx
类型	Next.js 布局组件
功能	书籍页面的共享布局（侧边栏 + 内容区）

功能描述

为书籍相关页面提供两栏布局：左侧固定宽度的章节导航侧边栏，右侧可滚动的内容区域。

代码实现

import { BookSidebar } from "@/components/book/sidebar";

export default function BookLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="container py-6 lg:py-8">
      <div className="flex flex-col lg:flex-row gap-8">
        <BookSidebar />
        <div className="flex-1 min-w-0 lg:mr-64">
          <div className="max-w-3xl mx-auto">
            {children}
          </div>
        </div>
      </div>
    </div>
  );
}

布局结构

Container
└── Flex Container (responsive)
    ├── BookSidebar (sticky on desktop)
    └── Content Area
        └── max-w-3xl centered content

响应式行为

断点	布局
Mobile (< lg)	单列，侧边栏隐藏或折叠
Desktop (lg:)	双列，侧边栏固定左侧

桌面布局

┌──────────────────────────────────────────────────┐
│  ┌────────────┐  ┌────────────────────────────┐  │
│  │            │  │                            │  │
│  │  Sidebar   │  │      Content (max-w-3xl)   │  │
│  │  (sticky)  │  │                            │  │
│  │            │  │                            │  │
│  └────────────┘  │                            │  │
│                  └────────────────────────────┘  │
└──────────────────────────────────────────────────┘
         ↑gap-8↑

移动端布局

┌──────────────────────┐
│      Sidebar         │  ← 可能折叠为按钮
├──────────────────────┤
│                      │
│      Content         │
│                      │
└──────────────────────┘

CSS 类说明

类名	作用
container	限制最大宽度并居中
py-6 lg:py-8	垂直内边距（响应式）
flex flex-col lg:flex-row	移动端垂直，桌面端水平
gap-8	子元素间距
flex-1	内容区占据剩余空间
min-w-0	允许内容区收缩
lg:mr-64	桌面端右边距（为固定侧边栏预留）
max-w-3xl mx-auto	内容最大宽度并居中

组件引用

组件	来源	用途
BookSidebar	@/components/book/sidebar	章节导航侧边栏

应用范围

此布局应用于 /book 路由下的所有页面：

路由	页面
/book	书籍首页
/book/[slug]	章节页面

技术说明

• 使用 min-w-0 防止 flex 子元素溢出
• lg:mr-64 为固定定位的侧边栏预留空间
• 内容区域使用 max-w-3xl 保证阅读体验
• 响应式内边距 py-6 → lg:py-8

相关文件

• src/components/book/sidebar.tsx - 侧边栏组件
• src/app/book/page.tsx - 书籍首页
• src/app/book/[slug]/page.tsx - 章节页面