# 应用壳场景（Vue 3）

```vue
<template>
  <w-container class="app-shell">
    <w-header height="48px">
      <!-- logo + 顶栏 -->
    </w-header>
    <w-container>
      <w-aside width="200px">
        <w-menu :default-active="active" router mode="vertical">
          <w-menu-item index="/home">首页</w-menu-item>
          <w-sub-menu index="1">
            <template #title>系统管理</template>
            <w-menu-item index="/users">用户管理</w-menu-item>
          </w-sub-menu>
        </w-menu>
      </w-aside>
      <w-main>
        <router-view />
      </w-main>
    </w-container>
  </w-container>
</template>
```

- 子菜单标题用 `#title` 插槽
- 页面背景色默认 `var(--w3-bg-color-page)`，见 [tokens.md](../design-patterns/tokens.md)
- 尺寸见 [shell.md](../design-patterns/shell.md)
