CommonPage 通用页面布局

标准后台页面布局组件。提供可配置的页面头部（标题、返回按钮、操作按钮区域）和内容区。头部使用 AppCard 包裹并粘性定位在顶部，标题优先取 props 传入值，其次取路由 meta.title。

• 基础用法
• Props
• Slots
• 典型布局示例

基础用法

<template>
  <CommonPage title="用户管理" back show-header>
    <template #action>
      <n-button type="primary">新增</n-button>
    </template>

    <AiCrudPage api="/api/user" :columns="columns" :edit-schema="editSchema" />
  </CommonPage>
</template>

<script setup>
import CommonPage from '@/components/common/CommonPage.vue'
</script>

Props

属性	类型	默认值	说明
back	Boolean	false	是否显示返回按钮（调用 router.back()）
showFooter	Boolean	false	是否显示默认底部
showHeader	Boolean	false	是否显示头部区域。设为 true 后头部粘性定位在顶部
title	String	—	页面标题。未传时自动取路由 meta.title

Slots

插槽名	说明	优先级
header	完全自定义头部内容	最高
title-prefix	标题前缀区域（默认放返回按钮）	—
title-suffix	标题后缀区域	—
action	右侧操作按钮区域	—
default	页面主内容区域	—
footer	自定义底部	—

典型布局示例

<CommonPage back show-header title="订单列表">
  <!-- 右侧操作按钮 -->
  <template #action>
    <n-space>
      <n-button type="primary" @click="showImport = true">导入</n-button>
      <n-button @click="handleExport">导出</n-button>
    </n-space>
  </template>

  <!-- 标题后缀加角标 -->
  <template #title-suffix>
    <n-tag type="info" size="small">共 {{ total }} 条</n-tag>
  </template>

  <!-- 主内容 -->
  <AiCrudPage ref="crudRef" api="/api/order" :columns="orderColumns" />
</CommonPage>