图标点击优化

src/page/Meeting/index.tsx

@@ -39,75 +39,96 @@ const Meeting: React.FC = () => {
   const [sharedScreenList, setSharedScreenList] = useState<any>([]);
   const [sharedScreenItem, setSharedScreenItem] = useState<any>('');
   const [textMsg, setTextMsg] = useState('');
-  const [footerList, setFooterList] = useState([
+  const [footerList, setFooterList] = useState<any>([
     [
       {
         title: '静音',
         icon: ImageUrl.icon22,
         iconActive: ImageUrl.icon22Active,
         active: false,
+        select: false,
       },
       {
         title: '关闭视频',
         icon: ImageUrl.icon23,
         iconActive: ImageUrl.icon23Active,
         active: false,
+        select: false,
       },
       {
         title: '申请发言',
         icon: ImageUrl.icon47,
         iconActive: ImageUrl.icon47Active,
         active: false,
+        select: false,
       },
     ],
     [
       {
         title: '共享屏幕',
         icon: ImageUrl.icon24,
+        iconSelect: ImageUrl.icon24Select,
         active: false,
+        select: false,
       },
       {
         title: '共享文件',
         icon: ImageUrl.icon25,
+        iconSelect: ImageUrl.icon25Select,
         active: false,
+        select: false,
       },
       {
         title: '邀请人员',
         icon: ImageUrl.icon26,
+        iconSelect: ImageUrl.icon26Select,
         active: false,
+        select: false,
       },
       {
         title: '会议监控',
         icon: ImageUrl.icon48,
+        iconSelect: ImageUrl.icon48Select,
         active: false,
+        select: false,
       },
       {
         title: '录制',
         icon: ImageUrl.icon27,
+        iconSelect: ImageUrl.icon27Select,
         iconActive: ImageUrl.icon27Active,
         active: false,
+        select: false,
       },
       {
         title: '设置',
         icon: ImageUrl.icon28,
+        iconSelect: ImageUrl.icon28Select,
         active: false,
+        select: false,
       },
       {
         title: '结束',
         icon: ImageUrl.icon29,
+        iconSelect: ImageUrl.icon29Select,
         active: false,
+        select: false,
       },
     ],
     [
       {
         title: '成员列表',
         icon: ImageUrl.icon30,
+        iconSelect: ImageUrl.icon30Select,
         active: false,
+        select: false,
       },
       {
         title: '聊天',
         icon: ImageUrl.icon31,
+        iconSelect: ImageUrl.icon31Select,
         active: false,
+        select: false,
       },
     ],
   ])
@@ -754,6 +775,15 @@ const Meeting: React.FC = () => {
     const secondsRemaining = duration.seconds(); // 剩余的秒数
     return `${hours > 9 ? hours : '0' + hours}:${minutes > 9 ? minutes : '0' + minutes}:${secondsRemaining > 9 ? secondsRemaining : '0' + secondsRemaining}`
   }
+
+  const changeFooterListSelect = (row: any, itemIndex: number, rowIndex: number, bool: boolean): void => {
+    let arr = ['静音', '解除静音', '关闭视频', '开启视频']
+    if (arr.indexOf(row.title) === -1) {
+      const footerListTemplate = [...footerList]
+      footerListTemplate[itemIndex][rowIndex].select = bool;
+      setFooterList(footerListTemplate)
+    }
+  }
   // 操作按钮
   const changeStatusList = async (row: any, itemIndex: number, rowIndex: number): Promise<void> => {
     const footerListTemplate = [...footerList]
@@ -823,40 +853,40 @@ const Meeting: React.FC = () => {
         })
         break;
       case '录制':
-        window.electron.getSources().then((sources: any) => {
-          const screenId = sources[0].id;
-          navigator.mediaDevices.getUserMedia({
-            audio: {
-              mandatory: {
-                chromeMediaSource: 'desktop',
-                chromeMediaSourceId: screenId,
-              }
-            } as any,
-            video: {
-              mandatory: {
-                chromeMediaSource: 'desktop',
-                chromeMediaSourceId: screenId,
-              }
-            } as any
-          }).then(async (steam) => {
-            try {
-              const audioTracks = await navigator.mediaDevices
-                .getUserMedia({ audio: true, video: false })
-                .then(audioStream => audioStream.getAudioTracks()[0]);
-              steam.addTrack(audioTracks);
-            } catch (error) {
-
-            }
-            setMediaStream(steam)
-            setRecorder(new MediaRecorder(steam))
-          })
-        })
         const setting = await JSON.parse(storage.getItem('setting') as string)
         try {
           await fs.access(setting.recordingFilesPath, fs.constants.F_OK)
           footerListTemplate[itemIndex][rowIndex].title = '录制中'
           footerListTemplate[itemIndex][rowIndex].active = true
           setFooterList(footerListTemplate)
+          window.electron.getSources().then((sources: any) => {
+            const screenId = sources[0].id;
+            navigator.mediaDevices.getUserMedia({
+              audio: {
+                mandatory: {
+                  chromeMediaSource: 'desktop',
+                  chromeMediaSourceId: screenId,
+                }
+              } as any,
+              video: {
+                mandatory: {
+                  chromeMediaSource: 'desktop',
+                  chromeMediaSourceId: screenId,
+                }
+              } as any
+            }).then(async (steam) => {
+              try {
+                const audioTracks = await navigator.mediaDevices
+                  .getUserMedia({ audio: true, video: false })
+                  .then(audioStream => audioStream.getAudioTracks()[0]);
+                steam.addTrack(audioTracks);
+              } catch (error) {
+
+              }
+              setMediaStream(steam)
+              setRecorder(new MediaRecorder(steam))
+            })
+          })
         } catch (error: any) {
           if (error.code === 'ENOENT') {
             message.error('文件夹不存在！')
@@ -1723,10 +1753,10 @@ const Meeting: React.FC = () => {
             }
           </div>
           <div className={styles.meetingContentFooter}>
-            {footerList.map((item, itemIndex) => {
+            {footerList.map((item: any, itemIndex: number) => {
               return (
                 <div key={itemIndex}>
-                  {item.map((row, rowIndex) => {
+                  {item.map((row: any, rowIndex: number) => {
                     switch (row.title) {
                       case '结束':
                         return <Popover key={rowIndex}
@@ -1759,8 +1789,13 @@ const Meeting: React.FC = () => {
                           open={open}
                           onOpenChange={() => setOpen(true)}
                         >
-                          <div className='drag'>
-                            <img src={row.active ? row.iconActive : row.icon} alt="" />
+                          <div
+                            className='drag'
+                            onMouseDown={() => changeFooterListSelect(row, itemIndex, rowIndex, true)}
+                            onMouseUp={() => changeFooterListSelect(row, itemIndex, rowIndex, false)}
+                            onMouseLeave={() => changeFooterListSelect(row, itemIndex, rowIndex, false)}
+                          >
+                            {row.select ? <img src={row.iconSelect} alt="" /> : <img src={row.active ? row.iconActive : row.icon} alt="" />}
                             <span>{row.title}</span>
                           </div>
                         </Popover>
@@ -1797,17 +1832,40 @@ const Meeting: React.FC = () => {
                         return null
                       case '会议监控':
                         if (user.roleId === '1') {
-                          return <div className='drag' onClick={() => changeStatusList(row, itemIndex, rowIndex)} key={rowIndex}>
-                            <img src={row.active ? row.iconActive : row.icon} alt="" />
+                          return <div
+                            className='drag'
+                            onClick={() => changeStatusList(row, itemIndex, rowIndex)}
+                            onMouseDown={() => changeFooterListSelect(row, itemIndex, rowIndex, true)}
+                            onMouseUp={() => changeFooterListSelect(row, itemIndex, rowIndex, false)}
+                            onMouseLeave={() => changeFooterListSelect(row, itemIndex, rowIndex, false)}
+                            key={rowIndex}>
+                            {row.select ? <img src={row.iconSelect} alt="" /> : <img src={row.active ? row.iconActive : row.icon} alt="" />}
                             <span>{row.title}</span>
                           </div>
                         }
                         return null
-                      default:
-                        return <div className='drag' onClick={() => changeStatusList(row, itemIndex, rowIndex)} key={rowIndex}>
-                          <img src={row.active ? row.iconActive : row.icon} alt="" />
+                      case '成员列表':
+                        return <div
+                          className='drag'
+                          onClick={() => changeStatusList(row, itemIndex, rowIndex)}
+                          onMouseDown={() => changeFooterListSelect(row, itemIndex, rowIndex, true)}
+                          onMouseUp={() => changeFooterListSelect(row, itemIndex, rowIndex, false)}
+                          onMouseLeave={() => changeFooterListSelect(row, itemIndex, rowIndex, false)}
+                          key={rowIndex}>
+                          {statusList.userList ? <img src={row.iconSelect} alt="" /> : row.select ? <img src={row.iconSelect} alt="" /> : <img src={row.active ? row.iconActive : row.icon} alt="" />}
                           <span>{row.title}</span>
                           {row.title === '成员列表' ? <div>{roomUserList.filter((item: any) => item.isRoom).length}</div> : null}
+                        </div>
+                      case '聊天':
+                        return <div
+                          className='drag'
+                          onClick={() => changeStatusList(row, itemIndex, rowIndex)}
+                          onMouseDown={() => changeFooterListSelect(row, itemIndex, rowIndex, true)}
+                          onMouseUp={() => changeFooterListSelect(row, itemIndex, rowIndex, false)}
+                          onMouseLeave={() => changeFooterListSelect(row, itemIndex, rowIndex, false)}
+                          key={rowIndex}>
+                          {statusList.userChatList ? <img src={row.iconSelect} alt="" /> : row.select ? <img src={row.iconSelect} alt="" /> : <img src={row.active ? row.iconActive : row.icon} alt="" />}
+                          <span>{row.title}</span>
                           {row.title === '聊天' && noViewChatList > 0 ? <div
                             style={{
                               backgroundColor: 'red',
@@ -1815,6 +1873,17 @@ const Meeting: React.FC = () => {
                             }}
                           >{noViewChatList}</div> : null}
                         </div>
+                      default:
+                        return <div
+                          className='drag'
+                          onClick={() => changeStatusList(row, itemIndex, rowIndex)}
+                          onMouseDown={() => changeFooterListSelect(row, itemIndex, rowIndex, true)}
+                          onMouseUp={() => changeFooterListSelect(row, itemIndex, rowIndex, false)}
+                          onMouseLeave={() => changeFooterListSelect(row, itemIndex, rowIndex, false)}
+                          key={rowIndex}>
+                          {row.select ? <img src={row.iconSelect} alt="" /> : <img src={row.active ? row.iconActive : row.icon} alt="" />}
+                          <span>{row.title}</span>
+                        </div>
                     }
                   })}
                 </div>

src/utils/package/imageUrl.ts

@@ -30,14 +30,22 @@ import icon22Active from '@/assets/icon22-active.png'
 import icon23 from '@/assets/icon23.png'
 import icon23Active from '@/assets/icon23-active.png'
 import icon24 from '@/assets/icon24.png'
+import icon24Select from '@/assets/icon24-select.png'
 import icon25 from '@/assets/icon25.png'
+import icon25Select from '@/assets/icon25-select.png'
 import icon26 from '@/assets/icon26.png'
+import icon26Select from '@/assets/icon26-select.png'
 import icon27 from '@/assets/icon27.png'
 import icon27Active from '@/assets/icon27-active.png'
+import icon27Select from '@/assets/icon27-select.png'
 import icon28 from '@/assets/icon28.png'
+import icon28Select from '@/assets/icon28-select.png'
 import icon29 from '@/assets/icon29.png'
+import icon29Select from '@/assets/icon29-select.png'
 import icon30 from '@/assets/icon30.png'
+import icon30Select from '@/assets/icon30-select.png'
 import icon31 from '@/assets/icon31.png'
+import icon31Select from '@/assets/icon31-select.png'
 import icon32 from '@/assets/icon32.png'
 import icon33 from '@/assets/icon33.png'
 import icon34 from '@/assets/icon34.png'
@@ -61,6 +69,7 @@ import icon46 from '@/assets/icon46.png'
 import icon47 from '@/assets/icon47.png'
 import icon47Active from '@/assets/icon47-active.png'
 import icon48 from '@/assets/icon48.png'
+import icon48Select from '@/assets/icon48-select.png'
 export default {
   error,
   icon,
@@ -94,14 +103,22 @@ export default {
   icon23,
   icon23Active,
   icon24,
+  icon24Select,
   icon25,
+  icon25Select,
   icon26,
+  icon26Select,
   icon27,
   icon27Active,
+  icon27Select,
   icon28,
+  icon28Select,
   icon29,
+  icon29Select,
   icon30,
+  icon30Select,
   icon31,
+  icon31Select,
   icon32,
   icon33,
   icon34,
@@ -125,4 +142,5 @@ export default {
   icon47,
   icon47Active,
   icon48,
+  icon48Select
 }