页面容器说明

在 OneAdmin 前端项目中，大部分页面都会基于统一的页面容器进行开发。

框架内提供了两个常用的页面容器组件：

• AppPage
• CommonPage

它们统一在：

/src/components/common/index.js

中进行导出，开发时可以直接使用。

在创建新页面时，通常会以这两个组件作为最外层结构开始开发。

虽然它们看起来类似，但实际定位是不同的。

AppPage（页面级容器）#

AppPage 是一个​更轻量的页面容器，主要用于承载完整页面内容。

特点#

• 结构简单，仅提供基础布局能力
• 不包含标题区、操作区等业务结构
• 提供基础外边距（m-12）
• 可选底部 Footer
• 支持返回顶部（BackTop）

适用场景#

适用于：

• 自定义布局页面
• 内容结构不规则的页面
• 仪表盘（Dashboard）
• 大屏类页面
• 需要完全控制页面结构的场景

可以理解为：一个“空白画布”，只帮你做好最外层容器，其余完全由你控制

CommonPage（标准业务页面容器）#

CommonPage 是一个​带有完整后台页面结构的容器组件，用于绝大多数业务页面。

特点#

• 内置页面头部（Header）

  • 标题（自动读取 route.meta.title）
  • 返回按钮（可选）
  • 操作区（action 插槽）

• 内容区域自动包裹在 AppCard 中

• 内置统一间距与滚动处理

• 可选底部 Footer

• 支持插槽扩展（header / title-prefix / action 等）

适用场景#

适用于：

• 列表页（如用户管理、角色管理）
• 表单页（新增 / 编辑）
• 标准后台 CRUD 页面
• 需要统一页面风格的业务页面

可以理解为：一个“标准后台页面模板”，已经帮你做好标题、卡片、布局结构

核心区别总结#

如何选择#

在实际开发中，可以用一个简单的原则来判断：

优先使用 CommonPage#

如果你的页面是典型后台页面，例如：

• 列表 + 搜索
• 表单页面
• 管理类页面

直接使用 CommonPage，可以减少大量重复布局代码。

使用 AppPage 的情况#

当出现以下情况时，建议使用 AppPage：

• 页面布局高度自定义
• 不需要标题区域
• 页面结构不是标准 CRUD
• 需要完全掌控 DOM 结构

实践建议#

在团队开发中，建议：

• 默认使用 CommonPage 作为标准页面容器
• 仅在特殊场景下使用 AppPage

这样可以保证：

• 页面风格统一
• 代码结构一致
• 降低维护成本