布局系统

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

布局目录

src/layouts/
├── default.vue     # 默认布局 — 注入主题 Provider 和全局弹窗组件
└── tabbar.vue      # TabBar 布局 — 在默认布局基础上增加底部导航栏

布局组件

default.vue — 默认布局

通过 wd-config-provider 注入主题变量，注册 wd-toast、wd-dialog、wd-notify 等全局组件。普通页面套用此布局即可获得主题联动和弹窗能力。

tabbar.vue — TabBar 布局

在 default.vue 的基础上增加 wd-tabbar 底部导航栏，适用于首页、工作台、我的等主页面。组件内维护 TabBar 配置列表、激活项初始化和页面切换逻辑。

TabBar 的详细配置、主题联动、useTabbar composable 等内容见 自定义 TabBar。

为页面指定布局

页面配置通过 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>

更完整的页面生成和路由配置说明见 路由系统，自定义 TabBar 见 TabBar 文档。

布局选择指南

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