refactor(ChatWindow): 使用Antd Divider替换自定义时间分隔线样式
移除MessageRecord.module.scss中自定义的时间分隔线样式,改为使用Antd的Divider组件
This commit is contained in:
@@ -33,25 +33,6 @@
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
margin: 8px 0;
|
margin: 8px 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 1px;
|
|
||||||
background: #e8e8e8;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: attr(data-time);
|
|
||||||
background: #f5f5f5;
|
|
||||||
padding: 0 12px;
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 消息项
|
// 消息项
|
||||||
@@ -235,4 +216,4 @@
|
|||||||
max-width: 150px;
|
max-width: 150px;
|
||||||
max-height: 150px;
|
max-height: 150px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import React, { useEffect, useRef } from "react";
|
import React, { useEffect, useRef } from "react";
|
||||||
import { Avatar } from "antd";
|
import { Avatar, Divider } from "antd";
|
||||||
import { UserOutlined } from "@ant-design/icons";
|
import { UserOutlined } from "@ant-design/icons";
|
||||||
import { ChatRecord, ContractData, weChatGroup } from "@/pages/pc/ckbox/data";
|
import { ChatRecord, ContractData, weChatGroup } from "@/pages/pc/ckbox/data";
|
||||||
import { formatWechatTime } from "@/utils/common";
|
import { formatWechatTime } from "@/utils/common";
|
||||||
@@ -194,7 +194,9 @@ const MessageRecord: React.FC<MessageRecordProps> = ({ contract }) => {
|
|||||||
<div className={styles.messagesContainer}>
|
<div className={styles.messagesContainer}>
|
||||||
{groupMessagesByTime(currentMessages).map((group, groupIndex) => (
|
{groupMessagesByTime(currentMessages).map((group, groupIndex) => (
|
||||||
<React.Fragment key={`group-${groupIndex}`}>
|
<React.Fragment key={`group-${groupIndex}`}>
|
||||||
<div className={styles.messageTime}>{group.time}</div>
|
<Divider>
|
||||||
|
<div className={styles.messageTime}>{group.time}</div>
|
||||||
|
</Divider>
|
||||||
{group.messages.map(renderMessage)}
|
{group.messages.map(renderMessage)}
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
))}
|
))}
|
||||||
|
|||||||
Reference in New Issue
Block a user