新窗口

main.js

@@ -12,7 +12,7 @@ const {
 } = require('electron');
 const path = require('node:path')
 const fs = require('fs');
-const {autoUpdater, CancellationToken} = require('electron-updater');
+const { autoUpdater, CancellationToken } = require('electron-updater');
 const cancellationToken = new CancellationToken()
 app.allowRendererProcessReuse = false;
 let mainWindow = null;
@@ -34,7 +34,7 @@ class AppWindow extends BrowserWindow {
             backgroundColor: '#00000000',
             transparent: true,
         };
-        const finalConfig = {...basicConfig, ...config};
+        const finalConfig = { ...basicConfig, ...config };
         super(finalConfig);
         const env = process.argv.find((arg) => arg.startsWith('--env='))?.split('=')[1];
         if (env === 'development') {
@@ -247,7 +247,7 @@ app.on('ready', () => {
         mainWindow.setMinimumSize(config.width, config.height);
         // 设置最大尺寸
         const primaryDisplay = screen.getPrimaryDisplay()
-        const {width, height} = primaryDisplay.workAreaSize
+        const { width, height } = primaryDisplay.workAreaSize
         if (config.key === 'login') {
             mainWindow.setMaximumSize(config.width, config.height);
         } else {
@@ -256,11 +256,37 @@ app.on('ready', () => {
         // 设置窗口尺寸
         mainWindow.setSize(config.width, config.height)
         // 设置窗口位置使其居中于当前屏幕
-        const display = screen.getDisplayMatching({...mainWindow.getBounds()});
+        const display = screen.getDisplayMatching({ ...mainWindow.getBounds() });
         const x = Math.round((display.workArea.width - mainWindow.getSize()[0]) / 2);
         const y = Math.round((display.workArea.height - mainWindow.getSize()[1]) / 2);
         mainWindow.setPosition(x, y);
     });
+    // 打开新窗口
+    ipcMain.handle('oepnWindow', (event, data) => {
+        const newWindow = new BrowserWindow({
+            width: 1200,
+            height: 800,
+            maxWidth: 1200,
+            minHeight: 800,
+            webPreferences: {
+                contextIsolation: false,
+                nodeIntegration: true,
+                enableRemoteModule: true,
+                nodeIntegrationInWorker: true,
+                allowMediaDevices: true,
+                preload: path.join(__dirname, 'preload.js')
+            },
+            frame: false,
+            backgroundColor: '#00000000',
+            transparent: true,
+        });
+        newWindow.loadURL(data.url);
+        newWindow.webContents.on('before-input-event', (event, input) => {
+            if (input.key === 'F12') {
+                newWindow.webContents.openDevTools()
+            }
+        });
+    });
 });
 
 // 检测更新，在你想要检查更新的时候执行，renderer事件触发后的操作自行编写
@@ -283,7 +309,7 @@ function updateHandle() {
         sendUpdateMessage(message.checking)
     })
     autoUpdater.on('update-available', function (info) {
-        let messageStr = JSON.stringify({type: '0'})
+        let messageStr = JSON.stringify({ type: '0' })
         setTimeout(() => {
             sendUpdateMessage(messageStr)
         }, 5000)

preload.js

@@ -57,4 +57,8 @@ window.electron = {
     downFile: (callback) => {
         ipcRenderer.on('downFile', callback)
     },
+    // 打开新窗口
+    oepnWindow: (data) => {
+        ipcRenderer.invoke('oepnWindow', data)
+    },
 }

src/App.tsx

@@ -17,6 +17,7 @@ import { PostLogin } from "@/api/Login";
 import agora from "@/utils/package/agora";
 import QuitTips from "@/components/QuitTips";
 import { GetLeave } from "@/api/Meeting";
+import UserVideo from "./page/UserVideo";
 const fs = require('fs').promises;
 const { exec } = require('child_process');
 const App: React.FC = () => {
@@ -31,6 +32,8 @@ const App: React.FC = () => {
     });
     const [spinning, setSpinning] = useState(false);
     const [isState, setIsState] = useState(true);
+    const urlWindow = ['#/userVideo']
+    if (urlWindow.indexOf(location.hash) === -1) {
         useEffect(() => {
             let userInfo = JSON.parse(storage.getItem('user') as string)
             let loginInfo = JSON.parse(storage.getItem('login') as string)
@@ -54,16 +57,6 @@ const App: React.FC = () => {
             } else {
                 toSrc('/login')
             }
-        if (import.meta.env.VITE_ENV !== 'development') {
-            document.addEventListener('keydown', (event) => {
-                if ((event.ctrlKey || event.metaKey) && event.key === 'r') {
-                    event.preventDefault();
-                }
-                if (event.key === 'F11') {
-                    event.preventDefault();
-                }
-            });
-        }
             window.addEventListener('resize', handleResize);
             window.addEventListener('online', handleNetworkChange);
             window.addEventListener('offline', handleNetworkChange);
@@ -158,6 +151,19 @@ const App: React.FC = () => {
                 onStop()
             }
         }, [navigate])
+    }
+    useEffect(() => {
+        if (import.meta.env.VITE_ENV !== 'development') {
+            document.addEventListener('keydown', (event) => {
+                if ((event.ctrlKey || event.metaKey) && event.key === 'r') {
+                    event.preventDefault();
+                }
+                if (event.key === 'F11') {
+                    event.preventDefault();
+                }
+            });
+        }
+    }, [])
     const handleResize = (): void => {
         setWindowSize({
             width: window.innerWidth,
@@ -260,6 +266,7 @@ const App: React.FC = () => {
                 </Route>
                 <Route path='/login' element={<Login />} />
                 <Route path='/meeting' element={<Meeting />} />
+                <Route path='/userVideo' element={<UserVideo />} />
                 <Route path='*' element={<NotFound />} />
             </Routes>
             <Spin spinning={spinning} fullscreen />

src/page/Home/Index/index.tsx

@@ -125,6 +125,9 @@ const Index: React.FC = () => {
                       <Button type="primary"
                         iconPosition={'end'}
                         onClick={() => {
+                          // window.electron.oepnWindow({
+                          //   url: location.origin + '/#/userVideo'
+                          // })
                           joinSettingRef.current.changeModal(item.roomNum)
                         }}
                         icon={<img src={ImageUrl.icon9} alt="" />}

src/page/NotFound/index.tsx

@@ -4,7 +4,7 @@ import { useEffect } from "react";
 const NotFound: React.FC = () => {
   useEffect(() => {
 
-  });
+  }, []);
   return (
     <>
       <div className="notfound"></div>

src/page/UserVideo/index.module.scss

@@ -0,0 +1,5 @@
+.userVideo {
+  width: 100%;
+  height: 100%;
+  background-color: #1F2022;
+}

src/page/UserVideo/index.tsx

@@ -0,0 +1,18 @@
+
+import styles from '@/page/UserVideo/index.module.scss'
+import { useEffect } from "react";
+
+const UserVideo: React.FC = () => {
+  useEffect(() => {
+
+  }, []);
+  return (
+    <>
+      <div className={styles.userVideo}>
+
+      </div>
+    </>
+  )
+}
+
+export default UserVideo

src/render.d.ts

@@ -14,6 +14,7 @@ export interface IElectronAPI {
     quit: () => any;
     downFile: (callBack: Function) => void;
     quitAndInstall: (callBack: Function) => void;
+    oepnWindow: (data: any) => any;
 }
 
 declare global {