跳到主要内容

布局与页面容器

VEF 在页面布局上有两层核心能力:

  • 应用级布局: Layout / BaseLayout
  • 页面级容器: Page / FlexCard

Page 是业务页最常见的入口

如果一个页面不是 CRUD 页,也不是特别复杂的自定义布局,通常直接从 Page 开始:

import { Page } from "@vef-framework-react/components";

<Page title="系统监控">
页面内容
</Page>

它支持:

  • title
  • header / footer
  • 左右侧栏
  • 页面级 margin 控制

CrudPage 其实也是基于 Page

这也是为什么你会感觉 CRUD 页和普通业务页视觉结构很一致。
VEF 在这层已经帮你统一了页面容器心智。

FlexCard

当你需要一个更灵活的内容卡容器,尤其是左右结构、列表+详情、树+表单这种页面时,FlexCard 很实用。

Layout

应用壳层级别的布局一般不需要你从零实现,而是通过 createLayoutRouteOptions() 驱动。
菜单、用户区、标签页、内容区这些结构都应该放在布局路由层。

推荐实践

  • 普通页面优先用 Page
  • 树表联动或分栏面板优先考虑 FlexCard
  • 应用整体导航结构交给 Layout