Skyroc Web Kit
Admin Layouts

Admin Layouts 概览

@skyroc/web-admin-layouts 是管理后台应用壳,负责把布局材料、主题状态、菜单、页签、权限和业务插槽组合成可复用的后台框架

@skyroc/web-admin-layouts 是 Skyroc 管理后台的应用级布局包。它不只是一个视觉布局组件,而是把路由菜单、权限、标签页、主题抽屉、响应式状态和业务插槽组合在一起的后台壳。

如果 @skyroc/materials 是底层布局材料,那么 @skyroc/web-admin-layouts 就是面向应用的完整后台框架。

适用场景

  • 新后台应用需要复用统一 Header、Sider、Tab、Content、Footer 布局。
  • TanStack Router 路由需要自动生成菜单和标签页。
  • 菜单需要支持静态路由、动态后端路由、权限过滤和额外节点插入。
  • 应用需要通过少量插槽接入 Logo、用户头像、通知、页脚和自定义头部操作。
  • 主题设置来自 @skyroc/web-admin-theme,布局包根据主题模式自动切换布局结构。

分层关系

apps/admin
  只保留业务入口、路由守卫、Logo、用户头像、通知按钮和菜单扩展组件。

@skyroc/web-admin-layouts
  负责应用级后台壳:AdminLayout、菜单生成、菜单渲染、权限、tabs、状态和主题抽屉。

@skyroc/materials
  负责纯视觉布局材料:Header / Sider / Tab / Footer / Content 的区域排布和 CSS 变量。

@skyroc/web-admin-theme
  负责主题设置、Ant Design Provider、暗色模式、副作用和主题抽屉数据来源。

核心模块

模块责任
setupAdminLayouts在应用启动时注入 routeTree、菜单模式、默认首页、动态路由加载器、缓存适配器和扩展组件。
AdminLayout渲染完整后台壳,并通过插槽接入 Logo、Header actions、Footer 和 Content。
menu-generator从 TanStack Router 静态路由或后端动态路由生成标准菜单树与快速索引。
menu-rendererGeneratedMenu 转成 Ant Design Menu 可消费的菜单项,处理 icon、title、badge 和 extra。
useAdminMenus根据当前路由、菜单分类和布局模式,计算一级、二级、子级菜单、选中项和展开项。
useAdminTab管理路由页签,支持首页 tab、固定 tab、缓存、关闭和切换。
useAdminState管理布局运行时状态,如移动端、侧边栏折叠、全屏内容和横向滚动。

数据流

setupAdminLayouts(...)
  ├─ routeTree / backend routes
  ├─ menuCategories
  ├─ menuNodeCallback
  ├─ extras
  └─ storage

initAuth / initMenus
  └─ menuGenerator.generate(...)
       ├─ allMenus
       ├─ quickReferenceMenus
       └─ home

AdminLayout
  ├─ useSettingsTheme()
  ├─ useAdminState()
  ├─ useAdminMenus()
  ├─ AdminHeader
  ├─ AdminSider / AdminMenu
  ├─ AdminTab
  ├─ AdminContent
  └─ ThemeDrawer / AdminEffect

@skyroc/materials 的区别

@skyroc/materialsAdminLayout 是纯插槽式布局容器,不知道路由、权限、菜单、tab、主题抽屉和业务状态。

@skyroc/web-admin-layouts 在它之上提供应用语义:它知道当前路由在哪里、哪个菜单应该选中、哪个 tab 应该激活、当前主题模式应该使用哪种布局结构。

阅读顺序

On this page