From 570b28d81b58941247290cdb34e6be2561826dde Mon Sep 17 00:00:00 2001 From: zhengw <247276359@qq.com> Date: Mon, 24 Apr 2023 10:54:22 +0800 Subject: [PATCH] =?UTF-8?q?=E5=BC=80=E5=8F=91:=20=E7=BE=A4=E5=9B=BE?= =?UTF-8?q?=E6=A0=87=E6=8B=BC=E6=8E=A5,=20=E8=81=8A=E5=A4=A9=E8=AE=B0?= =?UTF-8?q?=E5=BD=95=E6=A0=B7=E5=BC=8F=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/avatar.svg | 2 +- src/app.tsx | 12 ++++- src/components/SearchBarPlugin/index.tsx | 2 +- src/global.less | 10 +++- src/pages/ChatLogs/ChatUtils.tsx | 48 +++++++++++++++++-- src/pages/ChatLogs/GroupList.tsx | 11 ++++- src/pages/ChatLogs/components/EmojiFormat.tsx | 7 +-- src/pages/ChatLogs/index.tsx | 37 +++++++------- .../components/CustDetailContent.tsx | 2 +- .../CustomList/components/index.module.scss | 4 +- src/pages/CustomList/index.tsx | 13 +++-- src/services/utils.ts | 4 +- 12 files changed, 107 insertions(+), 45 deletions(-) diff --git a/public/avatar.svg b/public/avatar.svg index 2ea1b77..2737e6e 100644 --- a/public/avatar.svg +++ b/public/avatar.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/app.tsx b/src/app.tsx index ca9b03b..a347094 100644 --- 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: () => [, ], actionsRender: () => [], diff --git a/src/components/SearchBarPlugin/index.tsx b/src/components/SearchBarPlugin/index.tsx index 9b34248..633477f 100644 --- a/src/components/SearchBarPlugin/index.tsx +++ b/src/components/SearchBarPlugin/index.tsx @@ -43,7 +43,7 @@ export const SearchBarPlugin: React.FC = (props) => { <> {isPhone ? ( <> - setOpen(false)}> + setOpen(false)} width={'80%'}>
{props.body}
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; + } } \ No newline at end of file diff --git a/src/pages/ChatLogs/ChatUtils.tsx b/src/pages/ChatLogs/ChatUtils.tsx index 59fdf51..0c570c7 100644 --- 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 = (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 = (props) => { temp[2].push(element); } } - console.log(temp); + temp.reverse(); + setList(temp); }, [props.groupList]); - //
{item.name ? item.name[0] : '群'}
; - return
; + return ( +
+ {list.map((item: any[], i: number) => { + return ( +
+ {item.map((el) => { + return el ? ( +
+ {el.avatar ? ( + + ) : ( +
+
{el.name[0]}
+
+ )} +
+ ) : ( + <> + ); + })} +
+ ); + })} +
+ ); }; diff --git a/src/pages/ChatLogs/GroupList.tsx b/src/pages/ChatLogs/GroupList.tsx index b04d39b..69f82d9 100644 --- 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 = (props) => { props.onClick(item); }} > -
{item.name ? item.name[0] : '群'}
+
+ +
{item.name || '未知群名'} diff --git a/src/pages/ChatLogs/components/EmojiFormat.tsx b/src/pages/ChatLogs/components/EmojiFormat.tsx index c47b948..659c13b 100644 --- a/src/pages/ChatLogs/components/EmojiFormat.tsx +++ b/src/pages/ChatLogs/components/EmojiFormat.tsx @@ -12,7 +12,7 @@ export const EmojiFormat: React.FC = (props) => { const reg = new RegExp(`\\[${item}\\]`, 'g'); txt = txt.replace( reg, - ``, + ``, ); }); } @@ -23,10 +23,7 @@ export const EmojiFormat: React.FC = (props) => { return ( <> {typeof props.content === 'string' ? ( - +
) : ( props.content )} diff --git a/src/pages/ChatLogs/index.tsx b/src/pages/ChatLogs/index.tsx index 5754315..fc13ba7 100644 --- 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({}); + 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 ( { @@ -480,7 +484,7 @@ const ChatLogs: React.FC = () => {
-
{ e.stopPropagation(); }} @@ -495,7 +499,7 @@ const ChatLogs: React.FC = () => { }} allowClear /> -
+
{staffsList.map((item) => { if (!item.name.includes(staffSearchWord)) return null; return ( @@ -581,20 +585,17 @@ const ChatLogs: React.FC = () => { ) : null}
-
- { - searchWord[tabKey] = e.target.value.trim(); - setSearchWord({ ...searchWord }); - }} - allowClear - /> -
+ { + searchWord[tabKey] = e.target.value.trim(); + setSearchWord({ ...searchWord }); + }} + allowClear + /> { ) } open={open} - width={600} + width={800} onClose={() => setOpen(false)} footer={false} destroyOnClose diff --git a/src/pages/CustomList/components/CustDetailContent.tsx b/src/pages/CustomList/components/CustDetailContent.tsx index 6ee3764..874ca3d 100644 --- a/src/pages/CustomList/components/CustDetailContent.tsx +++ b/src/pages/CustomList/components/CustDetailContent.tsx @@ -36,7 +36,7 @@ export const CustDetailContent: React.FC = (props) => { let arr: any = []; res.data.forEach((item: any) => { arr.push({ - title: item.staff_name + ' 添加了好友', + title: item.staff_name + ' 添加的好友', description: item.create_time, }); }); diff --git a/src/pages/CustomList/components/index.module.scss b/src/pages/CustomList/components/index.module.scss index 11d2fbf..72a561e 100644 --- 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; } } diff --git a/src/pages/CustomList/index.tsx b/src/pages/CustomList/index.tsx index 0664ff5..760baa8 100644 --- 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([]); const [staffsList, setStaffsList] = useState([]); const [count, setCount] = useState(0); @@ -312,7 +315,7 @@ const CustomList: React.FC = () => { ) : ( - <> +
{ {arr[1]?.tag_name} ) : null} - +
)} ); @@ -350,20 +353,20 @@ const CustomList: React.FC = () => { {/* */} { return <>{AddWay[value]}; }} /> - + {/* */} setOpen(false)} - width={800} + width={isPhone ? '85%' : 800} > diff --git a/src/services/utils.ts b/src/services/utils.ts index df2181b..0187fe5 100644 --- 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';