布局组件

🏗️ 提供标准化的页面布局结构，快速构建一致的中台界面。

设计原则

布局组件是中台系统的骨架，好的布局设计能够：

• 统一体验 - 保持整个应用的视觉一致性
• 提升效率 - 减少重复的布局代码编写
• 响应式设计 - 适配不同屏幕尺寸和设备
• 易于维护 - 集中管理布局逻辑，便于后期调整

📦 布局体系

页面级布局

构建完整页面结构的核心布局组件。

组件	描述	适用场景
PageContainer	页面容器	所有业务页面的基础容器
PageHeader	页面头部	需要标题、面包屑、操作区的页面

功能区域布局

针对特定功能区域的专用布局组件。

组件	描述	适用场景
ListPage	列表页容器	数据列表、管理后台页面
DetailPage	详情页布局	数据详情、表单详情页面

快速开始

基础页面布局

<template>
  <!-- 最简单的页面结构 -->
  <ProPageContainer title="用户管理">
    <template #extra>
      <el-button type="primary">
        新增用户
      </el-button>
    </template>

    <!-- 页面内容 -->
    <div class="page-content">
      <ProSearchForm :fields="searchFields" />
      <ProTable :columns="columns" :data="data" />
    </div>
  </ProPageContainer>
</template>

列表页面布局

<template>
  <!-- 专为列表页设计的布局 -->
  <ProListPage :search-form="searchFields" :header-actions="actions" :columns="columns" :data="data" />
  <!-- or -->
  <ProListPage>
    <template #search>
      <ProSearchForm :fields="searchFields" />
    </template>

    <template #actions>
      <el-button type="primary">
        批量操作
      </el-button>
      <el-button>导出数据</el-button>
    </template>

    <template #content>
      <ProTable :columns="columns" :data="data" />
    </template>
  </ProListPage>
</template>

详情页面布局

<template>
  <!-- 详情页专用布局 -->
  <DetailPage :title="userInfo.name" :breadcrumb="breadcrumb">
    <template #actions>
      <el-button type="primary">
        编辑
      </el-button>
      <el-button>删除</el-button>
    </template>

    <template #content>
      <el-descriptions :data="userInfo" />
    </template>
  </DetailPage>
</template>

🎨 布局组合

复杂页面结构

<template>
  <PageContainer class="dashboard-page">
    <!-- 页面头部 -->
    <PageHeader
      title="数据看板"
      subtitle="实时业务数据概览"
    >
      <template #breadcrumb>
        <el-breadcrumb>
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item>数据分析</el-breadcrumb-item>
          <el-breadcrumb-item>数据看板</el-breadcrumb-item>
        </el-breadcrumb>
      </template>

      <template #actions>
        <el-button-group>
          <el-button>今天</el-button>
          <el-button>本周</el-button>
          <el-button type="primary">
            本月
          </el-button>
        </el-button-group>
      </template>
    </PageHeader>

    <!-- 页面内容 -->
    <div class="dashboard-content">
      <!-- 统计卡片 -->
      <div class="stats-cards">
        <StatCard title="总用户数" :value="totalUsers" />
        <StatCard title="今日新增" :value="todayNewUsers" />
        <StatCard title="活跃用户" :value="activeUsers" />
      </div>

      <!-- 图表区域 -->
      <div class="charts-section">
        <UserTrendChart />
        <OrderAnalytics />
      </div>
    </div>
  </PageContainer>
</template>

💡 最佳实践

<template>
  <!-- 根据页面类型选择合适的布局 -->

  <!-- 数据列表页 -->
  <ProListPage ... />

  <!-- 详情展示页 -->
  <ProDetailPage :title="title" ... />

  <!-- 普通业务页 -->
  <ProPageContainer :title="title">
    <div>业务内容</div>
  </ProPageContainer>
</template>

🔗 相关链接

• Element Plus Layout - 了解基础布局组件
• CSS Grid MDN - CSS Grid 布局指南
• Flexbox MDN - Flexbox 布局指南