布局系统

布局系统用于把页面内容和页面外壳分离。页面只负责业务内容，布局负责统一容器结构，App.vue 负责放置布局渲染入口。

能力定位

• 解决多个页面共享重复的页面结构。
• 解耦业务结构与容器结构。

定义布局

布局文件放在 src/layouts 中，布局名来自文件名。

src
└─ layouts
   ├─ default.vue
   └─ tabbar.vue

default.vue 对应默认布局。tabbar.vue 对应 layout: 'tabbar'。

布局组件必须通过 <slot /> 接收页面内容。

<template>
  <view class="layout-shell">
    <slot />
  </view>
</template>

在 App.vue 应用骨架中启用布局。

<template>
  <OiyoLayout>
    <OiyoPage />
  </OiyoLayout>
</template>

选择布局

页面通过 definePageMeta() 选择布局。

默认

只有在 App.vue 中使用 OiyoLayout，并且存在 src/layouts/default.vue 时，默认布局才会启用。

<script setup>
definePageMeta({
  // 自动应用 layout: 'default'
})
</script>

具名

指定名为 tabbar 的布局。

<script setup>
definePageMeta({
  layout: 'tabbar',
})
</script>

禁用

当页面不想使用任何布局时，可以通过 false 禁用布局。

<script setup>
definePageMeta({
  layout: false,
})
</script>

视图边界

推荐边界：

• App.vue 放所有页面共享的应用外壳和根上下文。
• src/layouts 放某类页面共享的容器结构。
• src/pages 放页面自己的业务内容。

<template>
  <NavBar />

  <OiyoLayout>
    <OiyoPage />
  </OiyoLayout>

  <TabBar />
</template>

这里 NavBar 和 TabBar 是应用外壳，OiyoLayout 内部才是页面和布局系统。

使用建议

适合放入布局：

• 页面容器、间距。
• 某类页面共享的结构。
• 页面视觉分组。

不适合放入布局：

• 所有页面都共享的应用顶部和底部。
• 应用级状态定义。
• 单个页面的业务逻辑。

验证可用

新增布局后检查：

1. App.vue 是否使用 <OiyoLayout> 包裹 <OiyoPage />。
2. 布局文件是否位于 src/layouts 中。
3. 布局文件是否包含 <slot />。
4. 页面使用时是否通过 definePageMeta({ layout }) 定义。