AppLayout 后台布局
后台的整体框架：侧边栏、顶栏、页签栏和内容区，六种布局。
用户管理
布局组件不依赖路由库：Sidebar 通过 renderLink 渲染链接，接 TanStack Router、Next.js 或 React Router 都行；菜单是 NavGroup[]（可以来自接口）。
| 组件 | 文件 | 作用 |
|---|---|---|
AppLayout | layout/app-layout | 框架。variant：standard 标准、floating 浮动、inset 内嵌、dual 双栏、horizontal 顶部菜单、mixed 混合 |
Sidebar / SidebarBrand / RailNav | layout/sidebar | 侧边栏、品牌、双栏布局的图标栏；收起时子菜单悬停弹出 |
TopNav | layout/top-nav | 顶部菜单（horizontal / mixed） |
Topbar | layout/topbar | 顶栏：折叠按钮、面包屑、右侧工具（SearchTrigger、FullscreenButton、RefreshButton） |
PageTabs | layout/page-tabs | 页签栏：右键刷新、固定、最大化、批量关闭 |
UserMenu / ThemeMenu / NotificationsPopover / TenantSwitcher | layout/* | 顶栏右侧的用户菜单、外观、通知、租户切换 |
CommandMenu | layout/command-menu | ⌘K 搜索 |
AppSettingsDialog | layout/app-settings-dialog | 外观设置 |
组件里的文字默认中文，用 LayoutTextProvider（layout/layout-text）整体替换成别的语言。
安装
pnpm dlx shadcn@latest add https://docs.linasan.cn/r/app-layout.json第一次装本站的组件前先在项目里执行一次 shadcn init，详见 安装。
用法
import { AppLayout } from '@/components/layout/app-layout';
import { Sidebar } from '@/components/layout/sidebar';
import { Topbar } from '@/components/layout/topbar';
<AppLayout collapsed={collapsed} sidebar={<Sidebar groups={menus} path={pathname} renderLink={renderLink} />}>
<Topbar breadcrumb={…}>{tools}</Topbar>
<PageTabs … />
<Outlet />
</AppLayout>属性
AppLayout
属性
类型
Sidebar
PageTabs
属性
类型