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

2023-04-24 10:54:22 +08:00
parent 42418046e8
commit 570b28d81b
12 changed files with 107 additions and 45 deletions
--- a/public/avatar.svg
+++ b/public/avatar.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1681890424579" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3288" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M531.46112 777.46176c0-72.93952 32.38912-138.27072 83.52256-182.53824a691.72736 691.72736 0 0 0-103.1936-7.68c-236.14976 0-427.5968 116.58752-427.5968 260.39296 0 143.8208 191.44704 119.51616 427.5968 119.51616 39.23456 0 77.18912 0.6656 113.28512 1.1264-56.9344-44.17024-93.61408-113.18784-93.61408-190.81728zM511.78496 50.29376c-142.94016 0-258.81088 115.8656-258.81088 258.79552 0 142.9504 115.87072 258.82112 258.81088 258.82112 142.94528 0 258.80576-115.87072 258.80576-258.82112 0-142.92992-115.86048-258.79552-258.80576-258.79552z m0 419.66592C462.336 469.95968 421.02272 450.56 410.5216 389.12h54.94272c8.53504 10.24 25.96864 28.87168 46.32064 28.87168 20.35712 0 37.8112-18.63168 46.33088-28.87168h54.94784c-10.50112 61.44-51.83488 80.83968-101.27872 80.83968z" fill="#1890ff" p-id="3289"></path><path d="M776.09472 582.66112c-106.83392 0-193.4336 86.59968-193.4336 193.4336s86.59968 193.4336 193.4336 193.4336 193.4336-86.59968 193.4336-193.4336-86.59968-193.4336-193.4336-193.4336zM875.52 849.92h-199.68v-46.08h199.68v46.08z m0-102.4h-199.68v-46.08h199.68v46.08z" fill="#1890ff" p-id="3290"></path></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M531.46112 777.46176c0-72.93952 32.38912-138.27072 83.52256-182.53824a691.72736 691.72736 0 0 0-103.1936-7.68c-236.14976 0-427.5968 116.58752-427.5968 260.39296 0 143.8208 191.44704 119.51616 427.5968 119.51616 39.23456 0 77.18912 0.6656 113.28512 1.1264-56.9344-44.17024-93.61408-113.18784-93.61408-190.81728zM511.78496 50.29376c-142.94016 0-258.81088 115.8656-258.81088 258.79552 0 142.9504 115.87072 258.82112 258.81088 258.82112 142.94528 0 258.80576-115.87072 258.80576-258.82112 0-142.92992-115.86048-258.79552-258.80576-258.79552z m0 419.66592C462.336 469.95968 421.02272 450.56 410.5216 389.12h54.94272c8.53504 10.24 25.96864 28.87168 46.32064 28.87168 20.35712 0 37.8112-18.63168 46.33088-28.87168h54.94784c-10.50112 61.44-51.83488 80.83968-101.27872 80.83968z" fill="#1890ff" p-id="3289"></path><path d="M776.09472 582.66112c-106.83392 0-193.4336 86.59968-193.4336 193.4336s86.59968 193.4336 193.4336 193.4336 193.4336-86.59968 193.4336-193.4336-86.59968-193.4336-193.4336-193.4336zM875.52 849.92h-199.68v-46.08h199.68v46.08z m0-102.4h-199.68v-46.08h199.68v46.08z" fill="#1890ff"></path></svg>
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -4,7 +4,7 @@ import { Settings as LayoutSettings } from '@ant-design/pro-components';
 import type { RequestConfig, RunTimeLayoutConfig } from '@umijs/max';
 import { history, Link } from '@umijs/max';
 import { App } from 'antd';
-import React from 'react';
+import React, { useEffect } from 'react';
 import defaultSettings from '../config/defaultSettings';
 import AvatarSvg from '../public/avatar.svg';
 import { AvatarDropdown, AvatarName } from './components/RightContent/AvatarDropdown';
@@ -54,6 +54,16 @@ export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) =
  const { notification } = App.useApp();
  window.NotificationCF = notification;

+  useEffect(() => {
+    // 小屏幕刷新页面
+    // if (window.matchMedia) {
+    //   const mql = window.matchMedia('(max-width: 768px)');
+    //   mql.addEventListener('change', () => {
+    //     location.reload();
+    //   });
+    // }
+  }, []);
+
  return {
    // actionsRender: () => [<Question key="doc" />, <SelectLang key="SelectLang" />],
    actionsRender: () => [],
--- a/src/components/SearchBarPlugin/index.tsx
+++ b/src/components/SearchBarPlugin/index.tsx
@@ -43,7 +43,7 @@ export const SearchBarPlugin: React.FC<IProps> = (props) => {
    <>
      {isPhone ? (
        <>
-          <Drawer title="筛选条件" open={open} onClose={() => setOpen(false)}>
+          <Drawer title="筛选条件" open={open} onClose={() => setOpen(false)} width={'80%'}>
            <div>{props.body}</div>
            <div
              style={{ paddingBottom: 16 }}
--- a/src/global.less
+++ b/src/global.less
@@ -54,7 +54,7 @@ ol {

 input {
  background-clip: text;
-  -webkit-text-fill-color: #000; // 改变了字体颜色
+  // -webkit-text-fill-color: #000; // 改变了字体颜色
 }

 // 部门 树 css
@@ -81,7 +81,7 @@ input {

      >th,
      >td {
-        white-space: pre;
+        white-space: pre-wrap;

        >span {
          display: block;
@@ -95,4 +95,10 @@ input {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
+
+  // 日期兼容小屏
+  .ant-picker-panel-layout {
+    max-width: 90vw;
+    overflow: auto;
+  }
 }
--- a/src/pages/ChatLogs/ChatUtils.tsx
+++ b/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>
+  );
 };
--- a/src/pages/ChatLogs/GroupList.tsx
+++ b/src/pages/ChatLogs/GroupList.tsx
@@ -2,13 +2,18 @@ import { groupStatus } from '@/services/config';
 import { DownOutlined, UpOutlined } from '@ant-design/icons';
 import { useEffect, useState } from 'react';
 import { IGroup } from './ChatLogsType';
+import { GroupIcon } from './ChatUtils';
 import styles from './index.module.scss';
-
+type IGroupAvatar = {
+  avatar: string;
+  name: string;
+};
 type IProps = {
  groupList: IGroup[];
  searchWord: string;
  selectGroup: IGroup | undefined;
  onClick: Function;
+  groupAvatar: {};
 };

 type IGroupObj = {
@@ -38,7 +43,9 @@ export const GroupListWidget: React.FC<IProps> = (props) => {
          props.onClick(item);
        }}
      >
-        <div className={styles.avatar}>{item.name ? item.name[0] : '群'}</div>
+        <div className={styles.avatar}>
+          <GroupIcon groupList={props.groupAvatar[item.group_id] || []} />
+        </div>
        <div className={styles.chatAMsg} style={{ flexDirection: 'column' }}>
          <div className={styles.chatAName} title={item.name}>
            {item.name || '未知群名'}
--- a/src/pages/ChatLogs/components/EmojiFormat.tsx
+++ b/src/pages/ChatLogs/components/EmojiFormat.tsx
@@ -12,7 +12,7 @@ export const EmojiFormat: React.FC<IProps> = (props) => {
        const reg = new RegExp(`\\[${item}\\]`, 'g');
        txt = txt.replace(
          reg,
-          `<img style="width: 24px;height:24px" src="/api/assets/wechat/emoji/${item}.png" alt="" />`,
+          `<img style="width: 24px;height:24px;vertical-align: bottom;" src="/api/assets/wechat/emoji/${item}.png" alt="" />`,
        );
      });
    }
@@ -23,10 +23,7 @@ export const EmojiFormat: React.FC<IProps> = (props) => {
  return (
    <>
      {typeof props.content === 'string' ? (
-        <span
-          style={{ display: 'inline-flex', flexWrap: 'wrap' }}
-          dangerouslySetInnerHTML={{ __html: format() }}
-        ></span>
+        <div dangerouslySetInnerHTML={{ __html: format() }}></div>
      ) : (
        props.content
      )}
--- a/src/pages/ChatLogs/index.tsx
+++ b/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
--- a/src/pages/CustomList/components/CustDetailContent.tsx
+++ b/src/pages/CustomList/components/CustDetailContent.tsx
@@ -36,7 +36,7 @@ export const CustDetailContent: React.FC<IProps> = (props) => {
          let arr: any = [];
          res.data.forEach((item: any) => {
            arr.push({
-              title: item.staff_name + ' 添加了好友',
+              title: item.staff_name + ' 添加的好友',
              description: item.create_time,
            });
          });
--- a/src/pages/CustomList/components/index.module.scss
+++ b/src/pages/CustomList/components/index.module.scss
@@ -10,8 +10,8 @@
  border-radius: 6px;

  img {
-    max-width: 100%;
-    max-height: 100%;
+    width: 100%;
+    height: 100%;
    object-fit: cover;
  }
 }
--- a/src/pages/CustomList/index.tsx
+++ b/src/pages/CustomList/index.tsx
@@ -20,6 +20,7 @@ import {
 import { stringify } from 'qs';
 import React, { useEffect, useState } from 'react';

+import { getDevice } from '@/services/utils';
 import { ICustFollow, IStaffsItem } from '../ChatLogs/ChatLogsType';
 import { Gender } from '../ChatLogs/components/Gender';
 import { CustDetailContent } from './components/CustDetailContent';
@@ -36,6 +37,8 @@ const CustomList: React.FC = () => {
    user_id: '',
  });

+  const isPhone = getDevice() === 'phone';
+
  const [custsList, setCustsList] = useState<ICustFollow[]>([]);
  const [staffsList, setStaffsList] = useState<IStaffsItem[]>([]);
  const [count, setCount] = useState(0);
@@ -312,7 +315,7 @@ const CustomList: React.FC = () => {
                          </Tag>
                        </Popover>
                      ) : (
-                        <>
+                        <div>
                          <Tag
                            color="green"
                            title={`${arr[0]?.group_name}：${arr[0]?.tag_name}`}
@@ -329,7 +332,7 @@ const CustomList: React.FC = () => {
                              {arr[1]?.tag_name}
                            </Tag>
                          ) : null}
-                        </>
+                        </div>
                      )}
                    </>
                  );
@@ -350,20 +353,20 @@ const CustomList: React.FC = () => {
          {/* <Table.Column title="商机阶段" width={160} dataIndex={'position'} /> */}
          <Table.Column
            title="添加方式"
-            width={140}
+            width={120}
            dataIndex={'add_way'}
            render={(value) => {
              return <>{AddWay[value]}</>;
            }}
          />
-          <Table.Column title="添加时间" width={140} dataIndex={'create_time'} />
+          <Table.Column title="添加时间" width={120} dataIndex={'create_time'} />
          {/* <Table.Column title="操作" width={160} dataIndex={'position'} /> */}
        </Table>
        <Drawer
          title={`${record?.name} 客户详情`}
          open={open}
          onClose={() => setOpen(false)}
-          width={800}
+          width={isPhone ? '85%' : 800}
        >
          <CustDetailContent record={record as ICustFollow} />
        </Drawer>
--- a/src/services/utils.ts
+++ b/src/services/utils.ts
@@ -7,9 +7,9 @@ export const getDevice: IGetDevice = () => {
  const isPhone =
    typeof navigator !== 'undefined' && navigator && navigator.userAgent.match(/phone/gi);

-  if (width < 680 || isPhone) {
+  if (width <= 768 || isPhone) {
    return 'phone';
-  } else if (width < 1280 && width > 680) {
+  } else if (width < 1280 && width > 768) {
    return 'tablet';
  } else {
    return 'desktop';