feat: header重构

client/components/Header/Header.js

@@ -3,13 +3,19 @@ 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, Dropdown, message } from 'antd'
+import { Icon, Layout, Menu, Dropdown, message, Tooltip } from 'antd'
 import { checkLoginState, logoutActions, loginTypeAction} from '../../reducer/modules/login'
 import { changeMenuItem } from '../../reducer/modules/menu'
 import { withRouter } from 'react-router';
 import Srch from './Search/Search'
 const { Header } = Layout;
 
+const headerStyle = {
+  'height': '.56rem',
+  'lineHeight': '.56rem',
+  'padding': 0
+};
+
 const MenuUser = (props) => (
   <Menu
   style={{
@@ -24,19 +30,32 @@ const MenuUser = (props) => (
     </Menu.Item>
   </Menu>
 );
+
 MenuUser.propTypes={
-  user:PropTypes.string,
-  msg:PropTypes.string,
+  user: PropTypes.string,
+  msg: PropTypes.string,
   uid: PropTypes.number,
-  relieveLink:PropTypes.func,
-  logout:PropTypes.func
+  relieveLink: PropTypes.func,
+  logout: PropTypes.func
 }
 
 const ToolUser = (props)=> (
   <ul>
-    <li className="toolbar-li">
+    <li className="toolbar-li item-search">
       <Srch groupList={props.groupList}/>
     </li>
+    <Link to="/">
+      <Tooltip placement="bottom" title={'新建项目'}>
+        <li className="toolbar-li">
+          <Icon className="dropdown-link" style={{ fontSize: 16 }} type="plus-circle" />
+        </li>
+      </Tooltip>
+    </Link>
+    <Tooltip placement="bottom" title={'使用文档'}>
+      <li className="toolbar-li">
+        <a target="_blank" href="./doc/index.html"><Icon className="dropdown-link" style={{ fontSize: 16 }} type="question-circle" /></a>
+      </li>
+    </Tooltip>
     <li className="toolbar-li">
       <Dropdown
         placement = "bottomRight"
@@ -50,18 +69,18 @@ const ToolUser = (props)=> (
           />
       }>
         <a className="dropdown-link">
-          <Icon type="solution" />
+          <Icon type="solution" /><span className="name">{props.user}</span>
         </a>
       </Dropdown>
     </li>
   </ul>
 );
 ToolUser.propTypes={
-  user:PropTypes.string,
-  msg:PropTypes.string,
+  user: PropTypes.string,
+  msg: PropTypes.string,
   uid: PropTypes.number,
-  relieveLink:PropTypes.func,
-  logout:PropTypes.func,
+  relieveLink: PropTypes.func,
+  logout: PropTypes.func,
   groupList: PropTypes.array
 };
 
@@ -73,8 +92,7 @@ ToolUser.propTypes={
       user: state.login.userName,
       uid: state.login.uid,
       msg: null,
-      login:state.login.isLogin,
-      curKey: state.menu.curKey
+      login:state.login.isLogin
     }
   },
   {
@@ -95,7 +113,6 @@ export default class HeaderCom extends Component {
     msg: PropTypes.string,
     uid: PropTypes.number,
     login:PropTypes.bool,
-    curKey:PropTypes.string,
     relieveLink:PropTypes.func,
     logoutActions:PropTypes.func,
     checkLoginState:PropTypes.func,
@@ -147,57 +164,28 @@ export default class HeaderCom extends Component {
     })
   }
   render () {
-    const { login, user, msg, uid, curKey } = this.props;
-    const headerImgStyle = login?{}:{
-      'background': 'url(./image/header-bg-img.jpg) no-repeat',
-      'backgroundSize':'100% 100%'
-    };
-    const headerShadeStyle = login? {
-      'padding':'0'
-    }: {
-      'background': 'linear-gradient(to bottom,rgba(0,0,0,0.6),rgba(0,0,0,0.5))',
-      'padding':'0'
-    };
+    const { login, user, msg, uid } = this.props;
     return (
-      <acticle className={`header-box`} style={headerImgStyle}>
-        <Header style={headerShadeStyle}>
-          <div className="content">
-            <div className="logo">
-              <Link to="/" onClick={this.relieveLink}>YAPI<span className="ui-badge"></span></Link>
-            </div>
-            <Menu
-              mode="horizontal"
-              className="nav-toolbar"
-              theme="dark"
-              style={{
-                lineHeight : '.64rem',
-                backgroundColor:"transparent",
-                borderColor:"transparent"
-              }}
-              onClick={this.linkTo}
-              selectedKeys={[curKey]}
-            >
-              <Menu.Item key="/group">
-                <Link to="/group">项目广场</Link>
-              </Menu.Item>
-              <Menu.Item key="/doc">
-                <a target="_blank" href="./doc/index.html">使用文档</a>
-              </Menu.Item>
-            </Menu>
-            <div className="user-toolbar">
-              {login?
-                <ToolUser
-                  user = { user }
-                  msg = { msg }
-                  uid = { uid }
-                  relieveLink = { this.relieveLink }
-                  logout = { this.logout }
-                />
-                :""}
-            </div>
+      <Header className="header-box" style={headerStyle}>
+        <div className="content g-row">
+          <div className="logo">
+            <Link to="/" onClick={this.relieveLink}>
+              <img className="img" src="./image/logo_header@1x.png" /><span className="logo-name">YAPI<span className="ui-badge"></span></span>
+            </Link>
           </div>
-        </Header>
-      </acticle>
+          <div className="user-toolbar">
+            {login?
+              <ToolUser
+                user = { user }
+                msg = { msg }
+                uid = { uid }
+                relieveLink = { this.relieveLink }
+                logout = { this.logout }
+              />
+              :""}
+          </div>
+        </div>
+      </Header>
     )
   }
 }

client/components/Header/Header.scss

@@ -6,33 +6,28 @@ $color-blue : #108ee9;
 $color-blue-deeper: #34495E;
 $color-grey-deep : #929aac;
 $color-black-light : #404040;
+
+.nav-tooltip {
+  color: red;
+}
+
 /* .header-box.css */
 .header-box {
-  @include wrap-width-limit;
-  display: block;
-  font-size: 0.14rem;
-  z-index: 99;
-  .content {
-    @include row-width-limit;
-    margin: 0 auto;
-    zoom: 1;
-    overflow: hidden;
-  }
   .logo {
     position: relative;
-    font-size: .3rem;
     float: left;
-    margin: 0 .2rem 0 0;
-    color: $color-white;
-    //cursor: pointer;
-    a{
+    line-height: .54rem;
+    .logo-name {
       color: $color-white;
-      &:hover {
-        color: $color-white;
-      }
-      &:focus{
-        text-decoration: none;
-      }
+      font-size: .24rem;
+      font-weight: 300;
+      margin-left: .38rem;
+    }
+    .img {
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
     }
     .ui-badge {
       position: absolute;
@@ -57,38 +52,30 @@ $color-black-light : #404040;
 
   .user-toolbar{
     float: right;
-    height: .64rem;
+    height: .54rem;
     display: flex;
     align-items: center;
+    .item-search {
+      width: 2.4rem;
+    }
     .toolbar-li{
-      &:first-child{
-        width: 2rem;
-      }
       float: left;
-      margin: 0 0 0 .12rem;
-      font-size: .2rem;
+      font-size: .14rem;
       cursor: pointer;
-      color: $color-white;
-      &:not(:last-child){
-        margin: 0 .12rem;
+      color: #ccc;
+      margin-left: .16rem;
+      transition: color .4s;
+      .dropdown-link {
+        color: #999;
+        transition: color .4s;
       }
       &:hover{
-        color: $color-blue;
-        a{
-          color: $color-blue;
+        .dropdown-link {
+          color: #fff;
         }
       }
-      a{
-        color: $color-white;
-        &:hover{
-          color: $color-blue;
-        }
-        &:focus{
-          text-decoration: none;
-        }
-      }
-      i{
-        margin-right: .03rem;
+      .name {
+        margin-left: .08rem;
       }
     }
   }

client/components/Header/Search/Search.js

@@ -104,7 +104,6 @@ export default class Srch extends Component{
         <AutoComplete
           className="search-dropdown"
           dataSource={dataSource}
-          size="large"
           style={{ width: '100%' }}
           defaultActiveFirstOption= {false}
           onSelect={this.onSelect}
@@ -113,7 +112,6 @@ export default class Srch extends Component{
         >
           <Input
             prefix={<Icon type="search" className="srch-icon" />}
-            size="large"
             style={{}}
             placeholder="搜索分组/项目"
             className="search-input"

client/components/Header/Search/Search.scss

@@ -1,6 +1,7 @@
 $color-grey:#979DA7;
 
 .search-wrapper{
+  cursor: auto;
   .search-input{
     width: 2rem;
   }

client/containers/Home/Home.js

@@ -15,16 +15,15 @@ import QueueAnim from 'rc-queue-anim';
 const oneAnim = { y: '+=30', opacity: 0, type: 'from', ease: 'easeOutQuad' };
 const imgAnim = { y: '+=50', opacity: 0, type: 'from', ease: 'easeOutQuad', duration: '1500'};
 const style = {
-  // 'height':'100%',
-  // 'height':'7rem',
   'width':'100%',
-  'background': 'url(./image/bg-img.jpg) no-repeat',
+  // 'background-image': 'linear-gradient(to right, #0063B3 0%, #2395F1 96%)',
+  'background-color': '#333',
   'backgroundSize':'100% 100%'
 }
 const HomeGuest = (props) => (
   <div>
     <div className="main-one" style = {style}>
-      <div style={{ background: "linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.2))"}}>
+      <div>
         <div className="container">
           <Row>
             <Col span={24}>

client/styles/common.scss

@@ -60,3 +60,7 @@ em {
   margin: 0 auto;
   padding: 0 .24rem;
 }
+
+.nav-tooltip {
+  color: red;
+}