聊天室页面

yum-myy · Mar 27, 2022 · b15cb4e · b15cb4e
1 parent efb13f2
commit b15cb4e
Show file tree

Hide file tree

Showing 27 changed files with 630 additions and 142 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,15 +1,18 @@
+import { useState } from 'react'
 import ChatRoom from './subcomponents/ChatRoom/chatRoom'
 import ListContainer from './subcomponents/ListContainer/listContainer'
 import SideNavBar from './subcomponents/SideNavBar/sideNavBar'
 
-function App() {
+function App(props) {
+  const [curData, setCurData] = useState(null)
+
   return (
     <div className="App">
       <div className="background">
         <div className="container">
           <SideNavBar />
-          <ListContainer />
-          <ChatRoom />
+          <ListContainer setData={ setCurData }/>
+          <ChatRoom curData={ curData }/>
         </div>
       </div>
     </div>

diff --git a/src/mock/data/chatList.js b/src/mock/data/chatList.js
@@ -2,105 +2,105 @@ const Mock = require('mockjs')
 const Random = Mock.Random;
 
 const chatList = [
-    {
-        id:1,
-        type:'group',
-        img:Random.image('200x200','#ffcc33'),
-        title:'小黑的群组',
-        msg:'可爱多:[动画表情]',
-        time:'2/16'
-    },
-    {
-        id:2,
-        type:'group',
-        img:Random.image('200x200','#EFF1F3'),
-        title:'一只菜喵',
-        msg:'',
-        time:'1/15'
-    },
-    {
-        id:3,
-        type:'group',
-        img:Random.image('200x200','#F7DE1F'),
-        title:'孤独的狼',
-        msg:'',
-        time:'1/14'
-    },
-    {
-        id:4,
-        type:'group',
-        img:Random.image('200x200','#D09000'),
-        title:'桃子的聊天室',
-        msg:'',
-        time:'1/14'
-    },
-    {
-        id:5,
-        type:'group',
-        img:Random.image('200x200','#ffcc33'),
-        title:'小黑的群组',
-        msg:'可爱多:[动画表情]',
-        time:'2/16'
-    },
-    {
-        id:6,
-        type:'group',
-        img:Random.image('200x200','#EFF1F3'),
-        title:'一只菜喵',
-        msg:'',
-        time:'1/15'
-    },
-    {
-        id:7,
-        type:'group',
-        img:Random.image('200x200','#F7DE1F'),
-        title:'孤独的狼',
-        msg:'',
-        time:'1/14'
-    },
-    {
-        id:8,
-        type:'group',
-        img:Random.image('200x200','#D09000'),
-        title:'桃子的聊天室',
-        msg:'',
-        time:'1/14'
-    },
-    {
-        id:9,
-        type:'group',
-        img:Random.image('200x200','#ffcc33'),
-        title:'小黑的群组',
-        msg:'可爱多:[动画表情]',
-        time:'2/16'
-    },
-    {
-        id:10,
-        type:'group',
-        img:Random.image('200x200','#EFF1F3'),
-        title:'一只菜喵',
-        msg:'',
-        time:'1/15'
-    },
-    {
-        id:11,
-        type:'group',
-        img:Random.image('200x200','#F7DE1F'),
-        title:'孤独的狼',
-        msg:'',
-        time:'1/14'
-    },
-    {
-        id:12,
-        type:'group',
-        img:Random.image('200x200','#D09000'),
-        title:'桃子的聊天室',
-        msg:'',
-        time:'1/14'
-    }
+  {
+    id:1,
+    type:'group',
+    img:Random.image('200x200','#ffcc33'),
+    title:'小黑的群组',
+    msg:'可爱多:[动画表情]',
+    time:'2/16'
+  },
+  {
+    id:2,
+    type:'friend',
+    img:Random.image('200x200','#EFF1F3'),
+    title:'一只菜喵',
+    msg:'你好啊 记得添加文本超出展示省略号的效果哦',
+    time:'1/15'
+  },
+  {
+    id:3,
+    type:'friend',
+    img:Random.image('200x200','#F7DE1F'),
+    title:'孤独的狼',
+    msg:'',
+    time:'1/14'
+  },
+  {
+    id:4,
+    type:'group',
+    img:Random.image('200x200','#D09000'),
+    title:'桃子的聊天室',
+    msg:'',
+    time:'1/14'
+  },
+  {
+    id:5,
+    type:'group',
+    img:Random.image('200x200','#ffcc33'),
+    title:'小黑的群组',
+    msg:'可爱多:[动画表情]',
+    time:'2/16'
+  },
+  {
+    id:6,
+    type:'friend',
+    img:Random.image('200x200','#EFF1F3'),
+    title:'一只菜喵',
+    msg:'',
+    time:'1/15'
+  },
+  {
+    id:7,
+    type:'friend',
+    img:Random.image('200x200','#F7DE1F'),
+    title:'孤独的狼',
+    msg:'',
+    time:'1/14'
+  },
+  {
+    id:8,
+    type:'group',
+    img:Random.image('200x200','#D09000'),
+    title:'桃子的聊天室',
+    msg:'',
+    time:'1/14'
+  },
+  {
+    id:9,
+    type:'group',
+    img:Random.image('200x200','#ffcc33'),
+    title:'小黑的群组',
+    msg:'可爱多:[动画表情]',
+    time:'2/16'
+  },
+  {
+    id:10,
+    type:'friend',
+    img:Random.image('200x200','#EFF1F3'),
+    title:'一只菜喵',
+    msg:'',
+    time:'1/15'
+  },
+  {
+    id:11,
+    type:'friend',
+    img:Random.image('200x200','#F7DE1F'),
+    title:'孤独的狼',
+    msg:'',
+    time:'1/14'
+  },
+  {
+    id:12,
+    type:'group',
+    img:Random.image('200x200','#D09000'),
+    title:'桃子的聊天室',
+    msg:'',
+    time:'1/14'
+  }
 ]
 
 
 module.exports = {
-    chatList
+  chatList
 }
diff --git a/src/mock/data/messages.js b/src/mock/data/messages.js
@@ -0,0 +1,100 @@
+const Mock = require('mockjs')
+const Random = Mock.Random;
+
+const messages = [
+  {
+    id:1,
+    type:'other',
+    avatar:Random.image('200x200','#ffcc33'),
+    nickname:'喵喵',
+    msg:'你好呀',
+    msgType:'msg',
+    time:'1/12'
+  },
+  {
+    id:2,
+    type:'other',
+    avatar:Random.image('200x200','#ffcc33'),
+    nickname:'喵喵呜',
+    msg:'你好啊 记得添加文本超出展示省略号的效果哦',
+    msgType:'msg',
+    time:'1/12'
+  },
+  {
+    id:3,
+    type:'other',
+    avatar:Random.image('200x200','#EFF1F3'),
+    nickname:'一只菜喵',
+    msg:'你好啊 记得根据页面的resize调整聊天室滚动条高度以及列表高度哦',
+    msgType:'msg',
+    time:'1/13'
+  },
+  {
+    id:4,
+    type:'other',
+    avatar:Random.image('200x200','#F7DE1F'),
+    nickname:'孤独的狼',
+    msg:Random.image('200x200','#EFF1F3'),
+    msgType:'pic',
+    time:'1/14'
+  },
+  {
+    id:5,
+    type:'other',
+    avatar:Random.image('200x200','#EFF1F3'),
+    nickname:'一只菜喵',
+    msg:'记得限制消息框宽度',
+    msgType:'msg',
+    time:'1/14'
+  },
+  {
+    id:6,
+    type:'self',
+    avatar:Random.image('200x200','#F7DE1F'),
+    nickname:'小黑',
+    msg:'@一只菜喵 好的哦',
+    msgType:'msg',
+    time:'1/14'
+  },
+  {
+    id:7,
+    type:'other',
+    avatar:Random.image('200x200','#F7DE1F'),
+    nickname:'孤独的狼',
+    msg:'嗷呜~~~',
+    msgType:'msg',
+    time:'1/14'
+  },
+  {
+    id:8,
+    type:'other',
+    avatar:Random.image('200x200','#D09000'),
+    nickname:'桃子',
+    msg:'hello',
+    msgType:'msg',
+    time:'1/14'
+  },
+  {
+    id:9,
+    type:'self',
+    avatar:Random.image('200x200','#F7DE1F'),
+    nickname:'小黑',
+    msg:Random.image('200x200','#EFF1F3'),
+    msgType:'pic',
+    time:'1/14'
+  },
+  {
+    id:10,
+    type:'self',
+    avatar:Random.image('200x200','#F7DE1F'),
+    nickname:'小黑',
+    msg:'记得添加聊天室页面关闭功能',
+    msgType:'msg',
+    time:'1/14'
+  }
+]
+
+
+module.exports = {
+  messages
+}
diff --git a/src/mock/router.js b/src/mock/router.js
@@ -2,6 +2,7 @@ const express = require('express')
 const router = express.Router()
 
 let chatData = require('./data/chatList')
+let messageList = require('./data/messages')
 
 router.get('/api/chatList',(req,res) => {
     // console.log(JSON.stringify(chatData.chatList))
@@ -12,4 +13,9 @@ router.get('/api/chatList',(req,res) => {
 //     res.send(JSON.stringify(chatData.chatList));
 // })
 
+router.get('/api/messages',(req,res) => {
+    res.send(JSON.stringify(messageList.messages));
+})
+
+
 module.exports = router;
diff --git a/src/static/css/public.css b/src/static/css/public.css
@@ -15,6 +15,7 @@
     width: 70%;
     height: 90%;
     min-width: 800px;
+    min-height: 400px;
     background-color: #2B9E93;
     border-radius: 20px;
     overflow: hidden;

diff --git a/src/static/iconfont/iconfont.css b/src/static/iconfont/iconfont.css
@@ -1,18 +1,22 @@
 @font-face {
   font-family: "iconfont"; /* Project id 3185054 */
-  src: url('iconfont.woff2?t=1645086723337') format('woff2'),
-       url('iconfont.woff?t=1645086723337') format('woff'),
-       url('iconfont.ttf?t=1645086723337') format('truetype');
+  src: url('iconfont.woff2?t=1648351068452') format('woff2'),
+       url('iconfont.woff?t=1648351068452') format('woff'),
+       url('iconfont.ttf?t=1648351068452') format('truetype');
 }
 
 .iconfont {
   font-family: "iconfont" !important;
-  font-size: 16px;
+  /* font-size: 16px; */
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-fasong:before {
+  content: "\e604";
+}
+
 .icon-guanbi-copy:before {
   content: "\e7cf";
 }

diff --git a/src/static/iconfont/iconfont.js b/src/static/iconfont/iconfont.js
diff --git a/src/static/iconfont/iconfont.json b/src/static/iconfont/iconfont.json
@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "1418205",
+      "name": "发送",
+      "font_class": "fasong",
+      "unicode": "e604",
+      "unicode_decimal": 58884
+    },
     {
       "icon_id": "5370283",
       "name": "添加",

diff --git a/src/static/iconfont/iconfont.ttf b/src/static/iconfont/iconfont.ttf
diff --git a/src/static/iconfont/iconfont.woff b/src/static/iconfont/iconfont.woff
diff --git a/src/static/iconfont/iconfont.woff2 b/src/static/iconfont/iconfont.woff2