src/page/Meeting/index.tsx

@@ -166,6 +166,7 @@ const Meeting: React.FC = () => {
   const [currentVideoId, setCurrentVideoId] = useState('')
   const [currentVideoUid, setCurrentVideoUid] = useState('')
   let [currentSeconds, setCurrentSeconds] = useState(0)
+  const [isNetworkQuality, setIsNetworkQuality] = useState(false)
   const [currentEffective, setCurrentEffective] = useState(3)
   const [networkQuality, setNetworkQuality] = useState({
     level: '佳',
@@ -534,12 +535,14 @@ const Meeting: React.FC = () => {
             level: '非常差',
             text: '完全无法沟通'
           })
+          setIsNetworkQuality(true)
           setCurrentEffective(1)
         } else if (data.lastmileDelay < 500 && data.lastmileDelay > 100) {
           setNetworkQuality({
             level: '差',
             text: '勉强能沟通但不顺畅'
           })
+          setIsNetworkQuality(true)
           setCurrentEffective(2)
         }
       } else {
@@ -2310,6 +2313,7 @@ const Meeting: React.FC = () => {
     <>
       <div className={styles.meeting} onClick={() => {
         setContextMenu('')
+        setIsNetworkQuality(false)
       }}>
         {isScreenCapture ? <div className={`${styles.meetingAbsolute}`} id='meetingAbsoluteVideo'>
           <div style={{ top: '0px' }} className={`${styles.meetingAbsoluteText}`}>{currentSpeakUser.length ? '正在说话:' + currentSpeakUser.join(';') : '正在说话:'}</div>
@@ -2424,8 +2428,9 @@ const Meeting: React.FC = () => {
         <div className={styles.meetingHeader}>
           <div>
             {isScreenCapture ? null : <Popover
+              open={isNetworkQuality}
               content={
-                <div style={{ color: 'white' }}>
+                <div style={{ color: 'white' }} onMouseLeave={() => setIsNetworkQuality(false)}>
                   <div>
                     <span>网络质量：</span>
                     <span>{networkQuality.level}</span>
@@ -2463,7 +2468,10 @@ const Meeting: React.FC = () => {
               title=""
               trigger="hover"
             >
-              <div className='drag'>
+              <div className='drag'
+                onMouseEnter={() => setIsNetworkQuality(true)}
+
+              >
                 {networkIcon(currentEffective)}
                 <span>详情</span>
               </div>