opti: 添加登录后的首页

client/components/Header/Header.js

@@ -2,14 +2,13 @@ import './Header.scss'
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import { Link } from 'react-router-dom'
+import { Link, withRouter } from 'react-router-dom'
 import { Icon, Layout, Menu} from 'antd'
 import { logoutActions, loginTypeAction} from '../../actions/login'
 
 const { Header } = Layout;
 const ToolUser = (props)=> (
   <ul>
-    <li><Icon type="question-circle-o" />帮助</li>
     <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>
@@ -22,16 +21,7 @@ ToolUser.propTypes={
   logout:PropTypes.func
 };
 
-const ToolGuest = ()=> (
-  <ul>
-    <li><Icon type="question-circle-o" />帮助</li>
-  </ul>
-);
-ToolGuest.propTypes={
-  onLogin:PropTypes.func,
-  onReg:PropTypes.func
-}
-
+@withRouter
 class HeaderCom extends Component {
   constructor(props) {
     super(props);
@@ -43,10 +33,15 @@ class HeaderCom extends Component {
     user: PropTypes.string,
     msg: PropTypes.string,
     login:PropTypes.bool,
+    router: PropTypes.object,
     relieveLink:PropTypes.func,
     logoutActions:PropTypes.func,
     loginTypeAction:PropTypes.func
   }
+  componentDidMount() {
+    const { router } = this.props;
+    console.log(router);
+  }
   linkTo = (e) =>{
     this.setState({
       current : e.key
@@ -96,9 +91,12 @@ class HeaderCom extends Component {
                 <Menu.Item key="/Interface">
                   <Link to="/Interface">接口</Link>
                 </Menu.Item>
+                <Menu.Item key="/doc">
+                  <a>文档</a>
+                </Menu.Item>
               </Menu>
               <div className="user-toolbar">
-                {login?<ToolUser user={user} msg={msg} relieveLink={this.relieveLink} logout={this.logout}/>:<ToolGuest/>}
+                {login?<ToolUser user={user} msg={msg} relieveLink={this.relieveLink} logout={this.logout}/>:""}
               </div>
             </div>
           </Header>

client/containers/Home/Home.js

@@ -1,52 +1,79 @@
 import './Home.scss'
 import React, { Component } from 'react'
-import { Row, Col } from 'antd'
+import { connect } from 'react-redux'
+import { Row, Col, Button } from 'antd'
 import PropTypes from "prop-types"
 import Login from '../Login/login-wrap'
 import Intro from '../../components/Intro/Intro'
+import Footer from "../../components/Footer/Footer";
 
+const HomeGuest = (props) => (
+  <div>
+    <div className="main-one">
+      <div className="container">
+        <Row>
+          <Col span={24}>
+            <div className="home-des">
+              <p className="title">YAPI</p>
+              <div className="detail">一个高效，易用，功能强大的api管理系统</div>
+            </div>
+          </Col>
+        </Row>
+        <Row>
+          <Col span={8} className="main-one-left">
+            <Login/>
+          </Col>
+          <Col span={16} className="main-one-right">
+            <div className="img-container">
+              <img src="./image/demo-img.png"/>
+            </div>
+          </Col>
+        </Row>
+      </div>
+    </div>
+    { props.introList.map(function(intro,i){
+      return (
+        <div className="main-part" key={i}>
+          <div className="container">
+            <Intro intro={intro}/>
+          </div>
+        </div>
+      )
+    })}
+  </div>
+);
+HomeGuest.propTypes ={
+  introList: PropTypes.array
+}
+
+@connect(
+  state => ({
+    login: state.login.isLogin
+  })
+)
 
 class Home extends Component {
   constructor(props) {
     super(props)
   }
   static propTypes = {
-    introList:PropTypes.array
+    introList: PropTypes.array,
+    login : PropTypes.bool
   }
   render () {
+    const { login } = this.props;
     return (
       <div className="home-main">
-        <div className="main-one">
-          <div className="container">
-            <Row>
-              <Col span={24}>
-                <div className="home-des">
-                  <p className="title">YAPI</p>
-                  <div className="detail">一个高效，易用，功能强大的api管理系统</div>
-                </div>
-              </Col>
-            </Row>
-            <Row>
-              <Col span={8} className="main-one-left">
-                <Login/>
-              </Col>
-              <Col span={16} className="main-one-right">
-                <div className="img-container">
-                  <img src="./image/demo-img.png"/>
-                </div>
-              </Col>
-            </Row>
-          </div>
-        </div>
-        { this.props.introList.map(function(intro,i){
-          return (
-            <div className="main-part" key={i}>
-              <div className="container">
-                <Intro intro={intro}/>
+        {login?
+          (
+            <div className="main-one">
+              <div>
+                登录以后的首页
               </div>
-            </div>
-          )
-        })}
+              <Button type="primary" size="large">开始</Button>
+            </div>)
+          : <HomeGuest introList={this.props.introList}/>}
+        <Footer/>
       </div>
     )
   }