Skip to content

C
center-book
提交 f3b116bd authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

chore: update

上级 dfcefd42
隐藏空白字符变更
内嵌 并排
正在显示 包含 175 行增加 和 211 行删除
src/layout/components/userinfo.jsx
浏览文件 @ f3b116bd
import React, { useState, useEffect, useRef } from 'react';
import { UserOutlined, LogoutOutlined, BellOutlined } from '@ant-design/icons';
import { Button, Space, Dropdown, Drawer, Row, Col, Image } from 'antd';
import { useNavigate } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import msgWebsocket from '@/common/websocket/websocket';
import { setUserInfo } from '@/store/modules/user';
import { getUserInfo, getMessageList, getMessageCount, setRead, setAllRead } from '../request';
import bell from '../../assets/images/bell.png';
import point1 from '../../assets/images/point1.png';
import quit from '../../assets/images/quit.png';
import slide from '../../assets/images/slide.png';
import React, { useState, useEffect, useRef } from 'react'
import { UserOutlined, LogoutOutlined, BellOutlined } from '@ant-design/icons'
import { Button, Space, Dropdown, Drawer, Row, Col, Image } from 'antd'
import { useNavigate } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import msgWebsocket from '@/common/websocket/websocket'
import { setUserInfo } from '@/store/modules/user'
import { getUserInfo, getMessageList, getMessageCount, setRead, setAllRead } from '../request'
import bell from '../../assets/images/bell.png'
import point1 from '../../assets/images/point1.png'
import quit from '../../assets/images/quit.png'
import slide from '../../assets/images/slide.png'
const items = [
{
key: 'userinfo',
label: (
<Button type='link' href='/userinfo'>
<Button type="link" href="/userinfo">
个人中心
</Button>
),
},
];
)
}
]
const UserInfo = ({ props, extraSlot }) => {
const navigator = useNavigate();
const dispatch = useDispatch();
const [showDrawer, setShowDrawer] = useState(false);
const drawerRef = useRef(null);
const { userInfo } = useSelector((state) => state.user);
const [userInfos, setUserInfos] = useState({});
const [messageList, setMessageList] = useState([]);
const [page, setPage] = useState(1);
const [page_size, setpage_size] = useState(10);
const [drawerScrolled, setDrawerScrolled] = useState(false);
const [unreadMessagesNum, setUnreadMessagesNum] = useState(0);
const heartbeatInterval = useRef(null);
const [isReadSet, setIsReadSet] = useState(false);
const {
webSocketInit,
wsMessage,
setWsMessage,
reconnect,
sendMessage,
closeWebSocket,
wsReadyState,
} = msgWebsocket({});
const [messageListLoaded, setMessageListLoaded] = useState(false); // 新增状态来表示消息列表是否已加载
const navigator = useNavigate()
const dispatch = useDispatch()
const [showDrawer, setShowDrawer] = useState(false)
const drawerRef = useRef(null)
const { userInfo } = useSelector(state => state.user)
const [userInfos, setUserInfos] = useState({})
const [messageList, setMessageList] = useState([])
const [page, setPage] = useState(1)
const [page_size, setpage_size] = useState(10)
const [drawerScrolled, setDrawerScrolled] = useState(false)
const [unreadMessagesNum, setUnreadMessagesNum] = useState(0)
const heartbeatInterval = useRef(null)
const [isReadSet, setIsReadSet] = useState(false)
const { webSocketInit, wsMessage, setWsMessage, reconnect, sendMessage, closeWebSocket, wsReadyState } = msgWebsocket({})
const [messageListLoaded, setMessageListLoaded] = useState(false) // 新增状态来表示消息列表是否已加载
// 推出登录
const signOut = () => {
localStorage.clear();
navigator('/login');
};
localStorage.clear()
navigator('/login')
}
const getInfo = async () => {
const data = await getUserInfo();
dispatch(setUserInfo(data));
setUserInfos(data);
};
const data = await getUserInfo()
dispatch(setUserInfo(data))
setUserInfos(data)
}
// 所有消息中心
// 未读数
const noneRead = async () => {
const { num } = await getMessageCount();
setUnreadMessagesNum(num);
};
const { num } = await getMessageCount()
setUnreadMessagesNum(num)
}
// 部分已读
const setMessageReaded = async (id) => {
setRead({ id });
};
const setMessageReaded = async id => {
setRead({ id })
}
// 全部已读
const setMessageALLReaded = async () => {
setAllRead();
setUnreadMessagesNum(0);
};
setAllRead()
setUnreadMessagesNum(0)
}
const getMessage = async () => {
const { list } = await getMessageList({ page: 1, page_size });
setMessageList(list);
const { list } = await getMessageList({ page: 1, page_size })
setMessageList(list)
setMessageListLoaded(true); // 设置消息列表已加载的状态为true
};
setMessageListLoaded(true) // 设置消息列表已加载的状态为true
}
// 加载下一页消息
const loadNextPage = async () => {
const nextPage = page + 1;
const { list } = await getMessageList({ page: nextPage, page_size });
setPage(nextPage);
setMessageList((prevList) => [...prevList, ...list]);
};
const nextPage = page + 1
const { list } = await getMessageList({ page: nextPage, page_size })
setPage(nextPage)
setMessageList(prevList => [...prevList, ...list])
}
useEffect(() => {
getInfo();
getMessage();
noneRead();
}, []);
getInfo()
getMessage()
noneRead()
}, [])
// 设置全部已读,且只调用一次
useEffect(() => {
if (!isReadSet && showDrawer && unreadMessagesNum > 0) {
setIsReadSet(true);
setIsReadSet(true)
} else if (!showDrawer) {
// noneRead();
}
}, [showDrawer, unreadMessagesNum, isReadSet]);
}, [showDrawer, unreadMessagesNum, isReadSet])
// 加载消息的websocket
// useEffect(() => {
// if (userInfos.id > 0) {
// const wsUrl = `${import.meta.env.VITE_API_WEBSOCKET_URL}/ws`;
// // 建立websokect链接
// webSocketInit(wsUrl);
// // 获取websocket消息
// if (Object.entries(wsMessage).length > 0) {
// console.log('收到消息了');
// console.log(wsMessage);
// // 收到消息一个未读消息
// setUnreadMessagesNum(unreadMessagesNum + 1);
// }
// }
// }, [userInfos, wsMessage, wsReadyState]);
useEffect(() => {
if (userInfos.id > 0) {
const wsUrl = `${import.meta.env.VITE_API_WEBSOCKET_URL}/ws`
// 建立websokect链接
webSocketInit(wsUrl)
// 获取websocket消息
if (Object.entries(wsMessage).length > 0) {
console.log('收到消息了')
console.log(wsMessage)
// 收到消息一个未读消息
setUnreadMessagesNum(unreadMessagesNum + 1)
}
}
}, [userInfos, wsMessage, wsReadyState])
// 重连websocket
// useEffect(() => {
......@@ -133,50 +125,47 @@ const UserInfo = ({ props, extraSlot }) => {
// return () => clearInterval(heartbeatInterval.current);
// }
// }, [userInfos, wsReadyState]);
let reconnectTimeoutId;
let reconnectTimeoutId
// 重连websocket
useEffect(() => {
// ...其他逻辑不变...
// 重连逻辑修改
if (wsReadyState.key === 3) {
clearTimeout(reconnectTimeoutId);
reconnectTimeoutId = setTimeout(reconnect, 3000); // 3秒后重试
clearTimeout(reconnectTimeoutId)
reconnectTimeoutId = setTimeout(reconnect, 3000) // 3秒后重试
}
// 清理函数中取消定时器
return () => {
clearTimeout(reconnectTimeoutId);
clearInterval(heartbeatInterval.current);
};
}, [userInfos, wsReadyState]);
clearTimeout(reconnectTimeoutId)
clearInterval(heartbeatInterval.current)
}
}, [userInfos, wsReadyState])
// 滚动消息抽屉翻页
useEffect(() => {
if (showDrawer) {
const handleScroll = () => {
const drawerElement = document.querySelector('.ant-drawer-body');
if (
drawerElement &&
drawerElement.scrollTop + drawerElement.clientHeight >= drawerElement.scrollHeight
) {
const drawerElement = document.querySelector('.ant-drawer-body')
if (drawerElement && drawerElement.scrollTop + drawerElement.clientHeight >= drawerElement.scrollHeight) {
// 在抽屉滚动到底部时加载下一页数据
loadNextPage();
setDrawerScrolled(true);
loadNextPage()
setDrawerScrolled(true)
// 更新滚动位置，使用户能够继续向上滚动
drawerElement.scrollTop = drawerElement.scrollHeight - drawerElement.clientHeight;
drawerElement.scrollTop = drawerElement.scrollHeight - drawerElement.clientHeight
} else {
setDrawerScrolled(false);
setDrawerScrolled(false)
}
};
}
// 添加滚动事件监听
document.querySelector('.ant-drawer-body').addEventListener('scroll', handleScroll);
document.querySelector('.ant-drawer-body').addEventListener('scroll', handleScroll)
// 在组件卸载时移除滚动事件监听
return () => {
document.querySelector('.ant-drawer-body').removeEventListener('scroll', handleScroll);
};
document.querySelector('.ant-drawer-body').removeEventListener('scroll', handleScroll)
}
}
}, [drawerScrolled, showDrawer]);
}, [drawerScrolled, showDrawer])
//
// useEffect(() => {
......@@ -220,9 +209,8 @@ const UserInfo = ({ props, extraSlot }) => {
position: 'relative',
width: '16px',
height: '19px',
pointerEvents: 'none',
}}
>
pointerEvents: 'none'
}}>
<Image src={bell} style={{ width: 14 }} />
<Image
src={point1}
......@@ -231,11 +219,11 @@ const UserInfo = ({ props, extraSlot }) => {
top: -18,
right: -5,
width: '12px',
height: '12px',
height: '12px'
}}
/>
</span>
);
)
} else {
return (
<span
......@@ -243,17 +231,16 @@ const UserInfo = ({ props, extraSlot }) => {
display: 'inline-block',
width: '16px',
height: '19px',
pointerEvents: 'none',
}}
>
pointerEvents: 'none'
}}>
<Image src={bell} style={{ width: 14 }} />
</span>
);
)
}
};
}
return (
<div className='header-user'>
<div className="header-user">
<Drawer
open={showDrawer}
// closeIcon={false}
......@@ -264,13 +251,12 @@ const UserInfo = ({ props, extraSlot }) => {
width: '22px',
height: '18px',
cursor: 'pointer',
pointerEvents: 'none',
}}
>
pointerEvents: 'none'
}}>
<Image
src={slide}
style={{
width: 14,
width: 14
}}
/>
</span>
......@@ -280,19 +266,17 @@ const UserInfo = ({ props, extraSlot }) => {
style={{
fontSize: '14px',
color: '#999',
cursor: 'pointer',
cursor: 'pointer'
}}
draggable='false'
onClick={() => setMessageALLReaded()}
>
draggable="false"
onClick={() => setMessageALLReaded()}>
全部已读
</span>
}
onClose={() => {
setShowDrawer(false);
setMessageListLoaded(false);
}}
>
setShowDrawer(false)
setMessageListLoaded(false)
}}>
{/* <div
style={{
display: 'flex',
......@@ -347,14 +331,13 @@ const UserInfo = ({ props, extraSlot }) => {
messageList.map((item, index) => (
<Row
key={item.id}
className='processItem'
className="processItem"
style={{
borderRadius: 4,
border: '1px solid #E4E4E4',
padding: 15,
marginBottom: 20,
}}
>
marginBottom: 20
}}>
<Col span={1} style={{ marginRight: 15 }}>
<Button
style={{
......@@ -363,7 +346,7 @@ const UserInfo = ({ props, extraSlot }) => {
display: 'inline-block',
width: '19px',
height: '22px',
pointerEvents: 'none',
pointerEvents: 'none'
}}
icon={
index < unreadMessagesNum && item.status === 0 ? (
......@@ -373,9 +356,8 @@ const UserInfo = ({ props, extraSlot }) => {
position: 'relative',
width: '16px',
height: '19px',
pointerEvents: 'none',
}}
>
pointerEvents: 'none'
}}>
<Image src={bell} style={{ width: 14 }} />
<Image
src={point1}
......@@ -384,7 +366,7 @@ const UserInfo = ({ props, extraSlot }) => {
top: -18,
right: -5,
width: '12px',
height: '12px',
height: '12px'
}}
/>
</span>
......@@ -394,70 +376,65 @@ const UserInfo = ({ props, extraSlot }) => {
display: 'inline-block',
width: '16px',
height: '19px',
pointerEvents: 'none',
}}
>
pointerEvents: 'none'
}}>
<Image src={bell} style={{ width: 14 }} />
</span>
)
}
></Button>
}></Button>
</Col>
<Col span={22} className='process'>
<Col span={22} className="process">
<div
className='head'
className="head"
style={{
display: 'flex',
justifyContent: 'space-between',
marginBottom: 10,
}}
>
marginBottom: 10
}}>
<strong>审核通知</strong>
<span
className='date'
className="date"
style={{
color: '#999999',
fontSize: 12,
}}
>
fontSize: 12
}}>
{item.create_time}
</span>
</div>
<div
className='content'
className="content"
onClick={() => {
item.isRead = true;
item.isRead = true
if (item.type === 1) {
const handleType1 = async () => {
await navigator('/books/audit/dataset');
await setMessageReaded(item.id);
await getMessage();
await noneRead();
};
handleType1();
await navigator('/books/audit/dataset')
await setMessageReaded(item.id)
await getMessage()
await noneRead()
}
handleType1()
} else if (item.type === 2) {
const handleType2 = async () => {
await navigator('/books/sale/dataset');
await setMessageReaded(item.id);
await getMessage();
await noneRead();
};
await navigator('/books/sale/dataset')
await setMessageReaded(item.id)
await getMessage()
await noneRead()
}
handleType2();
handleType2()
// setUnreadMessagesNum(0);
} else {
const handleType3 = async () => {
await setMessageReaded(item.id);
await getMessage();
await noneRead();
};
await setMessageReaded(item.id)
await getMessage()
await noneRead()
}
handleType3();
handleType3()
}
setShowDrawer(false);
setShowDrawer(false)
}}
style={{ cursor: 'pointer' }}
>
style={{ cursor: 'pointer' }}>
{item.content}
</div>
</Col>
......@@ -467,7 +444,7 @@ const UserInfo = ({ props, extraSlot }) => {
<Space>
<div
className='header-user-bell'
className="header-user-bell"
style={{
width: 36,
height: 36,
......@@ -475,46 +452,36 @@ const UserInfo = ({ props, extraSlot }) => {
alignItems: 'center',
justifyContent: 'center',
border: 'none',
marginTop: '10px',
}}
>
marginTop: '10px'
}}>
<Button
style={{
border: 'none',
background: '#f6f6f6',
background: '#f6f6f6'
}}
onClick={() => {
setPage(1);
setShowDrawer(true);
getMessage();
setPage(1)
setShowDrawer(true)
getMessage()
// setMessageReaded();
}}
icon={renderBellIcon()}
></Button>
icon={renderBellIcon()}></Button>
</div>
<Dropdown menu={{ items }} arrow>
<Button
type='link'
className='logout'
onClick={(e) => e.preventDefault()}
type="link"
className="logout"
onClick={e => e.preventDefault()}
style={{
padding: 10,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
border: 'none',
marginTop: '10px',
}}
>
marginTop: '10px'
}}>
<Space>
{userInfos.pic ? (
<img
src={userInfos.pic}
style={{ width: '25px', height: '28px', borderRadius: '50%', marginTop: '6px' }}
/>
) : (
<UserOutlined />
)}
{userInfos.pic ? <img src={userInfos.pic} style={{ width: '25px', height: '28px', borderRadius: '50%', marginTop: '6px' }} /> : <UserOutlined />}
{/* {<UserOutlined />} */}
{userInfos.real_name}
</Space>
......@@ -526,15 +493,14 @@ const UserInfo = ({ props, extraSlot }) => {
height: 36,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
justifyContent: 'center'
}}>
<Button
type='link'
type="link"
onClick={signOut}
className='logout'
className="logout"
style={{
marginTop: '10px',
marginTop: '10px'
}}
icon={
<span
......@@ -545,19 +511,17 @@ const UserInfo = ({ props, extraSlot }) => {
pointerEvents: 'none',
alignItems: 'center',
justifyContent: 'center',
}}
>
justifyContent: 'center'
}}>
<Image src={quit} style={{ width: 18 }} />
</span>
}
>
}>
{/* <LogoutOutlined /> */}
</Button>
</div>
</Space>
</div>
);
};
)
}
export default UserInfo;
export default UserInfo
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论