布局系统

布局是“包裹页面的公共容器”。它的目的不是增加抽象层，而是把真实项目里会反复出现的页面骨架收拢到一个地方：导航栏、统一背景、公共 padding，或某一类页面的固定结构。

这页只解释布局系统的机制与约束，具体如何落地到文件与代码请看使用指南。

渲染链路

布局系统的关键是“页面内容如何被包裹”。在渲染链路上可以把它理解成：

• App.vue 提供两个入口点：布局容器与页面插槽
• 布局组件通过 <slot /> 接收页面内容并渲染在骨架中

形状示意（强调结构关系，不展开做法）：

<template>
  <!-- 可选：布局容器入口 -->
  <OiyoLayout>
    <!-- 必须：页面插槽 -->
    <OiyoPage />
  </OiyoLayout>
</template>

默认与具名布局

布局文件位于 src/layouts/。默认布局通常命名为 default：当页面没有显式选择布局时，会回退到默认布局。

“显式选择”的语义通常来自页面元信息（字段以 API 为准），例如表达“该页面使用某个具名布局”：

definePageMeta({ layout: 'auth-login' })

布局名解析规则

布局名是“从文件路径推导出来”的，并标准化为小写的 kebab-case。

这个规则的目的，是让“布局的选择”可以稳定地引用到一个字符串标识，而不依赖大小写或目录层级的写法差异。

禁用布局的语义

当某些页面不希望被布局包裹时（例如登录页、全屏落地页），布局选择可以表达为“禁用”。禁用的含义是：该页面内容直接渲染到页面插槽，而不经过布局骨架。

同样，这通常通过页面元信息来表达（字段以 API 为准）：

definePageMeta({ layout: false })

从渲染链路角度理解，它等价于“跳过布局包裹层”，页面内容直接落在 App.vue 的 <OiyoPage /> 插槽位置。

约束与常见误解

• 布局是显式能力：只有存在布局容器入口时，布局才会参与渲染链路。
• 布局不是必须：如果项目只有一个很简单的公共壳层，直接写在 App.vue 也完全可行。

延伸阅读