聊天优化

src/App.tsx

@@ -21,6 +21,7 @@ import path from "path";
 import ShareScreenWindow from "@/page/Meeting/ShareScreenWindow";
 import UserListWindow from "@/page/Meeting/UserListWindow";
 import ChatSmallWindow from "./page/Meeting/ChatSmallWindow";
+import ChatBigWindow from "./page/Meeting/ChatBigWindow";
 const fs = require('fs').promises;
 const { exec } = require('child_process');
 const App: React.FC = () => {
@@ -35,7 +36,7 @@ const App: React.FC = () => {
     });
     const [spinning, setSpinning] = useState(false);
     const [isState, setIsState] = useState(true);
-    const urlHashArr = ['#/userListWindow', '#/shareScreenWindow', '#/chatSmallWindow']
+    const urlHashArr = ['#/userListWindow', '#/shareScreenWindow', '#/chatSmallWindow', '#/chatBigWindow']
     if (urlHashArr.indexOf(location.hash) == -1) {
         useEffect(() => {
             let userInfo = JSON.parse(storage.getItem('user') as string)
@@ -251,6 +252,7 @@ const App: React.FC = () => {
                 <Route path='/shareScreenWindow' element={<ShareScreenWindow />} />
                 <Route path='/userListWindow' element={<UserListWindow />} />
                 <Route path='/chatSmallWindow' element={<ChatSmallWindow />} />
+                <Route path='/chatBigWindow' element={<ChatBigWindow />} />
                 <Route path='*' element={<NotFound />} />
             </Routes>
             <Spin spinning={spinning} fullscreen />

src/page/Meeting/ChatBigWindow/index.module.scss

@@ -0,0 +1,133 @@
+.chatBigWindow {
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 10px 0;
+
+  .chatBigWindowTitle {
+    background-color: #16191E;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 10px 10px;
+
+    >span {
+      color: #EEEEEE;
+      font-size: 18px;
+    }
+
+    >img {
+      cursor: pointer;
+    }
+  }
+
+  .chatBigWindowContent {
+    flex-grow: 1;
+    height: 0px;
+    overflow-y: auto;
+    background-color: rgb(31, 33, 37);
+    padding: 10px;
+
+    .chatBigWindowContentLeft {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+
+      >div:nth-child(1) {
+        display: flex;
+        align-items: center;
+
+        >span {
+          font-size: 14px;
+          color: #F3F3F5;
+          margin-left: 4px;
+        }
+
+        >div {}
+      }
+
+      >div:nth-child(2) {
+        background-color: #5575F2;
+        color: #F3F3F5;
+        max-width: 266px;
+        padding: 10px;
+        box-sizing: border-box;
+        border-radius: 0 25px 25px 25px;
+        margin: 10px 0 10px 40px;
+        font-size: 14px;
+      }
+    }
+
+    .chatBigWindowContentRight {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+
+      >div:nth-child(1) {
+        display: flex;
+        align-items: center;
+        flex-direction: row-reverse;
+
+        >span {
+          font-size: 14px;
+          color: #F3F3F5;
+        }
+
+        >div {
+          margin-left: 4px;
+        }
+      }
+
+      >div:nth-child(2) {
+        background-color: #464E6B;
+        color: #F3F3F5;
+        max-width: 266px;
+        padding: 10px;
+        box-sizing: border-box;
+        border-radius: 25px 0 25px 25px;
+        margin: 10px 40px 10px 0;
+        font-size: 14px;
+      }
+    }
+  }
+
+  .chatBigWindowButton {
+    display: flex;
+    flex-shrink: 0;
+    flex-wrap: wrap;
+    padding: 10px;
+    box-sizing: border-box;
+    background-color: rgb(31, 33, 37);
+
+    >button {
+      margin: 4px 4px 0;
+    }
+  }
+
+  .chatBigWindowInput {
+    flex-shrink: 0;
+    padding: 10px 10px;
+    background-color: #16191E;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+  }
+}
+
+.chatBigWindowInputPopover {
+  display: flex;
+  flex-direction: column;
+
+  >button {
+    margin-bottom: 4px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

src/page/Meeting/ChatBigWindow/index.tsx

@@ -0,0 +1,263 @@
+import styles from '@/page/Meeting/ChatBigWindow/index.module.scss'
+import ImageUrl from '@/utils/package/imageUrl';
+import { useEffect, useState } from "react";
+import { storage } from '@/utils';
+import { setKeyOpenChildWindow } from '@/utils/package/public';
+import { Button, Input, Modal, Popover } from 'antd';
+import { role } from '@/config/role';
+import { GetRoomUserItem } from '@/api/Meeting';
+import Avatar from '@/components/Avatar';
+import dayjs from 'dayjs';
+import { ExclamationCircleFilled } from '@ant-design/icons';
+const { confirm } = Modal;
+const ChatBigWindow: React.FC = () => {
+  const [inputValue, setInputValue] = useState<string>('')
+  const [chatLists, setChatLists] = useState<any>([])
+  const [user, setUser] = useState<any>({});
+  const [roomUserItem, setRoomUserItem] = useState<any>(null)
+  const [commonlyChatList] = useState<any>([
+    '能听到我说话吗？',
+    '听得到',
+    '听不到',
+    '我要发言',
+  ])
+  const userInfo = JSON.parse(storage.getItem('user') as string)
+  const stateInfo = JSON.parse(storage.getItem('stateInfo') as string)
+  const channel = new BroadcastChannel('meeting_channel');
+  useEffect(() => {
+    setUser(userInfo)
+    channel.onmessage = function (event) {
+      const { type, chatList } = event.data;
+      switch (type) {
+        case 'chatList':
+          setChatLists(chatList)
+          setTimeout(() => {
+            const chatBigWindowView = document.getElementById('chatBigWindowView') as HTMLElement;
+            if (chatBigWindowView) {
+              chatBigWindowView.scrollTop = chatBigWindowView.scrollHeight;
+            }
+          }, 100)
+          break;
+      }
+    }
+  }, []);
+
+  return (
+    <>
+      <div className={`${styles.chatBigWindow}`}>
+        <div className={styles.chatBigWindowTitle}>
+          <span>聊天</span>
+          <img src={ImageUrl.icon18} className='drag' alt="" onClick={() => {
+            window.electron.closeChildWindow('chatBigWindow')
+            setKeyOpenChildWindow('chatBigWindow', false)
+          }} />
+        </div>
+        <div className={`${styles.chatBigWindowContent} drag`} id='chatBigWindowView'>
+          {chatLists.map((item: any, index: number) =>
+            <div
+              key={index}
+              className={`${item.uid !== user.uid ? styles.chatBigWindowContentLeft : styles.chatBigWindowContentRight}`}>
+              {role.ID.includes(user.roleId) ? <Popover
+                placement="bottom"
+                title={''}
+                onOpenChange={(e: boolean) => {
+                  if (e) {
+                    GetRoomUserItem(stateInfo.channelId, item.uid).then((res: any) => {
+                      if (res.code === 200) {
+                        setRoomUserItem(res.data)
+                      }
+                    })
+                  } else {
+                    setRoomUserItem(null)
+                  }
+                }}
+                content={
+                  roomUserItem ? <div className={styles.chatBigWindowInputPopover}>
+                    {roomUserItem.isRoomManager || role.ID.includes(roomUserItem.roleId) ? <Button
+                      type="primary"
+                      className='m-ant-btn'
+                      size={'small'}
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        channel.postMessage({
+                          type: 'chatBigWindowSetAllUserLook',
+                          chatBigWindowSetAllUserLook: {
+                            roomUserItem,
+                          }
+                        });
+                      }}
+                    >全员看Ta</Button> : null}
+                    {roomUserItem.uid !== user.uid && !role.ID.includes(roomUserItem.roleId) ? <Button
+                      type="primary"
+                      className='m-ant-btn'
+                      size={'small'}
+                      onClick={async (event) => {
+                        event.stopPropagation();
+                        if (roomUserItem.isRoomManager) {
+                          channel.postMessage({
+                            type: 'chatBigWindowDeleteRoomManager',
+                            chatBigWindowDeleteRoomManager: {
+                              uid: roomUserItem.uid
+                            }
+                          });
+                        } else {
+                          channel.postMessage({
+                            type: 'chatBigWindowPostRoomManager',
+                            chatBigWindowPostRoomManager: {
+                              uid: roomUserItem.uid
+                            }
+                          });
+                        }
+                        await GetRoomUserItem(stateInfo.channelId, item.uid).then((res: any) => {
+                          if (res.code === 200) {
+                            setRoomUserItem(res.data)
+                          }
+                        })
+                      }}
+                    >{roomUserItem.isRoomManager ? '取消发言人' : '设为发言人'}</Button> : null}
+                    {roomUserItem.isRoomManager ? <Button
+                      type="primary"
+                      className='m-ant-btn'
+                      size={'small'}
+                      onClick={async (event) => {
+                        event.stopPropagation();
+                        channel.postMessage({
+                          type: 'chatBigWindowPostOpenMicr',
+                          chatBigWindowPostOpenMicr: {
+                            uid: roomUserItem.uid,
+                            enableMicr: !roomUserItem.enableMicr
+                          }
+                        });
+                        await GetRoomUserItem(stateInfo.channelId, item.uid).then((res: any) => {
+                          if (res.code === 200) {
+                            setRoomUserItem(res.data)
+                          }
+                        })
+                      }}
+                    >{roomUserItem.enableMicr ? '静音' : '解除静音'}</Button> : null}
+                    {roomUserItem.isRoomManager ? <Button
+                      type="primary"
+                      className='m-ant-btn'
+                      size={'small'}
+                      onClick={async (event) => {
+                        event.stopPropagation();
+                        channel.postMessage({
+                          type: 'chatBigWindowPostOpenCamera',
+                          chatBigWindowPostOpenCamera: {
+                            uid: roomUserItem.uid,
+                            enableMicr: !roomUserItem.enableCamera
+                          }
+                        });
+                        await GetRoomUserItem(stateInfo.channelId, item.uid).then((res: any) => {
+                          if (res.code === 200) {
+                            setRoomUserItem(res.data)
+                          }
+                        })
+                      }}
+                    >{roomUserItem.enableCamera ? '关闭视频' : '打开视频'}</Button> : null}
+                    {roomUserItem.uid !== user.uid ? <Button
+                      type="primary"
+                      className='m-ant-btn'
+                      size={'small'}
+                      onClick={() => {
+                        channel.postMessage({
+                          type: 'chatBigWindowEquipmentManagement',
+                          chatBigWindowEquipmentManagement: {
+                            uid: roomUserItem.uid,
+                            userName: roomUserItem.userName
+                          }
+                        });
+                      }}
+                    >设备管理</Button> : null}
+                    {roomUserItem.uid !== user.uid ? <Button
+                      type="primary"
+                      style={{ backgroundColor: '#EC3C3C' }}
+                      size={'small'}
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        confirm({
+                          title: '移出会议',
+                          icon: <ExclamationCircleFilled />,
+                          content: `确定将用户${item.userName}移出会议？`,
+                          centered: true,
+                          okText: '确定',
+                          cancelText: '取消',
+                          async onOk() {
+                            channel.postMessage({
+                              type: 'chatBigWindowGetRoomKickout',
+                              chatBigWindowGetRoomKickout: {
+                                uid: item.uid
+                              }
+                            });
+                          },
+                          onCancel() {
+
+                          },
+                        });
+                      }}
+                    >移出会议</Button> : null}
+                  </div> : <div style={{ color: 'white' }}>用户不在房间内</div>
+                }>
+                <div>
+                  <div><Avatar name={item.userName} /></div>
+                  {item.uid !== user.uid ?
+                    <span>{item.userName} <span style={{ fontSize: '12px', color: '#ccc', marginLeft: '4px' }}>{dayjs(item.timestamp).format('HH:mm:ss')}</span></span> :
+                    <span> <span style={{ fontSize: '12px', color: '#ccc', marginRight: '4px' }}>{dayjs(item.timestamp).format('HH:mm:ss')} </span>{item.userName}</span>
+                  }
+
+                </div>
+              </Popover> : <div>
+                <div><Avatar name={item.userName} /></div>
+                {item.uid !== user.uid ?
+                  <span>{item.userName}<span style={{ fontSize: '12px', color: '#ccc', marginLeft: '4px' }}>{dayjs(item.timestamp).format('HH:mm:ss')}</span></span> :
+                  <span><span style={{ fontSize: '12px', color: '#ccc', marginRight: '4px' }}>{dayjs(item.timestamp).format('HH:mm:ss')} </span>{item.userName}</span>
+                }
+              </div>}
+              <div>{item.message}</div>
+            </div>
+          )}
+        </div>
+        <div className={`${styles.chatBigWindowButton} drag`}>
+          {
+            commonlyChatList.map((item: string, index: number) => {
+              return <Button
+                key={index}
+                type="primary"
+                className='m-ant-btn'
+                onClick={() => {
+                  channel.postMessage({
+                    type: 'chatBigWindowSendChannelMsg',
+                    chatBigWindowSendChannelMsg: {
+                      msg: item,
+                    }
+                  });
+                }}
+              >{item}</Button>
+            })
+          }
+        </div>
+        <div className={`${styles.chatBigWindowInput} drag`}>
+          <Input.TextArea
+            placeholder="请输入内容"
+            style={{ flexGrow: 1 }}
+            value={inputValue}
+            onChange={(e) => {
+              setInputValue(e.target.value)
+            }}
+            autoSize={{ minRows: 3, maxRows: 3 }} />
+          <Button type="primary" className='m-ant-btn' style={{ flexShrink: 0, marginTop: '4px' }} onClick={() => {
+            channel.postMessage({
+              type: 'chatBigWindowSendChannelMsg',
+              chatBigWindowSendChannelMsg: {
+                msg: inputValue,
+              }
+            });
+            setInputValue('')
+          }}>发送</Button>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default ChatBigWindow

src/page/Meeting/ChatSmallWindow/index.module.scss

@@ -8,10 +8,9 @@
   >div:nth-child(1) {
     flex-grow: 1;
     overflow-y: hidden;
-    height: 80%;
+    max-height: 80%;
     padding: 4px;
     box-sizing: border-box;
-    overflow-y: auto;
 
     .chatSmallWindowContentLeft {
       display: flex;

src/page/Meeting/ChatSmallWindow/index.tsx

@@ -14,10 +14,12 @@ const ChatSmallWindow: React.FC = () => {
       switch (type) {
         case 'chatList':
           setChatLists(chatList)
-          const chatSmallWindowView = document.getElementById('chatSmallWindowView') as HTMLElement;
+          setTimeout(() => {
-          if (chatSmallWindowView) {
+            const chatSmallWindowView = document.getElementById('chatSmallWindowView') as HTMLElement;
-            chatSmallWindowView.scrollTop = chatSmallWindowView.scrollHeight;
+            if (chatSmallWindowView) {
-          }
+              chatSmallWindowView.scrollTop = chatSmallWindowView.scrollHeight;
+            }
+          }, 100)
           break;
       }
     }
@@ -27,7 +29,7 @@ const ChatSmallWindow: React.FC = () => {
   return (
     <>
       <div className={styles.chatSmallWindow}>
-        <div className='drag' id='chatSmallWindowView'>
+        <div id='chatSmallWindowView'>
           {chatLists.map((item: any) =>
             <div className={`${item.uid !== userInfo.uid ? styles.chatSmallWindowContentLeft : styles.chatSmallWindowContentRight}`}>
               <div>

src/page/Meeting/ShareScreenWindow/index.tsx

@@ -132,9 +132,21 @@ const ShareScreenWindow: React.FC = () => {
                           type: 'shareScreenWindowSetting'
                         });
                         break;
+                      case '聊天':
+                        const chatBigWindow = await getKeyOpenChildWindow('chatBigWindow')
+                        if (!chatBigWindow) {
+                          window.electron.createChildWindow({
+                            url: location.origin + `/#/chatBigWindow`,
+                            width: 440,
+                            height: 640,
+                            key: 'chatBigWindow',
+                          })
+                          setKeyOpenChildWindow('chatBigWindow', true)
+                        }
+                        break;
                       case '成员列表':
-                        const isOpen = await getKeyOpenChildWindow('userListWindow')
+                        const userListWindow = await getKeyOpenChildWindow('userListWindow')
-                        if (!isOpen) {
+                        if (!userListWindow) {
                           window.electron.createChildWindow({
                             url: location.origin + `/#/userListWindow`,
                             width: 340,

src/page/Meeting/index.tsx

@@ -212,7 +212,15 @@ const Meeting: React.FC = () => {
         userListWindowPostRoomManager,
         userListWindowGetRoomKickout,
         shareScreenWindowEquipmentManagement,
-        chatSmallWindowSendChannelMsg
+        chatSmallWindowSendChannelMsg,
+        chatBigWindowSetAllUserLook,
+        chatBigWindowDeleteRoomManager,
+        chatBigWindowPostRoomManager,
+        chatBigWindowPostOpenMicr,
+        chatBigWindowPostOpenCamera,
+        chatBigWindowEquipmentManagement,
+        chatBigWindowGetRoomKickout,
+        chatBigWindowSendChannelMsg,
       } = event.data;
       switch (type) {
         case 'shareScreenWindowClose':
@@ -278,6 +286,39 @@ const Meeting: React.FC = () => {
         case 'chatSmallWindowSendChannelMsg':
           sendMsg(chatSmallWindowSendChannelMsg.msg)
           break;
+        case 'chatBigWindowSetAllUserLook':
+          setAllUserLook(chatBigWindowSetAllUserLook.roomUserItem)
+          break;
+        case 'chatBigWindowDeleteRoomManager':
+          DeleteRoomManager({
+            roomId: state.roomId,
+            roomNum: state.channelId,
+            userId: chatBigWindowDeleteRoomManager.uid
+          })
+          break;
+        case 'chatBigWindowPostRoomManager':
+          postRoomManager({
+            roomId: state.roomId,
+            roomNum: state.channelId,
+            userId: chatBigWindowPostRoomManager.uid
+          })
+          break;
+        case 'chatBigWindowPostOpenMicr':
+          postOpenMicr(chatBigWindowPostOpenMicr.enableMicr, chatBigWindowPostOpenMicr.uid)
+          break;
+        case 'chatBigWindowPostOpenCamera':
+          postOpenCamera(chatBigWindowPostOpenCamera.enableCamera, chatBigWindowPostOpenCamera.uid)
+          break;
+        case 'chatBigWindowEquipmentManagement':
+          equipmentManagement(chatBigWindowEquipmentManagement.uid, chatBigWindowEquipmentManagement.userName)
+          window.electron.mainWindowCenter()
+          break;
+        case 'chatBigWindowGetRoomKickout':
+          GetRoomKickout(state.channelId, chatBigWindowGetRoomKickout.uid)
+          break;
+        case 'chatBigWindowSendChannelMsg':
+          sendMsg(chatBigWindowSendChannelMsg.msg)
+          break;
       }
     }
     time = setInterval(() => {