# 应用壳配方（顶栏 + 侧栏）

> Token：[tokens.md](tokens.md) | 代码骨架：[scenes/layout-shell.md](../scenes/layout-shell.md)

## 尺寸

| 区域         | 值                                                                         |
| ------------ | -------------------------------------------------------------------------- |
| 水平顶栏菜单 | 高 `48px`（`w-menu` mode=horizontal）                                      |
| `w-header`   | 默认 `60px`；业务顶栏可设 `height="48px"`                                  |
| 侧栏         | 宽 `200px`；收起约 `52px`                                                  |
| 内容区       | `w-main` 默认 `padding: 20px`；背景 `var(--w3-bg-color-page)`（`#EAEEFE`） |

## 菜单默认主题色（theme-chalk）

| 区域              | 默认                                         |
| ----------------- | -------------------------------------------- |
| 菜单背景          | `var(--w3-color-primary-plain)`（`#EAEEFE`） |
| 表头 / 折叠面板头 | 同上浅蓝灰底                                 |
| 选中指示          | `var(--w3-color-primary)` 左边框             |

深色顶栏需通过 `w-menu` 的 `background-color` / `text-color` 等 props 或 WiNEX 主题配置覆盖，**勿**在 Skill 示例中写死 `#2D5AFA` 铺满侧栏（除非设计稿明确要求）。

## 菜单规范

| 规则           | 值                                                      |
| -------------- | ------------------------------------------------------- |
| 子菜单标题插槽 | `#title`（**非** `sub-title`）                          |
| 选中态 class   | `.is-active`（Element Plus 标准，**非** `.is-actived`） |
| 水平菜单高度   | 与顶栏对齐 `48px`                                       |

## 内容页组合

列表 / 表单在 `w-main` 内按 [form.md](form.md)、[table.md](table.md) 组合。

---

代码骨架见 [scenes/layout-shell.md](../scenes/layout-shell.md)。
