MelonBlog

作品集

参考微信来写一个IM页面

因为项目需要IM客服功能，所以模仿微信的界面，绘制了一个IM页面，项目是基于ts+react。

页面如图：

image

下面是对接完成功能后的截图：

image

我自己感觉还可以，所以想分享出来，当然功能上需要自己去写，这里只是一个纯静态页，功能部分因为和项目业务耦合很紧密，所以不公开。

后面我会用这个页面写一个包含收发消息和群聊的小项目发布出来。

代码

index.tsx

import { Button, Input } from 'antd';
import React from 'react';
import styles from './im.css';
import IconFont from '@/components/IconFont';
const IM: React.FC = () => {
  return (
    <div className={styles.container}>
      <div className={styles.chat_container}>
        <div className={styles.room_list}>
          <div className={styles.room_list_title}>
            <Input.Search placeholder="搜索" />
          </div>
          <div className={styles.room}>
            <img src="https://t14.baidu.com/it/u=3843289189,1985343162&fm=82&w=255&h=255&img.JPEG" />
            <div className={styles.room_info}>
              <div className={styles.room_info_name}>用户1</div>
              <div className={styles.room_info_last_msg}>最后一条消息</div>
            </div>
          </div>
          <div className={styles.room}>
            <img src="https://t14.baidu.com/it/u=3843289189,1985343162&fm=82&w=255&h=255&img.JPEG" />
            <div className={styles.room_info}>
              <div className={styles.room_info_name}>用户2</div>
              <div className={styles.room_info_last_msg}>最后一条消息</div>
            </div>
          </div>
          <div className={styles.room}>
            <img src="https://t14.baidu.com/it/u=3843289189,1985343162&fm=82&w=255&h=255&img.JPEG" />
            <div className={styles.room_info}>
              <div className={styles.room_info_name}>用户3</div>
              <div className={styles.room_info_last_msg}>最后一条消息</div>
            </div>
          </div>
        </div>
        <div className={styles.chat_content_container}>
          <div className={styles.chat_content_title}>用户1</div>
          <div className={styles.chat_content}>
            <div className={styles.bubble_left}>
              <img src="https://t14.baidu.com/it/u=3843289189,1985343162&fm=82&w=255&h=255&img.JPEG" />
              <div className={styles.bubble_content}>
                <div className={styles.bubble_text}>你好</div>
              </div>
            </div>
            <div className={styles.bubble_right}>
              <img src="https://t14.baidu.com/it/u=3843289189,1985343162&fm=82&w=255&h=255&img.JPEG" />
              <div className={styles.bubble_content}>
                <div className={styles.bubble_text}>请问有什么能够帮到您?</div>
              </div>
            </div>
            <div className={styles.bubble_left}>
              <img src="https://t14.baidu.com/it/u=3843289189,1985343162&fm=82&w=255&h=255&img.JPEG" />
              <div className={styles.bubble_content}>
                <div className={styles.bubble_text}>来一则新闻</div>
              </div>
            </div>
            <div className={styles.bubble_right}>
              <img src="https://t14.baidu.com/it/u=3843289189,1985343162&fm=82&w=255&h=255&img.JPEG" />
              <div className={styles.bubble_content}>
                <div className={styles.bubble_text}>
                  近日，有消息称，湖人队在赢得总冠军后，将向每位球员发放一笔奖金，金额高达23.1万美元。这笔奖金的发放引起了球迷们的热议，有人认为这是对球员们辛苦付出的回报，也有人认为这笔奖金的金额并不足以满足球员们的期望。
                  湖人队在本赛季中赢得了总冠军，这是球队历史上第17次夺得总冠军，也是詹姆斯职业生涯中第四次获得总冠军。在这次夺冠之后，湖人队向每位参与比赛的球员发放了一笔奖金。据报道，这笔奖金的金额为23.1万美元，每位球员都会收到这笔钱。
                </div>
              </div>
            </div>
          </div>
          <div className={styles.chat_input}>
            <input></input>
            <Button shape={"circle"} icon={<IconFont type={"icon-send"}/>} />
          </div>
        </div>
      </div>
    </div>
  );
};
export default IM;

im.css

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}
.chat_container {
  display: flex;
  background-color: #ffffff;
  width: 80%;
  max-height: 600px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}
.room_list {
  width: 280px;
  height: 600px;
  display: flex;
  flex-direction: column;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-right: 1px solid #f1f1f1;
}
.room_list_title {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-left-radius: 10px;
  padding: 0 10px;
  background-color: #f1f1f1;
}
.room {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 0 10px;
}
.room img {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background-color: #c5c5c5;
  margin-right: 10px;
}
.room .room_info_name {
  margin-bottom: 4px;
}
.room .room_info_last_msg {
  color: #b6b5b5;
  font-size: 12px;
}
.room:hover {
  background-color: rgba(224, 224, 224, 0.4);
	cursor: pointer;
}
.chat_content_container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.chat_content_title {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  background-color: #f1f1f1;
  border-top-right-radius: 10px;
}
.chat_content {
  flex: 1;
  width: 100%;
  max-height: 100%;
  padding: 0 20px;
  overflow-y: scroll;
}
.chat_content .bubble_left {
  display: flex;
  justify-content: flex-start;
  align-items: start;
  margin: 10px 0;
}
.chat_content .bubble_right {
  display: flex;
  justify-content: flex-start;
  flex-direction: row-reverse;
  align-items: start;
  margin: 10px 0;
}
.chat_content .bubble_left .bubble_content {
  background-color: #f1f1f1;
  padding: 10px 20px;
  border-radius: 10px;
}
.chat_content .bubble_right .bubble_content {
  background-color: #86ed56;
  padding: 10px 20px;
  border-radius: 10px;
}
.bubble_content {
  display: flex;
  flex-wrap: wrap;
  max-width: 35%;
}
.chat_content img {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background-color: #c5c5c5;
  margin: 0 10px;
}
.chat_input {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: start;
  align-items: center;
  background-color: white;
  padding: 0 40px;
  border-bottom-right-radius: 10px;
  border-top: 1px solid #ebebeb;
}
.chat_input input {
  height: 40px;
  border-radius: 10px;
  border: 1px solid #f4f4f4;
  padding: 0 10px;
  background-color: #f4f4f4;
  margin-right: 20px;
  flex: 1;
}
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: white;
}
::-webkit-scrollbar-thumb {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb:hover {
  background: #dddddd;
}

友情链接

AI财报字节工坊Ant Designtailwindcss
Copyright © 2023 www.tiangua.info 鄂ICP备2022015834号