ShellLayout

路由默认布局的一层分发:按每个浏览器自己的偏好在 Config.Shells 候选里挑一个外壳渲染,没选过就落回 Config.LayoutType。

最后更新

说明

本身不画任何东西,只把 @Body 交给选中的外壳模板,因此 App.razor 的 DefaultLayout 指向它即可:用户在顶栏头像下拉的「布局」段控里点一下,整块后台骨架就换成对应模板,无需宿主改代码、也不重载浏览器。偏好存在浏览器本地(known.layout),读它要一次 JS 往返——放进这一层分发,等于让每个外壳子类省掉这段异步;换壳等于换组件实例,旧模板的登录门禁、菜单装配、Ctrl+K 热键与顶部加载条随其卸载一并收尾,不留悬空订阅。候选由 Config.Shells 登记(Config.AddShell 追加自家外壳),出厂内置「标准管理台」AdminLayout 与「窄边栏工作台」RailLayout;候选清到不足两项即视为宿主钉死了外壳,顶栏收起这一行,连旧偏好一并作废,两条口径不会各说各话。因为是本地存储(LocalService 为 Scoped),同一台服务端上的不同用户各选各的、互不干扰;Config.LayoutType 仍是「没选过」时的落点,宿主改它只换出厂默认,不会冲掉某个用户的选择。预渲染、无 JS 运行时或读不到偏好这三种情况一律按宿主默认外壳渲染,绝不因为一次探测失败把后台挂成空白。

常见能力:

  • DefaultLayout 指向它即获得换壳能力
  • 按浏览器各存一份偏好(known.layout)
  • 顶栏头像下拉「布局」段控即时切换
  • 候选由 Config.AddShell 集中登记
  • 候选不足两项即收起入口并作废旧偏好
  • 没选过偏好落回 Config.LayoutType
  • 换壳即换组件实例,旧模板订阅随卸载收尾
  • 探测失败一律回落默认外壳

用法

@* App.razor:路由默认布局交给分发层 *@
<RouteView RouteData="@routeData" DefaultLayout="@typeof(ShellLayout)" />

@* Program.cs:登记可选外壳(出厂已内置 admin 与 rail 两项) *@
Config.AddShell("workbench", "工作台", typeof(WorkbenchLayout), "layout", 3);
Config.LayoutType = typeof(AdminLayout);   // 用户没选过时的落点

API 参数

参数 类型 默认值 说明
Body RenderFragment null

所有组件均继承 BaseComponent,除上表参数外还支持 Class、Style、Disabled、Visible。

微信公众号二维码 扫码关注公众号
QQ 交流群二维码 扫码加入 QQ 群