From 9990cb07ac3ac5467cbb14969b3743b0f7d8f91a Mon Sep 17 00:00:00 2001 From: "wenbo.dong" Date: Mon, 28 Aug 2017 17:24:17 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=9D=A2=E5=8C=85=E5=B1=91=E7=BB=84?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/components/Breadcrumb/Breadcrumb.js | 141 ++++--------------- client/components/Breadcrumb/Breadcrumb.scss | 16 ++- client/components/Header/Header.js | 2 + client/components/ProjectCard/ProjectCard.js | 1 - client/reducer/modules/user.js | 31 +++- 5 files changed, 67 insertions(+), 124 deletions(-) diff --git a/client/components/Breadcrumb/Breadcrumb.js b/client/components/Breadcrumb/Breadcrumb.js index cfd57489..785ab881 100644 --- a/client/components/Breadcrumb/Breadcrumb.js +++ b/client/components/Breadcrumb/Breadcrumb.js @@ -1,131 +1,40 @@ import './Breadcrumb.scss'; -import { withRouter, Link } from 'react-router-dom'; +import { withRouter } from 'react-router-dom'; import { Breadcrumb } from 'antd'; -import axios from 'axios'; import PropTypes from 'prop-types' import React, { Component } from 'react'; +import { connect } from 'react-redux'; +import { Link } from 'react-router-dom' +@connect( + state => { + return { + breadcrumb: state.user.breadcrumb + } + } +) @withRouter export default class BreadcrumbNavigation extends Component { constructor(props) { super(props); - this.state = { - // breadcrumb: [{name:'首页', path: '/'}], - hash: '', - breadcrumb: [] - } } static propTypes = { - location: PropTypes.object - } - - getBreadcrumb = (pathSnippets) => { - // 重置 state 中的 breadcrumb，防止重复渲染 - this.setState({ - breadcrumb: [] - }); - if (/project|group|add-interface/.test(pathSnippets[0])) { - let type = pathSnippets[0] === 'add-interface' ? 'interface' : pathSnippets[0], - id = pathSnippets[pathSnippets.length-1]; - if (pathSnippets.includes('add-interface') && !pathSnippets.includes('edit')) { - type = 'project'; - } - const params = { type, id }; - axios.get('/api/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 - }]) - }); - // '添加接口'页面：根据project_id获取面包屑路径，并在结尾追加"添加接口" - if (pathSnippets.includes('add-interface') && !pathSnippets.includes('edit')) { - this.setState({ - breadcrumb: this.state.breadcrumb.concat([{ - name: '添加接口', - path: '/add-interface/' + data.project_id - }]) - }); - } - } - if (data.interface_name && pathSnippets.includes('edit')) { - this.setState({ - breadcrumb: this.state.breadcrumb.concat([{ - name: data.interface_name, - path: '/add-interface/edit/' + data.interface_id - }]) - }); - } - }); - } else if (pathSnippets[0] == 'user') { - this.setState({ - breadcrumb: [{ - name: '个人中心', - path: '/' + pathSnippets.join('/') - }] - }); - } - } - componentDidMount() { - const pathSnippets = location.hash.split('#')[1].split('/').filter(i => i); - this.getBreadcrumb(pathSnippets); - this.setState({ - hash: location.hash.split('#')[1] - }) - } - 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 - }) - } + breadcrumb: PropTypes.array } render () { - // console.log(this.state.hash); - const pathSnippets = location.hash.split('#')[1].split('/').filter(i => i); - // 获取接口路径并分割 - // console.log(this.state); - const extraBreadcrumbItems = this.state.breadcrumb.map((item) => { - // const url = `/${pathSnippets.slice(0, index + 1).join('/')}`; - return ( - - - {item.name} - - - ); - }); - const breadcrumbItems = [( - - 首页 - - )].concat(extraBreadcrumbItems); - if (pathSnippets.length) { - return ( - - {breadcrumbItems} - - ) - } else { - return ; - } + console.log(this.props.breadcrumb); + const getItem = this.props.breadcrumb.map((item, index) => { + console.log(item); + if (item.fref) { + return ({item.name}); + } else { + return ({item.name}); + } + }) + return (
+ + {getItem} + +
); } } diff --git a/client/components/Breadcrumb/Breadcrumb.scss b/client/components/Breadcrumb/Breadcrumb.scss index 08ec4d76..221763a6 100644 --- a/client/components/Breadcrumb/Breadcrumb.scss +++ b/client/components/Breadcrumb/Breadcrumb.scss @@ -1,6 +1,18 @@ @import '../../styles/mixin.scss'; .breadcrumb-container { - @include row-width-limit; - margin: 16px auto; + .ant-breadcrumb { + font-size: 16px; + float: left; + color: #fff; + padding-left: 40px; + } + .ant-breadcrumb > span:last-child { + color: #fff; + font-weight: normal; + } + .ant-breadcrumb-separator { + color: #fff; + font-weight: normal; + } } diff --git a/client/components/Header/Header.js b/client/components/Header/Header.js index 8ae0e13a..5b86698a 100644 --- a/client/components/Header/Header.js +++ b/client/components/Header/Header.js @@ -10,6 +10,7 @@ import { withRouter } from 'react-router'; import Srch from './Search/Search' const { Header } = Layout; import { logoSVG, betaSVG } from '../../common.js'; +import Breadcrumb from '../Breadcrumb/Breadcrumb.js' const MenuUser = (props) => ( @@ -170,6 +171,7 @@ export default class HeaderCom extends Component { {logoSVG('32px')}YAPI{betaSVG} +
{login? { @@ -58,8 +66,8 @@ export default (state = initialState, action) => { loginState: GUEST_STATUS, userName: null, uid: null, - role: "", - type: "" + role: '', + type: '' } } case LOGIN_TYPE: { @@ -78,6 +86,12 @@ export default (state = initialState, action) => { type: action.payload.data.data.type }; } + case SET_BREADCRUMB: { + return { + ...state, + breadcrumb: action.data + }; + } default: return state; } @@ -128,3 +142,10 @@ export function loginTypeAction(index) { index } } + +export function setBreadcrumb(data) { + return{ + type: SET_BREADCRUMB, + data + } +}