优化

src/components/InvitingPersonnelModal/index.tsx

@@ -1,5 +1,5 @@
 import styles from '@/components/InvitingPersonnelModal/index.module.scss'
-import { Button, Checkbox, Input, Modal, Pagination, message } from 'antd';
+import { Button, Checkbox, Input, Modal, Pagination, Radio, message } from 'antd';
 import { useState, useImperativeHandle, forwardRef, useEffect } from "react";
 import { SearchOutlined } from '@ant-design/icons';
 import { GetUserList } from '@/api/Home/User';
@@ -20,16 +20,7 @@ const InvitingPersonnelModal = forwardRef((props: any, ref: any) => {
   const [isInvitingPersonnelModal, setIsInvitingPersonnelModal] = useState(false);
   const [isFirstRender, setIsFirstRender] = useState(true);
   const [user, setUser] = useState<any>({});
-  const [operation, setOperation] = useState<{
-    options: { label: string; value: number }[];
-    optionsValue: number[];
-  }>({
-    options: [
-      { label: '在线', value: 1 },
-      { label: '不在线', value: 2 },
-    ],
-    optionsValue: [1]
-  });
+  const [optionsValue, setOperationValue] = useState<number>(1);
   const [list, setList] = useState<any>({
     data: [],
     searchKeywod: '',
@@ -60,15 +51,7 @@ const InvitingPersonnelModal = forwardRef((props: any, ref: any) => {
         })
       }
     }
-  }, [operation.optionsValue]);
-
-  // 设置勾选
-  const changeOptionsValue = (checkedValues: number[]): void => {
-    setOperation({
-      ...operation,
-      optionsValue: checkedValues,
-    })
-  };
+  }, [optionsValue]);
   // 获取用户列表
   const getUserList = async (): Promise<void> => {
     Promise.all([
@@ -77,7 +60,7 @@ const InvitingPersonnelModal = forwardRef((props: any, ref: any) => {
         pageIndex: list.pageIndex,
         pageSize: list.pageSize,
         searchKeywod: list.searchKeywod,
-        isOnline: operation.optionsValue.length === 1 ? operation.optionsValue[0] === 1 ? true : false : '',
+        isOnline: optionsValue === 1 ? true : false,
       })
     ]).then(res => {
       if (res[0].code === 200 && res[1].code === 200) {
@@ -130,14 +113,12 @@ const InvitingPersonnelModal = forwardRef((props: any, ref: any) => {
                   }
                 }}
               />
-              <Checkbox.Group
-                style={{ flexShrink: 0, margin: '10px 0' }}
-                options={operation.options}
-                value={operation.optionsValue}
-                onChange={(e)=>{
-                  changeOptionsValue(e)
-                }}
-              />
+              <Radio.Group onChange={(e: any) => {
+                setOperationValue(e.target.value)
+              }} style={{ flexShrink: 0, margin: '10px 0' }} value={optionsValue}>
+                <Radio value={1}>在线</Radio>
+                <Radio value={2}>离线</Radio>
+              </Radio.Group>
               <div className={styles.invitingPersonnelModalContentLeftUserList}>
                 {list.data.length ? list.data.map((item: any, index: number) => <div key={item.id}>
                   <div >

src/page/Meeting/index.tsx

@@ -119,6 +119,7 @@ const Meeting: React.FC = () => {
   const [open, setOpen] = useState(false)
   const [meetingMode, setMeetingMode] = useState('')
   const [userSearchValue, setUserSearchValue] = useState('')
+  const [noViewChatList, setNoViewChatList] = useState(0)
   useEffect(() => {
     let time = null as any;
     if (isInit) {
@@ -171,6 +172,7 @@ const Meeting: React.FC = () => {
       setCurrentVideoId(userInfo.account)
       setUser(userInfo)
       setIsInit(false)
+      storage.setItem('noViewChatList', 0)
       window.addEventListener('customStorageChange', handleCustomStorageChange);
       window.addEventListener('online', handleNetworkChange);
       window.addEventListener('offline', handleNetworkChange);
@@ -215,6 +217,12 @@ const Meeting: React.FC = () => {
     onSignalr((item: any) => {
       switch (item.key) {
         case 'ReceiveMessage':
+          let meetingUserChatDom = document.getElementById('meetingUserChat') as HTMLElement;
+          if (!meetingUserChatDom) {
+            let storageNoViewChatList = Number(storage.getItem('noViewChatList'))
+            storage.setItem('noViewChatList', storageNoViewChatList += 1)
+            setNoViewChatList(storageNoViewChatList)
+          }
           setChatList((newChatList: any) => [...newChatList, item])
           break;
         case 'RefreshUserList':
@@ -290,12 +298,16 @@ const Meeting: React.FC = () => {
           userList: statusList.userList ? false : true,
           userChatList: false,
         })
+        storage.setItem('noViewChatList', 0)
+        setNoViewChatList(0)
         break;
       case '聊天':
         setStatusList({
           userList: false,
           userChatList: statusList.userChatList ? false : true,
         })
+        storage.setItem('noViewChatList', 0)
+        setNoViewChatList(0)
         break;
       case '共享屏幕':
         getDesktopCapturerVideo()
@@ -722,7 +734,7 @@ const Meeting: React.FC = () => {
                       </div>
                     </div>
                     :
-                    <div className={styles.meetingUserChat}>
+                    <div className={styles.meetingUserChat} id='meetingUserChat'>
                       <div className={styles.meetingUserChatTitle}>
                         <span>聊天</span>
                         <img src={ImageUrl.icon18} alt="" className='drag' onClick={() => {
@@ -792,6 +804,7 @@ const Meeting: React.FC = () => {
                           <img src={row.active ? row.iconActive : row.icon} alt="" />
                           <span>{row.title}</span>
                           {row.title === '成员列表' ? <div>{roomUserList.length}</div> : null}
+                          {row.title === '聊天' && noViewChatList > 0 ? <div>{noViewChatList}</div> : null}
                         </div>
                     )
                   })}