// src/components/NavLeft/indexcss
import React from 'react'
import { Menu,Icon,Layout } from 'antd';
import { NavLink,withRouter } from 'react-router-dom'
import MenuConfig from './../../config/menuConfig'
import './index.less'node
const SubMenu = Menu.SubMenu;
const { Sider } = Layout;
class NavLeft extends React.Component {react
state = { openKeys:['/kuaishou'], currentKey:'', collapsed:false } rootKeys=[]; onCollapse = async (collapsed) => { const currentKey = this.props.location.pathname const openKeys=[] openKeys.push('/'+currentKey.split('/')[1]) await this.setState({ collapsed, openKeys:!collapsed ? openKeys : [] }); }; handleClick=(item)=>{ this.setState({ currentKey:item.key }) } renderMenu = (data) => { return data.map((item) => { if(item.children) { return ( <SubMenu title={ <span> <Icon type={item.icon}/> <span>{item.title}</span> </span> } key={item.key} > {this.renderMenu(item.children)} </SubMenu> ) } return <Menu.Item title={item.title} key={item.key}> <NavLink to={item.key}>{item.title}</NavLink> </Menu.Item> }) } getInitSubKeys=(data)=>{ return data.map(item =>{ return this.rootKeys.push(item.key) }) } onOpenChange= openKeys => { if(this.state.collapsed){ return false; } this.setState({openKeys}) // const lastOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key)=== -1); // if(this.rootKeys.indexOf(lastOpenKey)=== -1) { // this.setState({openKeys:[...this.state.openKeys,openKeys]}) // }else { // this.setState({ // openKeys:lastOpenKey ? [lastOpenKey] : [] // }) // } } componentWillMount () { this.MenuTreeNode = this.renderMenu(MenuConfig); this.getInitSubKeys(MenuConfig) const currentKey = this.props.location.pathname const openKey='/'+currentKey.split('/')[1] this.setState({ currentKey, openKeys:[...this.state.openKeys,openKey] }) } componentWillReceiveProps(nextProps){ const currenPath = this.props.location.pathname const nextPath = nextProps.location.pathname if(currenPath !== nextPath){ this.setState({ currentKey:nextPath }) } } render() { return ( <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse} className='sider' > <div className={!this.state.collapsed ? 'collap':'uncollap'}> <span className='font'>CDN服務質量數據分析</span> </div> <Menu className='menu' mode='inline' theme="dark" openKeys={this.state.openKeys} selectedKeys={[this.state.currentKey]} onOpenChange={this.onOpenChange} onClick={this.handleClick} > {this.MenuTreeNode} </Menu> </Sider> ) }
}
export default withRouter(NavLeft);web
// menuConfig
const menuList = [
{
title:'快手',
key:'/kuaishou',
icon:'user',
children:[
{markdown
title:'實時數據', key:'/kuaishou/real_time'
},
{網絡
title:'離線調優數據支持', key:'/kuaishou/qos'
},
{antd
title:'快手播放體驗數據', key:'/kuaishou/vff'
},
{react-router
title:'快手資源下載數據', key:'/kuaishou/dld'
},
{less
title:'快手錶格數據', key:'/kuaishou/table'
}
]
},
{
title:'頭條',
key:'/toutiao',
icon:'edit',
children:[
{dom
title:'節點維度實時數據', key:'/toutiao/node',
},
{
title:'廠商對比', key:'/toutiao/cdn_vs'
},
{
title:'頭條服務質量日報', key:'/toutiao/daily'
}
]
},
{
title:'芒果',
key:'/mangguo',
icon:'redo',
children:[
{
title:'郵件各終端及整體趨勢', key:'/mangguo/mail_platforms'
},
{
title:'郵件各地區趨勢', key:'/mangguo/mail_locations'
},
{
title:'郵件各地區趨勢easy', key:'/mangguo/mail_locations_easy'
},
{
title:'pcvideo日報', key:'/mangguo/pcv_daily'
},
{
title:'ottvideo', key:'/mangguo/ott_daily'
},
{
title:'日誌分析', key:'/mangguo/user_log_ana'
}
]
},
{
title:'其餘點播客戶',
key:'/other_customer',
icon:'zoom-in',
children:[
{
title:'秒拍波波視頻', key:'/other_customer/miaopai'
},
{
title:'淘寶小視頻', key:'/other_customer/taobao'
},
{
title:'微博小時數據', key:'/other_customer/weibo'
},
{
title:'微博日報', key:'/other_customer/weibo_daily'
},
{
title:'協議棧A/B測試', key:'/other_customer/ab_test'
},
{
title:'youku直播卡頓區域', key:'/other_customer/youku_live_impairment_location'
},
{
title:'youku直播卡頓節點', key:'/other_customer/youku_live_impairment_node'
}
]
},
{
title:'穩定性',
key:'/stability',
icon:'bell',
children:[
{
title:'cpu', key:'/stability/cpu'
},
{
title:'io', key:'/stability/io'
},
{
title:'io問題日報', key:'/stability/io_daily_report'
},
{
title:'網絡', key:'/stability/network'
}
]
},
{
title:'直播',
key:'/live',
icon:'compass',
children:[
{
title:'hls直播', key:'/live/hls'
}
]
},
{
title:'節點質量',
key:'/iq',
icon:'file-markdown',
children:[
{
title:'節點質量打標', key:'/iq/real_node_tagging'
},
{
title:'質量差節點', key:'/iq/bad_network'
},
{
title:'節點網絡質量', key:'/iq/network'
},
{
title:'TOP域名SLA指標', key:'/iq/top_domain_sla'
},
{
title:'回源策略建議', key:'/iq/l1_l2_strategy'
},
{
title:'路由寶探測數據', key:'/iq/luyoubao'
},
{
title:'節點硬件數據', key:'/iq/node_tagging'
},
{
title:'節點傳輸質量預估', key:'/iq/network_trans_qos'
}
]
},
{
title:'L1服務質量',
key:'/l1_qos',
icon:'file-text',
children:[
{
title:'碼率慢速比', key:'/l1_qos/bitrate_slow'
},
{
title:'中斷率', key:'/l1_qos/abort'
},
{
title:'首包和服務處理時間', key:'/l1_qos/fbt_st'
},
{
title:'L1回源質量', key:'/l1_qos/l1_l2'
}
]
}
]
export default menuList;
// css 代碼 (主要是導航收縮切換動畫)
.sider{
height: calc(100vh); overflow: scroll; &::-webkit-scrollbar {display:none} .collap{ position: fixed; height: 80px; line-height: 80px; overflow: hidden; background:rgb(192, 147, 22); text-align: center; animation:extend .2s ease; -webkit-animation:extend .2s ease; .font { color: #ffffff; font-size: 15px; padding: 0 24.5px; } } .uncollap{ position: fixed; height: 80px; width: 80px; line-height: 80px; background: rgb(192, 147, 22); overflow: hidden; animation:shrink .2s ease; -webkit-animation:shrink .2s ease; .font { color: #ffffff; font-size: 12px; } } .menu { padding-top: 80px; } .ant-layout-sider-trigger{ background: rgb(10, 63, 83); }
}
@keyframes extend
{
from {width:80px;}
to {width:200px;}
}
@-webkit-keyframes extend
{
from {width:80px;}
to {width:200px;}
}
@keyframes shrink
{
from {width:200px;}
to {width:80px;}
}
@-webkit-keyframes shrink {from {width:200px;}to {width:80px;}}