组件 · 布局

AdminLayout 后台布局

后台壳布局（侧栏/顶栏/内容区）。

入口 @selrux/ui/admin-layout · 源码 src/components/admin-layout/index.ts · 1 个组件 · 发布状态 preview

使用建议

避免：在布局内塞入营销落地页结构
限制：属性与导出以 @selrux/ui 对应子路径 d.ts/源码为准，禁止臆造

引入

tsx

123456import {
  AdminLayout,
  ADMIN_LAYOUT_MAX_Z_INDEX,
  ADMIN_LAYOUT_SCROLL_EL_ID,
  createAdminLayoutCssVars,
} from '@selrux/ui/admin-layout';

演练场

调节下方可实现的字面量属性，实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。

代码演示

基础用法

header / sider / tab / footer 四个区域与主内容。演示放在固定高度容器中。

顶栏

页签

主内容区域

收起侧栏

siderCollapse 配合 siderCollapsedWidth。

顶栏

侧栏已收起

布局模式与固定

mode="horizontal" 顶部菜单布局；fixedTop / fixedFooter 固定顶栏与页脚；scrollMode 为 content（仅内容滚动）或 wrapper；scrollElId 指定滚动容器 id；rightFooter 页脚只在内容区；fullContent 内容铺满；maxZIndex 层级上限。

顶部菜单：工作台 / 订单 / 客户

订单行 1

订单行 2

订单行 3

订单行 4

订单行 5

订单行 6

订单行 7

订单行 8

订单行 9

订单行 10

订单行 11

订单行 12

区域显隐与移动端

headerVisible / siderVisible 控制区域；isMobile 时侧栏改为抽屉；mobileSiderOpen 控制抽屉打开（这里为关闭）。

无顶栏

移动端顶栏

isMobile · 无侧栏

API

属性覆盖：示例用到 23 / 23 个自有属性（100%）

由 scripts/demo-coverage.mjs 统计，不含 className / style / 原生透传属性与纯转发事件。

AdminLayout

主题化管理端布局骨架。

属性	说明	类型	默认值
`header`	顶栏槽位。	`ReactNode`	-
`sider`	侧栏槽位。	`ReactNode`	-
`tab`	页签槽位。	`ReactNode`	-
`footer`	底栏槽位。	`ReactNode`	-
`mode`	布局方向。	`"horizontal" \| "vertical"`	`'vertical'`
`scrollMode`	滚动载体。	`"content" \| "wrapper"`	`'content'`
`fixedTop`	是否固定顶栏与页签。	`boolean`	`true`
`fixedFooter`	是否固定底栏。	`boolean`	-
`fullContent`	全屏内容（隐藏 chrome 显示）。	`boolean`	-
`isMobile`	是否为移动布局。	`boolean`	-
`headerVisible`	顶栏是否可见。	`boolean`	`true`
`siderVisible`	侧栏是否可见。	`boolean`	`true`
`tabVisible`	页签是否可见。	`boolean`	`true`
`footerVisible`	底栏是否可见。	`boolean`	`true`
`headerHeight`	顶栏高度（px）。	`number`	`56`
`tabHeight`	页签高度（px）。	`number`	`44`
`footerHeight`	底栏高度（px）。	`number`	`48`
`siderWidth`	侧栏展开宽度（px）。	`number`	`220`
`siderCollapsedWidth`	侧栏折叠宽度（px）。	`number`	`64`
`siderCollapse`	侧栏是否折叠。	`boolean`	-
`rightFooter`	horizontal 模式下 footer 是否与内容同侧留左隙。	`boolean`	-
`maxZIndex`	chrome 最大 z-index。	`number`	`100`
`scrollElId`	滚动元素 id。	`string`	-
`onMobileMaskClick`	移动遮罩点击（通常用于收起侧栏）。	`(() => void)`	-
`headerClassName`	顶栏 className。	`string`	-
`siderClassName`	侧栏 className。	`string`	-
`mobileSiderClassName`	移动侧栏 className。	`string`	-
`tabClassName`	页签 className。	`string`	-
`footerClassName`	底栏 className。	`string`	-
`contentClassName`	主内容 className。	`string`	-
`scrollWrapperClassName`	滚动包裹层 className。	`string`	-
`style`	根节点内联样式（会与布局 CSS 变量合并）。	`CSSProperties`	-
`children`	主内容。	`ReactNode`	-

另有 278 项原生属性与事件继承自 HTMLAttributes，原样透传。

导出类型：AdminLayoutLeftGap、AdminLayoutMode、AdminLayoutProps、AdminLayoutScrollMode、CreateAdminLayoutCssVarsInput

函数与常量

名称	说明	签名 / 类型
`ADMIN_LAYOUT_MAX_Z_INDEX`	默认 chrome 最大 z-index。	`100`
`ADMIN_LAYOUT_SCROLL_EL_ID`	默认滚动元素 id。	`"__SCROLL_EL_ID__"`
`createAdminLayoutCssVars`	按尺寸与层级生成 `--srx-admin-layout-*` CSS 变量。	`(input: CreateAdminLayoutCssVarsInput) => CSSProperties`