AppLayout

移动端骨架：顶部 App 栏 + 可滚动内容区 + 底部 Tab 导航，含登录门禁与软刷新。

最后更新 2026-10-25 20:51:48

说明

页面用 @layout AppLayout 即得移动端外壳。底部 Tab 由页面类上的 [AppMenu] 特性集中声明、AppMenuProvider 依据当前用户装配，无需逐页传参；顶栏标题自动取当前命中的 Tab 名称（可用 Title 覆盖），右上角刷新按钮对当前页做软刷新（重建页面组件、重新取数，不重载浏览器）。默认要求登录，未登录跳转登录页；配合登录页的设备判定，移动端登录后会自动落到 Config.AppHomeRoute（默认 /app）。

常见能力：

顶部 App 栏 + 底部 Tab 三段骨架
[AppMenu] 声明式底部导航
标题从当前 Tab 自动推导
刷新按钮软刷新当前页
登录门禁与角色过滤
明暗主题跟随 LocalService
安全区适配（safe-area）

用法

@page "/app"
@layout AppLayout
@attribute [AppMenu("首页", Icon = "home", Url = "/app", Order = 1)]
@attribute [AppMenu("消息", Icon = "message-circle", Url = "/app/messages", Order = 2)]
@attribute [AppMenu("我的", Icon = "user", Url = "/app/mine", Order = 3)]

API 参数

参数	类型	默认值	说明
`Body`	`RenderFragment`	`null`
`ScrollId`	`string`	`"known-app-content"`	内容滚动容器的 DOM id。
`SiteTitle`	`string`	`null`	站点标题；当当前路由未命中任何 Tab 时作为标题回退。留空（默认）时取「系统设置 · 系统名称」。
`Tabs`	`List<MenuItem>`	`null`	底部 Tab 列表；留空时由 IAuthProvider 的 BuildAppMenus 依据当前用户从 [AppMenu] 特性装配。
`Title`	`string`	`null`	顶栏标题；留空时自动取当前命中的 Tab 名称，再回退 SiteTitle。

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