开发: 聊天页面修改

src/pages/ChatLogs/components/ChatRecord.tsx

@@ -1,26 +1,79 @@
-import { FileTextFilled } from '@ant-design/icons';
+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);
+
+    if (data.type == 'ChatRecordText') {
+      const content = JSON.parse(data.content);
+      return <div>{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) {}
+  }, [props.chat]);
+
   function content() {
     try {
       const msg = JSON.parse(props.chat?.content as string);
+      // setRecord(msg);
+      console.log(msg);
       return (
-        <a
-          style={{ display: 'flex', color: '#000' }}
-          download={msg.file_name}
-          href={`/api/${msg.path}`}
+        <div
+          style={{
+            display: 'flex',
+            color: '#000',
+            flexDirection: 'column',
+            minWidth: 260,
+            cursor: 'pointer',
+          }}
+          onClick={() => {
+            setVisible(true);
+          }}
         >
-          <div style={{ wordBreak: 'break-all', paddingRight: 8 }}>{msg.file_name}</div>
-          <FileTextFilled style={{ fontSize: 40, color: '#FA9D3B', flexShrink: 0 }} />
-        </a>
+          <div style={{ wordBreak: 'break-all', fontSize: 16 }}>{msg.title}</div>
+          {msg.item[0] ? (
+            <div style={{ color: '#999' }}>{chatRecordContent(msg.item[0])}</div>
+          ) : null}
+          {msg.item[1] ? (
+            <div style={{ color: '#999' }}>{chatRecordContent(msg.item[1])}</div>
+          ) : null}
+          {msg.item[2] ? (
+            <div style={{ color: '#999' }}>{chatRecordContent(msg.item[2])}</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>
-          <FileTextFilled style={{ fontSize: 40, color: '#FA9D3B', flexShrink: 0 }} />
         </div>
       );
     }
@@ -28,6 +81,32 @@ export const ChatRecord: React.FC<IChatItem> = (props) => {
 
   return (
     <>
+      <Modal
+        open={visible}
+        footer={false}
+        title={record ? record.title : '无标题'}
+        onCancel={() => {
+          setVisible(false);
+        }}
+      >
+        <div>
+          {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}`}
+                  >
+                    {chatRecordContent(item)}
+                  </div>
+                );
+              })}
+            </div>
+          ) : null}
+        </div>
+      </Modal>
       {props.from?.user_id == props.chat?.msg_from ? (
         <div className={styles.chatRight}>
           <div className={styles.chatContentBox}>