feat: 项目接口页面的面包屑

client/components/Breadcrumb/Breadcrumb.js

@@ -25,7 +25,7 @@ export default class BreadcrumbNavigation extends Component {
     console.log(this.props.breadcrumb);
     const getItem = this.props.breadcrumb.map((item, index) => {
       console.log(item);
-      if (item.fref) {
+      if (item.href) {
         return (<Breadcrumb.Item key={index}><Link to={item.href}>{item.name}</Link></Breadcrumb.Item>);
       } else {
         return (<Breadcrumb.Item key={index}>{item.name}</Breadcrumb.Item>);

client/components/Breadcrumb/Breadcrumb.scss

@@ -7,6 +7,12 @@
     color: #fff;
     padding-left: 40px;
   }
+  .ant-breadcrumb a {
+    color: #fff;
+    &:hover {
+      color: $color-blue
+    }
+  }
   .ant-breadcrumb > span:last-child {
     color: #fff;
     font-weight: normal;

client/components/Intro/Intro.scss

@@ -1,6 +1,6 @@
-$imgUrl : "../../../static/image/";
+$imgUrl: "../../../static/image/";
-$color-grey : #E5E5E5;
+$color-grey: #E5E5E5;
-$color-blue : #108ee9;
+$color-blue: #2395f1;
 $color-white: #fff;
 
 .intro-container{

client/containers/Project/Project.js

@@ -2,7 +2,9 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types'
 import { Route, Switch, Redirect, matchPath } from 'react-router-dom';
-import { Subnav } from '../../components/index'
+import { Subnav } from '../../components/index';
+import { fetchGroupMsg } from '../../reducer/modules/group';
+import { setBreadcrumb } from  '../../reducer/modules/user';
 import { getProject } from '../../reducer/modules/project';
 import Interface from './Interface/Interface.js'
 import Activity from './Activity/Activity.js'
@@ -16,7 +18,9 @@ import Setting from './Setting/Setting.js'
     }
   },
   {
-    getProject
+    getProject,
+    fetchGroupMsg,
+    setBreadcrumb
   }
 )
 
@@ -26,15 +30,24 @@ export default class Project extends Component {
     match: PropTypes.object,
     curProject: PropTypes.object,
     getProject: PropTypes.func,
-    location: PropTypes.object
+    location: PropTypes.object,
+    fetchGroupMsg: PropTypes.func,
+    setBreadcrumb: PropTypes.func
   }
 
   constructor(props) {
     super(props)
   }
 
-  componentWillMount() {
+  async componentWillMount() {
-    this.props.getProject(this.props.match.params.id)
+    await this.props.getProject(this.props.match.params.id);
+    const groupMsg = await this.props.fetchGroupMsg(this.props.curProject.group_id);
+    this.props.setBreadcrumb([{
+      name: groupMsg.payload.data.data.group_name,
+      href: '/group/'+groupMsg.payload.data.data._id
+    }, {
+      name: this.props.curProject.name
+    }]);
   }
 
   render() {

client/styles/mixin.scss

@@ -1,9 +1,9 @@
-$color-white : #fff;
+$color-white: #fff;
 $color-bg-gray: #ececec;
-$color-blue : #108ee9;
+$color-blue: #2395f1;
 $color-blue-deeper: #34495E;
-$color-grey-deep : #929aac;
+$color-grey-deep: #929aac;
-$color-black-light : #404040;
+$color-black-light: #404040;
 $color-bg-dark: #202d3a;            // 背景色 - header 用的深蓝色
 $box-shadow-panel: 0 2px 4px 0 rgba(0, 0, 0, 0.2);