布局系统

youlai-app 使用 @uni-helper/vite-plugin-uni-layouts 提供类 Nuxt 的布局系统，实现页面布局的统一管理和复用。

布局目录

src/layouts/
├── default.vue     # 默认布局 - 提供主题配置和全局组件
└── tabbar.vue      # Tabbar 布局 - 带底部导航栏

布局组件

default.vue - 默认布局

提供基础的主题配置和全局组件注册，适用于大部分页面。

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

<script setup lang="ts">
// 主题配置、全局组件等
</script>

tabbar.vue - Tabbar 布局

带底部导航栏的布局，适用于首页、我的等主要页面。

<template>
  <view class="layout-tabbar">
    <slot />
    <wd-tabbar v-model="active" :items="tabbarItems" />
  </view>
</template>

<script setup lang="ts">
// Tabbar 配置
</script>

为页面指定布局

页面配置通过 definePage() 声明。普通页面不写 layout 时，会默认使用 default 布局：

<script setup lang="ts">
definePage({
  name: "profile",
  style: { navigationBarTitleText: "个人资料" },
})
</script>

TabBar 页面需要显式指定 tabbar：

<script setup lang="ts">
definePage({
  name: "home",
  style: { navigationStyle: "custom" },
  layout: "tabbar",
})
</script>

特殊页面如果不想套任何布局，可以关闭布局：

<script setup lang="ts">
definePage({
  name: "login",
  style: { navigationStyle: "custom", navigationBarTitleText: "" },
  layout: false,
})
</script>

更完整的页面生成和路由配置说明见 路由系统。

布局选择指南

页面类型	推荐布局	说明
普通页面、详情页、表单页	不写或 default	默认布局，通常无需显式声明
首页、工作台、我的等主页面	tabbar	需要底部导航栏
登录、引导页、全屏页	false	不套布局，页面完全自定义

创建自定义布局

1. 在 src/layouts/ 目录下创建新的布局组件
2. 使用 <slot /> 作为页面内容插槽
3. 在页面的 <route> 块中引用布局名称

<!-- src/layouts/custom.vue -->
<template>
  <view class="layout-custom">
    <view class="layout-custom__header">
      <!-- 自定义头部 -->
    </view>
    <view class="layout-custom__body">
      <slot />
    </view>
  </view>
</template>

检查清单

• [ ] 页面布局选择合理
• [ ] Tabbar 页面使用 tabbar 布局
• [ ] 登录页等特殊页面禁用布局
• [ ] 自定义布局包含 <slot /> 插槽