hoonghu-layout

基于antd-prolayout二次开发,适用于鸿鹄大脑的定制化组件

Usage no npm install needed!

<script type="module">
  import hoonghuLayout from 'https://cdn.skypack.dev/hoonghu-layout';
</script>

README

鸿鹄大脑风格布局

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

升级功能

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

注意事项:

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

使用步骤:

  1. 通过npm | yarn安装插件
  2. 替项目中所有页面及组件中的"@ant-design/pro-layout" 为"hoonghu-layout",示例如下:
//BasicLayout内
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";
    

更新日志

2021/11/2 | v0.1.13

  • 修复在使用breadcrumbRender配置面包屑时出现==Invalid attempt to spread non-iterable instance==的错误。无论调用与否,根节点都为首页,此特性向下兼容