fix:修改了header和登录框的逻辑

client/actions/login.js

@@ -1,7 +1,8 @@
 import {
   LOGIN,
-  REGISTER
+  REGISTER,
-} from '../actionTypes.js';
+  LOGIN_TYPE
+} from '../constants/action-types.js';
 // import Server from '../server/listRequest';
 
 const loginActions = (data) => {
@@ -20,7 +21,15 @@ const regActions = (data) => {
   }
 }
 
+const loginTypeAction = (index) => {
+  return{
+    type: LOGIN_TYPE,
+    index
+  }
+}
+
 export default {
   loginActions,
-  regActions
+  regActions,
+  loginTypeAction
 }

client/components/Header/Header.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 import { Icon } from 'antd'
+import { loginTypeAction } from  '../../actions/login';
 
 const ToolUser = (props)=> (
   <ul>
@@ -13,43 +14,69 @@ const ToolUser = (props)=> (
   </ul>
 );
 ToolUser.propTypes={
-  user:PropTypes.string.isRequired,
+  user:PropTypes.string,
-  msg:PropTypes.string.isRequired
+  msg:PropTypes.string
 };
 
-const ToolGuest = ()=>
+const ToolGuest = (props)=> (
-  (
+  <ul>
-    <ul>
+    <li onClick={e => props.onLogin(e)}><Link to={`/Login`}>登录</Link></li>
-      <li><Link to={`/Login`}>登录</Link></li>
+    <li onClick={e => props.onReg(e)}><Link to={`/Login`}>注册</Link></li>
-      <li>注册</li>
+  </ul>
-    </ul>
+);
-  );
+ToolGuest.propTypes={
+  onLogin:PropTypes.func,
+  onReg:PropTypes.func
+}
 
 class Header extends Component {
   constructor(props) {
     super(props);
+    this.state={
+      guestToolShow:true
+    }
+  }
+  handleLogin = (e) => {
+    e.preventDefault();
+    this.props.loginTypeAction("1");
+    this.setState({
+      guestToolShow:false
+    })
+  }
+  handleReg = (e)=>{
+    e.preventDefault();
+    this.props.loginTypeAction("2");
+    this.setState({
+      guestToolShow:false
+    })
+  }
+  hideGuestTool = (e)=>{
+    e.preventDefault();
+    this.setState({
+      guestToolShow:true
+    })
   }
   render () {
     const { login, user, msg } = this.props;
+    console.log(this.state.guestToolShow);
     return (
       <acticle className="header-box">
         <div className="content">
           <h1>YAPI</h1>
           <ul className="nav-toolbar">
-            <li>
+            <li onClick={this.hideGuestTool}>
               <Link to={`/ProjectGroups`}>分组</Link>
             </li>
-            <li>
+            <li onClick={this.hideGuestTool}>
               <a>我的项目</a>
             </li>
-            <li>
+            <li onClick={this.hideGuestTool}>
               <a>文档</a>
             </li>
           </ul>
           <ul className="user-toolbar">
-            {login?<ToolUser user={user} msg={msg}/>:<ToolGuest/>}
+            {login?<ToolUser user={user} msg={msg}/>:(this.state.guestToolShow?<ToolGuest onLogin={this.handleLogin} onReg={this.handleReg}/>:'')}
           </ul>
-
         </div>
       </acticle>
     )
@@ -57,16 +84,20 @@ class Header extends Component {
 }
 
 Header.propTypes={
-  user: PropTypes.string.isRequired,
+  user: PropTypes.string,
-  msg: PropTypes.string.isRequired,
+  msg: PropTypes.string,
-  login:PropTypes.bool.isRequired
+  login:PropTypes.bool,
+  loginTypeAction:PropTypes.func
 };
 
 export default connect(
-  () => ({
+  (state) => {
-    user: "王亮",
+    return{
-    msg: "暂无消息",
+      user: state.login.userName,
-    login:false
+      msg: "暂无消息",
-  })
+      login:state.login.isLogin
+    }
+  },
+  {loginTypeAction}
 )(Header)
 

client/constants/action-types.js

@@ -7,3 +7,7 @@ export const FETCH_CURR_GROUP = 'FETCH_CURR_GROUP'
 
 // login
 export const LOGIN = 'LOGIN';
+export const REGISTER = 'REGISTER';
+
+//header
+export const LOGIN_TYPE = 'LOGIN_TYPE';

client/containers/Login/loginWrap.js

@@ -1,19 +1,27 @@
 import './Login.scss'
 import React, { Component } from 'react'
+import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 import { Tabs } from 'antd';
 import LoginForm from './login';
 import RegForm from './reg';
 const TabPane = Tabs.TabPane;
 
+
 class LoginWrap extends Component {
+  constructor(props){
+    super(props);
+  }
+
   static propTypes = {
-    form: PropTypes.object
+    form: PropTypes.object,
+    loginWrapActiveKey:PropTypes.string
   }
 
   render() {
+    const { loginWrapActiveKey } = this.props;
     return (
-      <Tabs defaultActiveKey="1" className="login-form">
+      <Tabs defaultActiveKey={loginWrapActiveKey} className="login-form">
         <TabPane tab="登录" key="1">
           <LoginForm/>
         </TabPane>
@@ -25,4 +33,8 @@ class LoginWrap extends Component {
   }
 }
 
-export default LoginWrap;
+export default connect(
+  state =>({
+    loginWrapActiveKey: state.login.loginWrapActiveKey
+  })
+)(LoginWrap)

client/reducer/Login/login.js

@@ -1,11 +1,13 @@
 import {
-  LOGIN
+  LOGIN,
+  LOGIN_TYPE
 } from '../../constants/action-types';
 
 const initialState = {
   isLogin: false,
   userName: null,
-  uid: null
+  uid: null,
+  loginWrapActiveKey:"1"
 };
 
 export default (state = initialState, action) => {
@@ -17,6 +19,12 @@ export default (state = initialState, action) => {
         userName: action.userName
       };
     }
+    case LOGIN_TYPE: {
+      return {
+        ...state,
+        loginWrapActiveKey: action.index
+      };
+    }
     default:
       return state;
   }