feat: 面包屑组件

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 (
-        <Breadcrumb.Item key={item.path}>
-          <Link to={item.path}>
-            {item.name}
-          </Link>
-        </Breadcrumb.Item>
-      );
-    });
-    const breadcrumbItems = [(
-      <Breadcrumb.Item key="home">
-        <Link to="/">首页</Link>
-      </Breadcrumb.Item>
-    )].concat(extraBreadcrumbItems);
-    if (pathSnippets.length) {
-      return (
-        <Breadcrumb className="breadcrumb-container">
-          {breadcrumbItems}
-        </Breadcrumb>
-      )
-    } else {
-      return <span></span>;
-    }
+    console.log(this.props.breadcrumb);
+    const getItem = this.props.breadcrumb.map((item, index) => {
+      console.log(item);
+      if (item.fref) {
+        return (<Breadcrumb.Item key={index}><Link to={item.href}>{item.name}</Link></Breadcrumb.Item>);
+      } else {
+        return (<Breadcrumb.Item key={index}>{item.name}</Breadcrumb.Item>);
+      }
+    })
+    return (<div className="breadcrumb-container">
+      <Breadcrumb>
+        {getItem}
+      </Breadcrumb>
+    </div>);
   }
 }

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;
+  }
 }

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) => (
   <Menu className="user-menu" >
@@ -170,6 +171,7 @@ export default class HeaderCom extends Component {
               <span className="img">{logoSVG('32px')}</span><span className="logo-name">YAPI<span className="ui-badge">{betaSVG}</span></span>
             </Link>
           </div>
+          <Breadcrumb />
           <div className="user-toolbar">
             {login?
               <ToolUser

client/components/ProjectCard/ProjectCard.js

@@ -3,7 +3,6 @@ import React, { Component } from 'react';
 import { Card, Icon, Tooltip } from 'antd';
 import { connect } from 'react-redux'
 import { delFollow, addFollow } from  '../../reducer/modules/follow';
-// import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router';
 import { debounce } from '../../common';

client/reducer/modules/user.js

@@ -6,6 +6,7 @@ const LOGIN_OUT = 'yapi/user/LOGIN_OUT';
 const LOGIN_TYPE = 'yapi/user/LOGIN_TYPE';
 const GET_LOGIN_STATE = 'yapi/user/GET_LOGIN_STATE';
 const REGISTER = 'yapi/user/REGISTER';
+const SET_BREADCRUMB = 'yapi/user/SET_BREADCRUMB';
 
 // Reducer
 const LOADING_STATUS = 0;
@@ -18,9 +19,16 @@ const initialState = {
   uid: null,
   email: '',
   loginState: LOADING_STATUS,
-  loginWrapActiveKey: "1",
-  role: "",
-  type: ""
+  loginWrapActiveKey: '1',
+  role: '',
+  type: '',
+  // breadcrumb: [{
+  //   name: 'name',
+  //   href: 'group'
+  // }, {
+  //   name: '当前页面'
+  // }]
+  breadcrumb: []
 };
 
 export default (state = initialState, action) => {
@@ -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
+  }
+}