From ccb1dd82167cd2362d07c9e515982341b23c41c7 Mon Sep 17 00:00:00 2001
From: caishi <1149225589@qq.com>
Date: Mon, 12 Apr 2021 15:23:23 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95=E6=B3=A8=E5=86=8C=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E4=BB=A5=E5=8F=8A=E5=BC=B9=E6=A1=86=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E7=AD=89=EF=BC=88=E6=9C=AA=E8=BF=9B=E8=A1=8C=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E7=BB=91=E5=AE=9A=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/mulan/Components/Login/Index.scss     | 30 ++++++++++++++
 src/mulan/Components/Login/Login.jsx      | 50 +++++++++++++++++++++++
 src/mulan/Components/Login/LoginModal.jsx | 34 +++++++++++++++
 src/mulan/Components/Login/Register.jsx   | 43 +++++++++++++++++++
 src/mulan/HOC/Header.jsx                  |  4 +-
 src/mulan/HOC/HomeHeader.jsx              |  5 +--
 src/mulan/HOC/HomeHoc.jsx                 | 19 ++++++---
 src/mulan/HOC/Index.scss                  |  7 ++++
 src/mulan/HOC/Nav.jsx                     | 18 +++++++-
 9 files changed, 198 insertions(+), 12 deletions(-)
 create mode 100644 src/mulan/Components/Login/Index.scss
 create mode 100644 src/mulan/Components/Login/Login.jsx
 create mode 100644 src/mulan/Components/Login/LoginModal.jsx
 create mode 100644 src/mulan/Components/Login/Register.jsx

diff --git a/src/mulan/Components/Login/Index.scss b/src/mulan/Components/Login/Index.scss
new file mode 100644
index 00000000..2995c97e
--- /dev/null
+++ b/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;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/mulan/Components/Login/Login.jsx b/src/mulan/Components/Login/Login.jsx
new file mode 100644
index 00000000..debbbd0c
--- /dev/null
+++ b/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));
\ No newline at end of file
diff --git a/src/mulan/Components/Login/LoginModal.jsx b/src/mulan/Components/Login/LoginModal.jsx
new file mode 100644
index 00000000..7adf2f87
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/mulan/Components/Login/Register.jsx b/src/mulan/Components/Login/Register.jsx
new file mode 100644
index 00000000..6762d961
--- /dev/null
+++ b/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));
\ No newline at end of file
diff --git a/src/mulan/HOC/Header.jsx b/src/mulan/HOC/Header.jsx
index d75a7b50..f7430259 100644
--- a/src/mulan/HOC/Header.jsx
+++ b/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>
   )
 }
diff --git a/src/mulan/HOC/HomeHeader.jsx b/src/mulan/HOC/HomeHeader.jsx
index 140c167c..39fa2a0d 100644
--- a/src/mulan/HOC/HomeHeader.jsx
+++ b/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>
   )
 }
diff --git a/src/mulan/HOC/HomeHoc.jsx b/src/mulan/HOC/HomeHoc.jsx
index 8160039b..d2aa14f9 100644
--- a/src/mulan/HOC/HomeHoc.jsx
+++ b/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>
       )
     }
   }
diff --git a/src/mulan/HOC/Index.scss b/src/mulan/HOC/Index.scss
index 27ad3572..c944b2b4 100644
--- a/src/mulan/HOC/Index.scss
+++ b/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{
diff --git a/src/mulan/HOC/Nav.jsx b/src/mulan/HOC/Nav.jsx
index 5d1b5688..ab6d69a1 100644
--- a/src/mulan/HOC/Nav.jsx
+++ b/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>
   )
 }