登录注册按钮以及弹框样式等（未进行数据绑定）

src/mulan/Components/Login/Index.scss

@@ -0,0 +1,30 @@
+.loginModal{
+  .ant-modal-body{
+    padding:0px;
+    .ant-menu{
+      border-radius: 8px 8px 0px 0px;
+      font-size: 17px;
+    }
+    .content{
+      padding:40px 50px;
+      .subbtn{
+        display: block;
+        height: 40px;
+        line-height: 40px;
+        width: 100%;
+        text-align: center;
+        border-radius: 5px;
+        background-color: #ccc;
+        color: #fff;
+        margin-bottom: 10px;
+        font-size:16px;
+        &.activeBtn{
+          background-color: #1890ff;
+        }
+      }
+      .saveitem{
+        margin-bottom: 0px;
+      }
+    }
+  }
+}

src/mulan/Components/Login/Login.jsx

@@ -0,0 +1,50 @@
+import React, { useState , forwardRef } from 'react';
+import { Form , Input , Checkbox } from 'antd';
+import "./Index.scss";
+
+function LoginModal({form}){
+  const [ active , setActive ] = useState(false);
+
+  const { getFieldDecorator, validateFields , setFieldsValue , getFieldsValue } = form;
+
+  function changeInput(){
+    const { account , password } = getFieldsValue();
+    if(account && password){
+      setActive(true);
+    }else{
+      setActive(false);
+    }
+  }
+  return(
+    <Form>
+      <Form.Item>
+        {getFieldDecorator("account",{
+          rules:[{required:true,message:"请输入登录账号"}]
+        })(
+          <Input placeholder="请输入登录账号" onChange={changeInput}/>
+        )}
+      </Form.Item>
+      <Form.Item>
+        {getFieldDecorator("password",{
+          rules:[{required:true,message:"请输入登录密码"}]
+        })(
+          <Input placeholder="请输入登录密码" onChange={changeInput}/>
+        )}
+      </Form.Item>
+      {
+        active ?
+        <a className="subbtn activeBtn">登录</a>
+        :
+        <span className="subbtn">登录</span>
+      }
+      <Form.Item className="saveitem">
+        {getFieldDecorator("savePass",{
+          rules:[]
+        })(
+          <Checkbox>记住密码</Checkbox>
+        )}
+      </Form.Item>
+    </Form>
+  )
+}
+export default Form.create()(forwardRef(LoginModal));

src/mulan/Components/Login/LoginModal.jsx

@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import { Modal , Menu } from 'antd';
+import "./Index.scss";
+import Login from './Login';
+import Register from './Register';
+
+function LoginModal({visible,}){
+  const [ n , setN ] = useState("0");
+  return(
+    <Modal
+      visible={visible}
+      closable={false}
+      width="440px"
+      title={false}
+      footer={false}
+      className="loginModal"
+      centered
+    >
+      <Menu defaultSelectedKeys={[n]} mode={"horizontal"}>
+        <Menu.Item key="0" onClick={(e)=>setN(e.key)}>登录</Menu.Item>
+        <Menu.Item key="1" onClick={(e)=>setN(e.key)}>注册</Menu.Item>
+      </Menu>
+      <div className="content">
+        {
+          n === "0"?
+          <Login />
+          :
+          <Register />
+        }
+      </div>
+    </Modal>
+  )
+}
+export default LoginModal;

src/mulan/Components/Login/Register.jsx

@@ -0,0 +1,43 @@
+import React, { useState , forwardRef } from 'react';
+import { Form , Input } from 'antd';
+import "./Index.scss";
+
+function Register({form}){
+  const [ active , setActive ] = useState(false);
+
+  const { getFieldDecorator, validateFields , setFieldsValue , getFieldsValue } = form;
+
+  function changeInput(){
+    const { account , password } = getFieldsValue();
+    if(account && password){
+      setActive(true);
+    }else{
+      setActive(false);
+    }
+  }
+  return(
+    <Form>
+      <Form.Item>
+        {getFieldDecorator("account",{
+          rules:[{required:true,message:"请输入注册账号"}]
+        })(
+          <Input placeholder="请输入手机号码或者邮箱账号" onChange={changeInput}/>
+        )}
+      </Form.Item>
+      <Form.Item >
+        {getFieldDecorator("password",{
+          rules:[{required:true,message:"请输入注册密码"}]
+        })(
+          <Input placeholder="请输入注册密码" onChange={changeInput}/>
+        )}
+      </Form.Item>
+      {
+        active ?
+        <a className="subbtn activeBtn">注册</a>
+        :
+        <span className="subbtn">注册</span>
+      }
+    </Form>
+  )
+}
+export default Form.create()(forwardRef(Register));

src/mulan/HOC/Header.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import Nav from './Nav';
 
-function Header(props){
+function Header({users}){
   return(
     <div className="headsnav">
-      <Nav />
+      <Nav users={users}/>
     </div>
   )
 }

src/mulan/HOC/HomeHeader.jsx

@@ -1,11 +1,10 @@
 import React from 'react';
 import Nav from './Nav';
 
-function HomeHeader(props){
+function HomeHeader({users}){
   return(
     <div className="homeHeader">
-
-      <Nav />
+      <Nav users={users}/>
     </div>
   )
 }

src/mulan/HOC/HomeHoc.jsx

@@ -1,15 +1,24 @@
-import React, { Component } from 'react';
+import React, { Component, useState } from 'react';
 import Header from './HomeHeader';
 import './Index.scss';
 
 export function HomeHoc(Sub){
   return class II extends Component {
+    constructor(props){
+      super(props);
+      this.state={
+        users:undefined
+      }
+    }
     render(){
+      const { users } = this.state; 
       return(
-      <div style={{height:"100%",overflow:"auto"}}>
-        <Header {...this.props} {...this.state}/>
-        <div className="homebody" style={{paddingTop:"0px"}}><Sub {...this.props} {...this.state}/></div>
-      </div>
+        <div style={{height:"100%",overflow:"auto"}}>
+          <Header {...this.props} {...this.state} users={users}/>
+          <div className="homebody" style={{paddingTop:"0px"}}>
+            <Sub {...this.props} {...this.state} users={users}/>
+          </div>
+        </div>
       )
     }
   }

src/mulan/HOC/Index.scss

@@ -32,6 +32,8 @@
 .headDiv{
   width:1200px;
   margin: 0px auto;
+  display: flex;
+  justify-content: space-between;
   .headerNav{
     display: flex;
     height: 100%;
@@ -42,6 +44,11 @@
       font-size: 16px;
     }
   }
+  .headUserInfo{
+    a{
+      color: #fff;
+    }
+  }
 }
 
 .homebody{

src/mulan/HOC/Nav.jsx

@@ -1,15 +1,29 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import logo from '../images/logo.png';
-function Nav(props){
+import LoginModal from '../Components/Login/LoginModal';
+
+function Nav({users}){
+  const [ visible ,setVisible ] =  useState(false);
+
+  
   return(
     <div className="headDiv">
+      <LoginModal visible={visible} />
       <ul className="headerNav">
         <li><img src={logo} alt="" width="110px"/></li>
         <li><Link to={`/`}>首页</Link></li>
         <li><Link to={`/projects`}>开源软件</Link></li>
         <li><Link to={`/license/preface`}>开源许可证</Link></li>
       </ul>
+      <div className="headUserInfo">
+        {
+          users && users.login ?
+          <img src={''} alt="" width="48px" height="48px"/>
+          :
+          <a onClick={()=>setVisible(true)}>登录/注册</a>
+        }
+      </div>
     </div>
   )
 }