scrm.antd/src/pages/ChatLogs/components/ChatRecord.tsx

import { Modal } from 'antd';
import React, { useEffect, useState } from 'react';
import { IChatItem } from '../ChatLogsType';
import { EmojiFormat } from './EmojiFormat';

export const ChatRecord: React.FC<IChatItem> = (props) => {
  const [visible, setVisible] = useState(false);

  function chatRecordContent(data: any, type: string) {
    if (data.type == 'ChatRecordText') {
      const content = JSON.parse(data.content);

      return (
        <div
          style={{
            maxWidth: type == 'ellipsis' ? 400 : 'inherit',
            whiteSpace: type == 'ellipsis' ? 'nowrap' : 'normal',
            minWidth: '0',
            overflow: type == 'ellipsis' ? 'hidden' : '',
            textOverflow: type == 'ellipsis' ? 'ellipsis' : 'inherit',
          }}
        >
          {type == 'ellipsis' ? content.content : <EmojiFormat content={content.content || ''} />}
        </div>
      );
    } else if (data.type == 'ChatRecordImage') {
      return <div>[图片]</div>;
    } else if (data.type == 'ChatRecordFile') {
      return <div>[文件]</div>;
    } else if (data.type == 'ChatRecordVideo') {
      return <div>[视频]</div>;
    } else if (data.type == 'ChatRecordLink') {
      return <div>[链接]</div>;
    } else if (data.type == 'ChatRecordLocation') {
      return <div>[位置]</div>;
    } else if (data.type == 'ChatRecordMixed') {
      return <div>[混合信息]</div>;
    }
    return <div>[未匹配到类型信息]</div>;
  }

  const [record, setRecord] = useState<any>(null);

  useEffect(() => {
    try {
      const msg = JSON.parse(props.chat?.content as string);
      setRecord(msg);
    } catch (e) {
      /* empty */
    }
  }, [props.chat]);

  function content() {
    try {
      const msg = JSON.parse(props.chat?.content as string);
      // console.log(msg);
      return (
        <div
          style={{
            display: 'flex',
            color: '#000',
            flexDirection: 'column',
            minWidth: 260,
            cursor: 'pointer',
          }}
          onClick={() => {
            setVisible(true);
          }}
        >
          <div style={{ wordBreak: 'break-all', fontSize: 16 }}>{msg.title}</div>
          {msg.item[0] ? (
            <div style={{ color: '#999' }}>{chatRecordContent(msg.item[0], 'ellipsis')}</div>
          ) : null}
          {msg.item[1] ? (
            <div style={{ color: '#999' }}>{chatRecordContent(msg.item[1], 'ellipsis')}</div>
          ) : null}
          {msg.item[2] ? (
            <div style={{ color: '#999' }}>{chatRecordContent(msg.item[2], 'ellipsis')}</div>
          ) : null}
          <div style={{ borderTop: '1px solid #ddd', color: '#999', marginTop: 8, paddingTop: 8 }}>
            聊天记录
          </div>
        </div>
      );
    } catch (_e) {
      return (
        <div>
          <div style={{ wordBreak: 'break-all', paddingRight: 8 }}>{props.chat?.content}</div>
        </div>
      );
    }
  }

  return (
    <>
      <Modal
        open={visible}
        footer={false}
        title={record ? record.title : '无标题'}
        onCancel={() => {
          setVisible(false);
        }}
        centered
        destroyOnClose
      >
        <div style={{ maxHeight: '75vh', overflow: 'auto' }}>
          {record ? (
            <div>
              {record.item.map((item: any) => {
                return (
                  <div
                    style={{ padding: '8px 0', borderBottom: '1px solid #eee' }}
                    key={`${item.msgtime}_${item.type}_${item.content}`}
                  >
                    {chatRecordContent(item, 'no_ellipsis')}
                  </div>
                );
              })}
            </div>
          ) : null}
        </div>
      </Modal>
      {content()}
    </>
  );
};