布局系统

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>

为页面指定布局

在页面的 <route> 块中通过 layout 字段指定布局：

<!-- 使用 tabbar 布局 -->
<route lang="json">
{
  "name": "home",
  "style": { "navigationStyle": "custom" },
  "layout": "tabbar"
}
</route>

<!-- 使用默认布局 -->
<route lang="json">
{
  "name": "profile",
  "style": { "navigationStyle": "custom" },
  "layout": "default"
}
</route>

<!-- 禁用布局 -->
<route lang="json">
{
  "name": "login",
  "style": { "navigationStyle": "custom" },
  "layout": false
}
</route>

布局选择指南

页面类型	推荐布局	说明
首页、我的等主页面	tabbar	需要底部导航栏
详情页、表单页	default	普通页面
登录、引导页	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 /> 插槽