开发: 群图标拼接, 聊天记录样式修复

src/pages/ChatLogs/index.tsx

@@ -1,7 +1,7 @@
 import { post } from '@/services/ajax';
 import { DownOutlined, UpOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
-import { Drawer, Form, Input, Tabs } from 'antd';
+import { Drawer, Input, Tabs } from 'antd';
 import Spin from 'antd/lib/spin';
 import { stringify } from 'qs';
 import React, { useEffect, useRef, useState } from 'react';
@@ -90,6 +90,8 @@ const ChatLogs: React.FC = () => {
   const [chatLogLoading, setChatLogLoading] = useState(false);
   const [staffSearchWord, setStaffSearchWord] = useState('');
 
+  const avatarObjRef = useRef<any>({});
+
   function show() {
     setFlolowBoxShow(false);
   }
@@ -175,6 +177,7 @@ const ChatLogs: React.FC = () => {
           // page(1);
           // }
         }
+        avatarObjRef.current = res.avatar || {};
       }
     });
   };
@@ -418,6 +421,7 @@ const ChatLogs: React.FC = () => {
       return (
         <Spin spinning={loadingGroup}>
           <GroupListWidget
+            groupAvatar={avatarObjRef.current}
             groupList={groupList}
             searchWord={searchWord['2']}
             onClick={(item: IGroup) => {
@@ -480,7 +484,7 @@ const ChatLogs: React.FC = () => {
       <div className={styles.box}>
         <div className={styles.personnelBox}>
           <div className={`${styles.flolowsBox} ${followBoxShow ? styles.show : ''}`}>
-            <Form
+            <div
               onClick={(e) => {
                 e.stopPropagation();
               }}
@@ -495,7 +499,7 @@ const ChatLogs: React.FC = () => {
                 }}
                 allowClear
               />
-            </Form>
+            </div>
             {staffsList.map((item) => {
               if (!item.name.includes(staffSearchWord)) return null;
               return (
@@ -581,20 +585,17 @@ const ChatLogs: React.FC = () => {
               </>
             ) : null}
           </div>
-          <Form autoComplete="off">
-            <Input
-              placeholder="搜索"
-              style={{ margin: '0 12px', width: 'calc(100% - 24px)' }}
-              autoComplete="off"
-              defaultValue={searchWord[tabKey]}
-              key={tabKey}
-              onChange={(e) => {
-                searchWord[tabKey] = e.target.value.trim();
-                setSearchWord({ ...searchWord });
-              }}
-              allowClear
-            />
-          </Form>
+          <Input
+            placeholder="搜索"
+            style={{ margin: '0 12px', width: 'calc(100% - 24px)' }}
+            defaultValue={searchWord[tabKey]}
+            key={tabKey}
+            onChange={(e) => {
+              searchWord[tabKey] = e.target.value.trim();
+              setSearchWord({ ...searchWord });
+            }}
+            allowClear
+          />
           <Tabs
             items={tabs}
             size="small"
@@ -645,7 +646,7 @@ const ChatLogs: React.FC = () => {
                 )
               }
               open={open}
-              width={600}
+              width={800}
               onClose={() => setOpen(false)}
               footer={false}
               destroyOnClose