Layout 布局

页面骨架容器。极简定位：负责给 sider 导航和内容区分配响应式空间，不做内部分栏 / 居中 / 流式等 in-content 模式。

断点	网格	说明
≥ 1200 PC	240px 1fr	左 240 sider + 内容区
760 ～ 1199 Pad	60px 1fr	左 60 icon-only sider + 内容区
< 760 Phone	1fr (row: auto 1fr)	内容区全宽；顶部留 56 给 top-bar

v1 实现范围

• ✅ CSS grid 响应式容器（auto / pc / pad / phone）
• ✅ navigation slot + default slot
• ⏳ Navigation 组件 · 单独 Phase（PRD-first 重做中）
• ⏳ in-content sider / centered / fluid 三种模式 · v2
• ⏳ Header / Sider 组件子嵌套 · 各自独立 Phase

三形态预览

下方用占位 <div> 充当导航区，展示 Layout 网格切换的视觉效果。真正的 Navigation 组件在单独 Phase 接入。

PC

Sider 240px

内容区

这里是 default slot，PC 形态下宽度 = 100% - 240px。

Pad

60

内容区

Pad 形态下，icon-only sider 仅占 60px。

Phone

Top bar 56px

内容区

Phone 形态下内容全宽，导航区为顶部 56px 条 + 抽屉（由 Navigation 实现）。

Props

Prop	类型	默认	说明
mode	'auto' | 'pc' | 'pad' | 'phone'	'auto'	强制形态。auto 走 media query，断点 1200 / 760 / 360

Slots

Slot	说明
navigation	导航区，宽度/高度按形态自动分配
default	内容区

最小用法

<template>
  <Layout>
    <template #navigation>
      <!-- Navigation 组件（单独 Phase 实现） -->
      <YourNavigation />
    </template>
    <YourPage />
  </Layout>
</template>

mode 默认 auto，会按视口 1200 / 760 / 360 三档自动切。强制锁形态多用于演示 / 截图场景。