mirror of
https://github.com/YMFE/yapi.git
synced 2025-01-06 12:45:22 +08:00
feat: 面包屑导航功能
This commit is contained in:
parent
9a880c0d3d
commit
ea083184d6
@ -6,7 +6,7 @@ import { Home, ProjectGroups, Interface, News, AddInterface } from './containers
|
||||
import User from './containers/User/User.js';
|
||||
import Header from './components/Header/Header';
|
||||
import Footer from './components/Footer/Footer';
|
||||
import Breadcrumb from './components/Breadcrumb/Breadcrumb';
|
||||
// import Breadcrumb from './components/Breadcrumb/Breadcrumb';
|
||||
import Loading from './components/Loading/Loading';
|
||||
import { checkLoginState } from './actions/login';
|
||||
import { requireAuthentication } from './components/AuthenticatedComponent';
|
||||
@ -50,7 +50,7 @@ export default class App extends Component {
|
||||
<div className="router-main">
|
||||
<Header />
|
||||
<div className="router-container">
|
||||
<Breadcrumb />
|
||||
{/* <Breadcrumb /> */}
|
||||
<Route path="/" component={Home} exact />
|
||||
<Switch>
|
||||
<Redirect exact from='/group' to='/group/1' />
|
||||
|
@ -2,6 +2,7 @@ import './Breadcrumb.scss';
|
||||
import { withRouter, Link } from 'react-router-dom';
|
||||
import { Breadcrumb } from 'antd';
|
||||
import axios from 'axios';
|
||||
import PropTypes from 'prop-types'
|
||||
import React, { Component } from 'react';
|
||||
|
||||
@withRouter
|
||||
@ -14,41 +15,87 @@ export default class BreadcrumbNavigation extends Component {
|
||||
breadcrumb: []
|
||||
}
|
||||
}
|
||||
getBreadcrumb = (pathSnippets) => {
|
||||
console.log(pathSnippets);
|
||||
static propTypes = {
|
||||
location: PropTypes.object
|
||||
}
|
||||
|
||||
if (/['project'|'group'|'add-interface']/.test(pathSnippets)) {
|
||||
const type = pathSnippets[0],
|
||||
getBreadcrumb = (pathSnippets) => {
|
||||
// 重置 state 中的 breadcrumb,防止重复渲染
|
||||
this.setState({
|
||||
breadcrumb: []
|
||||
});
|
||||
if (/project|group|add-interface]/.test(pathSnippets[0])) {
|
||||
const type = pathSnippets[0] === 'add-interface' ? 'interface' : pathSnippets[0],
|
||||
id = pathSnippets[1];
|
||||
const params = {
|
||||
type,
|
||||
id
|
||||
}
|
||||
axios.get('/user/nav', {params: params}).then( res => {
|
||||
console.log(res);
|
||||
const params = { type, id };
|
||||
axios.get('/user/nav', {params: params}).then( (res) => {
|
||||
const data = res.data.data;
|
||||
// 依次填入group/projec/interface
|
||||
if (data.group_name) {
|
||||
this.setState({
|
||||
breadcrumb: this.state.breadcrumb.concat([{
|
||||
name: data.group_name,
|
||||
path: '/group/' + data.group_id
|
||||
}])
|
||||
});
|
||||
}
|
||||
if (data.project_name) {
|
||||
this.setState({
|
||||
breadcrumb: this.state.breadcrumb.concat([{
|
||||
name: data.project_name,
|
||||
path: '/project/' + data.project_id
|
||||
}])
|
||||
});
|
||||
}
|
||||
if (data.interface_name) {
|
||||
this.setState({
|
||||
breadcrumb: this.state.breadcrumb.concat([{
|
||||
name: data.interface_name,
|
||||
path: '/project/' + data.interface_id
|
||||
}])
|
||||
});
|
||||
}
|
||||
});
|
||||
} else if (pathSnippets[0] == 'user') {
|
||||
this.setState({
|
||||
breadcrumb: [{
|
||||
name: '个人中心',
|
||||
path: '/' + pathSnippets.join('/')
|
||||
}]
|
||||
});
|
||||
} else {
|
||||
console.log(2);
|
||||
}
|
||||
}
|
||||
componentDidMount() {
|
||||
console.log(location.hash);
|
||||
const pathSnippets = location.hash.split('#')[1].split('/').filter(i => i);
|
||||
this.getBreadcrumb(pathSnippets);
|
||||
this.setState({
|
||||
hash: location.hash
|
||||
hash: location.hash.split('#')[1]
|
||||
})
|
||||
}
|
||||
shouldComponentUpdate = (nextProps, nextState) => {
|
||||
// hash改变的时候才render
|
||||
if (nextState.hash !== this.state.hash) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
componentWillReceiveProps(nextProps) {
|
||||
// this.setState({
|
||||
// hash: nextProps.location.pathname
|
||||
// })
|
||||
const pathSnippets = location.hash.split('#')[1].split('/').filter(i => i);
|
||||
// console.log(nextProps.location.pathname, this.props.location.pathname);
|
||||
if (nextProps.location.pathname !== this.props.location.pathname) {
|
||||
// console.log('in');
|
||||
this.getBreadcrumb(pathSnippets);
|
||||
this.setState({
|
||||
hash: nextProps.location.pathname
|
||||
})
|
||||
}
|
||||
}
|
||||
render () {
|
||||
// 获取接口路径并分割
|
||||
// console.log(this.state.hash);
|
||||
const pathSnippets = location.hash.split('#')[1].split('/').filter(i => i);
|
||||
this.getBreadcrumb(pathSnippets);
|
||||
const extraBreadcrumbItems = this.state.breadcrumb.map((item, index) => {
|
||||
// 获取接口路径并分割
|
||||
// console.log(this.state);
|
||||
const extraBreadcrumbItems = this.state.breadcrumb.map((item) => {
|
||||
// const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
|
||||
console.log(index);
|
||||
return (
|
||||
<Breadcrumb.Item key={item.path}>
|
||||
<Link to={item.path}>
|
||||
|
@ -64,11 +64,11 @@ export default class GroupList extends Component {
|
||||
if(this.props.groupList[i].group_name === groupName){
|
||||
currGroup = this.props.groupList[i];
|
||||
}else{
|
||||
this.props.history.replace(`${currGroup.group_name}`);
|
||||
this.props.history.replace(`${currGroup._id}`);
|
||||
}
|
||||
}
|
||||
}else if(!groupName && this.props.groupList.length){
|
||||
this.props.history.push(`/group/${this.props.groupList[0].group_name}`);
|
||||
this.props.history.push(`/group/${this.props.groupList[0]._id}`);
|
||||
}
|
||||
this.setState({groupList: this.props.groupList});
|
||||
this.props.setCurrGroup(currGroup)
|
||||
@ -156,7 +156,7 @@ export default class GroupList extends Component {
|
||||
const groupId = e.key;
|
||||
const currGroup = this.props.groupList.find((group) => { return +group._id === +groupId });
|
||||
this.props.setCurrGroup(currGroup);
|
||||
this.props.history.replace(`${currGroup.group_name}`);
|
||||
this.props.history.replace(`${currGroup._id}`);
|
||||
}
|
||||
|
||||
@autobind
|
||||
|
Loading…
Reference in New Issue
Block a user