Components

AppShell 应用布局

为开发者控制台提供桌面侧栏、移动端抽屉入口与受约束的内容区骨架。

响应式控制台骨架

桌面端可收起侧栏；小于 lg 时使用 mobile-menu-trigger 插槽将同一导航放入 Sheet。

Webhook 投递记录

近 24 小时投递

内容区使用 wide 宽度约束，页面仍可按需提供自己的内边距。

<AppShell
  v-model:collapsed="sidebarCollapsed"
  sidebar-width="16rem"
  collapsed-sidebar-width="4.5rem"
  content-width="wide"
>
  <template #sidebar="{ collapsed }">
    <Sidebar :collapsed="collapsed"><!-- desktop navigation --></Sidebar>
  </template>

  <template #mobile-menu-trigger>
    <Sheet side="left" title="Navigation">
      <template #trigger><Button aria-label="Open navigation">Menu</Button></template>
      <!-- render the same navigation data here -->
    </Sheet>
  </template>

  <template #header><ConsoleHeader /></template>
  <main><!-- page content --></main>
</AppShell>

导航职责边界

AppShell

负责应用级骨架：桌面侧栏宽度、收起状态、顶部区域、移动端菜单入口和内容宽度。不拥有路由或菜单数据。

Sidebar

负责控制台的纵向导航容器：固定头尾、可滚动主体和折叠时的呈现。将同一导航数据复用于 Sheet，避免维护两套导航来源。

API 参考

属性	类型	默认值	说明
`v-model:collapsed`	`boolean`	`false`	桌面侧栏是否以 collapsedSidebarWidth 收起。侧栏内容通过 sidebar 插槽参数和 Sidebar collapsed prop 自行呈现精简状态。
`sidebarWidth`	`string`	`'16rem'`	展开时的桌面侧栏宽度，可传任意 CSS 尺寸。
`collapsedSidebarWidth`	`string`	`'4.5rem'`	收起时的桌面侧栏宽度，通常应容纳导航图标。
`contentWidth`	`'full' \| 'wide' \| 'default' \| 'narrow'`	`'full'`	默认内容槽的最大宽度约定：full 不约束、wide 为 90rem、default 为 76rem、narrow 为 64rem。
`sidebarLabel`	`string`	`'应用侧边栏'`	桌面侧栏 landmark 的无障碍标签。
`sidebar`	`slot`	`—`	桌面侧栏。插槽参数为 collapsed 和 toggleCollapsed。
`mobile-menu-trigger`	`slot`	`—`	仅在 lg 以下显示。将 Sheet trigger 放在这里，并复用与桌面 Sidebar 相同的导航数据。
`header / default`	`slot`	`—`	粘性顶栏和主内容区。header 插槽同样接收 collapsed 与 toggleCollapsed。
`Sidebar collapsed`	`boolean`	`false`	传递给 Sidebar 的折叠状态；所有三个 Sidebar 插槽都可读取 collapsed 参数。