main.js

@@ -320,7 +320,7 @@ app.on('ready', () => {
             childWindow[config.key] = child
             child.once('ready-to-show', () => {
                 childWindow[config.key].show()
-                childWindow[config.key].setAlwaysOnTop(true)
+                childWindow[config.key].setAlwaysOnTop(true, 'pop-up-menu')
                 windowOperation(config)
             })
             child.webContents.on('before-input-event', (event, input) => {
@@ -346,6 +346,17 @@ app.on('ready', () => {
                 childWindow[key] = ""
             }
         });
+        // 设置子窗口
+        ipcMain.handle('setChildWindow', (event, config) => {
+            const child = childWindow[config.key];
+            const display = screen.getDisplayMatching({ ...child.getBounds() });
+            const { width, height } = display.size
+            let x, y;
+            if (config.key === 'shareScreenWindow') {
+                x = Math.round((width - config.width) / 2);
+                childWindow[config.key].setBounds({ width: config.width })
+            }
+        });
         // 隐藏主窗口
         ipcMain.handle('mainWindowHide', () => {
             mainWindowHide()

preload.js

@@ -81,6 +81,10 @@ window.electron = {
     closeChildWindow: (key) => {
         ipcRenderer.invoke('closeChildWindow', key)
     },
+    // 设置子窗口
+    setChildWindow: (config) => {
+        ipcRenderer.invoke('setChildWindow', config)
+    },
     // 隐藏主窗口
     mainWindowHide: () => {
         ipcRenderer.invoke('mainWindowHide')

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

@@ -20,8 +20,7 @@
       align-items: flex-start;
 
       >div {
-        background-color: #5574f25d;
+        background-color: #1e232baf;
-        color: black;
         padding: 4px;
         box-sizing: border-box;
         border-radius: 0 15px 15px 15px;
@@ -31,6 +30,11 @@
 
         >span:nth-child(1) {
           white-space: nowrap;
+          color: #ff970f;
+        }
+
+        >span:nth-child(2) {
+          color: #fff;
         }
       }
     }

src/page/Meeting/ChatSmallWindow/index.tsx

@@ -30,10 +30,9 @@ const ChatSmallWindow: React.FC = () => {
       <div className={styles.chatSmallWindow}>
         <div id='chatSmallWindowView'>
           {chatLists.map((item: any) =>
-            <div className={`${item.uid !== userInfo.uid ? styles.chatSmallWindowContentLeft : styles.chatSmallWindowContentRight}`}>
+            <div className={`${styles.chatSmallWindowContentLeft}`}>
               <div>
-                <span>{item.userName}</span>
+                <span>{item.userName}：</span>
-                <span>：</span>
                 <span>{item.message}</span>
               </div>
             </div>

src/page/Meeting/CurrentSpeakUserWindow/index.tsx

@@ -22,7 +22,7 @@ const CurrentSpeakUserWindow: React.FC = () => {
   return (
     <>
       <div className={styles.currentSpeakUserWindow}>
-        <div title={inputValue ? `正在说话:${inputValue}` : '无人说话'} className='drag'>
+        <div title={inputValue ? `正在说话:${inputValue}` : '无人说话'}>
           {inputValue ? `正在说话:${inputValue}` : '无人说话'}
         </div>
       </div >

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

@@ -28,14 +28,9 @@
     flex-grow: 1;
     align-items: center;
     justify-content: space-between;
-    opacity: 0;
     background-color: #07090B;
     display: flex;
 
-    &:hover {
-      opacity: 1 !important;
-    }
-
     .shareScreenWindowContentList {
       display: flex;
       flex-grow: 1;
@@ -74,4 +69,17 @@
       }
     }
   }
+
+  .shareScreenWindowExpand {
+    display: flex;
+    align-items: center;
+    margin: 0 auto;
+    background-color: lighten(#07090B, 4%);
+    padding: 0 6px;
+    cursor: pointer;
+
+    >span {
+      font-size: 12px;
+    }
+  }
 }

src/page/Meeting/ShareScreenWindow/index.tsx

@@ -4,6 +4,7 @@ import styles from '@/page/Meeting/ShareScreenWindow/index.module.scss'
 import { storage } from '@/utils';
 import ImageUrl from '@/utils/package/imageUrl';
 import { getKeyOpenChildWindow, setKeyOpenChildWindow } from '@/utils/package/public';
+import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
 import { Button } from 'antd';
 import { useEffect, useState } from "react";
 const ShareScreenWindow: React.FC = () => {
@@ -23,7 +24,7 @@ const ShareScreenWindow: React.FC = () => {
       select: false,
     },
     {
-      title: '成员列表',
+      title: '成员',
       icon: ImageUrl.icon30,
       iconSelect: ImageUrl.icon30Select,
       active: false,
@@ -46,7 +47,7 @@ const ShareScreenWindow: React.FC = () => {
     },
   ])
   const [time, setTime] = useState('')
-  const [isHover, setIsHover] = useState(true)
+  const [isExpand, setIsExpand] = useState(false)
   const [roomUserLists, setRoomUserLists] = useState<any>([])
   const channel = new BroadcastChannel('meeting_channel');
   const userInfo = JSON.parse(storage.getItem('user') as string)
@@ -109,19 +110,16 @@ const ShareScreenWindow: React.FC = () => {
   }
   return (
     <>
-      <div className={styles.shareScreenWindow}>
+      <div className={styles.shareScreenWindow} style={{ width: isExpand ? '100%' : '100%' }}>
         <div className={styles.shareScreenWindowTitle}>
           <span>{time} 共享中</span>
-          {isHover ? <span className='drag' onClick={() => {
+          {isExpand ? <span className='drag' onClick={() => {
             channel.postMessage({
               type: 'shareScreenWindowClose'
             });
-          }}>结束共享</span> : null}
+          }}>结束共享</span> : <span style={{ visibility: 'hidden' }}>结束共享</span>}
         </div>
-        <div className={`${styles.shareScreenWindowContent} drag`}
+        {isExpand ? null : <div className={`${styles.shareScreenWindowContent} drag`}>
-          onMouseEnter={() => setIsHover(false)}
-          onMouseLeave={() => setIsHover(true)}
-        >
           <div className={styles.shareScreenWindowContentList}>
             {footerLists.map((item: any, index: number) => {
               return (
@@ -174,18 +172,29 @@ const ShareScreenWindow: React.FC = () => {
                     </div> : ''}
                     {item.select ? <img src={item.iconSelect} alt="" /> : <img src={item.active ? item.iconActive : item.icon} alt="" />}
                   </div>
-                  <span>{item.title}{item.title === '成员列表' ? `(${roomUserLists.filter((item: any) => item.isRoom).length})` : ''}</span>
+                  <span>{item.title}{item.title === '成员' ? `(${roomUserLists.filter((item: any) => item.isRoom).length})` : ''}</span>
                 </div>
               )
             })}
           </div>
-          <Button type="primary" style={{ backgroundColor: '#FF5219', marginRight: '14px' }} onClick={() => {
+          <Button type="primary" style={{ backgroundColor: '#FF5219', marginRight: '14px' }} size={'small'} onClick={() => {
             channel.postMessage({
               type: 'shareScreenWindowClose'
             });
           }}>
             结束共享
           </Button>
+        </div>}
+        <div className={`${styles.shareScreenWindowExpand} drag`} onClick={() => {
+          setIsExpand(!isExpand)
+          window.electron.setChildWindow({
+            width: isExpand ? 440 : 440 / 2,
+            height: 80,
+            key: 'shareScreenWindow',
+          })
+        }}>
+          <span>{isExpand ? '展开' : '收起'}</span>
+          {isExpand ? <CaretDownOutlined /> : <CaretUpOutlined />}
         </div>
       </div >
     </>

src/page/Meeting/index.module.scss

@@ -937,6 +937,7 @@
         width: 144px;
         height: 94px;
         box-sizing: border-box;
+        border: 5px solid transparent;
 
         >img {
           width: 100%;
@@ -953,14 +954,16 @@
 
       &:hover {
         >div {
-          border: 1px solid #EBEBEB;
+          border: 5px solid yellow;
+          box-sizing: border-box;
         }
       }
     }
 
     .active {
       >div {
-        border: 1px solid #EBEBEB;
+        border: 5px solid yellow;
+        box-sizing: border-box;
       }
     }
   }

src/page/Meeting/index.tsx

@@ -1512,14 +1512,14 @@ const Meeting: React.FC = () => {
       if (!isOpen) {
         window.electron.createChildWindow({
           url: location.origin + `/#/shareScreenWindow`,
-          width: 540,
+          width: 400,
-          height: 70,
+          height: 80,
           key: 'shareScreenWindow',
         })
         window.electron.createChildWindow({
           url: location.origin + `/#/chatSmallWindow`,
           width: 200,
-          height: 300,
+          height: 150,
           key: 'chatSmallWindow',
         })
         window.electron.createChildWindow({

src/render.d.ts

@@ -19,6 +19,7 @@ export interface IElectronAPI {
     setRegistry: (uuid: string) => any;
     getRegistry: () => any;
     createChildWindow: (config: any) => void;
+    setChildWindow: (config: any) => void;
     closeChildWindow: (key: string) => void;
     mainWindowCenter: () => any;
     mainWindowHide: () => any;