# 鸿鹄大脑风格布局 > 基于 ant-design-pro-layout 二次封装的布局插件，适用于**鑫义科技-鸿鹄大脑**项目 #### 升级功能 1. 导航栏圆角 2. 收缩按钮移动至侧边栏，侧边栏宽度、导航栏高度更为纤细 3. 页面容器固定，内容超出滚动 4. footer 移至侧边栏 #### 注意事项： 1. 使用本组件需要配置 sidemenu 布局以及 dark 主题 2. 组件内置了导航栏圆角风格，如在项目内已配置过圆角，需删除项后使用 3. footerRender 已弃用，可通过 showFooter(Boolean)控制侧边栏 copyright 显隐 4. ~~breadcrumbRender 已弃用，根节点已默认为首页，使用时请删除此 Api 调用~~ 。==v0.1.13==版本更新 5. 组件默认包裹 PageHeaderWrapper 使用中需去除业务页面中的 PageHeaderWrapper。==v0.1.16==版本更新 #### 使用步骤： 1. 通过 npm | yarn 安装插件 2. 替项目中所有页面及组件中的"@ant-design/pro-layout" 为"hoonghu-layout"，示例如下： ``` //BasicLayout内 import ProLayout from "hoonghu-layout"; ``` 3. 如需单独配置业务组件的 PageHeaderWrapper，可判断 props.location.pathname 后在 ProLayout.pageHeaderConfig 进行配置。==v0.1.16==版本更新 ``` //简单示例 pageHeaderConfig={{title:pathname === 'home' ? false : ''}} ``` #### 常见问题： #### 更新日志 2021/11/2 | **v0.1.13** - 修复在使用 breadcrumbRender 配置面包屑时出现==Invalid attempt to spread non-iterable instance==的错误。无论调用与否，根节点都为首页，此特性向下兼容 2022/02/25 | **v0.1.14** - 全局配置弹出框（Select, Tooltip, Menu 等等）渲染至父节点，默认渲染到 body 上。 2022/03/07 | **v0.1.15** - 增加全局水印，在 ProLayout.waterMark 下进行配置，参数详见[WaterMark](https://procomponents.ant.design/components/water-mark#%E5%9F%BA%E7%A1%80%E5%8F%82%E6%95%B0) 2026/05/29 | **v0.1.19** - 优化 `PageHeaderWrapper` 嵌套层级通信与隐藏逻辑，彻底解决子页面手写 `PageHeaderWrapper` 导致的嵌套双头部问题。 - 新增 `customStyle?: boolean` 控制属性，当设为 `true` 时，可有条件地取消定制的暗黑侧边栏样式，恢复为原生默认风格。 - 新增 `siderRadius?: boolean` 控制属性，独立控制顶部导航栏圆角角标的显隐（默认显示，仅在设为 `false` 时隐藏）。 - 优化 Logo 区域背景色（`#0c2d53`）的覆写规则，使其只在 dark（暗黑）主题下生效，在 light（亮色）主题下保持透明。 - 彻底移除了侧边栏定制样式中的所有 `!important` 声明，改用高优先级类名选择器组合覆盖，提高样式维护的清洁度。 2022/05/16 | **v0.1.16** - 移除全局的 getPopupContainer 属性，在实际使用中会造成其他影响。 - 增加全局页面切换动画效果,默认全局包裹了 PageHeaderWrapper。 1. 打包发布： ```bash npm run build npm config set registry https://registry.npmjs.org npm publish -d ``` 72. 发布完成后，还原 npm 源（淘宝源）： ```bash npm config set registry https://registry.npmmirror.com ```