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

src/pages/ChatLogs/ChatUtils.tsx

@@ -180,7 +180,7 @@ type IGroupIcon = {
   groupList: any[];
 };
 /**
- * todo 群头像拼接
+ *  群图标拼接
  * @param props
  * @returns
  */
@@ -192,7 +192,6 @@ export const GroupIcon: React.FC<IGroupIcon> = (props) => {
     const { groupList } = props;
     for (let index = 0; index < 9; index++) {
       const element = groupList[index];
-
       if (index < 3) {
         temp[0].push(element);
       } else if (index < 6) {
@@ -201,9 +200,48 @@ export const GroupIcon: React.FC<IGroupIcon> = (props) => {
         temp[2].push(element);
       }
     }
-    console.log(temp);
+    temp.reverse();
+    setList(temp);
   }, [props.groupList]);
 
-  // <div className={styles.avatar}>{item.name ? item.name[0] : '群'}</div>;
-  return <div></div>;
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column' }}>
+      {list.map((item: any[], i: number) => {
+        return (
+          <div key={i} style={{ display: 'flex', justifyContent: 'center' }}>
+            {item.map((el) => {
+              return el ? (
+                <div
+                  key={`${el.avatar}_${el.name}`}
+                  style={{ width: 12, height: 12, borderRadius: 2, overflow: 'hidden' }}
+                >
+                  {el.avatar ? (
+                    <img
+                      style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                      src={el.avatar}
+                    />
+                  ) : (
+                    <div
+                      style={{
+                        background: '#bae0ff',
+                        width: '100%',
+                        height: '100%',
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                      }}
+                    >
+                      <div style={{ transform: 'scale(0.65)', lineHeight: 1 }}>{el.name[0]}</div>
+                    </div>
+                  )}
+                </div>
+              ) : (
+                <></>
+              );
+            })}
+          </div>
+        );
+      })}
+    </div>
+  );
 };