Package Exports

hoonghu-layout

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (hoonghu-layout) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

鸿鹄大脑风格布局

基于 ant-design-pro-layout 二次封装的布局插件，适用于鑫义科技-鸿鹄大脑项目

升级功能

导航栏圆角
收缩按钮移动至侧边栏，侧边栏宽度、导航栏高度更为纤细
页面容器固定，内容超出滚动
footer 移至侧边栏

注意事项：

使用本组件需要配置 sidemenu 布局以及 dark 主题
组件内置了导航栏圆角风格，如在项目内已配置过圆角，需删除项后使用
footerRender 已弃用，可通过 showFooter(Boolean)控制侧边栏 copyright 显隐
breadcrumbRender 已弃用，根节点已默认为首页，使用时请删除此 Api 调用

使用步骤：

通过 npm | yarn 安装插件
替项目中所有页面及组件中的"@ant-design/pro-layout" 为"hoonghu-layout"，示例如下：

import ProLayout from "hoonghu-layout";
import { PageHeaderWrapper } from "hoonghu-layout";

常见问题：

1. antd版本为3.x的项目在侧边栏收起时，展开按钮宽度超出

原因：原生样式定死且权重为!important

 .ant-menu-inline-collapsed > .ant-menu-item{
    padding: 0 32px !important
}

解决：在global.less中覆盖

 .ant-menu-inline-collapsed .ant-menu-item {
    padding: 0 16px !important;
}

2. 导航栏右上角头像没有垂直居中
原因：旧版css变量为64px
```
@layout-header-height: 64px;
```
解决：在GlobalHeader/index.less内引入新的变量
```
@import '~hoonghu-layout/es/global.less'
```

3. 导航栏下的面包屑消失

原因：未引入正确的PageHeaderWrapper组件

import { PageHeaderWrapper } from "@ant-design/pro-layout";

解决：更换引入路径

import { PageHeaderWrapper } from "hoonghu-layout";

hoonghu-layout