main.js

@@ -357,8 +357,13 @@ app.on('ready', () => {
         });
         // 设置子窗口
         ipcMain.handle('setChildWindow', (event, config) => {
-            if (config.key === 'shareScreenWindow') {
+            switch (config.key) {
+                case 'shareScreenWindow':
                     childWindow[config.key].setBounds({ width: config.width })
+                    break;
+                case 'chatSmallWindow':
+                    childWindow[config.key].setBounds({ height: config.height })
+                    break;
             }
         });
         // 隐藏主窗口

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

@@ -4,14 +4,16 @@
   display: flex;
   flex-direction: column;
   height: 100%;
+  position: relative;
 
   >div:nth-child(1) {
     flex-grow: 1;
     overflow-y: hidden;
     max-height: 80%;
-    padding: 4px;
+    padding: 0 4px;
     box-sizing: border-box;
     display: flex;
+    background-color: rgba(40, 40, 44, .4);
     flex-direction: column-reverse;
 
     .chatSmallWindowContentLeft {
@@ -24,7 +26,7 @@
         padding: 4px;
         box-sizing: border-box;
         border-radius: 0 15px 15px 15px;
-        margin: 0 0 10px 0;
+        margin: 0 0 4px 0;
         font-size: 12px;
         display: flex;
 
@@ -50,7 +52,7 @@
         padding: 4px;
         box-sizing: border-box;
         border-radius: 15px 0 15px 15px;
-        margin: 0 0 10px 0;
+        margin: 0 0 4px 0;
         font-size: 14px;
         display: flex;
         flex-direction: row-reverse;
@@ -70,4 +72,25 @@
       opacity: 1;
     }
   }
+
+  >div:nth-child(3) {
+    position: absolute;
+    left: 50%;
+    top: 0px;
+    transform: translate(-50%, 0);
+    display: flex;
+    align-items: center;
+    margin: 0 auto;
+    background-color: rgba(40, 40, 44, .2);
+    padding: 0 6px;
+    cursor: pointer;
+
+    &:hover {
+      background-color: rgba(40, 40, 44, 1);
+    }
+
+    >span {
+      font-size: 12px;
+    }
+  }
 }

src/page/Meeting/ChatSmallWindow/index.tsx

@@ -1,9 +1,11 @@
 import styles from '@/page/Meeting/ChatSmallWindow/index.module.scss'
+import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
 import { Input } from 'antd';
 import { useEffect, useState } from "react";
 const ChatSmallWindow: React.FC = () => {
   const [inputValue, setInputValue] = useState<string>('')
   const [chatLists, setChatLists] = useState<any>([])
+  const [isExpand, setIsExpand] = useState(false)
   const channel = new BroadcastChannel('meeting_channel');
   useEffect(() => {
     let time: NodeJS.Timeout;
@@ -83,6 +85,16 @@ const ChatSmallWindow: React.FC = () => {
             }
           />
         </div>
+        <div className={`drag`} onClick={() => {
+          setIsExpand(!isExpand)
+          window.electron.setChildWindow({
+            height: isExpand ? 150 : 150 / 2,
+            key: 'chatSmallWindow',
+          })
+        }}>
+          <span>{isExpand ? '展开' : '收起'}</span>
+          {isExpand ? <CaretDownOutlined /> : <CaretUpOutlined />}
+        </div>
       </div >
     </>
   )