main.js

@@ -334,7 +334,7 @@ app.on('ready', () => {
         ipcMain.handle('closeChildWindow', (event, key) => {
             if (key === 'shareScreenWindow') {
                 for (const k in childWindow) {
-                    if (childWindow[k]){
+                    if (childWindow[k]) {
                         childWindow[k].close()
                         childWindow[k] = ""
                     }
@@ -424,12 +424,20 @@ function quitAndInstall() {
 
 function windowOperation(config) {
     const child = childWindow[config.key];
-    child.setResizable(false)
-    if (config.key === 'shareScreenWindow') {
     const display = screen.getDisplayMatching({ ...child.getBounds() });
-        const x = Math.round((display.workArea.width - child.getSize()[0]) / 2);
+    const { width, height } = display.size
+    let x, y;
+    child.setResizable(false)
+    switch (config.key) {
+        case 'shareScreenWindow':
+            x = Math.round((display.workArea.width - child.getSize()[0]) / 2);
             child.setPosition(x, 0);
             mainWindowHide()
+            break;
+        case 'chatSmallWindow':
+            y = height - child.getSize()[1];
+            child.setPosition(40, y - 200);
+            break;
     }
 }
 // 主窗口居中

src/App.tsx

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

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

@@ -0,0 +1,80 @@
+.chatSmallWindow {
+  color: white;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  >div:nth-child(1) {
+    flex-grow: 1;
+    overflow-y: hidden;
+    height: 80%;
+    padding: 4px;
+    box-sizing: border-box;
+    overflow-y: auto;
+
+    .chatSmallWindowContentLeft {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+
+      >div:nth-child(1) {
+        display: flex;
+        align-items: center;
+
+        >span {
+          font-size: 14px;
+          color: black;
+          margin-left: 4px;
+        }
+
+        >div {}
+      }
+
+      >div:nth-child(2) {
+        background-color: #5575F2;
+        color: #F3F3F5;
+        padding: 4px;
+        box-sizing: border-box;
+        border-radius: 0 15px 15px 15px;
+        margin: 0 0 10px 40px;
+        font-size: 12px;
+      }
+    }
+
+    .chatSmallWindowContentRight {
+      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: black;
+        }
+
+        >div {
+          margin-left: 4px;
+        }
+      }
+
+      >div:nth-child(2) {
+        background-color: #464E6B;
+        color: #F3F3F5;
+        padding: 4px;
+        box-sizing: border-box;
+        border-radius: 15px 0 15px 15px;
+        margin: 0 40px 10px 0;
+        font-size: 14px;
+      }
+    }
+  }
+
+  >div:nth-child(2) {
+    flex-shrink: 0;
+  }
+}

src/page/Meeting/ChatSmallWindow/index.tsx

@@ -0,0 +1,84 @@
+import styles from '@/page/Meeting/ChatSmallWindow/index.module.scss'
+import { Input } from 'antd';
+import { useEffect, useState } from "react";
+import Avatar from '@/components/Avatar';
+import { storage } from '@/utils';
+const ChatSmallWindow: React.FC = () => {
+  const [inputValue, setInputValue] = useState<string>('')
+  const [chatLists, setChatLists] = useState<any>([])
+  const userInfo = JSON.parse(storage.getItem('user') as string)
+  const channel = new BroadcastChannel('meeting_channel');
+  useEffect(() => {
+    channel.onmessage = function (event) {
+      const { type, chatList } = event.data;
+      switch (type) {
+        case 'chatList':
+          setChatLists(chatList)
+          const chatSmallWindowView = document.getElementById('chatSmallWindowView') as HTMLElement;
+          if (chatSmallWindowView) {
+            chatSmallWindowView.scrollTop = chatSmallWindowView.scrollHeight;
+          }
+          break;
+      }
+    }
+  }, []);
+
+
+  return (
+    <>
+      <div className={styles.chatSmallWindow}>
+        <div className='drag' id='chatSmallWindowView'>
+          {chatLists.map((item: any) =>
+            <div className={`${item.uid !== userInfo.uid ? styles.chatSmallWindowContentLeft : styles.chatSmallWindowContentRight}`}>
+              <div>
+                <div><Avatar name={item.userName} /></div>
+                <span>{item.userName}</span>
+              </div>
+              <div>{item.message}</div>
+            </div>
+          )}
+        </div>
+        <div className='drag'>
+          <Input
+            placeholder="请输入内容"
+            style={{ flexGrow: 1 }}
+            value={inputValue}
+            onChange={(e) => {
+              setInputValue(e.target.value)
+            }}
+            onPressEnter={() => {
+              if (inputValue) {
+                channel.postMessage({
+                  type: 'chatSmallWindowSendChannelMsg',
+                  chatSmallWindowSendChannelMsg: {
+                    msg: inputValue,
+                  }
+                });
+                setInputValue('')
+              }
+            }}
+            suffix={
+              <span
+                style={{ color: '#47D3D0', cursor: 'pointer' }}
+                onClick={() => {
+                  if (inputValue) {
+                    channel.postMessage({
+                      type: 'chatSmallWindowSendChannelMsg',
+                      chatSmallWindowSendChannelMsg: {
+                        msg: inputValue,
+                      }
+                    });
+                    setInputValue('')
+                  }
+                }}
+              >发送
+              </span>
+            }
+          />
+        </div>
+      </div >
+    </>
+  )
+}
+
+export default ChatSmallWindow

src/page/Meeting/index.tsx

@@ -195,6 +195,7 @@ const Meeting: React.FC = () => {
         window.electron.setViewStatus('maximize')
       }
     })
+    setKeyOpenChildWindow('shareScreenWindow', false)
     setMeetingMode('StandardMode');
     agoraInit()
     storage.setItem('noViewChatList', 0)
@@ -210,7 +211,8 @@ const Meeting: React.FC = () => {
         userListWindowDeleteRoomManager,
         userListWindowPostRoomManager,
         userListWindowGetRoomKickout,
-        shareScreenWindowEquipmentManagement
+        shareScreenWindowEquipmentManagement,
+        chatSmallWindowSendChannelMsg
       } = event.data;
       switch (type) {
         case 'shareScreenWindowClose':
@@ -273,6 +275,9 @@ const Meeting: React.FC = () => {
           equipmentManagement(shareScreenWindowEquipmentManagement.uid, shareScreenWindowEquipmentManagement.userName)
           window.electron.mainWindowCenter()
           break;
+        case 'chatSmallWindowSendChannelMsg':
+          sendMsg(chatSmallWindowSendChannelMsg.msg)
+          break;
       }
     }
     time = setInterval(() => {
@@ -342,6 +347,15 @@ const Meeting: React.FC = () => {
     }
   }, [currentEffective]);
 
+  useEffect(() => {
+    if (chatList.length) {
+      channel.postMessage({
+        type: 'chatList',
+        chatList,
+      });
+    }
+  }, [chatList]);
+
   useEffect(() => {
     let currentVideoUserItem = roomUserList.find((item: any) => item.uid === currentVideoId || item.screenShareId === currentVideoId)
     if (currentVideoUserItem) {
@@ -1355,6 +1369,12 @@ const Meeting: React.FC = () => {
           height: 70,
           key: 'shareScreenWindow',
         })
+        window.electron.createChildWindow({
+          url: location.origin + `/#/chatSmallWindow`,
+          width: 200,
+          height: 300,
+          key: 'chatSmallWindow',
+        })
         setKeyOpenChildWindow('shareScreenWindow', true)
       }
     } else {
@@ -1458,8 +1478,8 @@ const Meeting: React.FC = () => {
         msg: msg,
       })
       setChatList((newChatList: any) => [...newChatList, {
-        uid: user.uid,
+        uid: userInfo.uid,
-        userName: user.userName,
+        userName: userInfo.userName,
         message: msg,
         timestamp: +new Date()
       }])