Public/scrm.antd
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

开发: 添加小屏幕css[少], 聊天记录投票. 客户中心修改, 工作台支持小屏

Browse Source
This commit is contained in:
zhengw
2023-04-21 14:53:54 +08:00
parent 2156976a8c
commit 5f4acf4317
20 changed files with 619 additions and 322 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/pages/ChatLogs/ChatLogsType.ts
View File

@@ -43,6 +43,7 @@ export interface ICustFollow {
avatar: string;
gender: number;
add_staff_tot?: number | undefined;
name: string;
staff_name?: string;
@@ -72,6 +73,7 @@ export interface IGroup {
owner: string;
staff_name?: string;
state: number;
status: number;
sync_time: string;
notice: string;
@@ -99,6 +101,7 @@ export interface IChat {
action: string;
content: string;
msg_from: string;
doc?: string;
msg_id: string;
msg_time: string;
msg_to_list: string;

2
src/pages/ChatLogs/components/ChatCollect.tsx
View File

@@ -8,7 +8,7 @@ export const ChatCollect: React.FC<IChatItem> = (props) => {
<div>
<div style={{ display: 'flex', color: '#000', flexDirection: 'column' }}>
<div style={{ wordBreak: 'break-all' }}>群名：{msg.room_name}</div>
<div style={{ wordBreak: 'break-all' }}>创建者：{msg.creator}</div>
<div style={{ wordBreak: 'break-all' }}>群主：{msg.creator}</div>
<div style={{ wordBreak: 'break-all' }}>表名：{msg.title}</div>
<div
style={{ borderTop: '1px solid #ddd', color: '#999', marginTop: 8, paddingTop: 8 }}

73
src/pages/ChatLogs/components/ChatVote.tsx
View File

@@ -1,15 +1,80 @@
import { SignalFilled } from '@ant-design/icons';
import { Modal } from 'antd';
import { useEffect, useState } from 'react';
import { IChatItem } from '../ChatLogsType';
import styles from './index.module.scss';
export const ChatVote: React.FC<IChatItem> = (props) => {
const votetype: any = { 101: '发起投票', 102: '参与投票' };
const votetype: any = { '101': '发起投票', '102': '参与投票' };
const [open, setOpen] = useState(false);
const [voteitem, setVoteitem] = useState([]);
useEffect(() => {
try {
const msg = JSON.parse(props.chat?.content as string);
setVoteitem(msg?.voteitem);
} catch (e) {}
}, [props.chat]);
function content() {
try {
const msg = JSON.parse(props.chat?.content as string);
return (
<>
<div
style={{ display: 'flex', color: '#000', flexDirection: 'column', cursor: 'pointer' }}
onClick={() => setOpen(true)}
>
<div style={{ wordBreak: 'break-all', fontWeight: 'bold' }}>{msg?.votetitle}</div>
<div style={{ wordBreak: 'break-all' }}>
{Array.isArray(msg?.voteitem)
? [0, 1, 2].map((item) => {
return msg?.voteitem[item] ? (
<div className={styles.voteitem}>{msg?.voteitem[item]}</div>
) : (
<></>
);
})
: null}
</div>
<div
style={{ borderTop: '1px solid #ddd', color: '#999', marginTop: 8, paddingTop: 8 }}
>
<SignalFilled style={{ color: '#F0B40E' }} /> 投票 [
{votetype[msg?.votetype as string]}]
</div>
</div>
<Modal
open={open}
title={msg?.votetitle}
centered
onCancel={() => {
setOpen(false);
}}
footer={false}
>
<div style={{ maxHeight: '75vh', overflow: 'auto' }}>
{Array.isArray(voteitem)
? voteitem.map((item) => {
return (
<div key={item} className={styles.voteitem}>
{item}
</div>
);
})
: null}
</div>
</Modal>
</>
);
} catch (e) {}
return (
<div style={{ display: 'flex', color: '#000', flexDirection: 'column' }}>
<div style={{ wordBreak: 'break-all' }}>{props.chat?.votetitle}</div>
<div style={{ wordBreak: 'break-all' }}>{props.chat?.voteitem}</div>
<div style={{ wordBreak: 'break-all' }}>{props.chat?.content}</div>
<div style={{ borderTop: '1px solid #ddd', color: '#999', marginTop: 8, paddingTop: 8 }}>
投票 [{votetype[props.chat?.votetype as string]}]
<SignalFilled style={{ color: '#F0B40E' }} /> 投票
</div>
</div>
);

17
src/pages/ChatLogs/components/EmojiFormat.tsx
View File

@@ -7,13 +7,16 @@ type IProps = {
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="" />`,
);
});
if (txt.includes('[') && txt.includes(']')) {
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;
};

2
src/pages/ChatLogs/components/Svgs.tsx
View File

@@ -1,7 +1,7 @@
export const OwnerSvg = () => {
return (
<span
title="创建者"
title="群主"
style={{
display: 'inline-flex',
alignItems: 'center',

18
src/pages/ChatLogs/components/index.module.scss
View File

@@ -42,6 +42,7 @@
justify-content: center;
min-height: 40px;
padding: 12px;
white-space: pre-wrap;
word-break: break-all;
background-color: #fff;
border-radius: 4px;
@@ -153,3 +154,20 @@
background-color: #8c8c8c;
border-radius: 40px;
}
.voteitem {
position: relative;
padding-left: 16px;
&::before {
position: absolute;
top: 50%;
left: 0;
display: inline-block;
width: 6px;
height: 6px;
border: 2px solid #ccc;
border-radius: 8px;
transform: translateY(-50%);
content: '';
}
}

9
src/pages/ChatLogs/index.module.scss
View File

@@ -17,11 +17,14 @@
align-items: center;
justify-content: flex-start;
height: 65px;
margin-bottom: 12px;
padding: 0 12px;
border-bottom: 1px solid #ddd;
cursor: pointer;
&:first-child {
margin-top: 1px;
}
&:hover {
background-color: #bae0ff;
}
@@ -80,7 +83,9 @@
height: 34px;
background-color: #fff;
transition: top 0.3s, height 0.3s;
.chatB {
margin-top: 0;
}
&.delFollowListShow {
top: 164px;
height: calc(100% - 164px);

24
src/pages/ChatLogs/index.tsx
View File

@@ -201,7 +201,7 @@ const ChatLogs: React.FC = () => {
other.push(item);
}
});
// 对群员 创建者 > 管理员 > 普通成员 排序
// 对群员 群主 > 管理员 > 普通成员 排序
setGroupMembersList([...owner, ...admin_list, ...other]);
page(1);
}
@@ -242,8 +242,8 @@ const ChatLogs: React.FC = () => {
// });
setStaffsList(res.data);
setInnerStaffsList(res.data);
getCustFollowsList();
getGroupList();
// getCustFollowsList();
// getGroupList();
}
}
});
@@ -566,8 +566,11 @@ const ChatLogs: React.FC = () => {
setSelectStaff({ ...item });
selectStaffRef.current = { ...item };
setFlolowsBox(false);
getCustFollowsList();
getGroupList();
if (tabKey == '1') {
getCustFollowsList();
} else if (tabKey == '2') {
getGroupList();
}
}}
style={{ background: selectStaff?.user_id == item.user_id ? '#bae0ff' : '' }}
>
@@ -651,6 +654,11 @@ const ChatLogs: React.FC = () => {
tabBarGutter={12}
onChange={(val) => {
setTabKey(val);
if (val == '1') {
getCustFollowsList();
} else if (val == '2') {
getGroupList();
}
}}
/>
<div className={styles.chatBBox}>{tabContent()}</div>
@@ -724,7 +732,7 @@ const ChatLogs: React.FC = () => {
{groupMembersList.map((item) => {
return item.group_members_type == '2' || item.state == 0
? null
: groupMembersListItem(item, selectGroupRef.current);
: groupMembersListItem(item, selectGroupRef.current as IGroup);
})}
{groupMembersCount2(groupMembersList, '2', 1) != 0 ? (
<div
@@ -742,7 +750,7 @@ const ChatLogs: React.FC = () => {
{groupMembersList.map((item) => {
return item.group_members_type == '1' || item.state == 0
? null
: groupMembersListItem(item, selectGroupRef.current);
: groupMembersListItem(item, selectGroupRef.current as IGroup);
})}
{groupMembersCount(groupMembersList, 0) != 0 ? (
<div
@@ -760,7 +768,7 @@ const ChatLogs: React.FC = () => {
{groupMembersList.map((item) => {
return item.state == 1
? null
: groupMembersListItem(item, selectGroupRef.current);
: groupMembersListItem(item, selectGroupRef.current as IGroup);
})}
</div>
)}