新增页面

package.json

@@ -35,5 +35,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "mini-css-extract-plugin": "2.4.5"
   }
 }

src/App.js

@@ -1,20 +1,57 @@
 import { useState } from 'react'
+import LoginAndRegister from './components/LoginAndRegister/loginAndRegister'
 import ChatRoom from './subcomponents/ChatRoom/chatRoom'
 import ListContainer from './subcomponents/ListContainer/listContainer'
 import SideNavBar from './subcomponents/SideNavBar/sideNavBar'
+import UserInfo from './components/UserInfo/userInfo'
+import Settings from './components/Settings/settings'
+import CreateNewGroup from './components/CreateNewGroup/createNewGroup'
 
 function App(props) {
   const [curData, setCurData] = useState(null)
+  const [loginStatus, setLoginStatus] = useState(1)
+  const [showType, setShowType] = useState(0)
+  const [isRoomShow, setIsRoomShow] = useState(0)
 
+  const [isUserInfoShow, setIsUserInfoShow] = useState(0)
+  const [isSettingShow, setIsSettingShow] = useState(0)
+  const [isCreateNewShow, setIsCreateNewShow ] = useState(0)
+
+  // 此处请求用户信息传下去
+
   return (
     <div className="App">
-      <div className="background">
-        <div className="container">
-          <SideNavBar />
-          <ListContainer setData={ setCurData }/>
-          <ChatRoom curData={ curData }/>
+      {
+        loginStatus===1 ? 
+        <div className="background">
+          <div className="container">
+            <SideNavBar 
+              handleLoginStatus={ () => setLoginStatus(0) }
+              changeShowType={ (type) => setShowType(type) }
+              setRoomShow={ (code) => setIsRoomShow(code) }
+              handleUserInfoShow={ () => setIsUserInfoShow(1) }
+              handleSettingShow={ () => setIsSettingShow(1) }/>
+            <ListContainer 
+              setData={ setCurData }
+              showType={ showType }
+              setRoomShow={ (code) => setIsRoomShow(code) }
+              handleCreateNewShow={ () => setIsCreateNewShow(1)}/>
+            <ChatRoom 
+              curData={ curData }
+              isRoomShow={ isRoomShow }/>
+          </div> 
         </div>
-      </div>
+        : <LoginAndRegister handleLoginStatus={ () => setLoginStatus(1) } />
+      }
+      {
+      isUserInfoShow===1 ? <UserInfo handleUserInfoShow={ () => setIsUserInfoShow(0) }/> : null
+      }
+      {
+        isSettingShow===1 ? <Settings handleSettingShow={ () => setIsSettingShow(0) }/> : null
+      }
+      {
+        isCreateNewShow===1 ? <CreateNewGroup handleCreateNewShow={ () => setIsCreateNewShow(0)}/> : null
+      }
     </div>
   );
 }

src/components/AddFriends/addFriends.jsx

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react'
+import './addFriends.css'
+
+function AddFriends(props){
+  const [data,setData] = useState(null)
+
+  useEffect(() =>{
+
+  })
+  return(
+    <div className="add-friends">
+      {
+        +data === 0 ? 
+        <>
+          <div className="info-top">
+            <i className="iconfont"></i>
+            <img src={} alt="" />
+            <p className="stranger-name">{}</p>
+          </div>
+          <div className="info-bottom">
+            <button>加为好友</button>
+          </div>
+        </>
+        : 'addFriends'
+      }
+    </div>
+  )
+}
+
+export default AddFriends

src/components/CreateNewGroup/createNewGroup.css

@@ -0,0 +1,68 @@
+.create-new-group{
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100vh;
+  position: absolute;
+  top:0;
+  background-color: rgba(55, 55, 55, 0.6);
+}
+
+.create-new-group .create-new-container{
+  background-color: white;
+  width: 500px;
+  height: 208px;
+  border-radius: 6px;
+  box-sizing: border-box;
+}
+
+.create-new-group .create-new-container .create-new-title{
+  display: flex;
+  height: 48px;
+  padding: 0 14px 0 16px;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid rgb(233, 233, 233);
+  font-size: 16px;
+}
+
+.create-new-group .create-new-container .create-new-info{
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.create-new-group .create-new-container .create-new-info input{
+  width: 100%;
+  height: 40px;
+  border-radius: 6px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  padding: 0 34px 0 8px;
+  margin: 10px 0;
+  font-size: 14px;
+  color: #333;
+  box-sizing: border-box;
+  outline: none;
+}
+
+.create-new-group .create-new-container .create-new-info input:focus{
+  border-color: #2AADA5;
+}
+
+.create-new-group .create-new-container .create-new-info button{
+  align-self: flex-end;
+  width: 66px;
+  height: 36px;
+  border-radius: 6px;
+  background-color: #2AADA5;
+  color: white;
+  align-self: flex-end;
+  font-size: 14px;
+  border: none;
+}
+
+.create-new-group .create-new-container .create-new-info button:hover{
+  background-color: #059F95;
+}

src/components/CreateNewGroup/createNewGroup.jsx

@@ -0,0 +1,29 @@
+import { useState } from 'react';
+import './createNewGroup.css'
+
+function CreateNewGroup(props){
+  const { handleCreateNewShow } = props;
+
+  const [groupName, setGroupName] = useState('')
+
+  return(
+    <div className="create-new-group">
+      <div className="create-new-container">
+        <div className="create-new-title">
+          <p>创建群组</p>
+          <i className="iconfont icon-guanbi2" onClick={ handleCreateNewShow }></i>
+        </div>
+        <div className="create-new-info">
+          <p>请输入群组名</p>
+          <input 
+            type="text" 
+            value={ groupName } 
+            onChange={ (e) => setGroupName(e.target.value) }/>
+          <button>创建</button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default CreateNewGroup

src/components/LoginAndRegister/loginAndRegister.css

@@ -0,0 +1,82 @@
+.login-and-register{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #069F94;
+  width: 100%;
+  min-width: 500px;
+  height: 100vh;
+}
+
+.login-and-register .main-container{
+  width: 450px;
+  height: 341px;
+  padding: 20px;
+  box-sizing: border-box;
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: rgb(14 30 37 / 12%) 0px 2px 4px 0px, rgb(14 30 37 / 32%) 0px 2px 16px 0px;
+}
+
+.login-and-register .main-container .tab{
+  display: flex;
+  justify-content: center;
+  border-bottom: 1px solid #EAECED;
+}
+
+.login-and-register .main-container .tab p{
+  width: 72px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  box-sizing: border-box;
+  font-size: 16px;
+}
+
+.login-and-register .main-container .tab p:hover{
+  color: #108EE9;
+}
+
+.login-and-register .main-container .tab p:first-child{
+  margin-right: 20px;
+}
+
+.login{
+  padding: 0 26px;
+}
+
+.login p{
+  line-height: 27px;
+  margin-top: 20px;
+  font-size: 14px;
+  color: #666;
+}
+
+.login input{
+  line-height: 40px;
+  width: 100%;
+  height:40px;
+  border-radius: 6px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  padding: 0 34px 0 8px;
+  font-size: 14px;
+  color: #333;
+  box-sizing: border-box;
+  outline: none;
+}
+
+.login input:focus{
+  border-color: #069F94;
+}
+
+.login .lg-rg-btn{
+  width: 100%;
+  background-color: #059F95;
+  color: #FFFFFF;
+  font-size: 14px;
+  height: 40px;
+  border: none;
+  margin-top: 30px;
+  transition: background-color 0.2s;
+  border-radius: 6px;
+}