Merge branch 'dev' of gitlab.corp.qunar.com:mfe/yapi into dev

client/components/Header/Header.js

@@ -1,32 +1,72 @@
 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 { Icon } from 'antd'
+
+const ToolUser = (props)=> (
+  <ul>
+    <li><Icon type="user" />{ props.user }</li>
+    <li>消息{ props.msg.length }</li>
+    <li>退出</li>
+  </ul>
+);
+ToolUser.propTypes={
+  user:PropTypes.string.isRequired,
+  msg:PropTypes.string.isRequired
+};
+
+const ToolGuest = ()=>
+  (
+    <ul>
+      <li><Link to={`/Login`}>登录</Link></li>
+      <li>注册</li>
+    </ul>
+  );
 
 class Header extends Component {
   constructor(props) {
-    super(props)
+    super(props);
   }
-
   render () {
+    const { login, user, msg } = this.props;
     return (
       <acticle className="header-box">
         <div className="content">
           <h1>YAPI</h1>
-
+          <ul className="nav-toolbar">
-          <ul>
-            <li>
-              <Link to={`/Login`}>登录</Link>
-            </li>
             <li>
               <Link to={`/ProjectGroups`}>分组</Link>
             </li>
+            <li>
+              <a>我的项目</a>
+            </li>
+            <li>
+              <a>文档</a>
+            </li>
+          </ul>
+          <ul className="user-toolbar">
+            {login?<ToolUser user={user} msg={msg}/>:<ToolGuest/>}
           </ul>
 
-          <em><i className="iconfont" data-reactid="30"></i>王亮</em>
         </div>
       </acticle>
     )
   }
 }
 
-export default Header
+Header.propTypes={
+  user: PropTypes.string.isRequired,
+  msg: PropTypes.string.isRequired,
+  login:PropTypes.bool.isRequired
+};
+
+export default connect(
+  () => ({
+    user: "王亮",
+    msg: "暂无消息",
+    login:false
+  })
+)(Header)
+

client/components/Header/Header.scss

@@ -1,11 +1,14 @@
 @import '../../styles/common.scss';
-
+$color-white : #fff;
+$color-blue : #30a1f2;
+$color-grey-deep : #929aac;
 /* .header-box.css */
 .header-box {
   display: block;
-  line-height: 64px;
+  line-height: .64rem;
   background: #000c15;
   font-size: 0.14rem;
+  color: $color-white;
 
   // 内容宽度
   .content {
@@ -16,31 +19,45 @@
   }
 
   h1 {
-    font-size: 0.25rem;
+    font-size: .25rem;
     float: left;
-    color: #FFF;
+    margin: 0 .2rem;
-    margin: 0 20px;
+    color: $color-white;
   }
 
-  ul {
+  .nav-toolbar {
     float: left;
-
     li {
       float: left;
-      margin: 0 10px;
+      margin: 0 .2rem;
       a{
-        color: #FFF;
+        color: $color-white;
+        &:hover {
+          color: $color-blue;
+        }
+      }
     }
   }
 
-    li:hover {
+  .user-toolbar{
-      color: #FFF;
-    }
-  }
-
-  em {
     float: right;
-    color: #929aac;
+    line-height: .12rem;
-    margin: 0 20px 0 0;
+    li{
+      float: left;
+      height: .12rem;
+      margin: .26rem 0;
+      padding: 0 .1rem;
+      font-size: .12rem;
+      cursor: pointer;
+      a{
+        color: $color-white;
+        &:hover{
+          color: $color-blue;
+        }
+      }
+      &:not(:last-child){
+        border-right: .01rem solid $color-white;
+      }
+    }
   }
 }