开发: 成员聊天页面

src/pages/ChatLogs/components/ChatRecord.tsx

@@ -1,17 +1,26 @@
 import { Modal } from 'antd';
 import { useEffect, useState } from 'react';
 import { IChatItem } from '../ChatLogsType';
-import styles from './index.module.scss';
 
 export const ChatRecord: React.FC<IChatItem> = (props) => {
   const [visible, setVisible] = useState(false);
 
-  function chatRecordContent(data: any) {
-    // todo console.log(msg);
-
+  function chatRecordContent(data: any, type: string) {
     if (data.type == 'ChatRecordText') {
       const content = JSON.parse(data.content);
-      return <div>{content.content}</div>;
+      return (
+        <div
+          style={{
+            maxWidth: type == 'ellipsis' ? 400 : 'inherit',
+            whiteSpace: type == 'ellipsis' ? 'nowrap' : 'normal',
+            minWidth: '0',
+            overflow: type == 'ellipsis' ? 'hidden' : '',
+            textOverflow: type == 'ellipsis' ? 'ellipsis' : 'inherit',
+          }}
+        >
+          {content.content}
+        </div>
+      );
     } else if (data.type == 'ChatRecordImage') {
       return <div>[图片]</div>;
     } else if (data.type == 'ChatRecordFile') {
@@ -40,8 +49,7 @@ export const ChatRecord: React.FC<IChatItem> = (props) => {
   function content() {
     try {
       const msg = JSON.parse(props.chat?.content as string);
-      // setRecord(msg);
-      console.log(msg);
+      // console.log(msg);
       return (
         <div
           style={{
@@ -57,13 +65,13 @@ export const ChatRecord: React.FC<IChatItem> = (props) => {
         >
           <div style={{ wordBreak: 'break-all', fontSize: 16 }}>{msg.title}</div>
           {msg.item[0] ? (
-            <div style={{ color: '#999' }}>{chatRecordContent(msg.item[0])}</div>
+            <div style={{ color: '#999' }}>{chatRecordContent(msg.item[0], 'ellipsis')}</div>
           ) : null}
           {msg.item[1] ? (
-            <div style={{ color: '#999' }}>{chatRecordContent(msg.item[1])}</div>
+            <div style={{ color: '#999' }}>{chatRecordContent(msg.item[1], 'ellipsis')}</div>
           ) : null}
           {msg.item[2] ? (
-            <div style={{ color: '#999' }}>{chatRecordContent(msg.item[2])}</div>
+            <div style={{ color: '#999' }}>{chatRecordContent(msg.item[2], 'ellipsis')}</div>
           ) : null}
           <div style={{ borderTop: '1px solid #ddd', color: '#999', marginTop: 8, paddingTop: 8 }}>
             聊天记录
@@ -93,13 +101,12 @@ export const ChatRecord: React.FC<IChatItem> = (props) => {
           {record ? (
             <div>
               {record.item.map((item: any) => {
-                console.log(item);
                 return (
                   <div
                     style={{ padding: '8px 0', borderBottom: '1px solid #eee' }}
                     key={`${item.msgtime}_${item.type}_${item.content}`}
                   >
-                    {chatRecordContent(item)}
+                    {chatRecordContent(item, 'no_ellipsis')}
                   </div>
                 );
               })}
@@ -107,25 +114,7 @@ export const ChatRecord: React.FC<IChatItem> = (props) => {
           ) : null}
         </div>
       </Modal>
-      {props.from?.user_id == props.chat?.msg_from ? (
-        <div className={styles.chatRight}>
-          <div className={styles.chatContentBox}>
-            <div className={styles.name}>{props.from?.name}</div>
-            <div className={styles.content}>{content()}</div>
-          </div>
-          <div className={styles.chatAvatar}>{props.from?.name[0]}</div>
-        </div>
-      ) : (
-        <div className={styles.chatLeft}>
-          <div className={styles.chatAvatar}>
-            <img src={props.to?.cust_info.avatar} alt="" />
-          </div>
-          <div className={styles.chatContentBox}>
-            <div className={styles.name}>{props.to?.cust_info.name}</div>
-            <div className={styles.content}>{content()}</div>
-          </div>
-        </div>
-      )}
+      {content()}
     </>
   );
 };