Page Frame

适用范围：Legacy Admin Kit / Schema 与旧 admin-vue。新 admin-nuxtui 的开发入口见管理端 Nuxt UI 指南。

Page Frame 是普通管理页面的共享外框，由 YPageContainer + YPageHeader 组成。它拥有页面宽度、纵向节奏、标题层级和页面级 actions 的响应式关系，不拥有页面的数据或路由状态。

什么时候使用

• 查询之外的管理页、设置页、支付页、详情/分析页。
• 页面需要稳定的 title、description、可选 eyebrow 与 actions。
• 页面需要在 contained/workspace 和 workbench/canvas 中明确选择空间语义。

Data Workbench 已由 LegacyYDataTable 提供完整页面构图时，不要在外层重复 Page Frame。Auth、Dialog/Drawer 内的任务也不要套页面容器。

Anatomy 与空间选择

YPageContainer
├─ YPageHeader
│  ├─ eyebrow（可选）
│  ├─ title + description
│  └─ actions
└─ feature content / states

• space="workspace"：默认，适合需要利用 Shell 可用宽度的管理工作区。
• space="contained"：适合阅读或聚焦任务；大屏仍受 focused max width 约束。
• surface="workbench"：默认，使用紧凑的管理页节奏，并在 desktop 参与 Shell 高度/overflow 布局。
• surface="canvas"：适合看板或视觉画布，保留更大的页面间距。

窄屏 actions 自动换行；业务按钮只进入 actions slot，不复制 header DOM 或自行维持另一套断点。

State owner

Feature/router 继续持有 loading、error、permission、query、save 与 navigation state。Page Frame 只接收标题、描述和 action View；它不是页面 controller。

真实 consumer

• /administration/audit — src/app/administration/audit/index.vue
• /administration/settings — src/app/administration/configuration/settings.vue
• /dashboard — src/app/main/dashboard/index.vue
• Payments / subscription 等页面同样复用该组合。

Anti-pattern

• 在 feature 中复制 max-width、page padding、header title/actions DOM。
• 用 YPageContainer 包住已经拥有 Page Context 的 LegacyYDataTable。
• 为标题区建立 feature-local responsive CSS。
• 把 route/query/loading state 放进 Page Frame。

组件目录见 Yoyo Admin 组件。