fix navlist
This commit is contained in:
hanxie
parent
b603b2ca39
commit
92148babe7
@ -1,5 +1,6 @@
|
||||
window.i18ndoc = {
|
||||
"zh-cn": {
|
||||
"com.alibaba.nacos.layout.noenv.nacosversion":"1.0",
|
||||
"nacos.component.ExportDialog.tags2": "标签:",
|
||||
"historyRollback": "历史版本",
|
||||
"com.alibaba.nacos.component.MiddleWareEnv.Spas_dedicated": "Spas专用",
|
||||
@ -474,6 +475,7 @@ window.i18ndoc = {
|
||||
"serviceManagement": "服务列表"
|
||||
},
|
||||
"en-us": {
|
||||
"com.alibaba.nacos.layout.noenv.nacosversion":"1.0",
|
||||
"nacos.component.CloneDialog.the_same_configuration": "Conflict:",
|
||||
"to": "to",
|
||||
"nacos.page.newconfig.data_encryption3": "Data Encryption:",
|
||||
|
||||
@ -1,5 +1,8 @@
|
||||
window.i18ndoc = {
|
||||
"zh-cn": {
|
||||
"com.alibaba.nacos.layout.noenv.nacosversion":"1.0",
|
||||
"com.alibaba.nacos.page.configurationManagementVirtual":"配置管理",
|
||||
"com.alibaba.nacos.page.serviceManagementVirtual":"服务管理",
|
||||
"nacos.component.ExportDialog.tags2": "标签:",
|
||||
"historyRollback": "历史版本",
|
||||
"com.alibaba.nacos.component.MiddleWareEnv.Spas_dedicated": "Spas专用",
|
||||
@ -474,6 +477,9 @@ window.i18ndoc = {
|
||||
"serviceManagement": "服务列表"
|
||||
},
|
||||
"en-us": {
|
||||
"com.alibaba.nacos.layout.noenv.nacosversion":"1.0",
|
||||
"com.alibaba.nacos.page.configurationManagementVirtual":"ConfigManagement",
|
||||
"com.alibaba.nacos.page.serviceManagementVirtual":"ServiceManagement",
|
||||
"nacos.component.CloneDialog.the_same_configuration": "Conflict:",
|
||||
"to": "to",
|
||||
"nacos.page.newconfig.data_encryption3": "Data Encryption:",
|
||||
|
||||
@ -4,399 +4,414 @@ import siteConfig from '../config';
|
||||
import Header from './Header';
|
||||
import $ from 'jquery';
|
||||
|
||||
export default class extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.initNav = this.props.navList;
|
||||
this.deepNav = [];
|
||||
this.oneLevelNavArr = {}; //平行导航map
|
||||
this.state = {
|
||||
leftBarClose: false,
|
||||
showLink: null,
|
||||
navRow: [],
|
||||
noChild: false
|
||||
};
|
||||
}
|
||||
export default class MainLayout extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.initNav = this.props.navList;
|
||||
this.deepNav = [];
|
||||
this.oneLevelNavArr = {}; //平行导航map
|
||||
this.state = {
|
||||
leftBarClose: false,
|
||||
showLink: null,
|
||||
navRow: [],
|
||||
noChild: false
|
||||
};
|
||||
}
|
||||
|
||||
goBack() {
|
||||
goBack() {
|
||||
window.hashHistory.goBack();
|
||||
}
|
||||
nacosToggleNav(id, event) {
|
||||
event.preventDefault();
|
||||
let nowNav = document.getElementById(id);
|
||||
let iconClass = nowNav.querySelector('.iconshow');
|
||||
let subNav = nowNav.querySelector('.subnavlist');
|
||||
let classList = iconClass.classList;
|
||||
let tmpClassName = 'iconshow ';
|
||||
for (let i = 0; i < classList.length; i++) {
|
||||
if (classList[i] === 'icon-arrow-down') {
|
||||
subNav.style.display = 'none';
|
||||
subNav.className += ' hidden';
|
||||
tmpClassName += 'icon-arrow-right';
|
||||
}
|
||||
if (classList[i] === 'icon-arrow-right') {
|
||||
tmpClassName += 'icon-arrow-down';
|
||||
subNav.className = subNav.className.replace(/hidden/g, '');
|
||||
subNav.style.display = 'block';
|
||||
}
|
||||
}
|
||||
iconClass.className = tmpClassName;
|
||||
}
|
||||
nacosGoBack(url) {
|
||||
let params = window.location.hash.split('?')[1];
|
||||
let urlArr = params.split('&') || [];
|
||||
let queryParams = [];
|
||||
for (let i = 0; i < urlArr.length; i++) {
|
||||
if (
|
||||
urlArr[i].split('=')[0] !== '_k' &&
|
||||
urlArr[i].split('=')[0] !== 'dataId' &&
|
||||
urlArr[i].split('=')[0] !== 'group'
|
||||
) {
|
||||
if (urlArr[i].split('=')[0] === 'searchDataId') {
|
||||
queryParams.push(`dataId=${urlArr[i].split('=')[1]}`);
|
||||
} else if (urlArr[i].split('=')[0] === 'searchGroup') {
|
||||
queryParams.push(`group=${urlArr[i].split('=')[1]}`);
|
||||
} else {
|
||||
queryParams.push(urlArr[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
window.hashHistory.push(`/${url}?${queryParams.join('&')}`);
|
||||
}
|
||||
nacosEnterBack() {
|
||||
document.getElementById('backarrow').style.color = '#09c';
|
||||
}
|
||||
nacosOutBack() {
|
||||
document.getElementById('backarrow').style.color = '#546478';
|
||||
}
|
||||
nacosToggleLeftBar() {
|
||||
if (!this.state.leftBarClose) {
|
||||
//关闭
|
||||
this.nacosOutDom.className = 'viewFramework-product';
|
||||
this.nacosLeftBarDom.style.width = 0;
|
||||
this.nacosBodyDom.style.left = 0;
|
||||
this.nacosToggleIconDom.style.left = 0;
|
||||
} else {
|
||||
this.nacosOutDom.className = 'viewFramework-product viewFramework-product-col-1';
|
||||
this.nacosLeftBarDom.style.width = '180px';
|
||||
this.nacosBodyDom.style.left = '180px';
|
||||
this.nacosToggleIconDom.style.left = '160px';
|
||||
}
|
||||
|
||||
window.hashHistory.goBack();
|
||||
}
|
||||
simpleMVCToggleNav(id, event) {
|
||||
event.preventDefault();
|
||||
let nowNav = document.getElementById(id);
|
||||
let iconClass = nowNav.querySelector('.iconshow');
|
||||
let subNav = nowNav.querySelector('.subnavlist');
|
||||
let classList = iconClass.classList;
|
||||
let tmpClassName = 'iconshow ';
|
||||
for (let i = 0; i < classList.length; i++) {
|
||||
if (classList[i] === 'icon-arrow-down') {
|
||||
subNav.style.display = 'none';
|
||||
subNav.className += ' hidden';
|
||||
tmpClassName += 'icon-arrow-right';
|
||||
}
|
||||
if (classList[i] === 'icon-arrow-right') {
|
||||
tmpClassName += 'icon-arrow-down';
|
||||
subNav.className = subNav.className.replace(/hidden/g, '');
|
||||
subNav.style.display = 'block';
|
||||
}
|
||||
}
|
||||
iconClass.className = tmpClassName;
|
||||
}
|
||||
simpleMVCGoBack(url) {
|
||||
this.setState({
|
||||
leftBarClose: !this.state.leftBarClose
|
||||
});
|
||||
}
|
||||
navTo(url) {
|
||||
if (url !== '/configdetail' && url !== '/configeditor') {
|
||||
//二级菜单不清空
|
||||
window.setParams({
|
||||
dataId: '',
|
||||
group: ''
|
||||
});
|
||||
}
|
||||
|
||||
let params = window.location.hash.split('?')[1];
|
||||
let urlArr = params.split('&') || [];
|
||||
let queryParams = [];
|
||||
for (let i = 0; i < urlArr.length; i++) {
|
||||
if (urlArr[i].split('=')[0] !== '_k' && urlArr[i].split('=')[0] !== 'dataId' && urlArr[i].split('=')[0] !== 'group') {
|
||||
if (urlArr[i].split('=')[0] === 'searchDataId') {
|
||||
queryParams.push(`dataId=${urlArr[i].split('=')[1]}`)
|
||||
} else if (urlArr[i].split('=')[0] === 'searchGroup') {
|
||||
queryParams.push(`group=${urlArr[i].split('=')[1]}`)
|
||||
} else {
|
||||
queryParams.push(urlArr[i])
|
||||
}
|
||||
}
|
||||
}
|
||||
window.hashHistory.push(`/${url}?${queryParams.join('&')}`);
|
||||
}
|
||||
simpleMVCEnterBack() {
|
||||
document.getElementById('backarrow').style.color = '#09c';
|
||||
}
|
||||
simpleMVCOutBack() {
|
||||
document.getElementById('backarrow').style.color = '#546478';
|
||||
}
|
||||
simpleMVCToggleLeftBar() {
|
||||
if (!this.state.leftBarClose) {
|
||||
//关闭
|
||||
this.simpleMVCOutDom.className = 'viewFramework-product';
|
||||
this.simpleMVCLeftBarDom.style.width = 0;
|
||||
this.simpleMVCBodyDom.style.left = 0;
|
||||
this.simpleMVCToggleIconDom.style.left = 0;
|
||||
} else {
|
||||
this.simpleMVCOutDom.className = 'viewFramework-product viewFramework-product-col-1';
|
||||
this.simpleMVCLeftBarDom.style.width = '180px';
|
||||
this.simpleMVCBodyDom.style.left = '180px';
|
||||
this.simpleMVCToggleIconDom.style.left = '160px';
|
||||
}
|
||||
let params = window.location.hash.split('?')[1];
|
||||
let urlArr = params.split('&') || [];
|
||||
let queryParams = [];
|
||||
for (let i = 0; i < urlArr.length; i++) {
|
||||
if (urlArr[i].split('=')[0] !== '_k') {
|
||||
queryParams.push(urlArr[i]);
|
||||
}
|
||||
}
|
||||
|
||||
this.setState({
|
||||
leftBarClose: !this.state.leftBarClose
|
||||
});
|
||||
}
|
||||
navTo(url) {
|
||||
if (url !== '/configdetail' && url !== '/configeditor') {
|
||||
//二级菜单不清空
|
||||
window.setParams({
|
||||
dataId: '',
|
||||
group: ''
|
||||
});
|
||||
}
|
||||
window.hashHistory.push(`${url}?${queryParams.join('&')}`);
|
||||
}
|
||||
nacosSetSpecialNav(item) {
|
||||
item.children.forEach((_item) => {
|
||||
let obj = _item;
|
||||
|
||||
let params = window.location.hash.split('?')[1];
|
||||
let urlArr = params.split('&') || [];
|
||||
let queryParams = [];
|
||||
for (let i = 0; i < urlArr.length; i++) {
|
||||
if (urlArr[i].split('=')[0] !== '_k') {
|
||||
queryParams.push(urlArr[i]);
|
||||
}
|
||||
}
|
||||
if (obj.dontUseChild === true) {
|
||||
obj.parentName = item.title;
|
||||
obj.parentId = item.id;
|
||||
obj.parentPath = '/' + item.id;
|
||||
this.deepNav.push(obj);
|
||||
}
|
||||
if (_item.children) {
|
||||
this.nacosSetSpecialNav(_item);
|
||||
}
|
||||
});
|
||||
}
|
||||
nacosNavAct(serviceName, match, location) {
|
||||
if (!match) {
|
||||
let formatpath = location.pathname.substr(1); //得到当前路径
|
||||
let nowpathobj = this.oneLevelNavArr[formatpath]; //根据平行导航匹配父类
|
||||
if (nowpathobj) {
|
||||
if (nowpathobj.parent === serviceName) {
|
||||
//如果父类等于当前的导航则高亮
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
window.hashHistory.push(`${url}?${queryParams.join('&')}`);
|
||||
}
|
||||
simpleMVCSetSpecialNav(item) {
|
||||
item.children.forEach(_item => {
|
||||
let obj = _item;
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
nacosLoopNavDeeply(data, parentServiceName) {
|
||||
//深度遍历获取所有的导航数据
|
||||
data.forEach((item) => {
|
||||
if (item) {
|
||||
let navObj = item,
|
||||
_parentServiceName = item.serviceName;
|
||||
navObj.parentServiceName = parentServiceName;
|
||||
this.oneLevelNavArr[item.serviceName] = navObj; //得到每一个层级的导航映射
|
||||
if (item.children && item.children.length > 0) {
|
||||
this.nacosLoopNavDeeply(item.children, _parentServiceName);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
activeNav(id) {
|
||||
if (this.preActNav) {
|
||||
this.preActNav.removeClass('active');
|
||||
}
|
||||
let nowNav = $(`#${id}`);
|
||||
nowNav.addClass('active');
|
||||
this.preActNav = nowNav;
|
||||
}
|
||||
nacosLoopNav(data, index = 0, parent) {
|
||||
//遍历导航，只显示2级
|
||||
let self = this;
|
||||
return data.map((item) => {
|
||||
if (!item) {
|
||||
return '';
|
||||
}
|
||||
index++;
|
||||
if (item.dontUseChild === true) {
|
||||
return '';
|
||||
}
|
||||
if (item.children && item.children.length > 0) {
|
||||
if (item.isVirtual) {
|
||||
//如果是虚拟菜单需要增加展开箭头
|
||||
let icon = item.isExtend ? (
|
||||
<span className="icon-arrow-down iconshow" />
|
||||
) : (
|
||||
<span className="icon-arrow-right iconshow" />
|
||||
);
|
||||
let hiddenClass = item.isExtend ? '' : 'hidden';
|
||||
return (
|
||||
<li
|
||||
key={`${item.serviceName}`}
|
||||
data-spm-click={`gostr=/aliyun;locaid=${item.serviceName}`}
|
||||
id={`${item.serviceName}`}
|
||||
>
|
||||
<div>
|
||||
<a href="" onClick={this.nacosToggleNav.bind(this, item.serviceName)}>
|
||||
<div className="nav-icon">{icon}</div>
|
||||
<div className="nav-title">{window.aliwareIntl.get(item.id) || item.name}</div>
|
||||
</a>
|
||||
</div>
|
||||
<ul className={`subnavlist ${hiddenClass}`}>{self.nacosLoopNav(item.children, index)}</ul>
|
||||
</li>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<li
|
||||
key={`${item.serviceName}`}
|
||||
data-spm-click={`gostr=/aliyun;locaid=${item.serviceName}`}
|
||||
onClick={this.navTo.bind(this, `/${item.serviceName}`)}
|
||||
>
|
||||
<a
|
||||
href={`javascript:;`}
|
||||
id={`${item.serviceName}`}
|
||||
onClick={this.activeNav.bind(this, `nav${index}`)}
|
||||
>
|
||||
<div className="nav-icon" />
|
||||
<div className="nav-title">{window.aliwareIntl.get(item.id) || item.name}</div>
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
}
|
||||
return (
|
||||
<li
|
||||
key={`${item.serviceName}`}
|
||||
data-spm-click={`gostr=/aliyun;locaid=${item.serviceName}`}
|
||||
onClick={this.navTo.bind(this, `/${item.serviceName}`)}
|
||||
>
|
||||
<a
|
||||
href={`javascript:;`}
|
||||
id={`${item.serviceName}`}
|
||||
onClick={this.activeNav.bind(this, `nav${index}`)}
|
||||
>
|
||||
<div className="nav-icon" />
|
||||
<div className="nav-title">{window.aliwareIntl.get(item.id) || item.name}</div>
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
});
|
||||
}
|
||||
nacosGetNav(navList) {
|
||||
let navRow = ''; //导航
|
||||
if (navList.length > 0) {
|
||||
navRow = <ul>{this.nacosLoopNav(navList)}</ul>;
|
||||
this.nacosLoopNavDeeply(navList); //深度遍历导航树获得平行map
|
||||
}
|
||||
return navRow;
|
||||
}
|
||||
componentWillMount() {
|
||||
let nav = this.props.navList || [];
|
||||
let navRow = this.nacosGetNav(nav);
|
||||
this.setState({
|
||||
navRow: navRow
|
||||
});
|
||||
}
|
||||
componentDidMount() {
|
||||
this.nacosLeftBarDom = document.getElementById('viewFramework-product-navbar');
|
||||
this.nacosBodyDom = document.getElementById('viewFramework-product-body');
|
||||
this.nacosToggleIconDom = document.getElementById('viewFramework-product-navbar-collapse');
|
||||
this.nacosOutDom = document.getElementById('page-header-mask');
|
||||
let parentNav = this.initNav[0] || [];
|
||||
let defaultNav = '/configurationManagement';
|
||||
let childrenNav = parentNav.children || [];
|
||||
window.hashHistory.listen((location) => {
|
||||
if (this.preSimplePath && this.preSimplePath !== '/') {
|
||||
if (location.pathname.indexOf(this.preSimplePath) !== -1) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
let simplePath = window.location.hash.split('?')[0];
|
||||
let navName = simplePath.substr('2');
|
||||
this.preSimplePath = simplePath;
|
||||
|
||||
if (obj.dontUseChild === true) {
|
||||
obj.parentName = item.title;
|
||||
obj.parentId = item.id;
|
||||
obj.parentPath = '/' + item.id;
|
||||
this.deepNav.push(obj);
|
||||
}
|
||||
if (_item.children) {
|
||||
this.simpleMVCSetSpecialNav(_item);
|
||||
}
|
||||
});
|
||||
}
|
||||
simpleMVCNavAct(serviceName, match, location) {
|
||||
if (navName === '') {
|
||||
window.hashHistory.push(defaultNav);
|
||||
setTimeout(() => {
|
||||
this.activeNav('configurationManagement');
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!match) {
|
||||
let formatpath = location.pathname.substr(1); //得到当前路径
|
||||
let nowpathobj = this.oneLevelNavArr[formatpath]; //根据平行导航匹配父类
|
||||
if (nowpathobj) {
|
||||
if (nowpathobj.parent === serviceName) {
|
||||
//如果父类等于当前的导航则高亮
|
||||
return true;
|
||||
}
|
||||
}
|
||||
let nowNavObj = this.oneLevelNavArr[navName];
|
||||
if (!nowNavObj) {
|
||||
this.setState({
|
||||
noChild: true
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.setState({
|
||||
noChild: !!nowNavObj.dontUseChild
|
||||
});
|
||||
let parentServiceName = nowNavObj.parentServiceName,
|
||||
parentNav = this.oneLevelNavArr[parentServiceName];
|
||||
if (simplePath !== '/' && nowNavObj && parentNav && !parentNav.isVirtual) {
|
||||
this.setState({
|
||||
showLink: (
|
||||
<div>
|
||||
<Icon
|
||||
type="arrow-left"
|
||||
onClick={this.nacosGoBack.bind(this, parentServiceName)}
|
||||
id={'backarrow'}
|
||||
onMouseOver={this.nacosEnterBack.bind(this)}
|
||||
onMouseLeave={this.nacosOutBack.bind(this)}
|
||||
style={{
|
||||
marginLeft: 77,
|
||||
marginTop: 0,
|
||||
fontWeight: 'bold',
|
||||
cursor: 'pointer',
|
||||
color: '#546478',
|
||||
fontSize: '20px'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
simpleMVCLoopNavDeeply(data, parent) {
|
||||
//深度遍历获取所有的导航数据
|
||||
let self = this;
|
||||
data.forEach(item => {
|
||||
if (item) {
|
||||
let navObj = {};
|
||||
navObj.name = item.name;
|
||||
navObj.id = item.id;
|
||||
navObj.serviceName = item.serviceName;
|
||||
navObj.parent = parent;
|
||||
navObj.dontUseChild = item.dontUseChild;
|
||||
navObj.children = item.children || [];
|
||||
self.oneLevelNavArr[item.serviceName] = navObj;
|
||||
let newparent = parent ? parent : item.serviceName;
|
||||
if (item.children && item.children.length > 0) {
|
||||
self.simpleMVCLoopNavDeeply(item.children, newparent);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
activeNav(id) {
|
||||
if (this.preActNav) {
|
||||
this.preActNav.removeClass('active');
|
||||
}
|
||||
let nowNav = $(`#${id}`);
|
||||
nowNav.addClass('active');
|
||||
this.preActNav = nowNav;
|
||||
}
|
||||
simpleMVCLoopNav(data, index = 0, parent) {
|
||||
//遍历导航，只显示2级
|
||||
let self = this;
|
||||
return data.map(item => {
|
||||
if (!item) {
|
||||
return '';
|
||||
}
|
||||
index++;
|
||||
if (item.dontUseChild === true) {
|
||||
return '';
|
||||
}
|
||||
if (item.children && item.children.length > 0) {
|
||||
navRow: <ul>{this.nacosLoopNav([ nowNavObj ])}</ul>
|
||||
});
|
||||
setTimeout(() => {
|
||||
let navid = navName;
|
||||
this.activeNav(navid);
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
showLink: null,
|
||||
navRow: <ul>{this.nacosLoopNav(this.initNav)}</ul>
|
||||
});
|
||||
setTimeout(() => {
|
||||
let navid = navName;
|
||||
this.activeNav(navid);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (item.isVirtual) {
|
||||
//如果是虚拟菜单需要增加展开箭头
|
||||
let icon = item.isExtend ? <span className="icon-arrow-down iconshow"></span> : <span className="icon-arrow-right iconshow"></span>;
|
||||
let hiddenClass = item.isExtend ? '' : 'hidden';
|
||||
return <li key={`${item.serviceName}`}
|
||||
data-spm-click={`gostr=/aliyun;locaid=${item.serviceName}`}
|
||||
id={`${item.serviceName}`}>
|
||||
<div>
|
||||
<a href="" onClick={this.simpleMVCToggleNav.bind(this, `nav${index}`)}>
|
||||
<div className="nav-icon">
|
||||
{icon}
|
||||
</div>
|
||||
<div className="nav-title">{window.aliwareIntl.get(item.id) || item.name}</div>
|
||||
</a>
|
||||
</div>
|
||||
<ul className={`subnavlist ${hiddenClass}`}>
|
||||
{self.simpleMVCLoopNav(item.children, index)}
|
||||
</ul>
|
||||
</li>;
|
||||
} else {
|
||||
if (item.link && item.link.indexOf('http') !== -1) {
|
||||
return <li key={`nav${index}`}
|
||||
data-spm-click={`gostr=/aliyun;locaid=${item.serviceName}`}>
|
||||
<a href="{item.link}" >
|
||||
<div className="nav-icon">
|
||||
onLanguageChange = (language) => {
|
||||
window.aliwareIntl.changeLanguage(language);
|
||||
document.cookie = `docsite_language=${language}`;
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
</div>
|
||||
<div className="nav-title">{window.aliwareIntl.get(item.id) || item.name}</div>
|
||||
</a>
|
||||
</li>;
|
||||
}
|
||||
render() {
|
||||
let language = window.aliwareGetCookieByKeyName('docsite_language') || siteConfig.defaultLanguage;
|
||||
|
||||
return <li key={`${item.serviceName}`}
|
||||
data-spm-click={`gostr=/aliyun;locaid=${item.serviceName}`}
|
||||
onClick={this.navTo.bind(this, `/${item.serviceName}`)}>
|
||||
<a href={`javascript:;`} id={`${item.serviceName}`} onClick={this.activeNav.bind(this, `nav${index}`)}>
|
||||
<div className="nav-icon"></div>
|
||||
<div className="nav-title">{window.aliwareIntl.get(item.id) || item.name}</div>
|
||||
</a>
|
||||
</li>;
|
||||
}
|
||||
}
|
||||
const { headerType, showLink, navRow, leftBarClose, noChild } = this.state;
|
||||
const headerLogo = 'https://img.alicdn.com/tfs/TB118jPv_mWBKNjSZFBXXXxUFXa-2000-390.svg';
|
||||
return (
|
||||
<div className="viewFramework-product" style={{ top: 66 }}>
|
||||
<Header
|
||||
type={headerType}
|
||||
logo={headerLogo}
|
||||
language={language}
|
||||
onLanguageChange={this.onLanguageChange}
|
||||
/>
|
||||
<div
|
||||
className="viewFramework-product-navbar"
|
||||
style={{ width: 180, marginLeft: 0 }}
|
||||
id="viewFramework-product-navbar"
|
||||
data-spm="acm_nav"
|
||||
>
|
||||
<div className="viewFramework-product-navbar-removed">
|
||||
<div>
|
||||
<div className="product-nav-scene product-nav-main-scene">
|
||||
{showLink ? (
|
||||
<div className="product-nav-icon env" style={{ height: 80, paddingTop: 25 }}>
|
||||
{showLink}
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
style={{ textIndent: 0 }}
|
||||
className={'product-nav-title'}
|
||||
title={window.aliwareIntl.get(
|
||||
'com.alibaba.nacos.layout.noenv.app_configuration_management_acm'
|
||||
)}
|
||||
>
|
||||
{window.aliwareIntl.get(
|
||||
'com.alibaba.nacos.layout.noenv.app_configuration_management_acm'
|
||||
)}
|
||||
{window.aliwareIntl.get(
|
||||
'com.alibaba.nacos.layout.noenv.nacosversion'
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
// if (item.serviceName === 'namespace') {
|
||||
// const help = <Balloon trigger={<span>{window.aliwareIntl.get(item.id) || item.name} <Icon type="help" size={'small'} style={{ color: '#1DC11D', marginRight: 5, verticalAlign: 'middle', marginLeft: 5 }} /></span>} align="tr" style={{ marginRight: 5 }} triggerType="hover">
|
||||
// <a style={{ fontSize: 12 }} href={window._getLink && window._getLink("knowNamespace") || ''} target="_blank">{window.aliwareIntl.get('com.alibaba.nacos.layout.noenv.Click_to_learn_the_namespace')}</a>
|
||||
// </Balloon>;
|
||||
// return <li key={`${item.serviceName}`}
|
||||
// data-spm-click={`gostr=/aliyun;locaid=${item.serviceName}`}
|
||||
// onClick={this.navTo.bind(this, `/${item.serviceName}`)}>
|
||||
// <a href={`javascript:;`} id={`${item.serviceName}`} onClick={this.activeNav.bind(this, `nav${index}`)}>
|
||||
// <div className="nav-icon"></div>
|
||||
// <div className="nav-title">{help}</div>
|
||||
// </a>
|
||||
// </li>;
|
||||
// }
|
||||
return <li key={`${item.serviceName}`}
|
||||
data-spm-click={`gostr=/aliyun;locaid=${item.serviceName}`}
|
||||
onClick={this.navTo.bind(this, `/${item.serviceName}`)}>
|
||||
<a href={`javascript:;`} id={`${item.serviceName}`} onClick={this.activeNav.bind(this, `nav${index}`)}>
|
||||
<div className="nav-icon"></div>
|
||||
<div className="nav-title">{window.aliwareIntl.get(item.id) || item.name}</div>
|
||||
</a>
|
||||
</li>;
|
||||
});
|
||||
}
|
||||
simpleMVCGetNav(navList) {
|
||||
let navRow = ''; //导航
|
||||
if (navList.length > 0) {
|
||||
navRow = <ul>{this.simpleMVCLoopNav(navList)}</ul>;
|
||||
this.simpleMVCLoopNavDeeply(navList); //深度遍历导航树获得平行map
|
||||
}
|
||||
return navRow;
|
||||
}
|
||||
UNSAFE_componentWillMount() {
|
||||
//抓取edas 数据
|
||||
//和现有的导航数据整合
|
||||
//渲染出导航
|
||||
let nav = this.props.navList || [];
|
||||
let navRow = this.simpleMVCGetNav(nav);
|
||||
this.setState({
|
||||
navRow: navRow
|
||||
});
|
||||
|
||||
}
|
||||
componentDidMount() {
|
||||
this.simpleMVCLeftBarDom = document.getElementById('viewFramework-product-navbar');
|
||||
this.simpleMVCBodyDom = document.getElementById('viewFramework-product-body');
|
||||
this.simpleMVCToggleIconDom = document.getElementById('viewFramework-product-navbar-collapse');
|
||||
this.simpleMVCOutDom = document.getElementById('page-header-mask');
|
||||
let parentNav = this.initNav[0] || [];
|
||||
let defaultNav = '/configurationManagement';
|
||||
let self = this;
|
||||
let childrenNav = parentNav.children || [];
|
||||
window.hashHistory.listen((location, action) => {
|
||||
if (this.preSimplePath && this.preSimplePath !== '/') {
|
||||
if (location.pathname.indexOf(this.preSimplePath) !== -1) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
//console.log(location.pathname,'fff');
|
||||
let simplePath = window.location.hash.split('?')[0];
|
||||
//let simplePath = location.pathname.split('?')[0];
|
||||
|
||||
let navName = simplePath.substr('2');
|
||||
|
||||
this.preSimplePath = simplePath;
|
||||
|
||||
if (navName === '') {
|
||||
// let firstNav = defaultNav + window.location.hash;
|
||||
window.hashHistory.push(defaultNav);
|
||||
setTimeout(() => {
|
||||
this.activeNav('configurationManagement');
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
let nowNavObj = self.oneLevelNavArr[navName];
|
||||
if (!nowNavObj) {
|
||||
//如果路径不存在直接显示
|
||||
self.setState({
|
||||
noChild: true
|
||||
});
|
||||
return;
|
||||
}
|
||||
self.setState({
|
||||
noChild: !!nowNavObj.dontUseChild
|
||||
});
|
||||
let parentId = nowNavObj.parent;
|
||||
if (simplePath !== '/' && nowNavObj && parentId) {
|
||||
childrenNav = JSON.parse(JSON.stringify(self.oneLevelNavArr[parentId].children));
|
||||
if (nowNavObj.serviceName === 'newconfig') {
|
||||
childrenNav.forEach(value => {
|
||||
if (value.serviceName !== 'newconfig') {
|
||||
value.dontUseChild = true;
|
||||
} else {
|
||||
value.dontUseChild = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
self.setState({
|
||||
showLink: <div>
|
||||
<Icon type="back" onClick={this.simpleMVCGoBack.bind(self, parentId)} id={'backarrow'} onMouseOver={self.simpleMVCEnterBack.bind(self)} onMouseLeave={self.simpleMVCOutBack.bind(self)} style={{ marginLeft: 77, marginTop: 0, fontWeight: 'bold', cursor: 'pointer', color: '#546478', fontSize: '20px' }} />
|
||||
</div>,
|
||||
|
||||
navRow: <ul>{this.simpleMVCLoopNav([nowNavObj])}</ul>
|
||||
});
|
||||
setTimeout(() => {
|
||||
let navid = navName;
|
||||
this.activeNav(navid);
|
||||
});
|
||||
} else {
|
||||
|
||||
self.setState({
|
||||
showLink: null,
|
||||
navRow: <ul>{this.simpleMVCLoopNav(this.initNav)}</ul>
|
||||
});
|
||||
setTimeout(() => {
|
||||
let navid = navName;
|
||||
this.activeNav(navid);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onLanguageChange = (language) => {
|
||||
window.aliwareIntl.changeLanguage(language);
|
||||
document.cookie = `docsite_language=${language}`;
|
||||
window.location.reload();
|
||||
}
|
||||
|
||||
render() {
|
||||
// const hashSearch = window.location.hash.split('?');
|
||||
let language = window.aliwareGetCookieByKeyName('docsite_language') || siteConfig.defaultLanguage;
|
||||
|
||||
const { headerType } = this.state;
|
||||
const headerLogo = 'https://img.alicdn.com/tfs/TB118jPv_mWBKNjSZFBXXXxUFXa-2000-390.svg';
|
||||
return <div className="viewFramework-product" style={{ top: 66 }}>
|
||||
<Header type={headerType}
|
||||
logo={headerLogo}
|
||||
language={language}
|
||||
onLanguageChange={this.onLanguageChange} />
|
||||
<div className="viewFramework-product-navbar"
|
||||
style={{ width: 180, marginLeft: 0 }}
|
||||
id="viewFramework-product-navbar"
|
||||
data-spm="acm_nav">
|
||||
<div className="viewFramework-product-navbar-removed">
|
||||
<div>
|
||||
<div className="product-nav-scene product-nav-main-scene">
|
||||
{this.state.showLink ? <div className="product-nav-icon env" style={{ height: 80, paddingTop: 25 }}>
|
||||
{this.state.showLink}
|
||||
</div> : <div style={{ textIndent: 0 }} className={'product-nav-title'} title={window.aliwareIntl.get('com.alibaba.nacos.layout.noenv.app_configuration_management_acm')}>{window.aliwareIntl.get('com.alibaba.nacos.layout.noenv.app_configuration_management_acm')}</div>}
|
||||
|
||||
<div className="product-nav-list" style={{ position: 'relative', top: 0, height: '100%' }}>
|
||||
{this.state.navRow}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="viewFramework-product-navbar-collapse"
|
||||
id="viewFramework-product-navbar-collapse"
|
||||
onClick={this.simpleMVCToggleLeftBar.bind(this)}>
|
||||
<div className="product-navbar-collapse-inner">
|
||||
<div className="product-navbar-collapse-bg"></div>
|
||||
{/* <div className="product-navbar-collapse" aliyun-console-spm="4" > */}
|
||||
<div className="product-navbar-collapse">
|
||||
{this.state.leftBarClose ? <span className="icon-collapse-right" style={{ display: 'block' }}></span> : <span className="icon-collapse-left"></span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="viewFramework-product-body" style={{ marginLeft: 180 }} id="viewFramework-product-body">
|
||||
|
||||
<div>
|
||||
{!this.state.noChild ? <div>
|
||||
{this.props.children}
|
||||
</div> : <div style={{ height: 300, lineHeight: '300px', textAlign: 'center', fontSize: '18px' }}>{window.aliwareIntl.get('com.alibaba.nacos.layout.noenv.does_not_exist')}</div>}
|
||||
</div>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
|
||||
}
|
||||
<div
|
||||
className="product-nav-list"
|
||||
style={{ position: 'relative', top: 0, height: '100%' }}
|
||||
>
|
||||
{navRow}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="viewFramework-product-navbar-collapse"
|
||||
id="viewFramework-product-navbar-collapse"
|
||||
onClick={this.nacosToggleLeftBar.bind(this)}
|
||||
>
|
||||
<div className="product-navbar-collapse-inner">
|
||||
<div className="product-navbar-collapse-bg" />
|
||||
<div className="product-navbar-collapse">
|
||||
{leftBarClose ? (
|
||||
<span className="icon-collapse-right" style={{ display: 'block' }} />
|
||||
) : (
|
||||
<span className="icon-collapse-left" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="viewFramework-product-body" style={{ marginLeft: 180 }} id="viewFramework-product-body">
|
||||
<div>
|
||||
{!noChild ? (
|
||||
<div>{this.props.children}</div>
|
||||
) : (
|
||||
<div style={{ height: 300, lineHeight: '300px', textAlign: 'center', fontSize: '18px' }}>
|
||||
{window.aliwareIntl.get('com.alibaba.nacos.layout.noenv.does_not_exist')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,152 +1,185 @@
|
||||
module.exports = {
|
||||
"data": [
|
||||
{
|
||||
"isExtend": false,
|
||||
"isExtend": true,
|
||||
"name": "配置管理",
|
||||
"title": "配置管理",
|
||||
"isVirtual": false,
|
||||
"isVirtual": true,
|
||||
"projectName": "nacos",
|
||||
"serviceName": "configurationManagementVirtual",
|
||||
"link": "configurationManagementVirtual",
|
||||
"hasFusion": true,
|
||||
"template": "",
|
||||
"registerName": "com.alibaba.nacos.page.configurationManagementVirtual",
|
||||
"useRouter": false,
|
||||
"id": "com.alibaba.nacos.page.configurationManagementVirtual",
|
||||
"children": [
|
||||
{
|
||||
"isExtend": false,
|
||||
"name": "配置详情",
|
||||
"title": "配置详情",
|
||||
"name": "配置列表",
|
||||
"title": "配置列表",
|
||||
"isVirtual": false,
|
||||
"projectName": "nacos",
|
||||
"serviceName": "configdetail",
|
||||
"link": "Configdetail",
|
||||
"serviceName": "configurationManagement",
|
||||
"link": "configurationManagement",
|
||||
"hasFusion": true,
|
||||
"template": "",
|
||||
"dontUseChild": false,
|
||||
"registerName": "com.alibaba.nacos.page.configdetail",
|
||||
"registerName": "com.alibaba.nacos.page.configurationManagement",
|
||||
"useRouter": false,
|
||||
"id": "configdetail"
|
||||
"id": "configurationManagement",
|
||||
"children": [
|
||||
{
|
||||
"isExtend": false,
|
||||
"name": "配置详情",
|
||||
"title": "配置详情",
|
||||
"isVirtual": false,
|
||||
"projectName": "nacos",
|
||||
"serviceName": "configdetail",
|
||||
"link": "Configdetail",
|
||||
"hasFusion": true,
|
||||
"template": "",
|
||||
"dontUseChild": false,
|
||||
"registerName": "com.alibaba.nacos.page.configdetail",
|
||||
"useRouter": false,
|
||||
"id": "configdetail"
|
||||
},
|
||||
{
|
||||
"isExtend": false,
|
||||
"name": "同步配置",
|
||||
"title": "同步配置",
|
||||
"isVirtual": false,
|
||||
"projectName": "nacos",
|
||||
"serviceName": "configsync",
|
||||
"link": "configsync",
|
||||
"hasFusion": true,
|
||||
"template": "",
|
||||
"dontUseChild": true,
|
||||
"registerName": "com.alibaba.nacos.page.configsync",
|
||||
"useRouter": false,
|
||||
"id": "configsync"
|
||||
},
|
||||
{
|
||||
"isExtend": false,
|
||||
"name": "配置编辑",
|
||||
"title": "配置编辑",
|
||||
"isVirtual": false,
|
||||
"projectName": "nacos",
|
||||
"serviceName": "configeditor",
|
||||
"link": "configeditor",
|
||||
"hasFusion": true,
|
||||
"template": "",
|
||||
"registerName": "com.alibaba.nacos.page.configeditor",
|
||||
"useRouter": false,
|
||||
"id": "configeditor"
|
||||
},
|
||||
{
|
||||
"isExtend": false,
|
||||
"name": "新建配置",
|
||||
"title": "新建配置",
|
||||
"isVirtual": false,
|
||||
"projectName": "nacos",
|
||||
"serviceName": "newconfig",
|
||||
"link": "newconfig",
|
||||
"hasFusion": true,
|
||||
"template": "",
|
||||
"registerName": "com.alibaba.nacos.page.newconfig",
|
||||
"useRouter": false,
|
||||
"id": "newconfig"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"isExtend": false,
|
||||
"name": "同步配置",
|
||||
"title": "同步配置",
|
||||
"name": "历史版本",
|
||||
"title": "历史版本",
|
||||
"isVirtual": false,
|
||||
"projectName": "nacos",
|
||||
"serviceName": "configsync",
|
||||
"link": "configsync",
|
||||
"children": [
|
||||
{
|
||||
"isExtend": false,
|
||||
"name": "配置回滚",
|
||||
"title": "配置回滚",
|
||||
"isVirtual": false,
|
||||
"projectName": "nacos",
|
||||
"serviceName": "configRollback",
|
||||
"link": "configRollback",
|
||||
"hasFusion": true,
|
||||
"template": "",
|
||||
"registerName": "com.alibaba.nacos.page.configRollback",
|
||||
"useRouter": false,
|
||||
"id": "configRollback"
|
||||
},
|
||||
{
|
||||
"isExtend": false,
|
||||
"name": "历史详情",
|
||||
"title": "历史详情",
|
||||
"isVirtual": false,
|
||||
"projectName": "nacos",
|
||||
"serviceName": "historyDetail",
|
||||
"link": "historyDetail",
|
||||
"hasFusion": true,
|
||||
"template": "",
|
||||
"registerName": "com.alibaba.nacos.page.historyDetail",
|
||||
"useRouter": false,
|
||||
"id": "historyDetail"
|
||||
}
|
||||
],
|
||||
"serviceName": "historyRollback",
|
||||
"link": "historyRollback",
|
||||
"hasFusion": true,
|
||||
"template": "",
|
||||
"dontUseChild": true,
|
||||
"registerName": "com.alibaba.nacos.page.configsync",
|
||||
"dontUseChild": false,
|
||||
"registerName": "com.alibaba.nacos.page.historyRollback",
|
||||
"useRouter": false,
|
||||
"id": "configsync"
|
||||
"id": "historyRollback"
|
||||
},
|
||||
{
|
||||
"isExtend": false,
|
||||
"name": "配置编辑",
|
||||
"title": "配置编辑",
|
||||
"name": "监听查询",
|
||||
"title": "监听查询",
|
||||
"isVirtual": false,
|
||||
"projectName": "nacos",
|
||||
"serviceName": "configeditor",
|
||||
"link": "configeditor",
|
||||
"serviceName": "listeningToQuery",
|
||||
"link": "listeningToQuery",
|
||||
"hasFusion": true,
|
||||
"template": "",
|
||||
"registerName": "com.alibaba.nacos.page.configeditor",
|
||||
"registerName": "com.alibaba.nacos.page.listeningToQuery",
|
||||
"useRouter": false,
|
||||
"id": "configeditor"
|
||||
},
|
||||
{
|
||||
"isExtend": false,
|
||||
"name": "新建配置",
|
||||
"title": "新建配置",
|
||||
"isVirtual": false,
|
||||
"projectName": "nacos",
|
||||
"serviceName": "newconfig",
|
||||
"link": "newconfig",
|
||||
"hasFusion": true,
|
||||
"template": "",
|
||||
"registerName": "com.alibaba.nacos.page.newconfig",
|
||||
"useRouter": false,
|
||||
"id": "newconfig"
|
||||
"id": "listeningToQuery"
|
||||
}
|
||||
],
|
||||
"serviceName": "configurationManagement",
|
||||
"link": "configurationManagement",
|
||||
"hasFusion": true,
|
||||
"template": "",
|
||||
"registerName": "com.alibaba.nacos.page.configurationManagement",
|
||||
"useRouter": false,
|
||||
"id": "configurationManagement"
|
||||
]
|
||||
},
|
||||
{
|
||||
"isExtend": false,
|
||||
"name": "历史版本",
|
||||
"title": "历史版本",
|
||||
"isVirtual": false,
|
||||
"isExtend": true,
|
||||
"name": "服务管理",
|
||||
"title": "服务管理",
|
||||
"isVirtual": true,
|
||||
"projectName": "nacos",
|
||||
"serviceName": "serviceManagementVirtual",
|
||||
"link": "serviceManagementVirtual",
|
||||
"hasFusion": true,
|
||||
"template": "",
|
||||
"registerName": "com.alibaba.nacos.page.serviceManagementVirtual",
|
||||
"useRouter": false,
|
||||
"id": "com.alibaba.nacos.page.serviceManagementVirtual",
|
||||
"children": [
|
||||
{
|
||||
"isExtend": false,
|
||||
"name": "配置回滚",
|
||||
"title": "配置回滚",
|
||||
"name": "服务列表",
|
||||
"title": "服务列表",
|
||||
"isVirtual": false,
|
||||
"projectName": "nacos",
|
||||
"serviceName": "configRollback",
|
||||
"link": "configRollback",
|
||||
"children": [],
|
||||
"serviceName": "serviceManagement",
|
||||
"link": "serviceManagement",
|
||||
"hasFusion": true,
|
||||
"template": "",
|
||||
"registerName": "com.alibaba.nacos.page.configRollback",
|
||||
"registerName": "com.alibaba.nacos.page.serviceManagement",
|
||||
"useRouter": false,
|
||||
"id": "configRollback"
|
||||
},
|
||||
{
|
||||
"isExtend": false,
|
||||
"name": "历史详情",
|
||||
"title": "历史详情",
|
||||
"isVirtual": false,
|
||||
"projectName": "nacos",
|
||||
"serviceName": "historyDetail",
|
||||
"link": "historyDetail",
|
||||
"hasFusion": true,
|
||||
"template": "",
|
||||
"registerName": "com.alibaba.nacos.page.historyDetail",
|
||||
"useRouter": false,
|
||||
"id": "historyDetail"
|
||||
"id": "serviceManagement"
|
||||
}
|
||||
],
|
||||
"serviceName": "historyRollback",
|
||||
"link": "historyRollback",
|
||||
"hasFusion": true,
|
||||
"template": "",
|
||||
"dontUseChild": false,
|
||||
"registerName": "com.alibaba.nacos.page.historyRollback",
|
||||
"useRouter": false,
|
||||
"id": "historyRollback"
|
||||
},
|
||||
{
|
||||
"isExtend": false,
|
||||
"name": "监听查询",
|
||||
"title": "监听查询",
|
||||
"isVirtual": false,
|
||||
"projectName": "nacos",
|
||||
"serviceName": "listeningToQuery",
|
||||
"link": "listeningToQuery",
|
||||
"hasFusion": true,
|
||||
"template": "",
|
||||
"registerName": "com.alibaba.nacos.page.listeningToQuery",
|
||||
"useRouter": false,
|
||||
"id": "listeningToQuery"
|
||||
},
|
||||
{
|
||||
"isExtend": false,
|
||||
"name": "服务列表",
|
||||
"title": "服务列表",
|
||||
"isVirtual": false,
|
||||
"projectName": "nacos",
|
||||
"children": [],
|
||||
"serviceName": "serviceManagement",
|
||||
"link": "serviceManagement",
|
||||
"hasFusion": true,
|
||||
"template": "",
|
||||
"registerName": "com.alibaba.nacos.page.serviceManagement",
|
||||
"useRouter": false,
|
||||
"id": "serviceManagement"
|
||||
]
|
||||
},
|
||||
{
|
||||
"isExtend": false,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user