feat: 添加header上的搜索，修改路由，修改登录页面样式

client/App.js

@@ -1,9 +1,12 @@
 import React, { Component } from 'react'
-import axios from 'axios';
-import { Route, HashRouter, Redirect } from 'react-router-dom'
+import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
+import { Route, HashRouter, Redirect, Switch } from 'react-router-dom'
 import { Home, ProjectGroups, Interface, News } from './containers/index'
 import User from './containers/User/User.js'
 import Header from './components/Header/Header'
+import { checkLoginState } from './actions/login'
+
 
 const LOADING_STATUS = 0;
 const GUEST_STATUS = 1;
@@ -12,12 +15,14 @@ const MEMBER_STATUS = 2;
 class App extends Component {
 
   constructor(props) {
-    super(props)
+    super(props);
     this.state = {
       login: LOADING_STATUS
     }
   }
-
+  static propTypes = {
+    checkLoginState:PropTypes.func
+  }
   route = (status) => {
     let r;
     if (status === LOADING_STATUS) {
@@ -25,14 +30,16 @@ class App extends Component {
     } else if (status === GUEST_STATUS) {
       r = (
         <HashRouter>
-
           <div className="router-main">
             <Header />
             <Route path="/" component={Home} exact />
-            <Redirect to="/" />
+            <Switch>
+              <Route
+                path="/"
+                component={Home}/>
+              <Redirect from="(/:str)" to="/" />
+            </Switch>
           </div>
-
-
         </HashRouter>
       )
     } else {
@@ -40,13 +47,12 @@ class App extends Component {
         <HashRouter>
           <div className="router-main">
             <Header />
-            <Route path="/" component={ProjectGroups} exact />
+            <Route path="/" component={Home} exact />
             <Route path="/ProjectGroups" component={ProjectGroups} />
             <Route path="/Interface" component={Interface} />
             <Route path="/user" component={User} />
             <Route path="/News" component={News} />
           </div>
-
         </HashRouter>
       )
     }
@@ -55,9 +61,9 @@ class App extends Component {
   }
 
   componentDidMount() {
-    console.log('app.js init')
-    axios.get('/user/status').then((res) => {
-      if (res.data.errcode === 0 && res.data.data._id > 0) {
+    this.props.checkLoginState().then((res) => {
+      console.log(res);
+      if (res.payload.data.errcode === 0 && res.payload.data.data._id > 0) {
         this.setState({
           login: MEMBER_STATUS
         })
@@ -66,22 +72,26 @@ class App extends Component {
           login: GUEST_STATUS
         })
       }
-    }, (err) => {
+    }).catch((err) => {
       this.setState({
         login: GUEST_STATUS
-      })
-      console.log(err.message)
-    })
-
+      });
+      console.log(err)
+    });
   }
 
   render() {
-    console.log(MEMBER_STATUS)
-    console.log(this.route(this.state.login))
     return this.route(this.state.login)
-
-
   }
 }
 
-export default App
+export default connect(
+  state => {
+    return{
+      login:state.login.isLogin
+    }
+  },
+  {
+    checkLoginState
+  }
+)(App)

client/components/Footer/Footer.js

@@ -11,7 +11,6 @@ class Footer extends Component {
     footList: PropTypes.array
   }
   render () {
-    console.log(this.props);
     return (
       <div className = 'footer'>
         <div className = 'footContent'>

client/components/Header/Header.js

@@ -3,25 +3,65 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
-import { Icon, Layout, Menu} from 'antd'
+import { Icon, Layout, Menu, Dropdown } from 'antd'
 import { checkLoginState, logoutActions, loginTypeAction} from '../../actions/login'
 import { withRouter } from 'react-router';
-
+import Srch from './Search/Search'
 const { Header } = Layout;
+
+const MenuUser = (props) => (
+  <Menu>
+    <Menu.Item key="0">
+      <Link to={`/profile/${props.uid}`} onClick={props.relieveLink}><Icon type="user" />{ props.user }</Link>
+    </Menu.Item>
+    <Menu.Item key="1">
+      <Link to="/news" onClick={props.relieveLink}><Icon type="mail" />{ props.msg }</Link>
+    </Menu.Item>
+    <Menu.Item key="2">
+      <a onClick={props.logout}>退出</a>
+    </Menu.Item>
+  </Menu>
+);
+MenuUser.propTypes={
+  user:PropTypes.string,
+  msg:PropTypes.string,
+  uid: PropTypes.number,
+  relieveLink:PropTypes.func,
+  logout:PropTypes.func
+}
+
 const ToolUser = (props)=> (
   <ul>
-    <li><Link to="/user" onClick={props.relieveLink}><Icon type="user" />{ props.user }</Link></li>
-    <li><Link to="/News" onClick={props.relieveLink}><Icon type="mail" />{ props.msg }</Link></li>
-    <li onClick={props.logout}>退出</li>
+    <li className="toolbar-li">
+      <Srch groupList={props.groupList}/>
+    </li>
+    <li className="toolbar-li">
+      <Dropdown overlay={
+        <MenuUser
+          user={props.user}
+          msg={props.msg}
+          uid={props.uid}
+          relieveLink={props.relieveLink}
+          logout={props.logout}
+        />
+      }>
+        <a className="dropdown-link">
+          <Icon type="user"/>
+        </a>
+      </Dropdown>
+    </li>
   </ul>
 );
 ToolUser.propTypes={
   user:PropTypes.string,
   msg:PropTypes.string,
+  uid: PropTypes.number,
   relieveLink:PropTypes.func,
-  logout:PropTypes.func
+  logout:PropTypes.func,
+  groupList: PropTypes.array
 };
 
+
 @withRouter
 class HeaderCom extends Component {
   constructor(props) {
@@ -34,6 +74,7 @@ class HeaderCom extends Component {
     router: PropTypes.object,
     user: PropTypes.string,
     msg: PropTypes.string,
+    uid: PropTypes.number,
     login:PropTypes.bool,
     relieveLink:PropTypes.func,
     logoutActions:PropTypes.func,
@@ -42,10 +83,6 @@ class HeaderCom extends Component {
     history: PropTypes.object,
     location: PropTypes.object
   }
-  componentDidMount() {
-    const { router } = this.props;
-    console.log(router);
-  }
   linkTo = (e) =>{
     this.setState({
       current : e.key
@@ -59,6 +96,10 @@ class HeaderCom extends Component {
   logout = (e) => {
     e.preventDefault();
     this.props.logoutActions();
+    this.props.history.push('/');
+    this.setState({
+      current : "/"
+    })
   }
   handleLogin = (e) => {
     e.preventDefault();
@@ -78,8 +119,7 @@ class HeaderCom extends Component {
     })
   }
   render () {
-    this.checkLoginState();
-    const { login, user, msg } = this.props;
+    const { login, user, msg, uid } = this.props;
     return (
       <acticle className="header-box">
         <Layout className="'layout">
@@ -110,7 +150,15 @@ class HeaderCom extends Component {
                 </Menu.Item>
               </Menu>
               <div className="user-toolbar">
-                {login?<ToolUser user={user} msg={msg} relieveLink={this.relieveLink} logout={this.logout}/>:""}
+                {login?
+                  <ToolUser
+                    user = { user }
+                    msg = { msg }
+                    uid = { uid }
+                    relieveLink = { this.relieveLink }
+                    logout = { this.logout }
+                  />
+                  :""}
               </div>
             </div>
           </Header>
@@ -124,6 +172,7 @@ export default connect(
   (state) => {
     return{
       user: state.login.userName,
+      uid: state.login.uid,
       msg: null,
       login:state.login.isLogin
     }

client/components/Header/Header.scss

@@ -46,17 +46,20 @@ $color-black-light : #404040;
 
   .user-toolbar{
     float: right;
-    line-height: .14rem;
-    li{
+    height: .64rem;
+    display: flex;
+    align-items: center;
+    .toolbar-li{
+      &:first-child{
+        width: 2rem;
+      }
       float: left;
-      margin: .26rem 0;
-      padding: 0 0 0 .12rem;
+      margin: 0 0 0 .12rem;
       font-size: .14rem;
       cursor: pointer;
       color: $color-white;
       &:not(:last-child){
-        border-right: .01rem solid $color-white;
-        padding: 0 .12rem;
+        margin: 0 .12rem;
       }
       &:hover{
         color: $color-blue;
@@ -76,6 +79,11 @@ $color-black-light : #404040;
       i{
         margin-right: .03rem;
       }
+      .dropdown-link{
+        i{
+          font-size: .2rem;
+        }
+      }
     }
   }
 }

client/components/Header/Search/Search.js

@@ -0,0 +1,95 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { Icon, Input, AutoComplete } from 'antd'
+import './Search.scss'
+import { withRouter } from 'react-router';
+import axios from 'axios';
+
+@connect(
+  state => ({
+    groupList: state.group.groupList,
+    projectList: state.project.projectList
+  })
+)
+
+@withRouter
+export default class Srch extends Component{
+  constructor(props){
+    super(props);
+    this.state = {
+      dataSource:[]
+    };
+  }
+
+  static propTypes = {
+    groupList : PropTypes.array,
+    projectList: PropTypes.array,
+    router: PropTypes.object,
+    history: PropTypes.object,
+    location: PropTypes.object
+  }
+
+  onSelect = (value) => {
+    if( value.split(":")[0] == "group" ){
+      this.props.history.push('/group/'+value.split(":")[1].trim());
+    } else {
+      this.props.history.push('/project/'+value.split("(")[1].slice(0,-1));
+    }
+  }
+
+  handleSearch = (value) => {
+    axios.get('/project/search?q='+value)
+      .then((res) => {
+        if(res.data && res.data.errcode === 0){
+          const dataSource = [];
+          for(let title in res.data.data){
+            res.data.data[title].map(item => {
+              title == "group" ? dataSource.push( title+": "+item.groupName ): dataSource.push( title+": "+item.name+"("+item._id+")" );
+            })
+          }
+          this.setState({
+            dataSource: dataSource
+          });
+        }else{
+          console.log("查询项目或分组失败");
+        }
+      })
+      .catch((err) => {
+        console.log(err);
+      })
+  }
+
+  getDataSource(groupList){
+    const groupArr =[];
+    groupList.forEach(item =>{
+      groupArr.push("group: "+ item["group_name"]);
+    })
+    return groupArr;
+  }
+
+  render(){
+    const { dataSource } = this.state;
+    return(
+      <div className="search-wrapper">
+        <AutoComplete
+          className="search-dropdown"
+          dataSource={dataSource}
+          size="large"
+          style={{ width: '100%' }}
+          defaultActiveFirstOption= {false}
+          onSelect={this.onSelect}
+          onSearch={this.handleSearch}
+          filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1}
+        >
+          <Input
+            prefix={<Icon type="search" className="srch-icon" />}
+            size="large" style={{ width: 200 }}
+            placeholder="search group/project"
+            className="search-input"
+          />
+        </AutoComplete>
+      </div>
+    )
+  }
+}

client/components/Header/Search/Search.scss

@@ -0,0 +1,11 @@
+$color-grey:#979DA7;
+
+.search-wrapper{
+  .search-input{
+    border:1px solid #AAA;
+    background-color: rgba(255,255,255,0.5);
+  }
+  .srch-icon{
+    color: $color-grey;
+  }
+}

client/containers/Home/Home.scss

@@ -8,12 +8,12 @@ $color-black-lighter: #404040;
 
 
 .home-main {
+  height:calc(100% - .64rem);
   display: -webkit-box;
   margin-top: .64rem;
   -webkit-box-orient: vertical;
   background: $color-grey-lighter;
   .main-one{
-    height:calc(100% - .64rem);
     padding: .5rem .5rem 0 .5rem;
     //background: radial-gradient(ellipse at center,#45484d 0%,#000 100%);
     .home-des{
@@ -44,8 +44,11 @@ $color-black-lighter: #404040;
     }
   }
   .user-home{
-    height:calc(100% - .64rem);
-    padding: .5rem .5rem 0 .5rem;
+    display: flex;
+    align-items: center;
+    height:calc(100% - 2rem);
+    max-width: 11rem;
+    margin: 0 auto;
     .user-des{
       max-width: 11rem;
       margin: 0 auto .5rem;

client/reducer/Login/login.js

@@ -25,6 +25,7 @@ export default (state = initialState, action) => {
       return {
         ...state,
         isLogin: true,
+        uid: action.payload.data.uid,
         userName: action.payload.data.userName
       };
     }