fix: 修改路由名称

client/Application.js

@@ -6,6 +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 Loading from './components/Loading/Loading';
 import { checkLoginState } from './actions/login';
 import { requireAuthentication } from './components/AuthenticatedComponent';
@@ -49,15 +50,16 @@ export default class App extends Component {
           <div className="router-main">
             <Header />
             <div className="router-container">
+              <Breadcrumb />
               <Route path="/" component={Home} exact />
               <Switch>
                 <Redirect exact from='/group' to='/group/1' />
                 <Route exact path="/group/:groupName" component={requireAuthentication(ProjectGroups)} />
               </Switch>
-              <Route path="/Interface" component={requireAuthentication(Interface)} />
+              <Route path="/project" component={requireAuthentication(Interface)} />
               <Route path="/user" component={requireAuthentication(User)} />
               <Route path="/News" component={requireAuthentication(News)} />
-              <Route path="/AddInterface" component={requireAuthentication(AddInterface)} />
+              <Route path="/add-interface" component={requireAuthentication(AddInterface)} />
             </div>
             <Footer />
           </div>

client/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,43 @@
+import './Breadcrumb.scss';
+import { withRouter, Link } from 'react-router-dom';
+import { Breadcrumb } from 'antd';
+// import { withRouter } from 'react-router';
+import React, { Component } from 'react';
+// const breadcrumbNameMap = {
+//   '/group': '分组',
+//   '/apps/1': 'Application1',
+//   '/apps/2': 'Application2',
+//   '/apps/1/detail': 'Detail',
+//   '/apps/2/detail': 'Detail'
+// };
+@withRouter
+export default class BreadcrumbNavigation extends Component {
+  constructor(props) {
+    super(props);
+  }
+  render () {
+    // 获取接口路径并分割
+    const pathSnippets = location.hash.split('#')[1].split('/').filter(i => i);
+    const extraBreadcrumbItems = pathSnippets.map((_, index) => {
+      const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
+      return (
+        <Breadcrumb.Item key={url}>
+          <Link to={url}>
+            {url}
+          </Link>
+        </Breadcrumb.Item>
+      );
+    });
+    const breadcrumbItems = [(
+      <Breadcrumb.Item key="home">
+        <Link to="/">Home</Link>
+      </Breadcrumb.Item>
+    )].concat(extraBreadcrumbItems);
+    console.log(pathSnippets);
+    return (
+      <Breadcrumb className="breadcrumb-container">
+        {breadcrumbItems}
+      </Breadcrumb>
+    )
+  }
+}

client/components/Breadcrumb/Breadcrumb.scss

@@ -0,0 +1,6 @@
+@import '../../styles/mixin.scss';
+
+.breadcrumb-container {
+  @include row-width-limit;
+  margin: 16px auto -8px;
+}

client/containers/AddInterface/AddInterface.js

@@ -107,8 +107,8 @@ class AddInterface extends Component {
   }
 
   getInterfaceId () {
-    const reg = /AddInterface\/edit\/(\d+)/g
-    const regTwo = /AddInterface\/(\d+)/g
+    const reg = /add-interface\/edit\/(\d+)/g
+    const regTwo = /add-interface\/(\d+)/g
     const url = location.href
     if ( url.match(reg) ) {
       return RegExp.$1
@@ -125,7 +125,7 @@ class AddInterface extends Component {
   }
 
   verificationURL () {
-    const dir = 'AddInterface/edit'
+    const dir = 'add-interface/edit'
     const url = location.href
     if (url.includes(dir)) {
       return true
@@ -247,7 +247,7 @@ class AddInterface extends Component {
         success()
         this.changeState(true)
         // 初始化 mock
-        this.mockData()   
+        this.mockData()
       })
       .catch(e => {
         console.log(e)

client/containers/Interface/Interface.js

@@ -46,14 +46,15 @@ class Interface extends Component {
 
   componentWillMount () {
     const interfaceId = this.getInterfaceId()
+    console.log(interfaceId);
     const params = {
       params: {
-        project_id: interfaceId
+        project_id: '2481'
       }
     }
 
     this.props.saveInterfaceProjectId(interfaceId)
-
+    console.log(params);
     axios.get('/interface/list', params)
       .then(result => {
         result = result.data.data
@@ -69,13 +70,16 @@ class Interface extends Component {
   }
 
   getInterfaceId () {
-    const reg = /Interface\/(\d+)/g
+    const reg = /project\/(\d+)/g
     const url = location.href
     url.match(reg)
+    console.log(url.match(reg));
+    console.log(RegExp.$1);
     return RegExp.$1
   }
 
   render () {
+    console.log('==================');
     const { interfaceData, projectMember, modalVisible } = this.props
     return (
       <div className="g-doc">

client/containers/Interface/InterfaceList/InterfaceList.js

@@ -13,7 +13,7 @@ class InterfaceList extends Component {
   }
 
   getInterfaceId () {
-    const reg = /Interface\/(\d+)/g
+    const reg = /project\/(\d+)/g
     const url = location.href
     url.match(reg)
     return RegExp.$1
@@ -25,7 +25,7 @@ class InterfaceList extends Component {
 
     return (
       <div className="interface-btngroup">
-        <Link to={`/AddInterface/${getInterfaceId}`}><Button className="interface-btn" type="primary" icon="plus">添加接口</Button></Link>
+        <Link to={`/add-interface/${getInterfaceId}`}><Button className="interface-btn" type="primary" icon="plus">添加接口</Button></Link>
         <Button className="interface-btn" type="primary" onClick={projectMember} icon="user">管理成员</Button>
       </div>
     )

client/containers/Interface/InterfaceMode/InterfaceMode.js

@@ -56,7 +56,7 @@ class InterfaceMode extends Component {
       member_uid: id,
       id: this.getInterfaceId()
     }
-    
+
     axios.post('/project/del_member', params)
       .then(() => {
         this.getMemberList()
@@ -103,7 +103,7 @@ class InterfaceMode extends Component {
           this.setState({
             dataSource: userList
           })
-        } 
+        }
       })
       .catch (err => {
         console.log(err)
@@ -119,7 +119,7 @@ class InterfaceMode extends Component {
   }
 
   getInterfaceId () {
-    const reg = /Interface\/(\d+)/g
+    const reg = /project\/(\d+)/g
     const url = location.href
     url.match(reg)
     return RegExp.$1
@@ -147,7 +147,7 @@ class InterfaceMode extends Component {
             onSearch={this.handleSearch}
             placeholder="input here"
           />
-          <Button onClick={this.addNewUser}>添 加</Button>          
+          <Button onClick={this.addNewUser}>添 加</Button>
         </div>
         <article className="users">
           <p>项目成员</p>

client/containers/Interface/InterfaceTable/InterfaceTable.js

@@ -84,7 +84,7 @@ class InterfaceTable extends Component {
         const confirm = this.confirm.bind(this, data._id)
         return (
           <span>
-            <Link to={`/AddInterface/edit/${data._id}`}><span>编辑</span></Link>
+            <Link to={`/add-interface/edit/${data._id}`}><span>编辑</span></Link>
             <span className="ant-divider" />
             <Popconfirm title="是否删除接口!" onConfirm={confirm} okText="Yes" cancelText="No">
               <a href="">删除</a>

client/containers/ProjectGroups/ProjectList/ProjectList.js

@@ -39,7 +39,7 @@ const getColumns = (data, props) => {
     dataIndex: 'name',
     key: 'name',
     render: (text, record) => {
-      return <Link to={`/Interface/${record._id}`}>{text}</Link>
+      return <Link to={`/project/${record._id}`}>{text}</Link>
     }
   },{
     title: 'Mock链接',
@@ -47,7 +47,7 @@ const getColumns = (data, props) => {
     render: (item) => {
       return 'http://'+ item.prd_host + item.basepath;
     }
-    
+
   }, {
     title: '创建人',
     dataIndex: 'owner',

client/routes.js

@@ -9,14 +9,14 @@ export default () => {
       <div className="router-main">
         <Header/>
         <Route path="/" component={ Home } exact />
-        
+
         <Route path="/group" component={ ProjectGroups } >
           <Route  exact={false} path="/group/:groupName" component={ ProjectGroups } />
         </Route>
-        <Route path="/Interface" component={ Interface } />
+        <Route path="/project" component={ Interface } />
         <Route path="/user" component={User} />
         <Route path="/News" component={ News } />
-        <Route path="/AddInterface" component={ AddInterface } />
+        <Route path="/add-interface" component={ AddInterface } />
       </div>
     </HashRouter>
   )