开发: 添加表情匹配, 添加客群中心页面,修复弹框关闭

src/pages/ChatLogs/components/ChatRecord.tsx

@@ -1,6 +1,7 @@
 import { Modal } from 'antd';
 import { useEffect, useState } from 'react';
 import { IChatItem } from '../ChatLogsType';
+import { EmojiFormat } from './EmojiFormat';
 
 export const ChatRecord: React.FC<IChatItem> = (props) => {
   const [visible, setVisible] = useState(false);
@@ -8,6 +9,7 @@ export const ChatRecord: React.FC<IChatItem> = (props) => {
   function chatRecordContent(data: any, type: string) {
     if (data.type == 'ChatRecordText') {
       const content = JSON.parse(data.content);
+
       return (
         <div
           style={{
@@ -18,7 +20,7 @@ export const ChatRecord: React.FC<IChatItem> = (props) => {
             textOverflow: type == 'ellipsis' ? 'ellipsis' : 'inherit',
           }}
         >
-          {content.content}
+          {type == 'ellipsis' ? content.content : <EmojiFormat content={content.content || ''} />}
         </div>
       );
     } else if (data.type == 'ChatRecordImage') {
@@ -97,6 +99,7 @@ export const ChatRecord: React.FC<IChatItem> = (props) => {
           setVisible(false);
         }}
         centered
+        destroyOnClose
       >
         <div style={{ maxHeight: '75vh', overflow: 'auto' }}>
           {record ? (

src/pages/ChatLogs/components/ChatText.tsx

@@ -1,5 +1,6 @@
 import { IChatItem } from '../ChatLogsType';
+import { EmojiFormat } from './EmojiFormat';
 
 export const ChatText: React.FC<IChatItem> = (props) => {
-  return <>{props.chat?.content}</>;
+  return <EmojiFormat content={props.chat?.content || ''} />;
 };

src/pages/ChatLogs/components/EmojiFormat.tsx

@@ -0,0 +1,32 @@
+import { emoji } from '@/services/config';
+import React from 'react';
+
+type IProps = {
+  content: string;
+};
+export const EmojiFormat: React.FC<IProps> = (props) => {
+  const format = () => {
+    let txt = props.content;
+    emoji.forEach((item) => {
+      const reg = new RegExp(`\\[${item}\\]`, 'g');
+      txt = txt.replace(
+        reg,
+        `<img style="width: 24px;height:24px" src="/api/assets/wechat/emoji/${item}.png" alt="" />`,
+      );
+    });
+    return txt;
+  };
+
+  return (
+    <>
+      {typeof props.content === 'string' ? (
+        <span
+          style={{ display: 'inline-flex', flexWrap: 'wrap' }}
+          dangerouslySetInnerHTML={{ __html: format() }}
+        ></span>
+      ) : (
+        props.content
+      )}
+    </>
+  );
+};