---
name: deppon-pro-layout-page
description: >-
    使用 ProLayout 搭建管理台壳层：collapsed、menu-items、top-menu、active-menu、menu-router、logo、插槽 header-right。
    在用户提到 ProLayout、侧栏菜单、管理台壳层 时应用。
---

# deppon-pro-layout-page

## 依据来源（私有 npm）

-   **`deppon-npm-private-registry`**。
-   **`@deppon/deppon-template`**：`ProLayout` — props / 插槽以 `*.d.ts` 为准。
-   **`@deppon/deppon-ui`**。
-   **`deppon-npm-skills`**。不默认读取 `deppon-npm` 的 `site/`。

## 要点

-   `import { ProLayout } from '@deppon/deppon-template'`。
-   常用 props：`:collapsed` + `@update:collapsed`、`:menu-items`、`:top-menu-items`、`:active-menu`、`:menu-router="true"`、`:title`、`:logo`、`:fixed-header`、`:show-header-search` 等——**以已安装包类型定义与环境为准**。
-   内容区默认放在默认 slot；`#header-right` 放用户区等。

## 与嵌套关系

业务项目可能在根布局已套一层壳；**页面内再嵌 `ProLayout`** 时，仅关注包文档中的 props/slot，勿与外层布局冲突。

## 生成清单

-   [ ] `active-menu` 与路由 path 同步。
-   [ ] `menuItems` 结构与子路由一致；如需图标，按包文档与项目惯例使用 `markRaw` 等。