App Shell Props

名称	类型	默认值	说明
variant	'wash' | 'surface' | 'section' | 'elevated'	'elevated'	页面背景。宽屏上 elevated 同时有顶栏和侧栏时，正文坐在圆角背板上。
contentPadding	SpacingStep	-	正文区域内边距。不传则贴边。
height	'fill' | 'auto'	'fill'	fill 使用 100dvh。行内高度可以盖过这个长度。
mobileNav	false | AppShellMobileNav	-	false 关掉抽屉。对象可以设置 breakpoint（sm 640、md 768、lg 1024、xl 1280、2xl 1536 或 none）、isOpen 和 hasToggle。
mobileNavOpen	boolean	false	v-model:mobile-nav-open。组件同时发出 mobileNavOpenChange。

SpacingStep 的取值是 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10。默认断点是 md，查询是 (width < Npx)。hasToggle 默认 true。

插槽

名称	说明
default	页面正文，渲染在主区域里。
topNav	顶栏，通常是 TopNav。窄屏时它的项目收进外壳的抽屉。
sideNav	侧栏，通常是 SideNav。窄于断点时改到抽屉里，不再排在正文旁边。
banner	导航和正文之间的横幅。
mobileNav	替换默认抽屉。

useAppShellMobile

从 @astryx-vue/core 引入。它返回最近的外壳：

名称	类型	说明
isMobile	boolean	视口窄于外壳断点时为 true。
isMobileNavOpen	boolean	抽屉是否打开。
isMobileNavEnabled	boolean	在外壳外面，或 mobileNav 为 false 时，是 false。
hasAutoToggle	boolean	外壳是否自己画菜单按钮。
hasSideNav	boolean	是否传了侧栏插槽。
mobileNavId	string	抽屉的 id。顶栏项目会传送到 #${id}-items。
toggleMobileNav	() => void	切换抽屉。在外壳外面不做任何事。
openMobileNav	() => void	打开抽屉。
closeMobileNav	() => void	关闭抽屉。

主区域是 #astryx-app-shell-main，一个带 role="main" 和 tabindex="-1" 的 div。跳过链接的文案跟随当前语言。

原生属性

AppShell 渲染 <div>。

以下内容落到这个元素上：

• HTML 属性。
• aria-* 属性。
• data-* 属性。
• class。
• style。

class 会合并。根元素写 data-variant 和 data-height。