### MkLayout 布局组件

#### example

> test

``` jsx
  import {Modal,Button} from 'maycur-antd';
  import {useState} from 'react';
  import mock from './mockdata/mock';
  let [visible,visibleChange] = useState(false);
  let renderContent=()=>{ return <div>内容区域</div>}
  const Link=function (props){
    return <span>{props.children}</span>
  };
  (<div>
        <Button onClick={()=>{visibleChange(true)}}>大屏效果</Button>
        <Modal
            title="layout案例"
            width={1400}            
            visible={visible}            
            onOk={()=>{visibleChange(false)}}
            onCancel={()=>{visibleChange(false)}}
        >
        <div style={{height:350,display:'flex',flexDirection:'column'}}>
          <MkLayout 
            setMenus={mock.setMenus}
            setSiderMenus={mock.setSiderMenus}
            renderContent={renderContent}
            pathArr={mock.pathArr}
            isShowMenuFn={mock.isShowMenuFn}    
            Link={Link}    
            logo={'https://dt-uat.maycur.com/formrender/static/images/mk/mk-logo.png'}
          /> 
        </div>      
        </Modal>
    </div>)
  
```

##### 文档问题

* __setMenus__ 报错
* 复杂的组件，没有example很难理解
* 必须的几个props没有说明
* menu的数据格式没有

***

#### menu元素数据结构示例

```js static
menus = [{

        path: '/home',//菜单路由
        code: 'home',//唯一编码
        name:'首页',//显示名称
        redirect: true,
        subRoutes: [],//子菜单
        permission: 'home'
    }, {
        path: '/report',
        code: 'report',
        name: '报表'
        redirect: true,
        subRoutes: [],
        permission: 'report'
    }]

```

#### 路由配置文件

_ 路由配置文件时什么？_

配置文件中单个菜单的属性：

| 属性 | 说明 | 类型 | 默认值 |
| --- | ---  | --- | ---   |
| split | 菜单与菜单之间的分割线，若提供此值，则不需要提供其他属性，会只渲染一个分割线用来分割菜单 | Boolean | false |
| path | 菜单路径 | String | 无 |
| name | 菜单名 | String | 无 |
| icon | 菜单 icon。顶部菜单栏有 icon 时显示 icon ，不显示 name；侧菜单栏会显示 icon + name  | String 或 ReactNode | 无 |
| iconSize| icon 大小 | string| '18px'|
| subRoutes |子菜单列表或顶部菜单下的侧菜单列表 | Array | [] |
| hoverToShowSubMenu | 菜单 hover 时是否显示子菜单，子菜单列表为subRoutes。一般来说侧菜单不需要此值；顶部菜单此值默认为 false，需要 hover 显示子菜单时可将此值设置为 true | Boolean | false | 
| permission | 菜单权限，下文中 isShowMenuFn 根据此值判断菜单是否显示。无值时默认显示 | String | 无 |
| customRender | 是否需要自定义菜单的显示内容 | Boolean | false |
| skip | 菜单是否需要点击跳转至外部链接 | Boolean | false |
| href | skip 为 true 时，点击会跳转至 href 对应的链接 | String | 无 |
| customHandleClick | 是否需要自定义菜单点击事件 | Boolean | 无 | 
| redirect | ? | Boolean | ? |

## API

### MkHeader
顶部菜单栏，包含 logo、居左的菜单、居右的菜单三部分。

props:

| 属性 | 说明 | 参数 | 类型 | 默认值 | 返回值 |
| --- | ---  | --- | --- | ---  | --- |
| onSubMenuClick | 处理特殊的菜单点击事件。如中英文切换、登出、打开客服弹框等 | onSubMenuClick(menu: Object) | Function | 无 |
| renderHeaderMenu | 渲染整条顶部菜单栏。若不提供，则使用组件内默认提供的 renderHeaderMenu 渲染。| renderHeaderMenu(menu: Object) | Function |有 |
| isShowMenuFn | 是否需要渲染菜单 | isShowMenuFn(menu: Object) | Function | |Boolean|

`renderHeaderMenu` 渲染单个菜单的原则：

包裹菜单内容的标签：
 1、根据 isShowMenuFn 判断是否需要显示该菜单。
   若无权限则返回 null；
   若有权限，则继续走以下逻辑
 2、根据 skip 判断是否需要进行工程间的跳转。
   若需要跳转，则提供 href 用于跳转（如：form-web 中的设置菜单需要跳转到 admin，href=\ `/admin/${window.location.search}#/setting\` ），渲染为 `<a>` 标签，包裹的内容见下方“菜单内容渲染逻辑”；
  若不需要跳转，则继续走以下逻辑
 3、根据 customHandleClick 判断是否需要处理特殊的菜单点击事件。
   若需要，则渲染为 `<span>` 标签， `onClick` 事件指向 `onSubMenuClick` ，包裹的内容见下方“菜单内容渲染逻辑”；
   若不需要，则继续走以下逻辑
 4、以上均不满足时，渲染为 `react-router` 的 `Link` 组件， `to` 属性为 `menu.path` ，包裹的内容见下方“菜单内容渲染逻辑”

 菜单内容渲染逻辑：
 1、若 `menu.customRender` 为 `true` ，则渲染 `renderMenuLabel(menu)` 
 2、若提供了 `icon` , 当 `icon` 为 `string` 时，渲染为 <span className={\ `fm ${menu.icon}\` }>，否则默认 `icon` 为一个 `ReactNode` ，直接渲染
 3、若未提供 `icon` , 则渲染 `menu.name` 

 ### MkSider
 侧边导航栏

props:

| 属性 | 说明 | 参数 | 类型 | 默认值 |
| --- | ---  | --- | --- | --- |
| renderSiderMenu | 渲染侧边菜单栏。若不提供，则使用组件内默认提供的 renderSiderMenu 渲染。| renderSiderMenu(menu: Object) | Function |有 |
| getBadgeCount | 返回菜单边上显示的红色椭圆内的数字，如待审批单据数|getBadgeCount(menu: Object)|Function|默认返回0|
|isShowMenuFn|同 MkHeader||||

`renderSiderMenu` 渲染单个菜单的原则：
1、若菜单 `split` 为 `true` ，则显示一条分割线，不显示其他内容
2、根据 isShowMenuFn 判断是否需要显示该菜单。
   若无权限则返回 null；
   若有权限，则继续走以下逻辑
3、渲染 `menu.icon + menu.name` 
4、若提供了 `getBadgeCount` 方法且返回值不为0，则会额外渲染一个显示数字的 `<Badge>` 组件
5、侧菜单收缩时， `<Badge>` 组件渲染为不带数字的红色小圆点